Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:timer-display [01.07.2022 19:13] – alte Version wiederhergestellt (01.04.2017 17:26) admin
+++ de:create:timer-display [16.04.2026 11:38] (aktuell) – [Countdown zeigen] admin
@@ Zeile 122: / Zeile 122: @@
 ===== Countdown zeigen =====
-Es ist für die Teilnehmer u.U. irritierend, wenn auf einer Seite plötzlich der Weiter-Knopf fehlt. Daher kann es sinnvoll sein, anstatt des Knopfes einen Countdown anzuzeigen. Dies erreichen Sie mit folgendem HTML-/JavaScript-Code:
+Es ist für die Teilnehmer u.U. irritierend, wenn auf einer Seite plötzlich der Weiter-Knopf fehlt. Daher kann es sinnvoll sein, anstatt des Knopfes einen Countdown anzuzeigen. Dies erreichen Sie mit folgendem HTML-/JavaScript-Code.
+Die Zeit legen Sie hier in der letzten Code-Zeile fest.
 <code javascript>
 <script type="text/javascript">
 <!--
+function Countdown(duration, buttonID, callback) {
+    let countdownTimer;
+    let countdownStart = Date.now();
+    let countdownDisplay;
+    let running = false;
-var countdown = 30;
+    function complete() {
-var countdownDisplay;
+        // Display nextbutton
-var countdownTimer;
+        var button = document.getElementById(buttonID);
-// "submit0" ist der Weiter-Knopf,
+        button.style.display = "";
-// mit "buttonsAuto" kann man auch den Zurück-Knopf ausblenden
+        // Remove countdown
-var buttonID = "submit0";
+        button.parentNode.removeChild(countdownDisplay);
+        // Anything else to do?
+        if (callback) {
+            callback();
+        }
+    }
-function countdownStart() {
+    function init() {
-  // Next button
+        // Next button
-  var button = document.getElementById(buttonID);
+        let button = document.getElementById(buttonID);
-  // Create countdown element
+        // Create countdown element
-  countdownDisplay = document.createElement("div");
+        countdownDisplay = document.createElement("div");
-  var cd = countdownDisplay;
+        let cd = countdownDisplay;
-  cd.style.display = "inline-block";
+        cd.style.display = "inline-block";
-  cd.style.textAlign = "center";
+        cd.style.textAlign = "center";
-  cd.style.fontWeight = "bold";
+        cd.style.fontWeight = "bold";
-  cd.style.width = button.offsetWidth + "px";
+        cd.style.width = button.offsetWidth + "px";
-  cd.style.height = button.offsetHeight + "px";
+        cd.style.height = button.offsetHeight + "px";
-  // Init countdown
+        // Init countdown
-  button.parentNode.appendChild(countdownDisplay);
+        button.parentNode.appendChild(countdownDisplay);
-  countdownRefresh();
+        refresh();
-  // Hide next button
+        // Hide next button
-  button.style.display = "none";
+        button.style.display = "none";
-  // Start countdown
+    }
-  countdownTimer = window.setInterval(countDown, 1000);
-}
-function countDown() {
+    function refresh() {
-  if (countdown > 1) {
+        if (!running) {
-    countdown--;
+            window.clearInterval(countdownTimer);
-    countdownRefresh();
+            return;
-  } else {
+        }
-    window.clearTimeout(countdownTimer);
+        let timeLeft = duration - ((Date.now() - countdownStart) / 1000);
-    // Display nextbutton
+        if (timeLeft <= 0) {
-    var button = document.getElementById(buttonID);
+            running = false;
-    button.style.display = "";
+            window.clearInterval(countdownTimer);
-    // Remove countdown
+            complete();
-    button.parentNode.removeChild(countdownDisplay);
+            return;
-  }
+        }
-}
-function countdownRefresh() {
+        // Clear
-  // Clear
+        while (countdownDisplay.lastChild) {
-  while (countdownDisplay.lastChild) {
+            countdownDisplay.removeChild(countdownDisplay.lastChild);
-    countdownDisplay.removeChild(countdownDisplay.lastChild);
+        }
-  }
+        // Display
-  // Display
+        let content = document.createTextNode(Math.ceil(timeLeft) + " Sek.");
-  var content = document.createTextNode(countdown + " Sek.");
+        countdownDisplay.appendChild(content);
-  countdownDisplay.appendChild(content );
+    }
-}
-SoSciTools.attachEvent(window, "load", countdownStart);
+    function start() {
+        // Start countdown
+        countdownTimer = window.setInterval(refresh, 200);
+        running = true;
+    }
+    window.addEventListener("DOMContentLoaded", init);
+    window.addEventListener("load", start);
+}
+// "submit0" ist der Weiter-Knopf,
+// mit "buttonsAuto" kann man auch den Zurück-Knopf ausblenden
+new Countdown(30, "submit0");
 // -->
 </script>
 </code>
+----
+**Suchbegriffe:** Mindestverweildauer, Weiter-Knopf, Unterbrechung, Pause, Wartezeit, Anzeigedauer.