Enforcing a minimum time on a page

qsa...@gmail.com

unread,

Apr 1, 2021, 1:07:57 PM4/1/21

to oTree help & discussion

Hi all,

I am trying to implement a page on which a subject has to spend a minimum of, say, 5 minutes before he/she can choose to move to the next page. If you have any idea, please let me know. Thanks!

Quazi.

Ramazan Kizilyildirim

unread,

Apr 1, 2021, 1:26:38 PM4/1/21

to oTree help & discussion

Here is a sample code to do that. The page will be shown for 900 seconds but subjects can skip page only after 300 seconds. We prevent the Go next page button to submit the form at the begging and then unbind it.

HTML

JAVASCRIPT

$('form').submit(function(e) {
e.preventDefault();
// or return false;
});

var duration=900;
var dt1= new Date()

// Update the count down every 1 second
var x = setInterval(function() {

// Get today's date and time
var dt2 = new Date();

timer=diff_seconds(dt2,dt1)

if(timer>300){

$('form').submit( function(ev){
$(this).unbind('submit').submit()
}); }

// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = "Remaining Time= "+(duration-timer);
// If the count down is finished, write some text
if (timer > duration-1) {
clearInterval(x);
document.getElementById("myCheck").click();
}
}, 1000);

function diff_seconds(dt2, dt1)
{
var diff =(dt2.getTime() - dt1.getTime()) / 1000;
return Math.abs(Math.round(diff));

Quazi Shahriar

unread,

Apr 1, 2021, 1:38:50 PM4/1/21

to Ramazan Kizilyildirim, oTree help & discussion

Thanks! I have never dealt with java before. Do I just copy the codes you gave and paste them on the html template of the page?

Quazi.

--
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/bd953e1c-5292-450b-a84c-4567d3dd1ac9n%40googlegroups.com.

rkzl...@gmail.com

unread,

Apr 1, 2021, 3:13:47 PM4/1/21

to Quazi Shahriar, oTree help & discussion

Here is a sample template page for your reference. You can copy this and modify it accordingly

{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Welcome
{% endblock %}

{% block content %}

<html>

<script>

}

    </script>

<style>
          .page-header {
        border-bottom: none;
        display : none;
    }

</style>

<body style="background-color:antiquewhite;">
<br><br>
       <p style="position: relative; left: 40%; top: 5%; font-size:32px;">Welcome!</p>
       <br><br>
       <p style="font-size: 20px;text-align:justify">You are about to participate in a decision making experiment. Please read the instructions carefully before starting the experiment.
           Please do not communicate with other participants during the experiment. Experimenters will answer your questions before and during the experiment.
           Please raise your hand whenever you would like to ask a question, or you need assistance of any kind. The experiment will last 90 minutes.</p>
       <br>

       <button id="myCheck" style="height:40px;color:white;background-color:dodgerblue;position: relative; padding-left: 15px;padding-right: 15px;left: 92%;font-size:20px"> Start</button>
     <div id="demo"></div>

<button > Go next page</button>


  </body>

</html>

{% endblock %}

Quazi Shahriar

unread,

Apr 1, 2021, 4:33:02 PM4/1/21

to rkzl...@gmail.com, oTree help & discussion

Thanks so much! I see it now.

Quazi.

Reply all

Reply to author

Forward