Timer: Weiter-Knopf nach bestimmter Zeit einblenden

Dieses Kapitel beschreibt, wie man den Weiter- und Zurück-Knopf auf einer Fragebogen-Seite so manipuliert, dass sie erst nach einer vorgegebene Zeit erscheinen. Prinzipiell kann man mit der vorgestellten Lösung auch beliebige andere Inhalte erst nach einer vorgegeben Zeit präsentieren.

Diese Lösung basiert (wie die meisten dynamischen Inhalte) auf JavaScript und hat folgende Einschränkungen:

• Wenn ein Teilnehmer JavaScript gezielt deaktiviert, funktioniert die Automatik nicht. Damit der Teilnehmer dennoch teilnehmen kann, ist das Script so ausgelegt, dass der Weiter-Knopf ganz normal erscheint.
• Wenn der Teilnehmer die Seite erneut lädt (Taste F5, Aktualisieren oder Neu Laden) oder durch den Zurück-Knopf auf die Seite zurückkehrt, beginnt der Timer von vorne zu laufen. Den Zurück-Knopf auf der aktuellen und/oder folgenden Seite kann man mit der PHP-Funktion option() deaktivieren.

1. Wenn die Seite geladen wurde, wird der Weiter-Knopf mittels JavaScript ausgeblendet.
2. Anschließend wird ein Timer gestartet, der den Knopf nach einer vorgegeben Zeit wieder einblendet.

Man benötigt lediglich einen Textbaustein mit nachfolgendem Inhalt (anzulegen unter Textbausteine u. Beschriftung, Darstellung „HTML_Code“). Diesen Textbaustein zieht man dann beim Zusammenstellen des Fragebogens in die entsprechende Fragebogen-Seite.

<script type="text/javascript">
<!--
// Knopf zunächst ausblenden
SoSciTools.submitButtonsHide();
// Nach Ablauf von 60 Sek = 60000 ms wieder einblenden
window.setTimeout(
  SoSciTools.submitButtonsDisplay, 60000
)
// -->
</script>

Hinweis: Dieser JavaScript-Code verwendet die SoSci Survey spezifische Funktion SoSciTools.submitButtonsHide(), um alle Knöpfe auszublenden. Ebenso können Sie über document.getElementById("submit0") spezifisch den Weiter-Knopf identifizieren und dessen Eigenschaft .style.display auf den Wert "none" setzen. Für das wieder-Anzeigen des Knopfes müssen Sie dann ggf. eine eigene Funktion als Pendant ergänzen.

In dem JavaScript-Code sehen Sie die Kennung (HTML-ID) buttonsAuto. Diese Kennung wird automatisch für die Knöpfe vergeben, die unten auf der Fragebogen-Seite erscheinen – egal ob dort nur ein Weiter- oder auch ein Zurück-Knopf steht. Wenn Sie eine andere HTML-ID angeben, werden andere Objekte auf der Seite ein- und ausgeblendet.

Wenn Ihre Inhalte noch keine HTML-ID haben, dann können Sie einfach ein <DIV>-Tag außenherum setzen:

<div id="meinObjekt">
<h1>Überschrift</h1>
<p>Hier lesen Sie nun den geheimen Text.</p>
</div>

Anstatt des Textes können Sie auch einen Textbaustein, eine Frage oder andere Inhalte im <DIV>-Tag platzieren. Dafür müssen Sie lediglich zwei HTML-Bausteine verwenden, die Sie vor und nach dem entsprechenden Inhalt im Fragebogen:

<div id="meinObjekt">

</div>

Tipp: Für Fragen ist das nicht notwendig, weil diese bereits eine HTML-ID tragen (Fragen bei Auswahl einer bestimmten Option sofort einblenden).

Der entsprechende HTML-/JavaScript-Code würde dann wie folgt aussehen:

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Knöpfe
function showContent() {
  var content = document.getElementById("meinObjekt");
  // Den normalen Anzeigemodus wiederherstellen
  content.style.display = "";
}
 
// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("meinObjekt");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 60000); // Nach 1 Min = 60.000 ms
  }
);
 
// -->
</script>

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:

<script type="text/javascript">
<!--
 
// Funktion zum Einblenden der Knöpfe
function showButtons() {
  var buttons = document.getElementById("buttonsAuto");
  // Den normalen Anzeigemodus wiederherstellen
  buttons.style.visibility = "";
}
 
// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Die Knöpfe identifizieren
    var buttons = document.getElementById("buttonsAuto");
    // Die Knöpfe ausblenden (mit Platzhalter)
    buttons.style.visibility = "hidden";
    // Den Timer starten
    window.setTimeout(showButtons, 60000); // Nach 1 Min = 60.000 ms
  }
);
 
// -->
</script>

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:

<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>