Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:dynamic [24.05.2022 18:02] – [Grundwissen] admin
+++ de:create:dynamic [13.09.2023 21:29] (aktuell) – 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 21: / Zeile 29: @@
 **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.
@@ Zeile 72: / Zeile 82: @@
 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>