timer position

[Alice CHING]

Dear all,

I understand that if a time_out is set on a page, the oTree will automatically create a timer which is placed right under the title.

I was wondering if there's a way to place the timer elsewhere, e.g. the end of the page right before the "next" button.

Thanks in advance for your input!

Sincerely,

Ningning

[Chris @ oTree]

See the "css" app in otree-snippets for an example of repositioning the timer with CSS: https://www.otreehub.com/projects/otree-snippets/

You can also use CSS to hide that element completely, and make a different timer element that responds to timer events. See here for more info: https://otree.readthedocs.io/en/latest/timeouts.html#customizing-the-timer. also you can read the jQuery.countdown docs.

[Alice CHING]

Dear Chris,

Thanks for the prompt and insightful reply as always!

I've studied the code snippet you shared with me and it really deepens my understanding about timer position in otree.

Since we don't write the HTML element for timer in the template and otree automatically creates the timer element when producing HTML from template, it seems that the timer is always right below the page title (i.e., title block) and before everything else in the content block.

In our UI design, we hope to place the timer right before the "next" button, a.k.a. after everything in the content block except the button. Given the aforementioned reason, it's difficult to control timer's position relative to other customized contents.

Using JavaScript might be the option yet I was wondering if there's any other more convenient way to achieve that.

BTW, I thought I sent the same private message to you yesterday, yet it seems that I failed for some unknown reason. I send again here and hopefully it doesn't bother or trouble you so much :)

Thanks for the unfailing support,

Ningning

[Chris @ oTree]

You need to use the second solution I described. Create a custom element that gets updated when the 'update.countdown' event fires.

[Chris @ oTree]

I just added a timer_custom app in otree-snippets: https://www.otreehub.com/projects/otree-snippets/

[Alice CHING]

So sorry for my late reply and thanks soooooo much for the elaboration and code demonstration. It perfectly solves my problem! Your support means a lot to beginners like me :)

Sincerely Yours,

Ningning

[Keren G]

Hi!

I want to hide the timer but it doesn't apply and I can't find the problem.

This is the relevant part of my code:

in init.py:

class Results(Page):

timeout_seconds = 2

in html:

{{ block title }}Your Choice{{ endblock }}

{{ block content }}

<style>

.otree-timer {

display: none;

}

</style>

{{ formfields }}

{{ next_button }}

{{ include C.REMEMBER_TEMPLATE }}

{{ endblock }}

Thanks in advance,

Keren

ב-יום שני, 11 באוקטובר 2021 בשעה 10:45:13 UTC+3, cheng...@gmail.com כתב/ה:

[Chris @ oTree]

What happens when you change your timeout_seconds to a higher number like 20?

Can you "view source" in your browser and paste the full HTML code of that page here?

[Keren G]

I just found out that i put the code in the wrong html file. Now I fixed it, thanks and sorry for bothering

ב-יום רביעי, 23 במרץ 2022 בשעה 11:36:26 UTC+2, Chris @ oTree כתב/ה: