Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
de:create:timer-display [12.01.2016 09:26]
admin [Andere Inhalte einblenden]
de:create:timer-display [01.04.2017 17:26]
admin [Umsetzung]
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 93: Zeile 88:
  
  
-===== 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 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.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