Dies ist eine alte Version des Dokuments!
Filterfragen ermöglichen es zwar, Inhalte bzw. Fragen in Abhängigkeit früherer Antworten anzuzeigen – aber manchmal soll eine zusätzliche Frage direkt auf derselben Fragebogen-Seite erscheinen. In diesem Fall spricht man von dynamischen Inhalten, weil sich Anzeige verändert, ohne dass eine neue HTML-Seite vom Browser übermittelt wurde. Dynamischen Veränderungen der Seite erfordern JavaScript, eine Programmiersprache, die im Browser des Teilnehmers läuft. Der Server erfährt zunächst nichts von den Änderungen, er erhält die Antworten erst nach dem Klick auf „Weiter“.
Prinzipiell sind mit JavaScript und dem Document Object Model (DOM) sehr umfassende Modifikationen innerhalb einer Fragebogenseite möglich, allerdings erfordert dies mitunter fortgeschrittene Programmier-Kenntnisse. Diese Anleitung beschränkt sich darauf, wie man damit eine Frage in Abhängigkeit einer Antwort ein- bzw. auszublendet.
click
), die Änderung einer Dropdown-Auswahl oder einer offenen Textangabe (onchange
), die Berührung eines Bildelements mit der Maus (mouseover
), etc.style
) und ein Teil davon ist der Anzeigemodus (display
). Der Anzeigemodus definiert, wie ein Element angezeigt wird (block
oder inline
) oder dass es eben nicht angezeigt wird (none
).id="AB01_01"
). Wenn Sie in den Entwickler-Werkezugen den „Inspektor“ auswählen, können Sie ein Element der Seite einfach anklicken, um die passenden Informationen zu finden. Alternativ können Sie sich den Quelltext der HTML-Seite im Browser anzeigen lassen und dort das entsprechende Element suchen._
) und qst
(z.B. AB01_qst
für Frage „AB01“).Wichtig: Damit Fragen dynamisch eingeblendet werden können, müssen sie schon (unsichtbar) auf der Seite vorhanden sein. Blenden Sie keine Pflichtfragen ein/aus: Auch wenn der Teilnehmer unsichtbare Fragen nicht beantworten kann, besteht SoSci Survey bei Pflichtfragen auf eine Antwort.
Hinweis: Sie sollten den JavaScript Code so gestalten, dass er die nicht-benötigten Inhalte ausblendet – nicht die benötigten einblendet. Das hat den Vorteil, dass Teilnehmer mit deaktiviertem JavaScript die Frage trotzdem beantworten können, weil sie hier gar nicht erst ausgeblendet wird.
Hinweis: Screenreader, die es Menschen mit Sehbehinderung erlauben, an Ihrer Befragung teilzunehmen, kommen mit dynamischen Inhalten nicht immer zurecht. Durch Verwendung dieser Funktion kann sich die Barrierefreiheit Ihres Fragebogens reduzieren.
Hinweis: Einige Fragetypen verwenden in der Standard-Einstellung je nach Bildschirm eine andere Darstellung (responsive Layout). In seltenen Fällen wird die Darstellung nicht korrekt gewählt, wenn Sie solche eine Frage per JavaScript einblenden. In diesem Fall stellen Sie für Darstellung in der Frage bitte eine andere Option als „dynamisch“ ein.
Tipp: Wenn der Teilnehmer sieht, dass eine der Auswahloptionen mit zusätzlicher Arbeit verbunden ist, dann könnte dies sein Antwortverhalten beeinflussen. Ein klassischer Filter mit Abfrage der zweiten Frage auf der Folgeseite kann hier sinnvoller sein.
Abhängig von einer Ja/Vielleicht/Nein-Frage („JN01“, sichtbare Auswahl) soll eine offene Textfrage („TX01“) angezeigt werden.
Der folgende JavaScript-Code wird als Textbaustein gespeichert (Darstellung: „HTML-Code“) und unter den Fragen „JN01“ und „TX01“ in die Fragebogen-Seite gezogen.
<script type="text/javascript"> <!-- var optionA = document.getElementById("JN01_01a"); // JN01_01a ist die HTML-ID der Auswahloption "Ja" var optionB = document.getElementById("JN01_02a"); // Option "Vielleicht" var optionC = document.getElementById("JN01_03a"); // Option "Nein" var frage = document.getElementById("TX01_qst"); // HTML-ID der Texteingabe function toogle() { // Die zwei Pipes (||) sind ein logisches "Oder" // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt? if ((optionA.checked) || (optionB.checked)) { // Wurde "Ja" oder "Vielleicht" ausgewählt, dann wird die Frage angezeigt // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen) frage.style.display = ""; } else { // Mit der Anzeigeoption "none" wird die Frage ausgeblendet frage.style.display = "none"; } } // Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird SoSciTools.attachEvent(optionA, "click", toogle); SoSciTools.attachEvent(optionB, "click", toogle); SoSciTools.attachEvent(optionC, "click", toogle); // Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist // (z.B. ausblenden der Texteingabe zu Beginn) toogle(); // --> </script>
Eine zusätzliche Frage („DD02“) soll abhängig davon angezeigt werden, ob in einer Dropdown-Auswahl („DD01“) eine bestimmte Option (z.B. jene mit Antwortcode „7“) ausgewählt wurde.
<script type="text/javascript"> <!-- var dropdown = document.getElementById("DD01"); // Das Eingabefeld der Frage DD01 var frage = document.getElementById("DD02_qst"); // Die Frage DD02, die ein-/auszublenden ist function toogle() { if (dropdown.value == "7") { // Hier den Wert (Antwortcode) eintragen, bei dem das zweite Dropdown eingeblendet werden soll frage.style.display = ""; } else { frage.style.display = "none"; } } SoSciTools.attachEvent(dropdown, "change", toogle); // Bei einer Änderung der Auswahl die Anzeige anpassen SoSciTools.attachEvent(dropdown, "click", toogle); // Auch beim Klick prüfen - sonst wird die Änderung evtl. erst beim Verlassen des Dropdowns wirksam toogle(); // Und zu Beginn auch die korrekte Anzeige sicherstellen // --> </script>
Sie haben eine Dropdown-Auswahl „AB05“ und möchten abhängig von der Auswahl eine weitere Auswahl anbieten. Dafür muss im vorliegenden Beispiel neben der ersten Auswahl (Lieblingsstadt) für jede Stadt eine weitere Auswahl (Sehenswürdigkeit) erstellt und auf der Seite eingebunden werden.
Tipp: Falls Sie auch eine sichtbare Auswahl in Erwägung ziehen, ermöglicht die Erweiterten Auswahl eine hierarchische Auswahl von Optionen bereits in einer dynamischen Variante.
Tipp: Das dynamische Einblenden von Fragen funktioniert auch in Kombination mit der Platzierung von Fragen nebeneinander.
Vielleicht können Sie einmal nicht nicht mit den standardmäßig vorhandenen HTML-IDs arbeiten – etwa deshalb, weil Sie eine Frage mehrfach auf der Seite einbinden und jeweils unterschiedliche Items anzeigen. In diesem Fall werden die einzublendenden Fragen mit DIV
-Elementen umschlossen. Dadurch wird die Fragebogen-Seite recht lang. Für die erste Frage ist als Abstand zur nächsten Frage der Wert 4 Pixel eingestellt ().
Der folgende HTML-/JavaScript-Code wird in einem Textbaustein (z.B. mit der Kennung „js_dynamic“, Darstellung: „HTML-Code“) gespeichert:
<script type="text/javascript"> <!-- var dropdown = document.getElementById("AB05"); function blender() { // Der Wert in value entspricht dem Antwortcode in der Variablen-Übersicht var auswahl = dropdown.value; // Allerdings ist der Wert zunächst keine Zahl, sondern ein Text auswahl = parseInt(auswahl); // Diese Prüfung wird für jede einzublendende Frage wiederholt var frage1 = document.getElementById("blockAB06"); if (auswahl == 1) { // Anzeigen frage1.style.display = ""; } else { // Ausblenden frage1.style.display = "none"; } var frage2 = document.getElementById("blockAB07"); if (auswahl == 2) { frage2 .style.display = ""; } else { frage2 .style.display = "none"; } var frage3 = document.getElementById("blockAB08"); if (auswahl == 3) { frage3 .style.display = ""; } else { frage3 .style.display = "none"; } } // Die Funktion sollte zunächst einmal direkt aufgerufen werden, // es müssen ja alle Dropdowns ausgeblendet werden blender(); // Nun muss die Funktion noch mit dem change-Ereignis des ersten // Dropdowns verknüpft werden SoSciTools.attachEvent(dropdown, "change", blender); SoSciTools.attachEvent(dropdown, "click", blender); // --> </script>