This shows you the differences between two versions of the page.
Previous revisionNext revision | |||
— | en:create:timer-countdown [28.04.2021 17:43] – [Time display] sophia.schauer | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Timer: Countdown across multiple pages ====== | ||
+ | If your participants should complete a task within a given time, you can use a countdown. This chapter helps you create one. | ||
+ | |||
+ | **Advice:** If your countdown neither needs to be displayed nor does it count the time across multiple pages, you might rather look at this page: [[: | ||
+ | |||
+ | The following components are necessary for the countdown: | ||
+ | |||
+ | |||
+ | ==== Setting the time ==== | ||
+ | |||
+ | Start by defining how much time the participant gets. Save it in form of a unix-timestamp and make it accessible for the following pages by using '' | ||
+ | |||
+ | <code php> | ||
+ | // Save the timeout into the variable $timeout | ||
+ | if (!isset($timeout)) { | ||
+ | $timeout = strtotime(' | ||
+ | registerVariable($timeout); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Place this PHP-code once on the page the countdown starts. | ||
+ | |||
+ | ==== Filter if time is up ==== | ||
+ | |||
+ | When the time is up, the questionnaire should not display the page(s) inside the countdown area but jump to the next part of the questionnaire. You have to place the following php-code at the top of every (!) page that should be affected by the countdown. The page following the countdown needs to have the [[: | ||
+ | |||
+ | <code php> | ||
+ | // Filter: Is the time up? | ||
+ | if (time() > $timeout) { | ||
+ | goToPage(' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | This code bit should be placed right at the top of the pages. Except for the first countdown page which needs the time definition code bit first (see above). | ||
+ | |||
+ | ==== Time Display ==== | ||
+ | |||
+ | While the participant fills out the pages inside the countdown, you might want them to see the remaining time. Additionally, | ||
+ | |||
+ | |||
+ | Save the JavaScript code as text (Heading → Add text). For the content to be interpreted as JavaScript code, select "HTML code" as the representation. | ||
+ | |||
+ | <code javascript> | ||
+ | <!-- HTML-element to display the remaining time --> | ||
+ | <div id=" | ||
+ | |||
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | // Get the remaining time from the php code | ||
+ | var timeLeft = %timeLeft%; | ||
+ | var timeStart = new Date(); | ||
+ | |||
+ | // Refresh the time display and check whether the time is up | ||
+ | function updateCountdown() { | ||
+ | // calculate the remaining time | ||
+ | var now = new Date(); | ||
+ | var timePage = Math.floor((now.getTime() - timeStart.getTime()) / 1000); | ||
+ | var remain = timeLeft - timePage; | ||
+ | |||
+ | // Is the time up? | ||
+ | if (remain <= 0) { | ||
+ | remain = 0; | ||
+ | // Stop the timer | ||
+ | window.clearInterval(timerInterval); | ||
+ | // Display a message (optional) | ||
+ | alert(„The time is up.“); | ||
+ | // Redirect the participant to the next page (optional) | ||
+ | // SoSciTools.submitPage(); | ||
+ | } | ||
+ | |||
+ | // Display the time | ||
+ | var display = document.getElementById(" | ||
+ | if (!display) { | ||
+ | return; | ||
+ | } | ||
+ | while (display.lastChild) { | ||
+ | display.removeChild(display.lastChild); | ||
+ | } | ||
+ | var minutes = Math.floor(remain / 60); | ||
+ | var seconds = String(remain - 60 * minutes); | ||
+ | if (seconds.length < 2) { | ||
+ | seconds = " | ||
+ | } | ||
+ | var displayText = String(minutes) + ":" | ||
+ | var displayNode = document.createTextNode(displayText); | ||
+ | display.appendChild(displayNode); | ||
+ | } | ||
+ | |||
+ | // Initialize | ||
+ | var timerInterval = window.setInterval(updateCountdown, | ||
+ | updateCountdown(); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | **Tip:** If you do not want to display a message after the countdown has expired or do not want to automatically forward the participant, | ||
+ | |||
+ | **Tip:** Also note the first two lines, which do not yet contain JavaScript, but simply HTML code. This HTML code or another HTML element with the HTML ID " | ||
+ | |||
+ | To integrate the JavaScript code, a little PHP code is again required on the questionnaire page. The following PHP code passes the remaining time as placeholder '' | ||
+ | |||
+ | <code php> | ||
+ | // JavaScript to display remaining time | ||
+ | $timeLeft = $timeout - time(); | ||
+ | // Instead of JS01 the identifier of the text must be entered here | ||
+ | show(' | ||
+ | ' | ||
+ | )); | ||
+ | </ | ||
+ | |||
+ | This code is also needed on every page where the countdown should be displayed. | ||
+ | |||
+ | **Note:** For '' |