Übersetzungen dieser Seite:
 

Dies ist eine alte Version des Dokuments!


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.

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

<script type="text/javascript">
<!--
 
// Nach dem Laden der Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Die Knöpfe ausblenden
    SoSciTools.submitButtonsHide();
    // Den Timer starten
    window.setTimeout(SoSciTools.submitButtonsDisplay, 60000); // Nach 1 Min = 60.000 ms
  }
);
 
// -->
</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 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
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>
de/create/timer-display.1452587198.txt.gz · Zuletzt geändert: 12.01.2016 09:26 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki