Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- 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:17] (aktuell) – admin
@@ Zeile 1: / Zeile 1: @@
 ====== Eingabefelder frei platzieren ======
-Manchmal ist es sinnvoll, dass innerhalb einer Frage eine zusätzliche Texteingabe auftaucht - oder sogar eine Dropdown-Auswahl.
+Manchmal ist es sinnvoll, dass innerhalb einer Frage eine zusätzliche Texteingabe oder eine Dropdown-Auswahl erscheint.
 **Wichtig:** Bei der Auswahl oder Mehrfachauswahl kann man hinter einer Auswahloption einfach per Kreuzchen ein [[selection-textinput|Eingabefeld anzeigen]].
-Aber wie funktioniert das mit Skalen (s. Bild unten) und wie kann eine ganze Auswahl als Dropdown in einer anderen Frage erscheinen? SoSciSurvey stellt für diesen Zweck die PHP-Funktion ''[[:de:create:functions:prepare_input|prepare_input()]]'' zur Verfügung. Diese Anleitung beschreibt den Umgang mit dieser Funktion anhand des folgenden Beispiels.
+Aber wie funktioniert das mit Skalen (s. Bild unten) und wie kann eine ganze Auswahl als Dropdown in einer anderen Frage erscheinen? SoSci Survey stellt für diesen Zweck einen speziellen Platzhalter ''%input:...%'' zur Verfügung. Diese Anleitung beschreibt den Umgang mit dieser Funktion anhand des folgenden Beispiels.
 {{scr.inputs-single.complete.png?nolink|Beispiel für frei platzierte Eingabefelder}}
 ===== 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.
-Zunächst wird das Eingabefeld, das eingefügt werden soll, mit ''prepare_input()'' vorbereitet. Damit SoSciSurvey weiß, wo dieses vorbereitete Eingabefeld eingefügt werden soll, muss man in der anderen Frage einen sog. Platzhalter einfügen. Details dazu weiter unten.
+Zunächst werden die Eingabefelder, welche eingefügt werden sollen, im Fragenkatalog angelegt. Anschließend wird ein Platzhalter, bestehend aus ''%input:'', der Kennung der einzufügenden Frage oder des Items, und abgeschlossen von einem ''%'' dort eingefügt, wo das Eingabefeld später erscheinen soll.
 **Hinweis:** Bitte beachten Sie, dass nicht alle Frage-Typen als unabhängige Eingabefelder zur Verfügung stehen.
 ===== Methodische Fehler vermeiden =====
 Ein Texteingabefeld in einer Skala (so wie oben dargestellt) ist in aller Regel methodisch problematisch, wenn nicht gar überflüssig. Kein Interviewpartner wird dort etwas eintragen und in der Skala "nutze ich nie" o.ä. eintragen -- es sei denn, es mangelt ihm am nötigen Ernst. Auch sind vermeintlich standardisierte Skalen-Bewertungen ungestützter Nennungen nie mit den Bewertungen gestützter Nennungen vergleichbar. Oft ist es sinnvoller, eine Texteingabe mit einem einzigen Item ''"Sonstiges:"'' direkt unter die eigentliche Frage zu stellen: [[concat|Fragen aneinanderhängen]]
 ===== Schritt für Schritt =====
@@ Zeile 25: / Zeile 28: @@
 Legen Sie eine Rubrik mit der //Kennung// "ZE" an, //Beschreibung// z.B. "Frei platzierte Eingabefelder").
-Erstellen Sie zunächst die übergeordnete Frage (ZE01), in der später die Eingabefelder erscheinen sollen. Im obigen Beispiel ist das eine Frage vom //Typ// "Skala (voll beschriftet)".
+Erstellen Sie eine Frage ZE01 vom //Typ// "Texteingabe". In dieser Frage legen Sie ein Item an. Bei den Texteingabefeldern ist es sinnvoll, eine Breite vorzugeben -- im Beispiel 120 Pixel. Der Item-Text wird später nicht angezeigt, dennoch ist es sinnvoll, einen Text für das Item anzugeben: Er taucht im Datenexport als Variablen-Label auf.
-{{scr.inputs-single.outer_incomplete.png?nolink|Beispiel für frei platzierte Eingabefelder}}
-Erstellen Sie eine weitere Frage ZE02 mit dem //Typ// "Texteingabe". In dieser Frage legen Sie ein Item an. Bei den Texteingabefeldern ist es sinnvoll, eine Breite vorzugeben -- im Beispiel 120 Pixel. Der Item-Text wird später nicht angezeigt, dennoch ist es sinnvoll, einen Text für das Item anzugeben: Er taucht im Datenexport als Variablen-Label auf.
 {{scr.inputs-single.inner1.png?nolink|Texteingabefeld für die freie Platzierung}}
-Erstellen Sie eine dritte Frage ZE03 vom //Typ// "Auswahl (Dropdown)" mit 3 Auswahloptionen.
+Erstellen Sie eine weitere Frage ZE02 vom //Typ// "Auswahl (Dropdown)" mit 3 Auswahloptionen.
 {{scr.inputs-single.inner2.png?nolink|Dropdown-Auswahl für die freie Platzierung}}
-Nun müssen in die eigentliche Frage ZE01 noch Platzhalter eingebaut werden (zu weiteren Möglichkeiten siehe auch [[placeholders|Platzhalter]]). Dazu werden in der Skala im Folgenden zwei Items mit dem Text "Sonstiges:" plus Platzhalter angelegt:
+Erstellen Sie nun die übergeordnete Frage (ZE03), in der später die Eingabefelder erscheinen sollen. Im obigen Beispiel ist das eine Frage vom //Typ// "Skala (voll beschriftet)".
-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: ''%ZE02_01%''. Fügen Sie also in die Frage ZE01 ein neues Item mit folgendem //Item-Text// ein: "Sonstiges: %ZE02_01%"
+{{scr.inputs-single.outer_incomplete.png?nolink|Beispiel für frei platzierte Eingabefelder}}
-{{scr.inputs-single.placeholder.png?nolink|Platzhalter für Eingabefelder}}
+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 "Sonstiges:" plus Platzhalter angelegt:
-In der Vorschau erscheint noch nicht viel - der Platzhalter wird lediglich farblich hervorgehoben, das Eingabefeld wird erst später im Fragebogen erscheinen.
+Das erste zusätzliche Eingabefeld entstammt dem Item 01 der Texteingabe ZE01 (s. oben). Die Kennung dieses Items lautet ZE01_01. Als Platzhalter verwenden Sie diese Kennung mit vorangestelltem ''input:'' und in Prozent-Zeichen: ''%input:ZE01_01%''. Fügen Sie also in die Frage ZE03 ein neues Item mit folgendem //Item-Text// ein:
-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:
+    Sonstiges: %input:ZE01_01%
-{{scr.inputs-single.placeholder_preview.png?nolink|Platzhalter in der Frage-Vorschau}}
+{{scr.inputs-single.placeholder.png?nolink|Platzhalter für Eingabefelder}}
-Nun benötigen Sie einen Fragebogen. Beim Zusammenstellen des Fragebogens fügen Sie zunächst ein Element //PHP-Code// ein ([[php|Einführung in PHP-Code]]). Im PHP-Code werden die beiden Eingabefelder mit [[:de:create:functions:prepare_input|prepare_input()]] vorbereitet und anschließend (!) die Frage ZE01 gestellt:
+Das andere Eingabefeld ist eine Dropdown-Auswahl. Hier benötigen wir also nicht nur ein Item, sondern die ganze Frage ZE02. Entsprechend fügen Sie in Frage ZE03 bitte noch folgendes Item ein:
-<code php>
-prepare_input('ZE02_01');  // Item 1 der Texteingabe-Frage ZE02
-prepare_input('ZE03');     // Auswahl-Frage (Dropdown) ZE03
-question('ZE01');          // Skala mit den Platzhaltern
-</code>
-**Hinweis:** Die Frage könnten Sie natürlich auch einfach in die Seite hineinziehen. Es ist nur wichtig, dass die Frage nach (unter) den ''prepare_input()'' Befehlen kommt.
+    Sonstiges: %input:ZE02%
-Starten Sie nun den Fragebogen mit dem {{:button.run.here.gif?nolink|Starten ab hier}}-Knopf ab der aktuellen Seite. SoSciSurvey fügt die vorbereiteten Eingabefelder nun automatisch in die Frage ein.
 {{scr.inputs-single.complete.png?nolink|Beispiel für frei platzierte Eingabefelder}}
@@ Zeile 66: / Zeile 57: @@
 ===== 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 `prepare_input()` platziert werden, dann sind diese zunächst nicht mit der zugehörigen Auswahloption verknüpft. Dies lässt sich mittels [[:de:create:javascript|JavaScript]] einrichten.
+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 Platzhalter eingefügt werden, dann sind diese zunächst nicht mit der zugehörigen Auswahloption verknüpft. Dies lässt sich mittels [[:de:create:javascript|JavaScript]] einrichten.
@@ Zeile 75: / Zeile 66: @@
 <code javascript>
 <script type="text/javascript">
-QuestionSelect.LinkSelect2Text("AU01_12", "TE01_01");
+S2Selection.linkOptionToInput("AU01_12", "TE01_01");
 </script>
 </code>
-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 ''TE01_01'' verwendet worden.
@@ Zeile 87: / Zeile 78: @@
 <code javascript>
 <script type="text/javascript">
-QuestionSelect.LinkSelect2Text("AU01_12", "TE01_01");
+S2Selection.linkOptionToInput("AU01_12", "TE01_01");
-QuestionSelect.LinkSelect2Text("AU01_16", "TE01_02");
+S2Selection.linkOptionToInput("AU01_16", "TE01_02");
-QuestionSelect.LinkSelect2Text("AU01_221", "TE01_03");
+S2Selection.linkOptionToInput("AU01_221", "TE01_03");
+</script>
+</code>
+**Tipp:** Standardmäßig sorgt ''S2Selection.linkOptionToInput()'' dafür, dass der Inhalt eines Eingabefelds wieder entfernt wird, wenn die zugehörige Auswahloption abgewählt wird. Falls Sie das nicht wünschen, können Sie als dritten Parameter ''true'' eintragen.
+==== 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 ''QuestionSelect.linkOptionToInput()'' erreichen. Geben Sie als ersten Parameter die Kennung der Auswahloption an (z.B. ''AB01_02'' für die Option Nr. 2 in Auswahlfrage AB01) und als zweiten Parameter die Kennung des Dropdown (oder eines Texteingabefelds).
+<code javascript>
+<script type="text/javascript">
+S2Selection.linkOptionToInput("AB01_02", "AB03");
 </script>
 </code>