Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
de:create:questions:text [09.04.2016 14:03] – JavaScript ergänzt admin | de:create:questions:text [10.09.2023 13:31] (aktuell) – [Texteingabe] admin | ||
---|---|---|---|
Zeile 3: | Zeile 3: | ||
Die Texteingabe-Fragen unterstützen unterschiedliche Anwendungsfälle: | Die Texteingabe-Fragen unterstützen unterschiedliche Anwendungsfälle: | ||
- | * Die " | + | === Offene Texteingabe === |
+ | |||
+ | Die " | ||
* Jedes Textfeld kann eine Beschriftung (davor und dahinter) haben. | * 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. | * 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 (" | * In der Frage oder für einzelne Eingabefelder können Ausweichoptionen (" | ||
* 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. | * 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 === | ||
+ | |||
+ | " | ||
* 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. | * 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. | * 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 === |
- | | + | |
+ | Der " | ||
+ | |||
+ | === Texteingabe mit Auswahlempfehlung === | ||
+ | |||
+ | Die [[:: | ||
+ | |||
+ | === Ballontest === | ||
+ | |||
+ | Beim " | ||
+ | |||
+ | |||
+ | ===== Breite und Höhen von Texteingabefeldern ===== | ||
+ | |||
+ | Sie können für die //Breite// von Texteingabefeldern wie folgt festlegen: | ||
+ | |||
+ | * Keine Angabe bedeutet ... | ||
+ | * ... beim Lückentext, | ||
+ | * ... beim der offenen Texteingabe, | ||
+ | * 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 [[: | ||
+ | |||
+ | * 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: | ||
+ | |||
+ | |||
+ | ===== Einschränkungen für den eingegeben Text ===== | ||
+ | |||
+ | Die offene Texteingabe (wie übrigens auch offene Eingabefelder in anderen Fragetypen) erlaubt eine automatische Überprüfung des Eingabeformats. Dies ist insbesondere dann empfehlenswert, | ||
+ | |||
+ | Wählen Sie links im **Fragenkatalog** zunächst die Frage und anschließend das Eingabefeld innerhalb der Frage aus. Bei Auswahlfragen wählen Sie die [[: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Alternativ können Sie in der Item-Eingabe innerhalb der Frage auf den Knopf zum Bearbeiten ({{:: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | In den Detaileinstellungen für das Eingabefeld finden Sie die // | ||
+ | |||
+ | **Hinweis: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Je nach gewähltem Format können weitere Einschränkungen festgelegt werden. Bei Zahlen etwas ein Wertebereich oder bei Buchstaben die Anzahl der Zeichen. | ||
+ | |||
+ | Für komplexere Formate steht die Einstellung // | ||
+ | |||
+ | <code regex> | ||
+ | / | ||
+ | </ | ||
+ | |||
+ | Für eine ausführliche Dokumentation regulärer Ausdrücke sei auf [[https:// | ||
Zeile 20: | Zeile 82: | ||
Unter anderem verwendet SoSci Survey JavaScript, um etwa die erlaubten Zeichen (Ziffern, Buchstaben, etc.) zu begrenzten. Mittels [[: | Unter anderem verwendet SoSci Survey JavaScript, um etwa die erlaubten Zeichen (Ziffern, Buchstaben, etc.) zu begrenzten. Mittels [[: | ||
+ | |||
==== Formatierungen erlauben ==== | ==== Formatierungen erlauben ==== | ||
- | Mithilfe der JavaScript-Bibliothek [[http:// | + | Mithilfe der JavaScript-Bibliothek [[http:// |
Erstellen Sie zunächst eine Frage vom Typ " | Erstellen Sie zunächst eine Frage vom Typ " | ||
Zeile 32: | Zeile 95: | ||
<code php> | <code php> | ||
- | option(' | + | library(' |
- | option(' | + | |
</ | </ | ||
- | Legen Sie unter **Textbausteine und Beschriftungen** einen neuen Textbaustein (z.B. mit der Kennung " | + | Legen Sie unter **Textbausteine und Beschriftungen** einen neuen Textbaustein (z.B. mit der Kennung " |
<code javascript> | <code javascript> | ||
Zeile 62: | Zeile 124: | ||
- | ==== Zeichen zählen ==== | + | ==== Zeichen zählen/ |
- | Die möchten | + | Sie können die Anzahl der Zeichen pro Texteingabefeld begrenzen, wenn Sie das Eingabefeld im **Fragenkatalog** auswählen. |
+ | |||
+ | Mit ein wenig JavaScript können Sie für ein Texteingabefeld | ||
<code javascript> | <code javascript> | ||
Zeile 76: | Zeile 140: | ||
var input = document.getElementById(textID); | var input = document.getElementById(textID); | ||
if (!input) { | if (!input) { | ||
- | alert(" | + | alert(" |
return; | return; | ||
} | } | ||
Zeile 118: | Zeile 182: | ||
Platzieren Sie die Texteingabefrage unter **Fragebogen zusammenstellen** auf einer Seite des Fragebogens. | Platzieren Sie die Texteingabefrage unter **Fragebogen zusammenstellen** auf einer Seite des Fragebogens. | ||
- | Weiterhin müssen Sie ein HTML-Element | + | Weiterhin müssen Sie ein HTML-Tag auf der Seite platzieren, an dessen Stelle die Anzahl der Zeichen angezeigt werden soll. Dies kann etwa direkt im Fragetext sein, in der Beschriftung des Eingabefeldes oder als Textbaustein unter dem Eingabefeld. Das HTML-Element kann etwa wie folgt aussehen: |
<code html> | <code html> | ||
Zeile 124: | Zeile 188: | ||
</ | </ | ||
- | Die Kennung bei '' | + | Die Kennung bei '' |
- | Anschließend binden Sie den Textbaustein mittels folgendem PHP-Code in den Fragebogen ein -- und zwar unterhalb der Texteingabe-Frage. | + | Anschließend binden Sie den Textbaustein mittels folgendem PHP-Code in den Fragebogen ein -- und zwar unterhalb der Texteingabe-Frage |
<code php> | <code php> | ||
Zeile 136: | Zeile 200: | ||
</ | </ | ||
- | Falls Sie für den Textbaustein eine andere Kennung als " | + | Falls Sie für den Textbaustein eine andere Kennung als " |
+ | |||
+ | |||
+ | ==== Wörter zählen ==== | ||
+ | |||
+ | Die Zählung von Wörtern ist ein wenig anspruchsvoller: | ||
+ | |||
+ | Der folgende HTML-/ | ||
+ | |||
+ | Am Ende des Codes muss die Kennung des Texteingabefelds eingetragen werden. | ||
+ | |||
+ | <code javascript> | ||
+ | <!-- Anzeige der Wortanzahl --> | ||
+ | <div style=" | ||
+ | <span id=" | ||
+ | </ | ||
+ | |||
+ | <script type=" | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | function WordCounter(inputID, | ||
+ | var textinput = document.getElementById(inputID); | ||
+ | var textout = document.getElementById(outputID); | ||
+ | |||
+ | // Wörter sind hier definiert als 2+ Buchstaben | ||
+ | var tester = new XRegExp(" | ||
+ | |||
+ | function refresh() { | ||
+ | var text = textinput.value; | ||
+ | var words = XRegExp.match(text, | ||
+ | textout.innerHTML = words.length; | ||
+ | } | ||
+ | |||
+ | textinput.addEventListener(" | ||
+ | refresh(); | ||
+ | } | ||
+ | |||
+ | // Hier die Kennung des Texteingabefelds eintragen | ||
+ | new WordCounter(" | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Zeilen nacheinander einblenden ==== | ||
+ | |||
+ | Beim Fragetyp [[: | ||
+ | |||
+ | Dafür wird die JavaScript-Funktion '' | ||
+ | |||
+ | '' | ||
+ | |||
+ | Wenn man etwa die offene Texteingabe " | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | SoSciTools.dynamicRows(2, | ||
+ | </ | ||
+ | |||
+ | Möchte man dies als HTML-Code in den Fragebogen einbinden, sind natürlich die ''< | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | |||
+ | SoSciTools.dynamicRows(2, | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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 = " | ||
+ | } | ||
+ | items.push(" | ||
+ | } | ||
+ | |||
+ | // Dynamische Anzeige der Items | ||
+ | SoSciTools.dynamicRows(2, | ||
+ | </ |