Mitunter ist es hilfreich, wenn der Teilnehmer Informationen (einen kurzen Text o.ä.) nach Bedarf nochmal einblenden kann.
Hinweis: Umfangreichere Informationen können mittels textlink()
auch in einem eigenen Fenster geöffnet werden. Allerdings weiß man in diesem Fall nie, ob der Teilnehmer auch wieder zum Fragebogen zurück findet…
Der Inhalte einer Website (und damit einer Fragebogen-Seite) kann mittels JavaScript dynamisch verändert werden. Eine sehr einfache Veränderung ist das ein- und ausblenden von Inhalten. Die Information wird also eingebunden, bleibt aber zunächst unsichtbar.
Speichern Sie folgenden HTML-Code als Textbaustein und ziehen sie diesen in die Fragen-Seite. Die eigentliche Information müssen Sie natürlich selbst eintragen. Formatierungen mit HTML sind möglich.
<!-- Zunächst der Knopf zum Anzeigen der Info --> <button type="button" onclick="buttonShow()">Mehr Info</button> <!-- Und dann die Info-Box --> <div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC"> Hier kommt die Zusatz-Info <p style="text-align: center; margin-top: 20px"> <button type="button" onclick="buttonHide()">Schließen</button> </p> </div> <!-- Der JavaScript-Code --> <script type="text/javascript"> <!-- var info = document.getElementById("infoBox"); info.style.display = "none"; // Box ausblenden info.style.position = "absolute"; // Entweder fix auf der Seite platziert info.style.left = "50px"; info.style.top = "100px"; // Oder ein definiertes Stückchen unter dem Knopf info.style.marginTop = "10px"; function buttonShow() { // Infobox anzeigen info.style.display = ""; } function buttonHide() { // Infobox wieder ausblenden info.style.display = "none"; } //--> </script>
Der Anzeige-Knopf (im obigen Beispiel am Ende des Codes) kann auch an beliebiger anderer Stelle im Fragebogen (z.B. direkt im Frage-Text) platziert werden.
<!-- Der Knopf kann an beliebiger Stelle eingefügt werden --> <button type="button" onclick="buttonShow()">Mehr Info</button>
Statt des Textes kann man auch ein Bild verwenden. Das Bild müssen Sie natürlich zunächst in das Befragungsprojekt hochladen.
<!-- Hier alternativ ein grafischer Knopf --> <img src="infobutton.png" onclick="buttonShow()">
Mit einer kleinen Modifikation kann man auf den Klick auch verzichten und eine Info-Box anzeigen, wenn der Benutzer mit der Maus über ein Wort fährt:
<!-- Statt eines Knopfes kann man auch ein Wort im Text verwenden --> Wenn Sie eine <span onmouseover="buttonShow()" onmouseout="buttonHide()" style="border-bottom: 1px dotted">Erklärung</span> benötigen, fahren Sie mit der Maus über das markierte Wort. <!-- Und dann die Info-Box --> <div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC"> Hier steht eine zusätzliche Information. </div>
Der JavaScript-Code ist derselbe wie oben und muss noch an den HTML-Code angehängt – oder an beliebiger Stelle auf der Seite platziert – werden.
Sie können im Datensatz auch abspeichern, ob die Information angezeigt wurde. Dafür benötigen Sie eine interne Variable (Variablen in oFb). Die Frage zur internen Variable fügen Sie über dem Info-Textbaustein in die Seite ein.
var info = document.getElementById("infoBox"); var intVar = document.getElementById("AB01_01"); // Hier muss die Kennung der internen Variable eingetragen werden info.style.display = "none"; // Box ausblenden intVar.value = "1"; function buttonShow() { // Infobox anzeigen info.style.display = ""; // Abspeichern, dass der Button angeklickt wurde intVar.value = "2"; } function buttonHide() { // Infobox wieder ausblenden info.style.display = "none"; }