Inhaltsverzeichnis

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:

Funktion

  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.

Umsetzung

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.

Andere Inhalte einblenden

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>

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: 

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

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: 

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