[[Timer: Go Onto Next Page Automatically]]
You are here: start » Overview » Creating and Designing the Questionnaire » Timer: Go Onto Next Page Automatically
 
Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
en:create:timer-submit [28.04.2021 17:53] – [Implementation] sophia.schaueren:create:timer-submit [12.04.2022 21:39] (current) – admin
Line 1: Line 1:
 ====== Timer: Go Onto Next Page Automatically ====== ====== Timer: Go Onto Next Page Automatically ======
  
-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. +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 [[:en:glossary#javascript|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 ([[:en:results:variables#dwell_times|Additional Variables in the Data Set: Dwell Times]]). The solution is based on [[:en:glossary#javascript|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 ([[:en:results:variables#dwell_times|Additional Variables in the Data Set: Dwell Times]]).
Line 13: Line 13:
   - If necessary, the Next button (if applicable, the Back button as well) can be hidden.   - If necessary, the Next button (if applicable, the Back button as well) can be hidden.
   - A timer then starts that calls up the function to forward onto the next page after a certain amount of time.   - A timer then starts that calls up the function to forward onto the next page after a certain amount of time.
-  - After the timer has expired, the current questionnaire page will be submitted automatically. The function is comparable (but not identical) with pressing the "Next" button. +  - After the timer has expired, the current questionnaire page will be submitted automatically. The function is comparable (but not identical) with pressing the "next" button. 
  
 **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.  **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. 
Line 57: Line 57:
 <script type="text/javascript"> <script type="text/javascript">
 <!-- <!--
 +
 // Function to forward // Function to forward
-function next() {+function goNext() {
   // Display message (optional)   // Display message (optional)
   alert("Time's up.");   alert("Time's up.");
Line 72: Line 73:
      
   // Start timer to forward automatically   // Start timer to forward automatically
-  window.setTimeout(next, %remain% * 1000);+  window.setTimeout(goNext, %remain% * 1000);
 }); });
 // --> // -->
Line 85: Line 86:
  
  
-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.+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.
  
  
Line 91: Line 92:
  
 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. 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.
 +
 +**Multilingual versions:** If you use different languages for the questionnaire, use the translation help tool (under language versions) and copy the code for the timer into the different language versions.
  
 ===== Display Countdown ===== ===== Display Countdown =====
Line 106: Line 109:
 <script type="text/javascript"> <script type="text/javascript">
 <!-- <!--
 +
 // Function to forward // Function to forward
-function weiter() {+function goNext() {
   // Display message (optional)   // Display message (optional)
   alert("Time's up.");   alert("Time's up.");
Line 113: Line 117:
   SoSciTools.submitPage();   SoSciTools.submitPage();
 } }
 +
 // Display countdown // Display countdown
 var date0 = new Date(); var date0 = new Date();
Line 135: Line 140:
   out.appendChild(displayNode);   out.appendChild(displayNode);
 } }
 +
 +// Hide Next button (optional)
 +  SoSciTools.submitButtonsHide();
 +  
 // Initialize forwarding // Initialize forwarding
 SoSciTools.attachEvent(window, "load", function(evt) { SoSciTools.attachEvent(window, "load", function(evt) {
-  // Hide Next button (optional) +  
-  SoSciTools.submitButtonsHide();+
   // Additional timer to update the countdown   // Additional timer to update the countdown
   window.setInterval(updateCountdown, 1000);   window.setInterval(updateCountdown, 1000);
   updateCountdown();   updateCountdown();
   // Start timer to forward automatically   // Start timer to forward automatically
-  window.setTimeout(next, %remain% * 1000);+  window.setTimeout(goNext, %remain% * 1000);
 }); });
 +
 // --> // -->
 </script> </script>
Line 152: Line 161:
 ===== Timer Across Several Pages ===== ===== Timer Across Several Pages =====
  
-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:+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)   // Hide Next button (optional)
en/create/timer-submit.txt · Last modified: 12.04.2022 21:39 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki