Differences

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

--- en:create:timer-display [12.01.2016 09:27] – [Show Other Content] admin
+++ en:create:timer-display [01.04.2017 17:27] – [Implementation] 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 67: / Line 62: @@
 The HTML/JavaScript code that takes care of hiding would look like this:
-<code html>
+<code javascript>
 <script type="text/javascript">
 <!--
@@ Line 95: / Line 90: @@
-===== Placeholder for the Missing Button =====
+===== 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 121: / 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>