Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:text [18.08.2019 17:40] – admin
+++ de:create:questions:text [15.08.2025 16:00] (aktuell) – service
@@ Zeile 3: / Zeile 3: @@
 Die Texteingabe-Fragen unterstützen unterschiedliche Anwendungsfälle:
-  * Die "Offene Texteingabe" zeigt ein oder mehrere Eingabefelder für Text.
+=== Offene Texteingabe ===
+Die "Offene Texteingabe" zeigt ein oder mehrere Eingabefelder für Text.
     * Jedes Textfeld kann eine Beschriftung (davor und dahinter) haben.
     * Die Textfelder können ein- oder mehrzeilig ausgelegt werden -- es sind also auch große Eingabefelder für längere Texte möglich, spezifizieren Sie dafür eine Höhe für das Eingabefeld.
@@ Zeile 9: / Zeile 11: @@
     * In der Frage oder für einzelne Eingabefelder können Ausweichoptionen ("keine Antwort") aktiviert werden, die mit einem Kästchen zum ankreuzen rechts des Eingabefelds angezeigt werden.
     * Sie können festlegen, dass -- wenn Sie in den Eingabefeldern Zahlenwerte erwarten (z.B. Punkte) -- die Summe aller Eingabefelder einen konstanten Wert ergeben muss, bevor der Teilnehmer fortfahren kann. So können Sie den Teilnehmer z.B. 100% auf 5 Kategorien verteilen lassen.
-  * "Offene Nennungen" sind optimal geeignet, um Ideen oder Argumente zu sammeln -- also mehrere gleichartige Eingaben.
+=== Offene Nennungen ===
+"Offene Nennungen" sind optimal geeignet, um Ideen oder Argumente zu sammeln -- also mehrere gleichartige Eingaben.
     * Gegenüber einem mehrzeiligen Eingabefeld haben sie den Vorteil, dass jede Zeile in eine eigene Variable gespeichert wird -- außerdem wird die Anzahl der Angaben in einer gesonderten Variable ausgewiesen.
     * Standardmäßig zeigen die offenen Nennungen zunächst nur 2 Zeilen zur Texteingabe. Trägt der Teilnehmer in eine der Zeilen etwas ein, erscheinen sukzessive weitere Zeilen.
-  * Der "Lückentext" zeigt Texteingabefelder direkt in einem Fließtext an. Die einzelnen Eingabefelder können wie bei der "offenen Texteingabe" detailliert formatiert werden.
-  * Die [[::de:create:questions:suggest]] zeigt ein Textfeld (bzw. mehrere Kopien davon), für welches eine Reihe von möglichen Antworten hinterlegt sind. Sobald der Teilnehmer einige Buchstaben in das Eingabefeld eingibt, erscheinen passende Antwortoptionen zur Auswahl. Wird eine der vorgegeben Optionen ausgewählt, so wird die Antwort gleich kodiert -- optional kann man dem Teilnehmer gestatten, auch andere Texte einzugeben, die dann als Text im Datensatz abgelegt werden.
+=== Lückentext ===
-  * Beim "Ballontest" wird unter **Bilder und Mediendateien** zunächst ein Bild ins Projektverzeichnis hochgeladen. Die Frage zeigt dann ein ausgewähltes Bild, in welchem Sie ein oder mehrere Texteingabefelder platzieren können.
+Der "Lückentext" zeigt Texteingabefelder direkt in einem Fließtext an. Die einzelnen Eingabefelder können wie bei der "offenen Texteingabe" detailliert formatiert werden.
+=== Texteingabe mit Auswahlempfehlung ===
+Die [[::de:create:questions:suggest]] zeigt ein Textfeld (bzw. mehrere Kopien davon), für welches eine Reihe von möglichen Antworten hinterlegt sind. Sobald der Teilnehmer einige Buchstaben in das Eingabefeld eingibt, erscheinen passende Antwortoptionen zur Auswahl. Wird eine der vorgegeben Optionen ausgewählt, so wird die Antwort gleich kodiert -- optional kann man dem Teilnehmer gestatten, auch andere Texte einzugeben, die dann als Text im Datensatz abgelegt werden.
+=== Ballontest ===
+Beim "Ballontest" wird unter **Bilder und Mediendateien** zunächst ein Bild ins Projektverzeichnis hochgeladen. Die Frage zeigt dann ein ausgewähltes Bild, in welchem Sie ein oder mehrere Texteingabefelder platzieren können.
+===== Breite und Höhen von Texteingabefeldern =====
+Sie können für die //Breite// von Texteingabefeldern wie folgt festlegen:
+  * Keine Angabe bedeutet ...
+    * ... beim Lückentext, dass kein Eingabefeld angezeigt wird.
+    * ... beim der offenen Texteingabe, dass die gesamte Breite für das Eingabefeld genutzt werden soll.
+  * Eine Angabe von 1 bis 15 definiert die Anzahl an Zeichen, die im Eingabefeld Platz finden sollen. Diese Breite variiert mit der Größe der verwendeten Schriftart.
+  * Eine Angabe von 16 oder mehr (Standard: 200) definiert die Breite in Pixeln, welche für das Eingabefeld verwendet werden soll. Diese Breite ist unabhängig von Schriftgröße und Layout.
+Bei der offenen Texteingabe und bei [[:de:create:selection-textinput|Eingabefeldern in Auswahlfragen]] können Sie auch eine //Höhe// für die Eingabefelder festlegen.
+  * Wenn Sie keine Höhe eintragen, wird ein einzeiliges Eingabefeld erzeugt. Wenn der Text größer als das Eingabefeld ist, bewegt sich der Text nach links.
+  * Wenn Sie eine Höhe eintragen, dann wird __immer__ ein mehrzeiliges Eingabefeld erzeugt. Wenn mehr Text eingetragen wird als das Eingabefeld breit ist, dann bricht der Text in die nächste Zeile um.
+  * Wenn Sie zusätzlich die Option //Höhe automatisch anpassen// aktivieren, dann wird das Eingabefeld größer, wenn die Höhe für den Text nicht ausreicht.
+**Wichtig:** Tragen Sie __keine__ Höhe ein, wenn Sie keine mehrzeilige Eingabe erwarten. Falls Sie die Höhe von einzeiligen Eingabefeldern anpassen möchten, nehmen Sie eine entsprechende Änderung im [[:de:create:layout|Fragebogen-Layout]] vor.
@@ Zeile 62: / Zeile 95: @@
 <code php>
-option('script', 'SCEditor');
+library('SCEditor');
 </code>
@@ Zeile 89: / Zeile 122: @@
 Sie können detailliert festlegen, welche Formatierungen der Editor bereitstellt. Dafür wird v.a. die Zeile ''toolbar: ...'' angepasst. Details finden Sie in der [[http://www.sceditor.com/documentation/options/|Dokumentation des SCEditors]].
+==== Texteingabe formatieren ====
+Die JavaScript-Bibliothek bietet mit der Klasse ''SoSciTools.TextFormat'' eine Möglichkeit, eingegebenen Text nach eigenen Regeln zu formatieren, zum Beispiel:
+  * Text in Großbuchstaben umwandeln
+  * Text in Buchstabengruppen sortieren, z.B. ''ABC-FEF-GHI''
+Der folgende JavaScript-Code kombiniert mehrere Funktionen, um die Eingabe in dem Eingabefeld mit der Kennung "TX01_01" in 3er-Gruppen aus jeweils 3 Großbuchstaben zu sortieren. Es kann statt ''formatter()'' auch eine individuelle Funktion zum Formatieren des Textes genutzt werden.
+<code javascript>
+<script>
+function formatter(s) {
+    return SoSciTools.TextFormat.dash3(
+        SoSciTools.TextFormat.uppercase(
+            SoSciTools.TextFormat.alphanum(s)
+        )
+    );
+}
+window.addEventListener("load", function() {
+    new SoSciTools.TextFormat("TX01_01", formatter);
+});
+</script>
+</code>
@@ Zeile 211: / Zeile 270: @@
 </script>
 </code>
+==== Zeilen nacheinander einblenden ====
+Beim Fragetyp [[:de:create:questions:textmentions|Offene Nennungen]] werden neue Textzeilen angezeigt, wenn die Befragten "oben" etwas eingetragen haben. Dieses Verhalten kann man auch für Fragen des Typs "Texteingabe offen" anwenden.
+Dafür wird die JavaScript-Funktion ''SoSciTools.dynamicRows()'' verwendet. Diese Methode erwartet zwei Parameter, zum einen die Anzahl der leeren Eingabefelder/Zeilen, die "unten" sichtbar sein sollen. Zum anderen eine Liste (Array) der HTML-IDs der Eingabefelder.
+''void **SoSciTools.dynamicRows**(string //Anzahl//, array //Eingabefelder//)''
+Wenn man etwa die offene Texteingabe "TX03" mit 5 Items hat (Kennungen ''TX03_01'' bis ''TX03_05'') und jeweils 2 leere Eingabefelder anzeigen will, sähe der JavaScript-Code wie folgt aus:
+<code javascript>
+SoSciTools.dynamicRows(2, ["TX03_01", "TX03_02", "TX03_03", "TX03_04", "TX03_05"]);
+</code>
+Möchte man dies als HTML-Code in den Fragebogen einbinden, sind natürlich die ''<script>''-Tags zu ergänzen.
+<code html>
+<script type="text/javascript">
+<!--
+SoSciTools.dynamicRows(2, ["TX03_01", "TX03_02", "TX03_03", "TX03_04", "TX03_05"]);
+// -->
+</script>
+</code>
+Bei mehr Eingabefeldern ist es eleganter, die Liste der HTML-IDs mit einer FOR-Schleife zu erstellen. Für eine offene Texteingabe TX04 mit 40 Items könnte der JavaScript-Code aussehen wie folgt.
+<code javascript>
+// Liste der HTML-IDs erstellen
+var items = [];
+for (var i=1; i<=40; i++) {
+    var itemID = new String(i);
+    if (i < 10) {
+        itemID = "0" + itemID;
+    }
+    items.push("TX04_" + itemID)
+}
+// Dynamische Anzeige der Items
+SoSciTools.dynamicRows(2, items);
+</code>