Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:dynamic [24.05.2022 18:02] – [Grundwissen] admin
+++ de:create:dynamic [12.04.2025 12:08] (aktuell) – [Dropdown] admin
@@ Zeile 4: / Zeile 4: @@
 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. ausblendet.
+**Tipp:** Falls der JavaScript-Code nicht auf Anhieb funktioniert, nutzen Sie bitte zur Fehlersuche die [[:de:general:browser-tools]].
 ===== 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.
+  - In JavaScript gibt es so genannte //Event Handler//. Das sind Funktionen, die durch Aktionen des Nutzers auf der Seite ausgelöst werden. Die Aktionen erzeugt ein //Event//, und dieses löst die verbundene JavaScript-Funktion, den //EventHandler// aus. Mögliche Events sind ...
+    * ''%%'click'%%'' -- der Klick auf ein Element,
+    * ''%%'mouseover'%%'' -- das Bewegen der Maus über ein Element,
+    * ''%%'change'%%'' -- die Auswahl einer Option in einem Dropdown oder die Änderung eines Texteingabefelds,
+    * ''%%'keypressed'%%'' -- ein Tastendruck
+    * und viele andere.
   - 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 HTML IDs, die sich an der Frage- bzw. Itemkennung orientieren.
@@ Zeile 14: / Zeile 22: @@
   - 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.
 **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.
@@ Zeile 21: / Zeile 28: @@
 **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 solch eine Frage per JavaScript einblenden. In diesem Fall stellen Sie für //Darstellung// in der Frage bitte eine andere Option als "dynamisch" ein.
+**Hinweis:** Wenn Sie eine einfache Auswahl oder Skala (also keine Mehrfachauswahl) als Filterfrage verwenden und im Fragebogen die Option "Kreuzchen in einfacher Auswahl oder Skala abwählbar" aktiviert haben, so liefert die Eigenschaft ''checked'' nach dem Abwählen einer Option weiterhin ''true'' statt ''false''. Verwenden Sie in diesem Fall das Event ''change'' statt ''click''.
 **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.
-===== Beispiel 1a: Sichtbare Auswahl =====
+===== Sichtbare Auswahl =====
 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.
+<code javascript>
+<script type="text/javascript">
+window.addEventListener("load", function() {
+  // Frage TX01 anzeigen, wenn in JN01 entweder 1 oder 2 ausgewählt wurde
+  new SoSciTools.ToggleSelection("JN01", [1,2], ["TX01_qst"]);
+});
+</script>
+</code>
+Alterantiv kann die Funktionalität auch ohne ''SoSciTools'' wie folgt implementiert werden:
 <code javascript>
@@ Zeile 64: / Zeile 85: @@
 </code>
-===== Beispiel 1b: Mehrere gleichartige Fragen =====
+===== Pflichtfragen =====
+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.
+Wenn Sie die Antwort auf eine (womöglich) ausgeblendete Frage prüfen möchten, verwenden Sie eine [[:de:create:checks-php]]. Dort prüfen Sie, ob die Frage ausgeblendet oder beantwortet wurde. Falls nicht, zeigen Sie die Seite erneut an.
+Nachfolgend ein Beispiel-Code passend zum obigen Beispiel mit der sichtbaren Auswahl. Bitte denken Sie daran, dass der PHP-Code entweder unten auf der Seite bei "Verarbeitung der Antworten mittels PHP" eingetragen werden muss oder oben auf der nächsten Seite des Fragebogens.
+<code php>
+if (
+    // Wird die Frage TX01 angezeigt?
+    ((value('JN01') == 1) || (value('JN01') == 2)) &&
+    // Fehlt die Antwort bei der Texteingabe-Frage TX01?
+    (trim(value('TX01_01')) == '')
+) {
+    // Seite erneut anzeigen
+    repeatPage();
+}
+</code>
+===== Mehrere gleichartige Fragen =====
 Mitunter kommt es vor, dass dieselbe Funktion auf einer Fragebogen-Seite mehrfach zum Einsatz kommt. Wenn wir das vorige Beispiel nehmen: Nehmen wir einmal an, dass auf der Seite nicht nur eine Auswahl mit Zusatzfrage ist, sondern vier Auswahlfragen mit vier Zusatzfragen.
@@ Zeile 72: / Zeile 116: @@
 Nachfolgend wird der JavaScript-Code von oben in eine Funktion bzw. Klasse ''DynamicFilter()'' gekapselt. Die 4 Auswahl-Zusatzfrage-Tupel unterscheiden sich in den Kennungen von Auswahlfrage und Zusatzfrage. Entsprechend hat die Funktion zwei Parameter ''auswahlID'' und ''frageID''. Diese Parameter werden für die Kennungen in den ersten Zeilen verwendet: Aus ''"JN01_01a"'' wird dann ''auswahlID + "_01"''.
-Diese Anleitung lässt das ''<script>''-Tag zu Beginn weg, wenn Sie den Code verwenden, müssen Sie natürlich ganz zu Beginn das ''<script type="javascript">'' und am Ende das ''</script>'' ergänzen.
+Diese Anleitung lässt das ''<script>''-Tag zu Beginn weg, wenn Sie den Code verwenden, müssen Sie natürlich ganz zu Beginn das ''<script type="text/javascript">'' und am Ende das ''</script>'' ergänzen.
 <code javascript>
@@ Zeile 126: / Zeile 170: @@
-===== Beispiel 2: Dropdown =====
+===== Dropdown =====
 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">
+window.addEventListener("load", function() {
+  // Frage DD02 anzeigen, wenn im Dropdown DD01 die Option 7 ausgewählt wurde
+  new SoSciTools.ToggleDropdown("DD01", [7], ["DD02_qst"]);
+});
+</script>
+</code>
+Alterantiv kann die Funktion auch ohne ''SoSciTools'' wie folgt implementiert werden.
 <code javascript>
@@ Zeile 152: / Zeile 207: @@
-===== Beispiel 3: Alternative Fragen =====
+===== Rangordnung =====
+Bei einer Rangordnungsfrage (z.B. "RK01") lässt sich die Änderung effizient über die von SoSci Survey bereitgestellte JavaScript-Instanz überwachen. Der folgende Beispiel-Code zeigt die Frage "AB01" an, wenn das Kärtchen 2 auf den Rangplatz 1, 2 oder 3 gelegt wird.
+<code javascript>
+<script>
+function toggle() {
+  var frage = document.getElementById('AB01_qst');
+  var input = s2.RK01.item(2).input;
+  if ((input.value >= 1) && (input.value <= 3)) {
+    frage.style.display = "";
+  } else {
+    frage.style.display = "none";
+  }
+}
+window.addEventListener("load", function() {
+    s2.RK01.addEventListener("click", toggle);
+});
+</script>
+</code>
+===== Alternative Fragen anbieten =====
 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.
@@ Zeile 161: / Zeile 239: @@
 **Tipp:** Das dynamische Einblenden von Fragen funktioniert auch in Kombination mit der [[:de:create:table-layout|Platzierung von Fragen nebeneinander]].
 ==== Fragebogen-Seite ====