Eigene Formularelemente verwenden

SoSci Survey bietet zwar eine große Auswahl von Fragetypen - mitunter lässt sich eine Frage aber nicht mithilfe der vorgefertigten Module realisieren. Für diesen Fall unterstützt oFb das Einlesen benutzerdefinierter Formularelemente.

Tipp: Bevor Sie mit der Programmierung eigener Formulare anfangen, prüfen Sie bitte auch einfachere Möglichkeiten unter Erweiterte Darstellungsmöglichkeiten.

HTML-Formularelemente wie Texteingabefelder, Auswahlfelder, etc. sind schnell programmiert, die notwendigen Grundlagen sind z.B. auf SelfHTML nachzulesen. Als Textbausteine kann man solche Formularelemente auch ohne Probleme in den Fragebogen einbinden – das Problem liegt aber darin, dass oFb zunächst einmal nichts von diesen Formularelementen weiß.

Es liegt also nahe, oFb mitzuteilen, dass man bestimmte Variablen gerne einlesen und im Datensatz speichern möchte. Dazu verwendet man interne Variablen und die PHP-Funktion prepare_input().

Bei der Verwendung benutzerdefinierter Formularelemente gibt es zwei wesentliche Einschränkungen:

1. 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 „Student“ und die 2 für „Angestellter“ steht, müssen Sie das bei einem benutzerdefiniertem Formularelement selbst im Auge behalten.
2. 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 value() auslesen und entsprechende Platzhalter für den Textbaustein initialisieren.

• Legen Sie zunächst im Fragenkatalog eine Frage vom Typ Interne Variablen an.
• 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.
• 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 name) des Formularelements die Item-Kennung(en) der(der) internen Variable(n) verwenden. Wenn Ihre Variable also die Kennung AB01_01 hat, dann steht im Formularelement name=„AB01_01“.
• Denken Sie bitte auch an die Platzierung des Eingabefelds, z.B. in einer Tabelle.
• Fügen Sie im Fragebogen (Fragebogen zusammenstellen) nun auf der entsprechenden Seite PHP-Code ein und verwenden Sie den Befehl prepare_input(), um die interne Variable zu aktivieren, z.B. prepare_input('AB01_01');. Wenn Sie die Kennung der Frage angeben, werden alle Variablen aus der Frage aktiviert.
• Fügen Sie auch den Textbaustein mit dem HTML-Code für das Formularelement auf der Seite ein - am einfachsten, indem Sie den Textbaustein in die Seite ziehen.
• 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.
• 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/eingegebene Wert abgespeichert wurde.

Tipp: Wenn Sie anspruchsvollere Eingabeelemente programmieren - z.B. mit JavaScript und/oder Flash, dann binden Sie die Frage (oder Items daraus) direkt in den Fragebogen ein. Ziehen Sie die Frage dazu einfach in den Fragebogen. Dabei werden automatisch versteckte Eingabefelder im Fragebogen untergebracht (<input type=hidden„>), deren Wert mittels JavaScript geändert werden kann. Die HTML-ID der Eingabefelder entspricht der Item-Kennung.

oFb erlaubt in einer Frage maximal 99 Items. Das gilt auch für die Auswahloptionen in einem Dropdown-Feld. Für eine Liste aller Länder der Erde reicht das nicht. Ein entsprechendes Auswahlfeld kann man mit folgendem HTML-Code erstellen:

<select name="AB01_01">
<option value="1">Abchasien</option>
<option value="2">Afghanistan</option>
<option value="3">Ägypten</option>
<!-- u.s.w. -->
<option value="206">Zypern</option>
</select>

Tipp: Wenn Sie die Auswahloptionen in Excel oder OpenOffice Calc vorliegen haben, dann können Sie mit der Funktion VERKETTEN() ganz einfach den Großteil des HTML-Codes erstellen. Wenn z.B. in der Spalte A die Antwortcodes stehen und in Spalte B die Texte, geben Sie in Spalte C (erste Zeile) folgende Formel ein. Die Formel nun noch über die ganze Spalte C ziehen und den so erstellen Code einfach kopieren.

Formel für Excel oder Calc

=VERKETTEN("<option value=""";A1;""">";B1;"</option>")

Als Name für das Formularelement select wurde hier AB01_01 eingetragen - das muss natürlich der tatsächlichen Item-Kennung angepasst werden. Bei jeder Auswahloption option ist ein Attribute value angegeben – dieses legt fest, welcher Zahlencode übermittelt wird. Wenn man den tatsächlichen Text abspeichern will, kann man das Attribut einfach weglassen.

Fehlt nur noch der entsprechende PHP-Code – auch hier muss die Kennung angepasst werden.

prepare_input('AB01_01');

Fertig. Zumindest fast.

Im Moment würde das Dropdown einfach nur links auf der Seite kleben. Folgende Tabelle sorgt für etwas mehr Stil:

<table cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col width="100">
<col>
</colgroup>
<tr>
  <td><label for="AB01_01">Heimatland:</label></td>
  <td>
    <select name="AB01_01" id="AB01_01">
    <option value="1">Abchasien</option>
    <option value="2">Afghanistan</option>
    <option value="3">Ägypten</option>
    <!-- u.s.w. -->
    <option value="206">Zypern</option>
    </select>
  </td>
</tr>
</table>

Um im Stil der Dropdown-Felder von oFb zu bleiben, kann man auch die CSS-Klassen aus oFb verwenden:

<div class="spacing">
<div class="title">
<p>Hier steht der Frage-Text</p>
</div>
<div class="titleSpacing"></div>
 
<table class="question" cellspacing="0" cellpadding="0" width="100%" border="0">
<colgroup><col width="380"><col></colgroup>
 
<tr class="shadeH0">
  <td><label for="AB01_01">Heimatland:</label></td>
  <td class="dropdown input">
    <select name="AB01_01" id="AB01_01">
    <option value="1">Abchasien</option>
    <option value="2">Afghanistan</option>
    <option value="3">Ägypten</option>
    <!-- u.s.w. -->
    <option value="206">Zypern</option>
    </select>
  </td>
</tr>
</table>
</div>

Tipp: Wenn Sie eine fertige Fragebogen-Seite im Browser ansehen, können Sie sich dort auch einfach den HTML-Quellcode anzeigen lassen. Den Quellcode für eine bestimmte Frage finden Sie ganz einfach, indem Sie nach der Frage-Kennung suchen.

Die oben skizzierte Lösung geht davon aus, dass der Wert aus einem benutzerdefinierten Eingabeelement (<input> oder <select>) in den Datensatz übermittelt werden soll.

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 Fall sind zwei Änderungen notwendig:

1. Entfernen Sie das prepare_input() aus der Fragebogen-Seite
2. Ziehen Sie stattdessen die Frage vom Typ „interne Variable“ in den Fragebogen – platzieren Sie die Frage über dem JavaScript, welches den Wert speichern soll.

Falls Sie nur einige Variablen der Frage benötigen, legen Sie dies als Items anzeigen mit dem -Symbol fest – oder fügen Sie die Frage mittels question() ein und geben Sie dabei die entsprechenden Item-Kennungen an.

Wenn Sie die Frage in den Fragebogen einbinden, sehen Sie optisch keine Veränderung. Allerdings wird für jede interne Variable ein verstecktes Eingabefeld (type="hidden") hinterlegt, dessen Inhalt per JavaScript gelesen und geändert werden kann.

// Frage vom Typ "interne Variablen",
// nur Variablen 1 und 2 einbinden
question('AB01', '1,2');

<script type="text/javascript">
<!--
// Wert in Variable 1 speichern
document.getElementById("AB01_01").value = "Wert A";
 
// Wert in Variable 2 um 10 erhöhen
var input2 = document.getElementById("AB01_02");
var curVal = parseInt(Wert .value);
if (isNaN(curVal)) {
  input2.value = 10;
} else {
  input2.value = curVal + 10;
}
// -->
</script>

Mit diesem Werkzeug erhält man sehr viel Freiheit bei der Gestaltung des Fragebogens – der Aufwand zum Programmieren der Formularelemente kann allerdings schnell ausarten. Deshalb bietet oFb die meisten Fragen eben schon fertig an.