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-custom [01.10.2011 17:43] – [Einschränkungen] admin | de:create:inputs-custom [05.03.2017 14:00] – [Umsetzung] admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Eigene Formularelemente verwenden ====== | ====== Eigene Formularelemente verwenden ====== | ||
- | oFb bietet zwar eine große Auswahl von Fragetypen - mitunter | + | SoSci Survey |
- | **Tipp:** Bevor Sie mit der Programmierung eigener Formulare anfangen, prüfen Sie bitte auch einfachere Möglichkeiten unter [[de: | + | Mit diesem Werkzeug erhält man sehr viel Freiheit bei der Gestaltung des Fragebogens -- der Aufwand zum Programmieren der Formularelemente kann allerdings schnell ausarten. |
- | HTML-Formularelemente wie Texteingabefelder, | + | **Tipp:** Bevor Sie mit der Programmierung eigener Formulare beginnen, prüfen Sie bitte einfachere Möglichkeiten unter [[:de: |
- | Es liegt also nahe, oFb mitzuteilen, | ||
- | ===== Einschränkungen | + | ===== Problemstellung |
+ | |||
+ | HTML-Formularelemente (z.B. Texteingabefelder, | ||
+ | |||
+ | Das Problem liegt darin, dass SoSci Survey zunächst einmal nichts von den Formularelementen und den von ihnen übermittelten Daten weiß und die Antworten daher nicht speichert. Es liegt also nahe, SoSci Survey mitzuteilen, | ||
- | Bei der Verwendung benutzerdefinierter Formularelemente gibt es zwei wesentliche Einschränkungen: | ||
- | - Die Bedeutung der Werte (i.d.R. Zahlencodes) wird nicht im Datensatz gespeichert. Während bei einer gewöhnlichen Auswahl-Frage z.B. hinterlegt sein könnte, dass die 1 für " | ||
- | - Wenn Sie dem Teilnehmer einen Zurück-Knopf anbieten oder die Seite bei unvollständigen Angaben wiederholt wird, müssen Sie sich darum kümmern, dass Ihr Formularelement eine vorher gegebene Antwort anzeigt. Dazu können Sie den Wert mittels '' | ||
===== Umsetzung ===== | ===== Umsetzung ===== | ||
- | * Legen Sie zunächst im **Fragenkatalog** eine Frage vom Typ //Interne Variablen// an. | + | * Legen Sie zunächst im **Fragenkatalog** eine Frage vom Typ //[[: |
- | * In dieser Frage legen Sie nun mindestens eine Variable (entspr. ein Item) an - es ist sinnvoll, der Variable eine Beschriftung zu geben, diese taucht im Fragebogen nicht auf, wohl aber im Datensatz. Wenn Sie mehrere Formularelemente verwenden, legen Sie entsprechend mehrere Variablen (Items) an. | + | * In dieser Frage legen Sie nun mindestens eine Variable (Item) an. Es ist sinnvoll, der Variable eine Beschriftung zu geben: Diese taucht im Fragebogen nicht auf, wohl aber im Datensatz. Wenn Sie mehrere Formularelemente verwenden |
* Legen Sie nun unter **Textbausteine u. Beschriftung** einen neuen Textbaustein an. Sie können den HTML-Code für das Formularelement zwar prinzipiell auch direkt in den Fragebogen einbinden, aber Textbausteine bieten einige Vorteile. | * Legen Sie nun unter **Textbausteine u. Beschriftung** einen neuen Textbaustein an. Sie können den HTML-Code für das Formularelement zwar prinzipiell auch direkt in den Fragebogen einbinden, aber Textbausteine bieten einige Vorteile. | ||
- | * Den HTML-Code für Ihr(e) Formularelement(e) dürfen Sie natürlich selbst programmieren. Unten ist ein Beispiel für ein Dropdown-Auswahlfeld. Wichtig ist nur, dass Sie als Name(n) (Attribut '' | + | * Den HTML-Code für Ihr(e) Formularelement(e) dürfen Sie natürlich selbst programmieren. Unten finden Sie ein Beispiel für ein Dropdown-Auswahlfeld. Wichtig ist nur, dass Sie als Name(n) (Attribut '' |
* Denken Sie bitte auch an die Platzierung des Eingabefelds, | * Denken Sie bitte auch an die Platzierung des Eingabefelds, | ||
- | * Fügen Sie im Fragebogen (**Fragebogen zusammenstellen**) nun auf der entsprechenden Seite // | + | * Fügen Sie im Fragebogen (**Fragebogen zusammenstellen**) nun auf der entsprechenden Seite // |
- | * Fügen Sie auch den Textbaustein mit dem HTML-Code für das Formularelement auf der Seite ein - am einfachsten, | + | * Fügen Sie den Textbaustein mit dem HTML-Code für das Formularelement |
- | * Starten Sie die Seite nun im Debug-Modus (gelber Pfeil) - wenn alles funktioniert hat, dann sehen Sie einen Hinweis, dass Sie die Kennung für ein Formularelement verwenden können sowie Ihr Fomularelement. Der Hinweis dient nur der Orientierung und erscheint nur bei der Fragebogen-Entwicklung. | + | * Starten Sie die Seite nun im Debug-Modus (gelber Pfeil {{: |
- | * Geben Sie nun einen Wert in Ihre Formularelement ein und klicken Sie auf Weiter. Wenn Sie nun auf die Debug-Information (die gelbe Ecke rechts oben) klicken, dann sollte dort notiert sein, dass der gewählte/ | + | * Geben Sie nun einen Wert in Ihr Formularelement ein und klicken Sie auf "Weiter". Wenn Sie nun auf die Debug-Information (die gelbe Ecke rechts oben) klicken, dann sollte dort notiert sein, dass der gewählte/ |
- | **Tipp: | + | Wenn Sie anspruchsvollere Eingabeelemente programmieren |
- | ===== Ein großes Dropdown-Eingabefeld ===== | + | In diesem Fall versenden Sie __nicht__ die PHP-Funktion '' |
- | oFb erlaubt in einer Frage maximal 99 Items. Das gilt auch für die Auswahloptionen in einem Dropdown-Feld. Für eine Liste aller [[http:// | + | |
+ | ===== Einschränkungen ===== | ||
+ | |||
+ | Bei der Verwendung benutzerdefinierter Formularelemente gibt es zwei wesentliche Einschränkungen: | ||
+ | |||
+ | - Die Bedeutung der Antwortcodes wird nicht im Datensatz gespeichert. Während bei einer gewöhnlichen Auswahl-Frage z.B. hinterlegt sein könnte, dass Code 1 für " | ||
+ | - Eine Antwortpflicht muss ggf. über eine [[: | ||
+ | - Wenn Sie dem Teilnehmer einen Zurück-Knopf anbieten oder wenn die Seite bei unvollständigen Angaben wiederholt wird, müssen Sie sich darum kümmern, dass Ihr Formularelement eine vorher gegebene Antwort anzeigt. Dazu können Sie den Wert mittels '' | ||
+ | |||
+ | |||
+ | ===== Beispiel: Umfangreiche Dropdown-Auswahlfrage ===== | ||
+ | |||
+ | SoSci Survey | ||
+ | |||
+ | **Tipp:** Eine Dropdown-Auswahl mit mehr als 99 Optionen können Sie auch mit dem Fragetyp [[: | ||
<code html> | <code html> | ||
Zeile 43: | Zeile 57: | ||
</ | </ | ||
- | **Tipp:** Wenn Sie die Auswahloptionen in Excel oder OpenOffice Calc vorliegen haben, dann können Sie mit der Funktion '' | + | **Tipp:** Wenn Sie die Auswahloptionen in Excel oder OpenOffice Calc vorliegen haben, dann können Sie mit der Funktion '' |
- | **Formel für Excel oder Calc** | ||
<code excel> | <code excel> | ||
=VERKETTEN("< | =VERKETTEN("< | ||
</ | </ | ||
- | Als Name für das Formularelement '' | + | Als Name für das Formularelement '' |
+ | |||
+ | |||
+ | ==== Aktivierung der internen Variable ==== | ||
+ | |||
+ | Fehlt nur noch der entsprechende PHP-Code -- auch hier muss die Kennung angepasst werden: | ||
- | Fehlt nur noch der entsprechende PHP-Code -- auch hier muss die Kennung angepasst werden. | ||
<code php> | <code php> | ||
prepare_input(' | prepare_input(' | ||
Zeile 59: | Zeile 76: | ||
Fertig. Zumindest fast. | Fertig. Zumindest fast. | ||
- | ===== Darstellung im Fragebogen ===== | ||
- | Im Moment würde das Dropdown einfach nur links auf der Seite kleben. Folgende Tabelle sorgt für etwas mehr Stil: | + | ==== Darstellung im Fragebogen ==== |
+ | |||
+ | Im Moment würde das Dropdown einfach nur links auf der Seite "kleben". Folgende Tabelle sorgt für etwas mehr Stil: | ||
<code html> | <code html> | ||
<table cellspacing=" | <table cellspacing=" | ||
< | < | ||
- | <col width=" | + | |
- | <col> | + | <col> |
</ | </ | ||
<tr> | <tr> | ||
- | < | + | <td> |
+ | | ||
+ | | ||
<td> | <td> | ||
<select name=" | <select name=" | ||
Zeile 84: | Zeile 104: | ||
</ | </ | ||
- | Um im Stil der Dropdown-Felder von oFb zu bleiben, kann man auch die CSS-Klassen aus oFb verwenden: | + | Um im Stil der Dropdown-Felder von SoSci Survey |
<code html> | <code html> | ||
Zeile 94: | Zeile 114: | ||
<table class=" | <table class=" | ||
- | < | + | < |
+ | | ||
+ | | ||
+ | </ | ||
<tr class=" | <tr class=" | ||
Zeile 112: | Zeile 135: | ||
</ | </ | ||
- | **Tipp: | + | **Tipp: |
- | ===== Fazit ===== | ||
- | Mit diesem | + | ===== Beispiel: Verwendung von JavaScript ===== |
+ | |||
+ | Die oben skizzierte Lösung geht davon aus, dass der Wert aus einem benutzerdefinierten Eingabeelement (''< | ||
+ | |||
+ | Möglicherweise möchten Sie aber gar kein solches Eingabefeld anlegen, sondern einen Wert mittels JavaScript ermitteln und diesen in den Datensatz übertragen. In diesem | ||
+ | |||
+ | - Entfernen Sie das '' | ||
+ | | ||
+ | |||
+ | **Tipp:** Falls Sie nur bestimmte interne Variablen | ||
+ | |||
+ | Wenn Sie die Frage in den Fragebogen einbinden, sehen Sie optisch keine Veränderung. Allerdings wird für jede interne Variable ein verstecktes Eingabefeld ('' | ||
+ | |||
+ | <code php> | ||
+ | // Variablen 1 und 2 der Frage AB01 (Typ " | ||
+ | question(' | ||
+ | </ | ||
+ | |||
+ | <code html> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | // Wert in Variable 1 speichern | ||
+ | document.getElementById(" | ||
+ | |||
+ | // Letzten Wert in Variable 2 um 10 erhöhen | ||
+ | var input2 = document.getElementById(" | ||
+ | var curVal = parseInt(input2.value); | ||
+ | if (isNaN(curVal)) { | ||
+ | input2.value = 10; | ||
+ | } else { | ||
+ | input2.value = curVal + 10; | ||
+ | } | ||
+ | // --> | ||
+ | </ | ||
+ | </ |