Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:timer-display [18.12.2014 21:16] – [Andere Inhalte einblenden] admin
+++ de:create:timer-display [12.01.2016 09:35] – Countdown ergänzte admin
@@ Zeile 17: / Zeile 17: @@
 ===== Umsetzung =====
-Man benötigt lediglich einen Textbaustein mit nachfolgendem Inhalt (anzulegen unter **Textbausteine u. Beschriftung**). Diesen Textbaustein zieht man dann beim Zusammenstellen des Fragebogens in die entsprechende Fragebogen-Seite.
+Man benötigt lediglich einen Textbaustein mit nachfolgendem Inhalt (anzulegen unter **Textbausteine u. Beschriftung**, //Darstellung// "HTML_Code"). Diesen Textbaustein zieht man dann beim Zusammenstellen des Fragebogens in die entsprechende Fragebogen-Seite.
 <code javascript>
 <script type="text/javascript">
 <!--
-// Funktion zum Einblenden der Knöpfe
-function showButtons() {
-  var buttons = document.getElementById("buttonsAuto");
-  // Den normalen Anzeigemodus wiederherstellen (Knöpfe anzeigen)
-  buttons.style.display = "";
-}
 // Nach dem Laden der Seite das Script starten
 SoSciTools.attachEvent(window, "load",
   function() {
-    // Die Knöpfe suchen
-    var buttons = document.getElementById("buttonsAuto");
     // Die Knöpfe ausblenden
-    buttons.style.display = "none";
+    SoSciTools.submitButtonsHide();
     // Den Timer starten
-    window.setTimeout(showButtons, 60000); // Nach 1 Min = 60.000 ms
+    window.setTimeout(SoSciTools.submitButtonsDisplay, 60000); // Nach 1 Min = 60.000 ms
   }
 );
@@ Zeile 46: / Zeile 37: @@
 </code>
+**Hinweis:** Dieser JavaScript-Code verwendet die SoSci Survey spezifische Funktion ''SoSciTools.submitButtonsHide()'', um alle Knöpfe auszublenden. Ebenso können Sie über ''%%document.getElementById("submit0")%%'' spezifisch den Weiter-Knopf identifizieren und dessen Eigenschaft ''.style.display'' auf den Wert ''%%"none"%%'' setzen. Für das wieder-Anzeigen des Knopfes müssen Sie dann ggf. eine eigene Funktion als Pendant ergänzen.
 ===== Andere Inhalte einblenden =====
@@ Zeile 63: / Zeile 54: @@
 <code html>
-<div id="meineFrage">
+<div id="meinObjekt">
 </code>
@@ Zeile 72: / Zeile 63: @@
 **Tipp:** Für Fragen ist das nicht notwendig, weil diese bereits eine HTML-ID tragen ([[:de:create:dynamic|Fragen bei Auswahl einer bestimmten Option sofort einblenden]]).
+Der entsprechende HTML-/JavaScript-Code würde dann wie folgt aussehen:
-===== Platzhalter für den fehlenden Knopf =====
+<code javascript>
+<script type="text/javascript">
+<!--
+// Funktion zum Einblenden der Knöpfe
+function showContent() {
+  var content = document.getElementById("meinObjekt");
+  // 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("meinObjekt");
+    // Ausblenden
+    content.style.display = "none";
+    // Den Timer starten
+    window.setTimeout(showContent, 60000); // Nach 1 Min = 60.000 ms
+  }
+);
+// -->
+</script>
+</code>
+===== 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 99: / 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>