Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:dynamic [10.07.2014 11:55] – Aktualisierung: SoSciTools und AB01_qst admin
+++ de:create:dynamic [17.08.2017 11:40] – [Fragebogen-Seite] georgroehl
@@ Zeile 1: / Zeile 1: @@
 ====== Fragen bei Auswahl einer bestimmten Option sofort einblenden ======
-[[filters|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. Solche dynamischen Veränderungen der Seite erfordern JavaScript, weil der Server über die Antworten erst viel zu spät, nämlich erst nach dem Klick auf "Weiter" informiert wird.
+[[filters|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 [[:de:glossary#javascript|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 der Seite möglich. Diese Anleitung beschränkt zeigt, wie man damit eine Frage in Abhängigkeit einer Antwort ein- bzw. auszublenden kann.
+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.
 ===== Grundwissen =====
   - In JavaScript gibt es so genannte //Event Handler//. Das sind Funktionen, die ausgeführt werden, wenn der Benutzer irgend etwas auf der Seite macht -- wenn also Ereignisse (//Events//) auf der Seite passieren. Solche Ereignisse können ein Klick des Teilnehmers sein (''click''), die Änderung einer Dropdown-Auswahl oder einer offenen Textangabe (''onchange''), die Berührung eines Bildelements mit der Maus (''mouseover''), etc.
-  - Jedes Element einer (HTML-)Internetseite hat eine ganze Reihe von Eigenschaften. SoSci Survey erstellt die einzelnen Fragebogen-Seite als HTML-Seite -- und alle Fragen und Eingabefelder sind ihrerseits HTML-Elemente, deren Eigenschaften durch JavaScript beeinflusst werden können. Eine solche Eigenschaft ist der Darstellungsstil (''style'') und darin konkret der Anzeigemodus (''display''), der dafür sorgt, dass ein Element angezeigt wird (''block'' oder ''inline'') oder eben nicht (''none'').
+  - Jedes Element einer (HTML-)Internetseite hat eine ganze Reihe von Eigenschaften. SoSci Survey erstellt die einzelne Fragebogen-Seite als HTML-Seite -- und alle Fragen und Eingabefelder sind ihrerseits HTML-Elemente, deren Eigenschaften durch JavaScript beeinflusst werden können. Eine solche Eigenschaft ist der Darstellungsstil (''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'').
-  - Die Elemente einer HTML-Seite lassen sich am einfachsten anhand ihrer HTML-ID ansprechen. SoSci Survey vergibt für alle Eingabefelder automatisch IDs, die sich an der Frage- bzw. Itemkennung orientieren.
+  - Die Elemente einer HTML-Seite lassen sich am einfachsten anhand ihrer HTML-ID ansprechen. SoSci Survey vergibt für alle Eingabefelder automatisch HTML IDs, die sich an der Frage- bzw. Itemkennung orientieren.
-    * Am einfachsten ermitteln Sie die ID eines Elements mit den Entwickler-Werkzeugen Ihres Browsers (je nach browser an unterschiedlicher Stelle). Diese Werkzeuge können Ihnen den HTML-Code eines Elements (z.B. eines Auswahlfeldes) zeigen -- inkl. der HTML-ID (''id="AB01_01"''). Alternativ können Sie sich den Quelltext der HTML-Seite im Browser anzeigen lassen und das entsprechende Element suchen.
+    * Am einfachsten ermitteln Sie die ID eines Elements mit den Entwickler-Werkzeugen Ihres Browsers (je nach Browser an unterschiedlicher Stelle zu finden). Diese Werkzeuge können Ihnen den HTML-Code eines Elements (z.B. eines Auswahlfeldes) zeigen -- inkl. der HTML-ID (''%%id="AB01_01"%%''). Alternativ können Sie sich den Quelltext der HTML-Seite im Browser anzeigen lassen und dort das entsprechende Element suchen.
-    * Für Fragen vergibt SoSci Survey jeweils eine HTML-ID bestehend aus der Frage-Kennung, einem Unterstrich (''_'') und ''qst'' (z.B. ''AB01_qst'' für Frage AB01).
+    * Für Fragen vergibt SoSci Survey jeweils eine HTML-ID bestehend aus der Frage-Kennung, einem Unterstrich (''_'') und ''qst'' (z.B. ''AB01_qst'' für Frage "AB01").
-  - In SoSci Survey kann man beliebige Inhalte in eine Fragebogenseite aufnehmen. Also auch JavaScript Code. Dies geschieht am einfachsten, indem man den Code unter **Textbausteine u. Beschriftung** als Textbaustein speichert und diesen Textbaustein beim **Fragebogen zusammenstellen** in die Seite zieht. Und zwar __unter__ die jeweilige Frage(n).
+  - In SoSci Survey kann man beliebige Inhalte in eine Fragebogenseite aufnehmen. Also auch JavaScript Code. Dies geschieht am einfachsten, indem man den Code unter **Textbausteine u. Beschriftung** als Textbaustein speichert (für die //Darstellung// muss man "HTML-Code" auswählen) und diesen Textbaustein beim **Fragebogen zusammenstellen** in die Seite zieht. Und zwar __unter__ die jeweilige Frage(n).
 **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.
@@ Zeile 18: / Zeile 18: @@
 **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 Sie die Barrierefreiheit Ihres Fragebogens reduzieren.
+**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.
-===== Beispiel 1: Sichtbare Auswahl =====
+**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.
-Abhängig von eine Ja/Vielleicht/Nein-Frage (JN01, sichtbare Auswahl) soll eine offene Textfrage (TX01) anzeigt werden.
 **Tipp:** Wenn der Teilnehmer sieht, dass eine der Auswahloptionen mit zusätzlicher Arbeit verbunden ist, dann könnte dies sein Antwortverhalten beeinflussen. Ein klassischer [[filters|Filter]] mit Abfrage der zweiten Frage auf der Folgeseite kann hier sinnvoller sein.
-Der folgende JavaScript-Code wird als Textbaustein gespeichert und __unter__ den Fragen in die Fragebogen-Seite gezogen.
+===== Beispiel 1: Sichtbare Auswahl =====
+Abhängig von eine Ja/Vielleicht/Nein-Frage ("JN01", sichtbare Auswahl) soll eine offene Textfrage ("TX01") anzeigt werden.
+Der folgende JavaScript-Code wird als Textbaustein gespeichert (//Darstellung:// "HTML-Code") und __unter__ den Fragen "JN01" und "TX01" in die Fragebogen-Seite gezogen.
 <code javascript>
@@ Zeile 38: / Zeile 41: @@
 function toogle() {
   // Die zwei Pipes (||) sind ein logisches "Oder"
-  // Also: Ist Option A ausgewählt oder ist B ausgewählt
+  // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt?
   if ((optionA.checked) || (optionB.checked)) {
-    frage.style.display = "";  // Wird nichts angegeben, wird die Farge angezeigt
+    // Wurde "Ja" oder "Vielleicht" ausgewählt, dann wird die Frage angezeigt
+    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
+    frage.style.display = "";
   } else {
-    frage.style.display = "none";  // Mit "none" wird die Frage ausgeblendet
+    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
+    frage.style.display = "none";
   }
 }
@@ Zeile 51: / Zeile 57: @@
 SoSciTools.attachEvent(optionC, "click", toogle);
-// Und jetzt soll sie auch schonmal ausgeführt werden, damit die Anzeige zu Beginn korrekt ist
+// 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>
 </code>
 ===== Beispiel 2: Dropdown =====
-Eine zusätzliche Frage (DD02) soll abhängig davon angezeigt werden, ob in einer Dropdown-Auswahl (DD01) eine bestimmte Option (z.B. 7) gewählt wurde.
+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.
 <code javascript>
 <script type="text/javascript">
 <!--
-var dropdown = document.getElementById("DD01");
+var dropdown = document.getElementById("DD01");  // Das Eingabefeld der Frage DD01
-var frage = document.getElementById("DD02_qst");
+var frage = document.getElementById("DD02_qst");  // Die Frage DD02, die ein-/auszublenden ist
 function toogle() {
@@ Zeile 75: / Zeile 83: @@
 }
-SoSciTools.attachEvent(dropdown, "change", toogle);
+SoSciTools.attachEvent(dropdown, "change", toogle);  // Bei einer Änderung der Auswahl die Anzeige anpassen
-toogle();
+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>
 </code>
 ===== Beispiel 3: Alternative Fragen =====
-Sie haben eine Dropdown-Auswahl 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.
+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.
 {{:de:create:scr.dynamic.example2.de.png?nolink|Ergebnis im Fragebogen}}
@@ Zeile 93: / Zeile 103: @@
 ==== Fragebogen-Seite ====
-Vielleicht können Sie einmal nicht nicht mit den standardmäßig vorhandenen HTML-IDs arbeiten -- etwas deshalb, weil Sie eine Frage mehrfach auf der Seite einbinden und jeweils unterschiedliche Items anzeigen. In diesem Fall werden die einzublendenen 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 ({{:button.settings.png?nolink|Einstellungen zur Anzeige der Frage}}).
+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 ({{:button.settings.png?nolink|Einstellungen zur Anzeige der Frage}}).
 {{:de:create:scr.dynamic.page2.png?nolink|Fragebogen-Seite mit allen notwendigen Elementen}}
@@ Zeile 99: / Zeile 109: @@
 ==== JavaScript-Code ====
-Der folgende HTML-/JavaScript-Code wird in einem Textaustein (z.B. mit der Kennung ''js_dynamic'') gespeichert:
+Der folgende HTML-/JavaScript-Code wird in einem Textbaustein (z.B. mit der //Kennung// "js_dynamic", //Darstellung:// "HTML-Code") gespeichert:
 <code javascript>
@@ Zeile 144: / Zeile 154: @@
 // Dropdowns verknüpft werden
 SoSciTools.attachEvent(dropdown, "change", blender);
+SoSciTools.attachEvent(dropdown, "click", blender);
 // -->
 </script>
 </code>