Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:dynamic [13.09.2023 21:29] – admin
+++ de:create:dynamic [23.10.2026 14:44] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 10: / Zeile 10: @@
 ===== Grundwissen =====
-  - 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 ...
+  - In JavaScript gibt es so genannte //Event Handler//. Das sind Funktionen, die durch Aktionen des Nutzers auf der Seite ausgelöst werden. Die Aktion 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,
@@ Zeile 18: / Zeile 18: @@
   - 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.
-    * Am einfachsten ermitteln Sie die ID eines Elements mit den [[:de:general:browser-tools]]. Diese Werkzeuge können Ihnen den HTML-Code eines Elements (z.B. eines Auswahlfeldes) zeigen -- inkl. der HTML-ID (''%%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.
+    * Am einfachsten ermitteln Sie die ID eines Elements mit den [[:de:general:browser-tools]]. Diese Werkzeuge können Ihnen den HTML-Code eines Elements (z.B. eines Auswahlfeldes) zeigen -- inkl. der HTML-ID (''%%id="AB01_01"%%''). Wenn Sie in den Entwickler-Werkzeugen 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.
     * 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 (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 35: / Zeile 34: @@
-===== 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.
+Der folgende JavaScript-Code muss auf der Fragebogen-Seite platziert werden, auf welcher die Fragen "JN01" und "TX01" stehen. Entweder (a) als Textbaustein (//Darstellung:// "HTML-Code"), der auf die Seite gezogen wird, oder (b) als "HTML-Code" Element auf der Seite.
+<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>
+Alternativ kann die Funktionalität auch ohne ''SoSciTools'' wie folgt implementiert werden:
 <code javascript>
@@ Zeile 74: / 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 113: / Zeile 147: @@
     toggle();
 }
-// -->
-</script>
 </code>
@@ Zeile 125: / Zeile 155: @@
 </code>
-Mit diesem Aufruf zusammen funktioniert der Code wie im vorigen Beispiel. Aber natürlich kann man diese eine Zeil mit weiteren Kennungen mehrfach wiederholen:
+Mit diesem Aufruf zusammen funktioniert der Code wie im vorigen Beispiel. Aber natürlich kann man diese eine Zeile mit weiteren Kennungen mehrfach wiederholen:
 <code>
@@ Zeile 133: / Zeile 163: @@
 </code>
-So lässt sich derselbe Filter sehr übersichtlich mehrfach auf einer Seite verwenden. So einfach funktioniert das natürlich nur dann, wenn alle Filterfragen und Folgefragen dieselbe Struktur haben. Durch das Kapseln in einer Funktion kann man aber generell das Problem umgehen, dass die Variablen unterschiedliche benannt sein müssen.
+So lässt sich derselbe Filter sehr übersichtlich mehrfach auf einer Seite verwenden. So einfach funktioniert das natürlich nur dann, wenn alle Filterfragen und Folgefragen dieselbe Struktur haben. Durch das Kapseln in einer Funktion kann man aber generell das Problem umgehen, dass die Variablen unterschiedlich benannt sein müssen.
-===== 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>
+Alternativ kann die Funktion auch ohne ''SoSciTools'' wie folgt implementiert werden.
 <code javascript>
@@ Zeile 162: / Zeile 203: @@
-===== 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>
+===== Schieberegler =====
+Die JavaScript-Klasse ''SoSciTools.ToggleSelection'' kann auch für Schieberegler verwendet werden. Geben Sie als ersten Parameter die Variablenkennung des Schieberegler-Items ein und an zweiter Stelle alle Werte, für welche die Fragen(n) angezeigt werden sollen.
+<code javascript>
+<script type="text/javascript">
+window.addEventListener("load", function() {
+  // Frage TX01 anzeigen, wenn im Schieberegler SL01_01 ein Wert zwischen 91 und 101 eingestellt wurde
+  new SoSciTools.ToggleSelection("SL01_01", [91,92,93,94,95,96,97,98,99,100,101], ["TX01_qst"]);
+});
+</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 171: / Zeile 250: @@
 **Tipp:** Das dynamische Einblenden von Fragen funktioniert auch in Kombination mit der [[:de:create:table-layout|Platzierung von Fragen nebeneinander]].
 ==== Fragebogen-Seite ====
@@ Zeile 205: / Zeile 285: @@
   var frage2 = document.getElementById("blockAB07");
   if (auswahl == 2) {
-    frage2 .style.display = "";
+    frage2.style.display = "";
   } else {
-    frage2 .style.display = "none";
+    frage2.style.display = "none";
   }
   var frage3 = document.getElementById("blockAB08");
   if (auswahl == 3) {
-    frage3 .style.display = "";
+    frage3.style.display = "";
   } else {
-    frage3 .style.display = "none";
+    frage3.style.display = "none";
   }
 }
@@ Zeile 236: / Zeile 316: @@
 In diesem Beispiel soll ein Skalenitem mit 5 Auswahlmöglichkeiten (1="überhaupt nicht" bis 5="sehr häufig") mit einem Textfeld gekoppelt werden. Das Textfeld soll nur angezeigt werden, wenn mindestens 3 ("hin und wieder") ausgewählt wurde.
-Außerdem soll die Lösung nicht nur für ein Item-Pärchen genutzt werden, sondern gleich für eine ganze Batterie (10 Skalen-Items und 10 Texteingabefelder, welche als [[:de:create:combine]] dargestellt werden). Damit das funktioniert, ohne dass der komplette Code 10-mal wiederholt werden muss, wird die JavaScript-Funktionnalität als Klasse (''function'') gekapselt. Diese Klasse wir dann für jedes der 10 Items genau einmal aufgerufen.
+Außerdem soll die Lösung nicht nur für ein Item-Pärchen genutzt werden, sondern gleich für eine ganze Batterie (10 Skalen-Items und 10 Texteingabefelder, welche als [[:de:create:combine]] dargestellt werden). Damit das funktioniert, ohne dass der komplette Code 10-mal wiederholt werden muss, wird die JavaScript-Funktionalität als Klasse (''function'') gekapselt. Diese Klasse wird dann für jedes der 10 Items genau einmal aufgerufen.
-Im folhenden Beispiel haben die Items folgende Kennungen:
+Im folgenden Beispiel haben die Items folgende Kennungen:
   * Skala: SK01_01 bis SK01_10
@@ Zeile 288: / Zeile 368: @@
  */
 function linkScaleToInput(itemID, inputID, show) {
-    // Wir benötigen zunächst alle Auswahldfelder des Skalenitems
+    // Wir benötigen zunächst alle Auswahlfelder des Skalenitems
     var radio = getScaleInputs(itemID);
     var element = document.getElementById(inputID);