Differences

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

--- en:create:timer-countdown [16.07.2015 14:01] – created janisaltherr
+++ en:create:timer-countdown [28.04.2021 17:43] – [Time display] sophia.schauer
@@ Line 36: / Line 36: @@
 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 ====
+==== Time Display ====
-While the participant fills out the pages inside the countdown, you might want them to see the remaining time. Additionally, the php code above only checks whether the time is up when the page is being loaded. If the time counter is up while they are on a page, you need a JavaScript code bit to redirect them to the next page. You prepare this by telling the JavaScript how much time remains using php:
+While the participant fills out the pages inside the countdown, you might want them to see the remaining time. Additionally, it is needet to check whether the time is up when the page is being loaded. This is realized by [[:en:create:javascript|JavaScript]].
-<code php>
+Save the JavaScript code as text (Heading → Add text). For the content to be interpreted as JavaScript code, select "HTML code" as the representation.
-// Tell JavaScript the remaining time
-$timeLeft = $timeout - time();
-replace('%timeLeft%', $timeLeft);
-text('js_timeout');
-</code>
-The actual JavaScript Code needs to be implemented as a text element with the ID "js_timeout" (//Display:// HTML-Code) with the following content. If you don’t want to display a message or you don’t want to redirect the participant immediately, simply delete the corresponding lines.
-Note the first two lines that do not contain Javascript yet, but simply HTML-Code. This code or a different HTML-element with the HTML-ID „timeDisplay“ can be placed anywhere in the HTML-Code (e.g. in a question text). In this case put the above PHP code at the end of the page, otherwise at the point where you want the countdown to be displayed.
 <code javascript>
@@ Line 107: / Line 97: @@
 </script>
 </code>
+**Tip:** If you do not want to display a message after the countdown has expired or do not want to automatically forward the participant, simply remove the corresponding lines.
+**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 "timeDisplay" can in principle also be placed elsewhere in the HTML code (e.g. in a question). In this case, place the above PHP code, which embeds the JavaScript code, at the bottom of the page. Otherwise, where you want the countdown to be displayed.
+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 ''%timeLeft%''.
+<code php>
+// JavaScript to display remaining time
+$timeLeft = $timeout - time();
+// Instead of JS01 the identifier of the text must be entered here
+show('JS01', array(
+  '%timeLeft%' => $timeLeft
+));
+</code>
+This code is also needed on every page where the countdown should be displayed.
+**Note:** For ''show()'' to work correctly, please do not save the JavaScript code as //Text Element// but as //Text// in a section in the **List of Questions**. Please select "HTML code" as the display mode for the text.