Differences

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

--- en:create:timer-display [12.01.2016 09:21] – [Implementation] Update admin
+++ en:create:timer-display [12.08.2022 19:26] (current) – admin
@@ Line 22: / Line 22: @@
 <script type="text/javascript">
 <!--
+// Hide the button
-// Nach dem Laden der Seite das Script starten
+SoSciTools.submitButtonsHide();
-SoSciTools.attachEvent(window, "load",
+// After a timeout of 60 sec = 60000 ms, display the button
-  function() {
+window.setTimeout(
-    // Die Knöpfe ausblenden
+  SoSciTools.submitButtonsDisplay, 60000
-    SoSciTools.submitButtonsHide();
+)
-    // Den Timer starten
-    window.setTimeout(SoSciTools.submitButtonsDisplay, 60000); // Nach 1 Min = 60.000 ms
-  }
-);
 // -->
 </script>
@@ Line 46: / Line 41: @@
 <code html>
-<div id="myObjective">
+<div id="myObject">
 <h1>Heading</h1>
 <p>You can read the secret text here.</p>
@@ Line 56: / Line 51: @@
 <code html>
-<div id="myQuestion">
+<div id="myObject">
 </code>
@@ Line 65: / Line 60: @@
 **Tip:** This is not necessary for questions because they already have an HTML ID ([[:en:create:dynamic|Immediately Show Questions when a Certain Option is Selected]]).
+The HTML/JavaScript code that takes care of hiding would look like this:
-===== Placeholder for the Missing Button =====
+<code javascript>
+<script type="text/javascript">
+<!--
+// Funktion zum Einblenden der Knöpfe
+function showContent() {
+  var content = document.getElementById("myObject");
+  // Den normalen Anzeigemodus wiederherstellen
+  content.style.display = "";
+}
+// Nach dem Laden der Fragebogen-Seite das Script starten
+SoSciTools.attachEvent(window, "load",
+  function() {
+    // Objekt heraussuchen
+    var content = document.getElementById("myObject");
+    // Ausblenden
+    content.style.display = "none";
+    // Den Timer starten
+    window.setTimeout(showContent, 60000); // Nach 1 Min = 60.000 ms
+  }
+);
+// -->
+</script>
+</code>
+===== Placeholder for the Button =====
 With this solution, the layout is slightly altered when the button appears -- the page gets bigger. If you do not want this, you can hide the content with the CSS attribute ''visibility'', instead of with ''display'':
@@ Line 92: / Line 116: @@
   }
 );
+// -->
+</script>
+</code>
+===== Display Countdown =====
+It may be irritation for respondents if the "next" button is missing. Therefore, it may be useful to display a countdown instead. Use the following HTML/JavaScript code to do so:
+<code javascript>
+<script type="text/javascript">
+<!--
+var countdown = 30;
+var countdownDisplay;
+var countdownTimer;
+// "submit0" is the next button,
+// use "buttonsAuto" instead to include the back button as well
+var buttonID = "submit0";
+function countdownStart() {
+  // Next button
+  var button = document.getElementById(buttonID);
+  // Create countdown element
+  countdownDisplay = document.createElement("div");
+  var cd = countdownDisplay;
+  cd.style.display = "inline-block";
+  cd.style.textAlign = "center";
+  cd.style.fontWeight = "bold";
+  cd.style.width = button.offsetWidth + "px";
+  cd.style.height = button.offsetHeight + "px";
+  // Init countdown
+  button.parentNode.appendChild(countdownDisplay);
+  countdownRefresh();
+  // Hide next button
+  button.style.display = "none";
+  // Start countdown
+  countdownTimer = window.setInterval(countDown, 1000);
+}
+function countDown() {
+  if (countdown > 1) {
+    countdown--;
+    countdownRefresh();
+  } else {
+    window.clearTimeout(countdownTimer);
+    // Display nextbutton
+    var button = document.getElementById(buttonID);
+    button.style.display = "";
+    // Remove countdown
+    button.parentNode.removeChild(countdownDisplay);
+  }
+}
+function countdownRefresh() {
+  // Clear
+  while (countdownDisplay.lastChild) {
+    countdownDisplay.removeChild(countdownDisplay.lastChild);
+  }
+  // Display
+  var content = document.createTextNode(countdown + " sec.");
+  countdownDisplay.appendChild(content );
+}
+SoSciTools.attachEvent(window, "load", countdownStart);
 // -->
 </script>
 </code>