[[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 [01.06.2016 14:28] – [Implementation] klaus-peter.speidelen: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 27: Line 27:
 if (!isset($time0)) { if (!isset($time0)) {
   $time0 = time();   $time0 = time();
-  registerVariable('time0');  // store variable $time0 after the end of the PHP code as well +  registerVariable('$time0');  // store variable $time0 after the end of the PHP code as well 
 } }
 // Check if time has already expired // Check if time has already expired
Line 42: Line 42:
 **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.  **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. 
  
-**Different language versions** Use the translation support tool and copy-paste the suppression of the "next" button into the different language versions.+**Different language versions:** Use the translation support tool and copy-paste the suppression of the "next" button into the different language versions.
  
 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.  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. 
Line 50: Line 50:
 </code> </code>
  
-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.+For the actual timer, create a new text module in the **Question catalog** in a section with **New text** __or__ under **Text modules and labeling**. 
 + 
 +For the //Display//, please set "HTML code". Then insert the following content.
  
 <code javascript> <code javascript>
 <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 62: Line 65:
   SoSciTools.submitPage();   SoSciTools.submitPage();
 } }
 + 
 +// Hide next button (optional)
 +SoSciTools.submitButtonsHide();
 +
 // Initialization of forwarding // Initialization of forwarding
 SoSciTools.attachEvent(window, "load", function(evt) { SoSciTools.attachEvent(window, "load", function(evt) {
-  // Hide Next button (optional) +  
-  SoSciTools.submitButtonsHide();+
   // Start timer to forward automatically   // Start timer to forward automatically
-  window.setTimeout(next, %remain% * 1000);+  window.setTimeout(goNext, %remain% * 1000);
 }); });
 // --> // -->
Line 74: Line 80:
  
 Some of the JavaScript sections are marked as //optional//. These sections can be removed where necessary. Some of the JavaScript sections are marked as //optional//. These sections can be removed where necessary.
 +
 +After saving, drag this text module directly below the PHP code onto the questionnaire page.
  
 **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. **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.+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 84: 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 99: 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 106: Line 117:
   SoSciTools.submitPage();   SoSciTools.submitPage();
 } }
 +
 // Display countdown // Display countdown
 var date0 = new Date(); var date0 = new Date();
Line 128: 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 145: 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.1464784099.txt.gz · Last modified: 01.06.2016 14:28 by klaus-peter.speidel
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki