Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision | ||
de:create:inputs-single [11.12.2017 21:27] – JavaScript Code zur Kopplung von Auswahlfeld und Texteingabe admin | de:create:inputs-single [30.11.2020 21:15] – Verwendung der einfacheren Funktion S2Selection.linkOptionToInput() admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Eingabefelder frei platzieren ====== | ====== Eingabefelder frei platzieren ====== | ||
- | Manchmal ist es sinnvoll, dass innerhalb einer Frage eine zusätzliche Texteingabe | + | Manchmal ist es sinnvoll, dass innerhalb einer Frage eine zusätzliche Texteingabe oder eine Dropdown-Auswahl |
**Wichtig: | **Wichtig: | ||
- | Aber wie funktioniert das mit Skalen (s. Bild unten) und wie kann eine ganze Auswahl als Dropdown in einer anderen Frage erscheinen? | + | Aber wie funktioniert das mit Skalen (s. Bild unten) und wie kann eine ganze Auswahl als Dropdown in einer anderen Frage erscheinen? |
{{scr.inputs-single.complete.png? | {{scr.inputs-single.complete.png? | ||
+ | |||
===== Technische Umsetzung ===== | ===== Technische Umsetzung ===== | ||
Zeile 13: | Zeile 14: | ||
Tatsächlich werden hier verschiedene Fragen zusammengefügt. In der Abbildung oben wurden in eine Skala (Frage 1) ein Item aus einer Texteingabe (Frage 2) und eine Dropdown-Auswahl (Frage 3) eingefügt. | Tatsächlich werden hier verschiedene Fragen zusammengefügt. In der Abbildung oben wurden in eine Skala (Frage 1) ein Item aus einer Texteingabe (Frage 2) und eine Dropdown-Auswahl (Frage 3) eingefügt. | ||
- | Zunächst | + | Zunächst |
**Hinweis: | **Hinweis: | ||
+ | |||
===== Methodische Fehler vermeiden ===== | ===== Methodische Fehler vermeiden ===== | ||
Ein Texteingabefeld in einer Skala (so wie oben dargestellt) ist in aller Regel methodisch problematisch, | Ein Texteingabefeld in einer Skala (so wie oben dargestellt) ist in aller Regel methodisch problematisch, | ||
+ | |||
===== Schritt für Schritt ===== | ===== Schritt für Schritt ===== | ||
Zeile 25: | Zeile 28: | ||
Legen Sie eine Rubrik mit der //Kennung// " | Legen Sie eine Rubrik mit der //Kennung// " | ||
- | Erstellen Sie zunächst die übergeordnete | + | Erstellen Sie eine Frage ZE01 vom //Typ// " |
- | + | ||
- | {{scr.inputs-single.outer_incomplete.png? | + | |
- | + | ||
- | Erstellen Sie eine weitere Frage ZE02 mit dem //Typ// " | + | |
{{scr.inputs-single.inner1.png? | {{scr.inputs-single.inner1.png? | ||
- | Erstellen Sie eine dritte | + | Erstellen Sie eine weitere |
{{scr.inputs-single.inner2.png? | {{scr.inputs-single.inner2.png? | ||
- | Nun müssen in die eigentliche | + | Erstellen Sie nun die übergeordnete |
- | Das erste zusätzliche Eingabefeld entstammt dem Item 01 der Texteingabe ZE02 (s. oben). Die Kennung dieses Items lautet ZE02_01. Als Platzhalter verwenden Sie diese Kennung und setzen Sie in Prozent-Zeichen: | + | {{scr.inputs-single.outer_incomplete.png? |
- | {{scr.inputs-single.placeholder.png? | + | Nun müssen in die übergeordnete Frage ZE03 noch Platzhalter eingebaut werden (zu weiteren Möglichkeiten siehe auch [[placeholders|Platzhalter]]). Dazu werden in der Skala im Folgenden zwei Items mit dem Text " |
- | In der Vorschau erscheint noch nicht viel - der Platzhalter | + | Das erste zusätzliche Eingabefeld entstammt dem Item 01 der Texteingabe ZE01 (s. oben). Die Kennung dieses Items lautet ZE01_01. Als Platzhalter |
- | Das andere Eingabefeld ist eine Dropdown-Auswahl. Hier benötigen wir also nicht nur ein Item, sondern die ganze Frage ZE03. Entsprechend fügen Sie in Frage ZE01 bitte noch folgendes Item ein: "Sonstiges: %ZE03%". Die Vorschau zeigt dann folgendes, wenig spektakuläres Bild: | + | |
- | {{scr.inputs-single.placeholder_preview.png? | + | {{scr.inputs-single.placeholder.png? |
- | Nun benötigen | + | Das andere Eingabefeld ist eine Dropdown-Auswahl. Hier benötigen |
- | + | ||
- | <code php> | + | |
- | prepare_input(' | + | |
- | prepare_input(' | + | |
- | question(' | + | |
- | </ | + | |
- | **Hinweis:** Die Frage könnten Sie natürlich auch einfach in die Seite hineinziehen. Es ist nur wichtig, dass die Frage nach (unter) den '' | + | Sonstiges: %input:ZE02% |
- | + | ||
- | Starten Sie nun den Fragebogen mit dem {{:button.run.here.gif? | + | |
{{scr.inputs-single.complete.png? | {{scr.inputs-single.complete.png? | ||
Zeile 66: | Zeile 57: | ||
===== Optimierung ===== | ===== Optimierung ===== | ||
- | Ein offenes [[selection-textinput|Eingabefeld in einer normalen Auswahlfrage]] sorgt automatisch dafür, dass die entsprechende Auswahloption ausgewählt wird, wenn der Teilnehmer etwas in das Textfeld schreibt. Wenn Texteingabefelder mittels | + | Ein offenes [[selection-textinput|Eingabefeld in einer normalen Auswahlfrage]] sorgt automatisch dafür, dass die entsprechende Auswahloption ausgewählt wird, wenn der Teilnehmer etwas in das Textfeld schreibt. Wenn Texteingabefelder mittels |
Zeile 75: | Zeile 66: | ||
<code javascript> | <code javascript> | ||
<script type=" | <script type=" | ||
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
</ | </ | ||
</ | </ | ||
- | Der erste Parameter in der Funktion `QuestionSelect.LinkSelect2Text()` gibt die HTML-Kennung des Eingabefelds an, im Beispiel also die Option mit dem Code 12 in Frage AU01 (eine erweiterte Auswahl, die Mehrfachauswahl erlaubt). Der zweite Parameter ist die HTML-Kennung des zugehörigen Texteingabefelds (hier das erste Eingabefeld in Frage TE01). | + | Der erste Parameter in der Funktion `S2Selection.linkOptionToInput()` gibt die HTML-Kennung des Eingabefelds an, im Beispiel also die Option mit dem Code 12 in Frage AU01 (eine erweiterte Auswahl, die Mehrfachauswahl erlaubt). Der zweite Parameter ist die HTML-Kennung des zugehörigen Texteingabefelds (hier das erste Eingabefeld in Frage TE01). |
Die Funktion `prepare_input()` (im PHP-Code weiter oben auf der Seite) wäre in diesem Beispiel für die Kennung '' | Die Funktion `prepare_input()` (im PHP-Code weiter oben auf der Seite) wäre in diesem Beispiel für die Kennung '' | ||
Zeile 87: | Zeile 78: | ||
<code javascript> | <code javascript> | ||
<script type=" | <script type=" | ||
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
- | QuestionSelect.LinkSelect2Text(" | + | S2Selection.linkOptionToInput(" |
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Auswahl und Dropdown ==== | ||
+ | |||
+ | Eine Auswahloption soll automatisch ausgewählt werden, wenn in einer (mittels Platzhalter eingefügten) Dropdown-Auswahl ein Wert ausgewählt wird? | ||
+ | |||
+ | Dies lässt sich mit der JavaScript-Funktion '' | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | new S2Selection.linkOptionToInput(" | ||
</ | </ | ||
</ | </ |