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