Dear o-tree experts, 

I am currently trying to do a Real-Effort-Task experiment with O-Tree. 
The test persons have to complete several similar tasks within a given time (e.g. 5 minutes). 
Basically, the same page is always shown, but the values change randomly. 
This can easily be programmed in JavaScript. But what I don't understand - how do I get the variables from JavaScript into the model variables (whether form, player, etc.)?
Or, is there perhaps a better way with O-Tree to have the same page repeatedly appear with random values and to go to the next page after EXACTLY 5 minutes (i.e. not after a request that is made after 5 minutes or 5 minutes and 10 seconds, but exactly after 5 minutes). 

Thank you very much! 

Mark

Hi, Mark

For your first problem, you should have a closer look at LivePages(https://otree.readthedocs.io/en/latest/live.html) especially in combination with ExtraModel (https://otree.readthedocs.io/en/latest/misc/advanced.html#extramodel). There are plenty of examples in the documentation itself you can take as guidance.

For the timer problem you can have a look at Timeout(https://otree.readthedocs.io/en/latest/timeouts.html#basics). This for example allows you to submit the page and move on to the next after a fixed amount of time.

Combine these two and I think you can implement your page quite nicely.

~Simon

Hi Simon,

thank you very much, that helps enormously!! 
The only problem I have is that the page unfortunately shows “Time left to complete this page: xxx”. I would like to show the time left in a different place in the Javascript. Is it possible to suppress this text?

Thank you!

Mark

Hi Mark,

Have a look at the ways to customize the timer (https://otree.readthedocs.io/en/latest/timeouts.html#customizing-the-timer). There you can find out on how to completely suppress/hide it.

In case you want to move the timer, the HTML element of the timer looks like this (this is already displayed on your page when you  have a timer active. You do not need to copy this HTML anywhere in your code):

<div class="otree-timer alert alert-warning">
    <p>Time left to complete this page:
        <span style="font-weight: bold">
            <span class="otree-timer__time-left">59:54</span>
        </span>
    </p>
</div>

You should be able to access this element probably by its class in your Javascript and then move it somewhere else on your Page.

Hope this helps.

~Simon

Hi Simon, 

thanks a lot! 

Mark