This is an old revision of the document!
This chapter describes how to limit the dwell time on a page – or how to define exactly when the Next button should be hidden in parallel to this. After the given amount of time has expired, the participant will be forwarded automatically onto the next page.
The solution is based on JavaScript. In the (rare) event that the participant has specifically disabled JavaScript, the timer will not start. In this instance, the amount of time spent working through the page can be checked post-hoc with the dwell time (Additional Variables in the Data Set: Dwell Times).
Note: The participant cannot restart the timer by reloading the questionnaire page (“Reload”, “Refresh”, F5 button). If you want to test this, do not start the questionnaire from the page with the timer, otherwise a new interview will begin every time the page is reloaded . Simply start the questionnaire on the page before – or on the first page as normal.
Tip: If your questionnaire offers a “Back” button (Compose Questionnaire → Settings), it could make sense to hide the button on the page after the timer (see PHP function option()
).
Start by generating the time the questionnaire page was first visited with the help of the PHP function time()
. Filtering with isset()
ensures that this time is only saved the first time the page is called up.
if (!isset($time0)) { $time0 = time(); registerVariable('time0'); // store variable $time0 after the end of the PHP code as well } // Check if time has already expired // (e.g. because the participant reloaded the page) $timer = 60; // participant has 1 minute (60 seconds) to work through the page if (time() >= $time0 + $timer) { goToPage('next'); } // JavaScript code has to be told the time remaining $remain = $time0 + $timer - time(); replace('%remain%', $remain);
Note: If you want to use multiple, independent timers in the questionnaire, the variable $time0
in the PHP code has to be called something different each time. The name of the variable also has to be changed in the registerVariable()
command – therefore, a total of 5 times.
If the participant is able to restart the timer by reloading the page or using the “Back” button, you can reduce the PHP code to one line (not recommended). However, this variant will not work if you want to let the timer to run over several pages.
replace('%remain%', 60); // participant has 1 minute (60 seconds) to work through the page
Create a new text element Iin Text Elements and Labels for the actual timer with the following content. Drag this text element directly below the PHP code on the questionnaire page.
<script type="text/javascript"> <!-- // Function to forward function next() { // Display message (optional) alert("Time's up."); // Forward participant onto the next page SoSciTools.submitPage(); } // Initialization of forwarding SoSciTools.attachEvent(window, "load", function(evt) { // Hide Next button (optional) SoSciTools.submitButtonsHide(); // Start timer to forward automatically window.setTimeout(next, %remain% * 1000); }); // --> </script>
Some of the JavaScript sections are marked as optional. These sections can be removed where necessary.
Note: If you want to display a message after the timer has expired using alert()
, the time taken to close the message will appear in the dwell time in the data record. The dwell time that is saved is therefore higher than the timer actually for the participant to be on the page.
Initialization of the forwarding will only be carried out once the questionnaire page has been fully loaded (onload
). There are two reasons for this: first of all, the loading time is considered in the actual dwell time, and the reason being that the Next button can only be hidden once the page has been fully loaded.
Note: Please remember to drag the text element with the JavaScript onto the questionnaire page – and do so below the PHP code.
Now insert text elements and/or questions to be shown in the questionnaire underneath the PHP and JavaScript codes. Positioning them below the PHP code is important to ensure the filter works properly if time has already expired.
You can show the participant how much time they have left to work through the page. Insert the following HTML code onto the questionnaire page to do so (either in a text element, directly in a question or in a HTML code element).
<p>Remaining time: <span id="remain"></span></p>
Expanding the JavaScript code a little also has to be done in addition to this.
<script type="text/javascript"> <!-- // Function to forward function weiter() { // Display message (optional) alert("Time's up."); // Forward participant onto the next page SoSciTools.submitPage(); } // Display countdown var date0 = new Date(); var timeout = date0.getTime() + %remain% * 1000; function updateCountdown() { // Calculate time var date = new Date(); var time = Math.ceil((timeout - date.getTime() - 50) / 1000); // remaining time in seconds // Display time var out = document.getElementById("remain"); if (!out) { return; } while (out.lastChild) { out.removeChild(out.lastChild); } var minutes = Math.floor(time / 60); var seconds = String(time - 60 * minutes); if (seconds.length < 2) seconds = "0" + seconds; var display = String(minutes) + ":" + seconds; var displayNode = document.createTextNode(display); out.appendChild(displayNode); } // Initialize forwarding SoSciTools.attachEvent(window, "load", function(evt) { // Hide Next button (optional) SoSciTools.submitButtonsHide(); // Additional timer to update the countdown window.setInterval(updateCountdown, 1000); updateCountdown(); // Start timer to forward automatically window.setTimeout(next, %remain% * 1000); }); // --> </script>
The above code – it does not matter whether it has a visible countdown or not – is also suitable for letting a timer run across several pages in the questionnaire. The “Next” button, however, must not be hidden. Where required, remove the following lines from the JavaScript:
// Hide Next button (optional) SoSciTools.submitButtonsHide();
You can omit the isset()
part from the PHP code on the following pages, although this does not interfere with anything.
// Check whether time has already expired $timer = 60; // participant has 1 minute (60 seconds) to work through the page if (time() >= $time0 + $timer) { goToPage('next'); } // The JavaScript code has to be told the time remaining $remain = $time0 + $timer - time(); replace('%remain%', $remain);
Place the text element with the JavaScript on the second page below the PHP code, and the questions beneath this.
Restriction: Loading times occured between questionnaire pages are deducted from the participant's dwell time. Conversely, the participant gets given a maximum of one second due to rounding errors.