Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Letzte Überarbeitung Beide Seiten der Revision
de:create:timer-display [12.01.2016 09:26]
admin [Andere Inhalte einblenden]
de:create:timer-display [12.01.2016 09:35]
admin Countdown ergänzte
Zeile 65: Zeile 65:
 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 93: Zeile 93:
  
  
-===== 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 119: 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>​ </​script>​
 </​code>​ </​code>​
de/create/timer-display.txt · Zuletzt geändert: 01.04.2017 17:26 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