Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
Nächste ÜberarbeitungBeide Seiten der Revision
de:create:timer-display [12.01.2016 09:26] – [Andere Inhalte einblenden] adminde:create:timer-display [01.04.2017 17:26] – [Umsetzung] admin
Zeile 22: Zeile 22:
 <script type="text/javascript"> <script type="text/javascript">
 <!-- <!--
- +// Knopf zunächst ausblenden 
-// Nach dem Laden der Seite das Script starten +SoSciTools.submitButtonsHide(); 
-SoSciTools.attachEvent(window, "load", +// Nach Ablauf von 60 Sek = 60000 ms wieder einblenden 
-  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> </script>
Zeile 65: Zeile 60:
 Der entsprechende HTML-/JavaScript-Code würde dann wie folgt aussehen: Der entsprechende HTML-/JavaScript-Code würde dann wie folgt aussehen:
  
-<code html>+<code javascript>
 <script type="text/javascript"> <script type="text/javascript">
 <!-- <!--
Zeile 91: Zeile 86:
 </script> </script>
 </code> </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: 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 114:
   }   }
 ); );
 +
 +// -->
 +</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> </script>
 </code> </code>
de/create/timer-display.txt · Zuletzt geändert: 01.07.2022 19:13 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki