Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:timer-display [12.01.2016 09:26] – [Andere Inhalte einblenden] admin
+++ de:create:timer-display [12.01.2016 09:35] – Countdown ergänzte admin
@@ Zeile 65: / Zeile 65: @@
 Der entsprechende HTML-/JavaScript-Code würde dann wie folgt aussehen:
-<code html>
+<code javascript>
 <script type="text/javascript">
 <!--
@@ Zeile 91: / Zeile 91: @@
 </script>
 </code>
-===== Platzhalter für den fehlenden Knopf =====
+===== Platzhalter für den Knopf =====
 Bei der vorgestellten Lösung wird das Layout beim Erscheinen des Knopfes leicht verändert -- die Seite wird größer. Wenn Sie das nicht möchten, können Sie den Inhalt statt mit ''display'' auch mit dem CSS-Attribut ''visibility'' ausblenden:
@@ Zeile 117: / Zeile 119: @@
   }
 );
+// -->
+</script>
+</code>
+===== 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:
+<code javascript>
+<script type="text/javascript">
+<!--
+var countdown = 30;
+var countdownDisplay;
+var countdownTimer;
+// "submit0" ist der Weiter-Knopf,
+// mit "buttonsAuto" kann man auch den Zurück-Knopf ausblenden
+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 + " Sek.");
+  countdownDisplay.appendChild(content );
+}
+SoSciTools.attachEvent(window, "load", countdownStart);
 // -->
 </script>
 </code>