SoSci Survey
Übersetzungen dieser Seite:
 

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 (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 (F5, Aktualisieren oder Neu Laden) oder durch de 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.

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). Diesen Textbaustein zieht man dann beim Zusammenstellen des Fragebogens in die entsprechende Fragebogen-Seite.

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

Andere Inhalte einblenden

In dem JavaScript-Code sehen Sie die Kennung (ID) buttonsAuto. Diese Kennung wird automatisch für die Knöpfe vergeben, die unten an der Fragebogen-Seite erscheinen – egal ob dort nur ein Weiter- oder auch ein Zurück-Knopf steht. Andere Objekte auf der Seite können Sie mit der entsprechenden HTML-ID ein- und ausblenden.

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

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

Anstatt des Textes (sinnvoll bei Textbausteinen) können Sie auch eine Frage im <DIV>-Tag platzieren. Dafür müssen Sie lediglich zwei HTML-Bausteine verwenden:

<div id="meinObject">
</div>

Zwischen diesen beiden HTML-Code Elementen wird die Frage oder ein anderer Inhalt platziert.

Platzhalter für den fehlenden 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
window.onload = 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>
de/create/timer-display.txt · Zuletzt geändert: 26.09.2011 14:56 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 3.0 Unported
Driven by DokuWiki