Timer: Countdown über mehrere Seiten

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. Dies wird mittels JavaScript realisiert.

Den JavaScript-Code speichern Sie als Text (Rubrik → Text hinzufügen). Damit der Inhalt als JavaScript-Code interpretiert wird, wählen Sie als Darstellung „HTML-Code“.

<!-- HTML-Element zur Anzeige der Zeit -->
<div id="timeDisplay" style="font-size: 200%; margin: 16px 0; text-align: center">&ndash;</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>

Tipp: 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.

Tipp: Beachten Sie auch die ersten beiden Zeilen, die noch keine JavaScript, sondern einfach nur HTML-Code enthalten. Diesen 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.

Zur Einbindung des JavaScript-Codes ist nochmals ein wenig PHP-Code auf der Fragebogen-Seite erforderlich. Folgender PHP-Code übergibt die verbleibende Zeit als Platzhalter %timeLeft%.

// JavaScript zur Anzeige der verbleibenden Zeit
$timeLeft = $timeout - time();
// Statt JS01 muss hier die Kennung des Textes eingetragen werden
show('JS01', array(
  '%timeLeft%' => $timeLeft
));

Auch dieser PHP-Code ist auf jeder Seite erforderlich, die den Countdown zeigen soll.

Hinweis: Damit show() korrekt funktioniert, speichern Sie den JavaScript-Code bitte nicht als Textbaustein sondern als Text in einer Rubrik im Fragenkatalog. Als Darstellungsmodus für den Text wählen Sie bitte „HTML-Code“.