Kapitel 7. Screens

Fragen können auch zusammen mit anderen Fragen in sogenannten Screens gleichzeitig auf einem Bildschirm dargestellt werden. Ein screen hat einen Namen und Inhalte. Die Q. Syntax der Notation lautet:

      screen NAME = INHALT;
    

Der Name ist frei wählbar, darf aber nicht mit bereits vergebenen Namen anderer Elemente (Screens, Blöcke) kollidieren. Der Inhalt besteht aus Fragen, die Spalten- und Zeilenweise angeordnet werden können. Beispielsweise gäbe es drei Fragen q1, q2 und q3.

Um diese untereinander anzuordnen, schreibt man:

screen myScreen = column(q1 q2 q3);
    

Um die Fragen nebeneinander anzuordnen:

screen myScreen = row(q1 q2 q3);
    

Eine column bzw. eine row kann aber nicht nur Fragen enthalten, sondern wiederum mit column und row verschachtelt werden.

Beispiel für einen Screen mit etwas komplexeren Verschachtelungen:

Screen image =
  column(
    row(kenne_alfa image_alfa)
    row(kenne_bmw image_bmw)
    row(kenne_honda image_honda)
    row(kenne_maserati image_maserati)
  )
;
text = "Bitte geben Sie zu den Autos auf den Fotos an, ob Sie sie kennen.";
    

Als Inhalt eines Screens kann statt einer Aufzählung einzelner Fragen auch eine Bereichsangabe mit A to B erfolgen. Dabei werden alle Fragen aus dem Skript von einschließlich Frage A der Reihe nach bis einschließlich Frage B in den Screen eingefügt. Beispiel:

SingleQ f1;
SingleQ f2;
SingleQ f3;
SingleQ f4;
SingleQ f5;

screen myScreen = column(f2 to f5);
// screen myScreen = column(f2 f3 f4 f5); // gleichbedeutend
    

Intern baut Q. eine Screen-Anweisung zu einer HTML-Tabelle zusammen. Der folgende Code:

Textq f1;
text="Screens baut Q. zu einer Tabelle zusammen";
title="links oben";
Textq f2;
title="rechts oben";
Textq f3;
title="links unten";
Textq f4;
title="rechts unten";

screen scr_f14 = column( row( f1 f2 ) row( f3 f4 ) );
    

ergibt eine zweispaltige Tabelle mit zwei Zeilen:

Abbildung 7.1. Ein Screen aus vier Fragen in zwei Spalten und zwei Zeilen

Zum einen zieht sich das Muster der Tabelle durch bis zu den CSS-Elementen, aus denen der Screen besteht: die erste Zeile ist ansprechbar als qscreenrow-1, die zweite als qscreenrow-2. Die Zellen nummeriert Q. auf der CSS-Ebene schlicht durch als qscreencell-Zeilennummer-Zellennummer, so dass Frage 1 links oben als qscreencell-1-1 und Frage 4 rechts unten als qscreencell-2-2 selektiert werden kann.

Zum anderen baut Q. in jedem Fall eine rechteckige Tabelle. Der leicht veränderte Code ergibt eine Tabelle mit drei Zellen in der ersten Zeile und einer Zelle in der zweiten Zeile.

Textq f1;
text="Screens baut Q. zu einer rechteckigen Tabelle zusammen";
title="links oben";
Textq f2;
title="mitte oben";
Textq f3;
title="rechts oben";
Textq f4;
title="links unten";

screen scr_f14 = column( row( f1 f2 f3 ) row( f4 ) );
    

Da Frage 4 im Beispiel allein auf einer Zeile steht und es sich um die letzte Zelle handelt, füllt Q. die Tabelle intern mit dem HTML-Parameter colspan auf (hier: colspan="3"), um Frage 4 über drei Spalten zu ziehen. Damit ist die Tabelle wieder rechteckig.

Der colspan- bzw. rowspan Parameter kann in der Screen-Anweisung in eckigen Klammern vorgegeben werden. Q. baut aus dieser Screen-Anweisung

screen scr_f15 = column( row( f1 f2  f3 ) row( f4[2] f5[1]) );
    

eine zweizeilige Tabelle mit drei Zellen in der ersten und zwei Zellen in der zweiten Zeile. Dabei liegt f4 unter f1 und f2, während f5 unter f3 liegt. In der row-Anweisung behandelt Q. den Wert in eckigen Klammern als colspan (eine Zelle umfasst in einer Zeile mehrere Spalten).

Innerhalb einer column-Anweisung

screen scr_f15 = row( column( f1 f2  f3 ) column( f4[2] f5[1]) );
    

verwendet Q. den Wert in eckigen Klammern als rowspan-Anweisung (eine Zelle umfasst in einer Spalte mehrere Zeilen). Wie die Grafik zeigt, dürfen screen-Anweisungen auch komplex ausfallen:

Abbildung 7.2. Ein Screen aus elf verschachtelten Bestandteilen

Wenn bei einer Frage in einem Screen eine Filterbedingung nicht erfüllt ist, wird sie in dem Screen nicht angezeigt. Sind alle Fragen eines Screens weggefiltert, wird der Screen im Interviewablauf ausgelassen.

Um ein hohes Maß an Flexibilität zu wahren, stellt GESS Q. Screen-bezogene Funktionen bereit, mit denen man den HTML-Code einzelner Screens selbst programmieren kann.

Screen myScreen = column(f2 to f5);
src1 = zusatzinhalt.html;
src2 = text1.txt;
      

HTML-Label

Wenn wir statischen HTML-Code einbinden, können die Inhalte nicht dynamisch sein (randomisiert, gefiltert etc.). Hier schaffen HTML-Labels Abhilfe. Einem Screen können Labels zugewiesen werden, deren Labeltexte HTML-Code enthalten, der dann direkt in den Screen eingebaut wird. Vorteil gegenüber statischem Code ist, dass die HTML-Labels, genau wie die Labels von Fragen auch, gefiltert und randomisiert werden können. Sie stellen also die Verbindung aus »handgemachtem« HTML-Code und dynamisch erzeugten Inhalten dar.

Zusätzlich gibt es noch zwei Textelemente, htmlPreLabels und htmlPostLabels, die, wenn vorhanden, direkt über oder unter den Text, der sich aus den HTML-Labels ergibt, in den Screen eingebaut wird. Hiermit kann z.B. der Inhalt der Labels in einer Tabelle (table) angezeigt werden.

Wo HTML Anführungszeichen erwartet, können ersatzweise einfache Anführungszeichen verwendet werden oder es muss den Anführungszeichen ein »\« (backslash, Rückstrich) vorangestellt werden, damit Q. die Anführungszeichen nicht beachtet.

Ein etwas ausführlicheres Beispiel:

HTML{ input = no; };
NumQ f1;
labels=
1 "Anzahl Farben:" format onf_1_x
;
SingleQ f1_jn;
labels=
1 "Ja, wieviele:"
text "oder"
2 "Nein"
;
HTML{ input = yes; };
screen scr_f1 = column( f1 f1_jn );
text="Sehen Sie Farben?";
htmlprelabels="<table class='qtable'>";
htmllabels=
1 "
<tr>
  <td name='id_f1_jn1' class='checkable f1_jn qbuttoncell'><img id='id_f1_jn_bi1'></td>
  <td style='height:30px; padding:0;' name='id_f1_jn1' class='checkable qlabeltextcell'>Ja - wieviele? <input type='number' min='0' name='f1_1n' class='numinput'></td>
</tr>
"
text "
<tr>
  <td colspan='2' class='qtextlabelcell'>oder</td>
</tr>
"
2 "
<tr>
  <td name='id_f1_jn2' class='checkable f1_jn qbuttoncell'><img id='id_f1_jn_bi2'></td>
  <td name='id_f1_jn2' class='checkable qlabeltextcell'>Nein</td>
</tr>
"
;
htmlpostlabels="</table>";
      

Auf der generierten Seite erscheint der Text, den htmllabels im HTML-Code festlegt. Die Frage lautet also »Ja - wieviele?« und nicht wie es f1 vorgibt (»Anzahl Farben:«) oder wie es f1_jn vorsieht (»Ja, wieviele:«). type bestimmt für die NumQ zudem ein numerisches Eingabefeld und min sieht einen Mindestwert von 0 vor, so dass nur Zahlen und keine negativen Werte möglich sind.

Abbildung 7.3. Ein unspektakuläres Beispiel für htmllabels

Wenn damit fragespezifischer Inhalt erzeugt wird, ist ebenso wie bei statischem, eingebundenen Code drauf zu achten, dass die Formularelemente Namen haben, die den automatisch erzeugten entsprechen, damit die Software die Daten auslesen kann.

Bitte beachten: Damit der über htmllabels vorgegebene Code von Q. auch in die Seite eingebaut wird, muss das template die Platzhalter-Anweisung @htmllabels vorsehen (s. „Platzhalter“).

Auf konventionelle Art im Skript definierte Screens sind statisch. Es kann jedoch wünschenswert sein, dass die Screens auf Nutzereingaben reagieren. Ein typisches Beispiel: Mit einer geschlossenen Frage wird abgefragt, wie gut den Befragten ein Produkt gefallen hat. Wenn diese angeben, dass es ihnen nicht gefallen hat, soll - erst dann - ein Textfeld erscheinen, also eine offene Frage, die nachhakt, warum den Befragten das Produkt nicht gefällt. Mit den bisher vorgestellten Mitteln lässt sich das nicht umsetzen.

Eine Möglichkeit wäre, den gesamten Screen »per Hand« mit HTML-Code zu bauen, aber das bedeutete erheblichen Aufwand. Daher steht ein Befehl zur Verfügung, mit dem man an die Stelle einer Frage, an der das Ereignis des Klicks verarbeitet wird (also z.B. den Klick auf einen Radiobutton einer Single-Frage), automatisch eine javascript-Event-Handler-Funktion einbauen kann. Der Befehl lautet:

jsHandler="<Javascript-Funktion>";
    

und muss der Frage direkt hinzugefügt werden.

Der Code der Javascript-Funktion selbst muss im Screen vorhanden sein; Er kann über den oben vorgestellten src-Befehl bei der Screen-Definition einen Platzhalter ersetzen, oder er kann direkt in die Datei template.html geschrieben werden.

Die Javascript-Funktion sollte so aufgebaut sein, dass sie den Screen validiert und entsprechend die richtigen Zustände herstellt, da sie bei jedem Klick auf einen Button einer Frage aufgerufen wird.

Für ein ausführlicheres Beispiel für die Verwendung des jsHandler-Befehls siehe das entsprechende Tutorial.