Hello there,

Hope you are well. In one of my treatments, I have added a clickable image that takes the participants to a pdf file. One of the things my co-author and I are interested in is noticing if participants click the image, which is optional, and if they do, how much time do they spend in reading the pdf document? Is there any way this can be achieved in otree?

What do you mean by "noticing"? If you wanna otree document whether the participant has clicked the image, use JavaScript and LiveSend function to achieve that. 

For recording the time, I believe there already are good examples in former answers and otree doc. Just set the time clock start at clicking the button "see pdf", and insert the pdf in the screen and listen to the final click of the button "next step".

Hope that helps!

Hi Fanist,
 I am so sorry but would you mind explaining this a bit. As far as the timer is concerned, both the image and the pdf access are coded in the html pages.

Hi Fanist,

I am so sorry that I forgot to explain what I meant was noticing. Basically, we want to see if a participant clicks on the image to read the pdf and how much time do they spend on reading the pdf.

Hi, Anwesha,
I have written a demo for you. Check at https://github.com/Fanisting/otree-readtime-cal

Hi Fanist,

Thank you so much for your help.

Hi Fanist,

Apologies for another question on this issue. Thanks once again for the codes. To suit the purpose of my experiment, I had to adjust things a little bit. I have mentioned the codes in mt html page below. The problem is that, since participants in my experiment will be submitting one answer, they are unable to click on the next page button and after clicking on one of the options, it is straight away taking them to the next page. I tried my best but I am unable to sort this one out. I am not very keen on participants typing the option manually, hence the submit option.

{{ block content }}

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-c3ow">Asset A<button onclick="showPdf()" type="button">
        <img src="{{ static 'esg_wealth/flag2.png' }}"/></button>
<div id="pdf-embed" style="display: none">
    <embed src="{{static pdf_path}}" type="application/pdf" width="100%" height="600px" />
</div></th>
    <th class="tg-c3ow">Asset B</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-c3ow">10%</td>
    <td class="tg-c3ow">15%</td>
  </tr>
</tbody>
</table>


<script>
    let buttonClicked = false;
    let buttonClickTime;

    function showPdf() {
        if (!buttonClicked) {

        buttonClicked = true;
        buttonClickTime = Date.now();
        document.getElementById("pdf-embed").style.display = "block";
        console.log("Button clicked at " + new Date(buttonClickTime).toLocaleTimeString());
        }
    }

    function nextPage() {
        if (buttonClicked) {
            const nextPageTime = Date.now();
            const timeDiff = nextPageTime - buttonClickTime;
            console.log("Next page clicked at " + new Date(nextPageTime).toLocaleTimeString());
            console.log("Time between clicks: " + timeDiff + "ms");
            document.querySelector(".otree-btn-next").click();
            liveSend(timeDiff);
        } else {
            liveSend(-99);
        }
    }
</script>
     <button type="submit" name="decision" value="True">Asset A</button>
     <button type="submit" name="decision" value="False">Asset B</button> <br />
     <button onclick="nextPage()" class="otree-btn-next btn btn-primary">Next Page</button>
     {{ formfield_errors 'decision' }}

{{ endblock }}