Dies ist eine alte Version des Dokuments!
Die Teilnehmer sollen eine Aufgabe in begrenzter Zeit bearbeiten? Dieses Kapitel beschreibt, wie hierfür ein Countdown angezeigt wird.
Hinweis: Ist weder ein Countdown über mehrere Seiten noch die Anzeige der verbleibenden Zeit erforderlich, lesen Sie hier weiter: Timer: Automatisch weiter zur nächsten Seite
Folgende Komponenten sind für den Countdown erforderlich:
Zunächst muss definiert werden, wie viel Zeit der Teilnehmer bekommt. Dies wird als Unix-Zeitstempel gespeichert und mittels registerVariable()
für alle folgenden Seiten verfügbar gemacht. Das isset()
sorgt dafür, dass sich das Ende des Countdowns auch dann nicht mehr ändert, wenn der Teilnehmer die Seite erneut aufruft – etwa per Zurück-Knopf.
// Ablauf der Zeit als Variable $timeout speichern if (!isset($timeout)) { $timeout = strtotime('+30 seconds'); registerVariable($timeout); }
Dieser PHP-Code muss einmal auf der Seite platziert werden, wo der Countdown beginnt.
Wenn der Countdown abgelaufen ist, soll der Fragebogen die Seite(n) innerhalb des Countdowns nicht mehr anzeigen, sondern direkt zum nächsten Teil des Fragebogens springen. Dafür ist folgender PHP-Code auf jeder (!) Seite zu platzieren, auf welcher der Countdown laufen soll. Und die Seite, die danach kommt, muss die Kennung partNext
erhalten.
// Filter: Zeit abgelaufen? if (time() > $timeout) { goToPage('partNext'); }
Dieser PHP-Code sollte ganz oben auf den Seiten platziert werden. Außer bei der ersten Seite des Countdowns – hier kommt der Code unter die Definition der Zeit (oben).
Während der Teilnehmer eine Seite innerhalb des Countdowns ausfüllt, muss zum einen die Anzeige der verbleibenden Zeit ständig aktualisiert werden, zum anderen muss überprüft werden, ob die Zeit vielleicht schon abgelaufen ist. Dafür wird JavaScript-Code in die Seite eingebunden – und zwar mit folgendem PHP-Code, welcher die verbleibende Zeit an das JavaScript übergibt:
// JavaScript zur Anzeige der verbleibenden Zeit $timeLeft = $timeout - time(); replace('%timeLeft%', $timeLeft); text('js_timeout');
Den eigentlichen JavaScript-Code speichern Sie als Textbaustein mit der Kennung „js_timeout“ (Darstellung: HTML-Code) mit folgendem Inhalt. Wenn Sie nach Ablauf des Countdown keine Meldung anzeigen möchten oder den Teilnehmer nicht automatisch weiterleiten möchten, entfernen Sie die entsprechenden Zeilen einfach.
Beachten Sie auch die ersten beiden Zeilen, die noch keine JavaScript, sondern einfach nur HTML-Code enthalten. Diese HTML-Code bzw. ein anderes HTML-Element mit der HTML-ID „timeDisplay“ können Sie prinzipiell auch an anderer Stelle im HTML-Code platzieren (z.B. in einer Frage). In diesem Fall platzieren sie den obigen PHP-Code, welcher den JavaScript-Code einbindet, am Ende der Seite. Sonst dort, wo der Countdown angezeigt werden soll.
<!-- HTML-Element zur Anzeige der Zeit --> <div id="timeDisplay" style="font-size: 200%; margin: 16px 0; text-align: center">–</div> <script type="text/javascript"> <!-- // Verbleibende Zeit initialisieren var timeLeft = %timeLeft%; var timeStart = new Date(); // Funkton zur Aktualisierung der Anzeige und Prüfung der Zeit function updateCountdown() { // Zeit berechnen var now = new Date(); var timePage = Math.floor((now.getTime() - timeStart.getTime()) / 1000); // Vergangene Zeit [Sek.] var remain = timeLeft - timePage; // Zeit abgelaufen? if (remain <= 0) { remain = 0; // Timer stoppen window.clearInterval(timerInterval); // Eine Meldung anzeigen (optional) alert("Die Zeit ist vorbei."); // Den Teilnehmer zur nächsten Seite weiterleiten (optional) // SoSciTools.submitPage(); } // Zeit anzeigen var display = document.getElementById("timeDisplay"); if (!display) { return; } while (display.lastChild) { display.removeChild(display.lastChild); } var minutes = Math.floor(remain / 60); var seconds = String(remain - 60 * minutes); if (seconds.length < 2) { seconds = "0" + seconds; } var displayText = String(minutes) + ":" + seconds; var displayNode = document.createTextNode(displayText); display.appendChild(displayNode); } // Initialisierung var timerInterval = window.setInterval(updateCountdown, 250); updateCountdown(); // --> </script>