Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision | ||
de:create:dynamic [24.08.2021 21:14] – Neues Beispiel admin | de:create:dynamic [13.09.2023 13:33] – [Grundwissen] schimke.tu-berlin | ||
---|---|---|---|
Zeile 5: | Zeile 5: | ||
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. | 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, | ||
===== Grundwissen ===== | ===== 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 ('' | + | - In JavaScript gibt es so genannte //Event Handler//. Das sind Funktionen, die ausgeführt werden, wenn der auf der Seite aktiv ist -- wenn also //Events// auf der Seite passieren. Solche Ereignisse können ein Klick des Teilnehmers sein ('' |
- 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, | - 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, | ||
- 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. | - 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 " | + | * Am einfachsten ermitteln Sie die ID eines Elements mit den [[: |
* Für Fragen vergibt SoSci Survey jeweils eine HTML-ID bestehend aus der Frage-Kennung, | * Für Fragen vergibt SoSci Survey jeweils eine HTML-ID bestehend aus der Frage-Kennung, | ||
- In SoSci Survey kann man beliebige Inhalte in eine Fragebogenseite aufnehmen. Also auch JavaScript Code. Dies geschieht am einfachsten, | - In SoSci Survey kann man beliebige Inhalte in eine Fragebogenseite aufnehmen. Also auch JavaScript Code. Dies geschieht am einfachsten, | ||
Zeile 21: | Zeile 22: | ||
**Hinweis: | **Hinweis: | ||
+ | |||
+ | **Hinweis: | ||
**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. | **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 | + | ===== Beispiel |
Abhängig von einer Ja/ | Abhängig von einer Ja/ | ||
Zeile 39: | Zeile 42: | ||
var frage = document.getElementById(" | var frage = document.getElementById(" | ||
- | function | + | function |
// Die zwei Pipes (||) sind ein logisches " | // Die zwei Pipes (||) sind ein logisches " | ||
// Die Bedingung prüft 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? | ||
Zeile 53: | Zeile 56: | ||
// Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird | // Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird | ||
- | SoSciTools.attachEvent(optionA, | + | SoSciTools.attachEvent(optionA, |
- | SoSciTools.attachEvent(optionB, | + | SoSciTools.attachEvent(optionB, |
- | SoSciTools.attachEvent(optionC, | + | SoSciTools.attachEvent(optionC, |
// Und jetzt gleich soll sie auch 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) | // (z.B. ausblenden der Texteingabe zu Beginn) | ||
- | toogle(); | + | toggle(); |
// --> | // --> | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | ===== Beispiel 1b: 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. | ||
+ | |||
+ | Die naheliegende Lösung wäre es, den JavaScript-Code zu kopieren. Das funktioniert aber nicht ohne weiteres, weil die Variablen ('' | ||
+ | |||
+ | Nachfolgend wird der JavaScript-Code von oben in eine Funktion bzw. Klasse '' | ||
+ | |||
+ | Diese Anleitung lässt das ''< | ||
+ | |||
+ | <code javascript> | ||
+ | function DynamicFilter(auswahlID, | ||
+ | var optionA = document.getElementById(auswahlID | ||
+ | var optionB = document.getElementById(auswahlID | ||
+ | var optionC = document.getElementById(auswahlID | ||
+ | var frage = document.getElementById(frageID + " | ||
+ | |||
+ | function toggle() { | ||
+ | // Die zwei Pipes (||) sind ein logisches " | ||
+ | // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt? | ||
+ | if (optionA.checked || optionB.checked) { | ||
+ | // Wurde " | ||
+ | // Keine Angabe ("" | ||
+ | frage.style.display = ""; | ||
+ | } else { | ||
+ | // Mit der Anzeigeoption " | ||
+ | frage.style.display = " | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird | ||
+ | SoSciTools.attachEvent(optionA, | ||
+ | SoSciTools.attachEvent(optionB, | ||
+ | SoSciTools.attachEvent(optionC, | ||
+ | |||
+ | // Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist | ||
+ | // (z.B. ausblenden der Texteingabe zu Beginn) | ||
+ | toggle(); | ||
+ | } | ||
+ | |||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Alles andere bleibt gleich. Nun muss diese Klassen-Funktion noch aufgerufen werden, um eine neue Instanz der Klasse zu initialisieren. Dafür benötigt man das Schlüsselwort '' | ||
+ | |||
+ | < | ||
+ | new DynamicFilter(" | ||
+ | </ | ||
+ | |||
+ | Mit diesem Aufruf zusammen funktioniert der Code wie im vorigen Beispiel. Aber natürlich kann man diese eine Zeil mit weiteren Kennungen mehrfach wiederholen: | ||
+ | |||
+ | < | ||
+ | new DynamicFilter(" | ||
+ | new DynamicFilter(" | ||
+ | new DynamicFilter(" | ||
+ | </ | ||
+ | |||
+ | 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. | ||
Zeile 75: | Zeile 139: | ||
var frage = document.getElementById(" | var frage = document.getElementById(" | ||
- | function | + | function |
if (dropdown.value == " | if (dropdown.value == " | ||
frage.style.display = ""; | frage.style.display = ""; | ||
Zeile 83: | Zeile 147: | ||
} | } | ||
- | SoSciTools.attachEvent(dropdown, | + | SoSciTools.attachEvent(dropdown, |
- | SoSciTools.attachEvent(dropdown, | + | SoSciTools.attachEvent(dropdown, |
- | toogle(); // Und zu Beginn auch die korrekte Anzeige sicherstellen | + | toggle(); // Und zu Beginn auch die korrekte Anzeige sicherstellen |
// --> | // --> | ||
</ | </ |