This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
en:create:timer-submit [01.06.2016 14:27] – [Implementation] klaus-peter.speidel | en: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 " |
The solution is based on [[: | The solution is based on [[: | ||
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 (" | **Note:** The participant cannot restart the timer by reloading the questionnaire page (" | ||
Line 27: | Line 27: | ||
if (!isset($time0)) { | if (!isset($time0)) { | ||
$time0 = time(); | $time0 = time(); | ||
- | registerVariable(' | + | registerVariable(' |
} | } | ||
// Check if time has already expired | // Check if time has already expired | ||
Line 41: | Line 41: | ||
**Note:** If you want to use multiple, independent timers in the questionnaire, | **Note:** If you want to use multiple, independent timers in the questionnaire, | ||
- | **Different language versions** Use the translation support tool and copy-paste the suppression of the " | + | |
+ | **Different language versions:** Use the translation support tool and copy-paste the suppression of the " | ||
If the participant is able to restart the timer by reloading the page or using the " | If the participant is able to restart the timer by reloading the page or using the " | ||
Line 49: | Line 50: | ||
</ | </ | ||
- | Create | + | For the actual timer, create |
+ | |||
+ | For the // | ||
<code javascript> | <code javascript> | ||
<script type=" | <script type=" | ||
<!-- | <!-- | ||
+ | |||
// Function to forward | // Function to forward | ||
- | function | + | function |
// Display message (optional) | // Display message (optional) | ||
alert(" | alert(" | ||
Line 61: | Line 65: | ||
SoSciTools.submitPage(); | SoSciTools.submitPage(); | ||
} | } | ||
+ | |||
+ | // Hide next button (optional) | ||
+ | SoSciTools.submitButtonsHide(); | ||
+ | |||
// Initialization of forwarding | // Initialization of forwarding | ||
SoSciTools.attachEvent(window, | SoSciTools.attachEvent(window, | ||
- | | + | |
- | SoSciTools.submitButtonsHide(); | + | |
// Start timer to forward automatically | // Start timer to forward automatically | ||
- | window.setTimeout(next, %remain% * 1000); | + | window.setTimeout(goNext, %remain% * 1000); |
}); | }); | ||
// --> | // --> | ||
Line 73: | Line 80: | ||
Some of the JavaScript sections are marked as // | Some of the JavaScript sections are marked as // | ||
+ | |||
+ | 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 '' | **Note:** If you want to display a message after the timer has expired using '' | ||
- | Initialization of the forwarding will only be carried out once the questionnaire page has been fully loaded ('' | + | Initialization of the forwarding will only be carried out once the questionnaire page has been fully loaded ('' |
Line 83: | 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, | ||
===== Display Countdown ===== | ===== Display Countdown ===== | ||
Line 98: | Line 109: | ||
<script type=" | <script type=" | ||
<!-- | <!-- | ||
+ | |||
// Function to forward | // Function to forward | ||
- | function | + | function |
// Display message (optional) | // Display message (optional) | ||
alert(" | alert(" | ||
Line 105: | Line 117: | ||
SoSciTools.submitPage(); | SoSciTools.submitPage(); | ||
} | } | ||
+ | |||
// Display countdown | // Display countdown | ||
var date0 = new Date(); | var date0 = new Date(); | ||
Line 127: | Line 140: | ||
out.appendChild(displayNode); | out.appendChild(displayNode); | ||
} | } | ||
+ | |||
+ | // Hide Next button (optional) | ||
+ | SoSciTools.submitButtonsHide(); | ||
+ | | ||
// Initialize forwarding | // Initialize forwarding | ||
SoSciTools.attachEvent(window, | SoSciTools.attachEvent(window, | ||
- | | + | |
- | SoSciTools.submitButtonsHide(); | + | |
// Additional timer to update the countdown | // Additional timer to update the countdown | ||
window.setInterval(updateCountdown, | window.setInterval(updateCountdown, | ||
updateCountdown(); | updateCountdown(); | ||
// Start timer to forward automatically | // Start timer to forward automatically | ||
- | window.setTimeout(next, %remain% * 1000); | + | window.setTimeout(goNext, %remain% * 1000); |
}); | }); | ||
+ | |||
// --> | // --> | ||
</ | </ | ||
Line 144: | 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) |