Reappearance of the "next_button" after a time period

[rumen k]

Dear All,

I would like to make participants stay on a particular page for a certain period of time (for example 10 minutes). After that, I would like to have the next_button reappear, so that participants have the option to continue to the next page (but they could also stay on the page longer if that is their wish). I can partially do this by using timeout_seconds = 600 in the respective page in pages.py. However, after the time expires, the next_button does not show up and I get redirected to the next page right away. According to the tutorial, I should use a setTimeout function in the template, I tried all possible suggestions offered online but nothing works. Could you please help me? Thank you very much in advance! 

Virus-free. www.avast.com

[Chris Crabbe]

Hi Rumen -

Yes, your instinct is right, for this you should use setTimeout in javascript.  

The way I would try to learn to do that is first try a simple example from online and see if I can get that working in my oTree template.  For example the setTimeout sample here: https://www.w3schools.com/jsref/met_win_settimeout.asp

I'd get that working on my page (so that on my page, after 3 seconds, the alert pops up).  I'd probably do that by putting that setTimeout line inside window.onload inside a <script> tag inside a {% scripts %} block in my template:

{% block scripts %}

  <script>

    window.onload = function(){

      setTimeout(...);

    }

  </script>

{% endblock %}

Once I get that alert working, then I would set about changing the function to do what I want - so instead of calling alert() I'd have it change the next button's css to have visibility:visible again.

Then I would change the 3000ms timeout in the example to the 600,000 that is needed for 10 mins.

Good luck!

Thanks,

--Chris

--
You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/CAFJuEo_G2S9ARmf1ZYMUDoGrG%3DcMhvb3gLHsoY9UqQXRJER83A%40mail.gmail.com.

[rumen k]

Thanks a lot for the response! 

Your explanation is very clear, but for some reason I cannot work it out. On my last attempt, I wrote the following in the template: 

<script>
    window.onload = function() {
        setTimeout(button.style.visibility = "visible"); }, 3000);
    }
</script>

<button class="o-tree-btn-next btn btn-primary" id="Next" style="visibility:hidden;">Next</button>

Is that getting close to the correct code? 

[Chris Crabbe]

Hi Rumen -

If it does what you want, then yes it's correct.  If it doesn't, what does it do instead?  What error messages are you getting?

Thanks,

--Chris

[rumen k]

Hi, Chris. 

I do not get any error messages. The code runs properly, but when it gets to this page, the next button never shows up.

Then, I tried with timeout_seconds in pages.py, but then I get redirected to the next page after 3 sec. 

What am I missing? 

Virus-free. www.avast.com

[Chris @ oTree]

You should use console.log and your browser’s javascript console to see if there are any errors and trace your code’s execution line by line. 

Sent from my phone

On May 14, 2021, at 3:02 PM, rumen k <rume...@gmail.com> wrote:



To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/CAFJuEo_iHerjuTAjawDN_KrBYs3A4JmQ0%3DcHJehTXPr%2BSBtjMg%40mail.gmail.com.

[rumen k]

Hi, it finally works! Here is the working code: 

<script>
    window.onload = function () {
        setTimeout(function(){document.querySelector("#Next").style.visibility = "visible";}, 3000);

    }
</script>

<button class="o-tree-btn-next btn btn-primary" id="Next" style="visibility:hidden;">Next</button>

Thanks for the help in the process!