Die Datei template.html im
text-Verzeichnis bildet die
Vorlage für das Layout des Fragebogens, oder genauer:
für die Gestaltung der Web-Seite. Mit den Mitteln von
HTML und CSS kann das Layout den eigenen Vorstellungen
angepasst werden.
Hier ist nicht der Ort HTML oder CSS zu erklären, das
ist im Web an vielen Stellen dokumentiert.[3]
Daher nur einige zusammenfassende Bemerkungen. Die
Template-Datei ist durch HTML-Markierungen in zwei
Abschnitte unterteilt: Head und Body. In den Kopf der
Datei zwischen den Markierungen
<head> und
</head> gehört der Titel der
Umfrage (zwischen <title> und
</title>), den die meisten
Browser in ihren Rahmen übernehmen und als Beschriftung
für den Reiter verwenden.
<head>
<title>Onlinebefragung</title>
<meta name="Content-Type" content="text/html; charset=utf-8"/>
<link type="text/css" href="./css/default_gess.css" rel="stylesheet" />
<script type="text/javascript" src="./javascript/gesstmpl.js"></script>
<script type="text/javascript">
Die Festlegung des Inhaltstyps mittels
Content-Type muss als Zeichensatz
UTF-8 deklarieren, da Q. alle Web-Seiten mit dieser
Kodierung ausgibt.
Über den Link-Tag können verschiedene Ressourcen eingebunden werden. Hier geht es vor allem um die stilistischen Festlegungen in einer CSS-Datei. HTML strukturiert eine Seite nur in Überschriften, Absätze, Aufzählungen usw. Wie die einzelnen Elemente aussehen sollen, legen Regeln in der CSS-Datei fest (welche Schrift soll in einer Überschrift verwendet werden, wie groß soll die Schrift der Überschrift sein, welchen Abstand soll die Überschrift zum Text einhalten, usw.). Die hier eingebundene Datei legt einige grundsätzliche Layout-Entscheidungen fest (z.B. Schriftart, -größe, -farbe), die selten geändert werden.
Über das Script-Tag können Javascript-Dateien
eingebunden werden, die Funktionen bereit stellen, die
an verschiedenen Stellen im Fragebogen benötigt
werden. Eingebunden ist bereits
gesstmpl.js, weil viele der
grafischen Funktionen dort programmiert sind.
Im Template schließen sich an die Einbindung von Javascript erneut CSS-Stilregeln an, die mit dem Style-Tag eingeleitet werden:
<style type="text/css">
Die Vorlage sammelt in diesem Abschnitt eine Reihe von CSS-Klassen, die bei Fragebögen häufiger angepasst werden. Das lässt sich bei Bedarf auch erweitern. (Um den Namen des gewünschten Elements zu finden, bieten die meisten Browser mittlerweile im Kontextmenü die Option »Element untersuchen« - erreichbar über einen Rechtsklick auf dem Element.)
Mit den Style-Regeln endet der Kopf Datei und es folgt
der Abschnitt body mit den
HTML-Elementen, die die Seite ausmachen. Durch
style-Anweisungen kann auf das
Aussehen der einzelnen Elemente weiter Einfluss
genommen werden. Grafiken aus dem Medien-Ordner binden
die Vorlagen in der Regel über die Verwendung der
Variablen $surveyname ein:
src="./media/$surveyname/redpbar.jpg"
Die Variable stellt den Verzeichnisnamen der Studie bereit.
Wenn beim Aufruf eines Fragebogens durch einen
Probanden ein Fehler auftritt, etwa weil die Studie
bereits abgeschlossen ist oder die respid nicht
stimmt, erscheint eine Fehlermeldung im für die Studie
über das Template festgelegte Standard-Layout. Wenn
für die Fehlermeldung davon abgewichen werden soll,
können die entsprechenden Anpassungen in der Datei
template_error.html vorgenommen
werden.
Um die eigentliche Web-Seite mit der Frage zu erstellen, füllt Q. das Template auf. Dazu dienen die verschiedenen Platzhalter, die im Template mit vorangestelltem @ am Zeilenanfang erscheinen.
Liste der Platzhalter im template
- @tt1 – @tt8
Inhalt der internen TextElements »template1« – »template8« im Skript
- @qtext – @end_qtext
- @prehelptext – @end_prehelptext
- @posthelptext – @end_posthelptext
- @error – @end_error
- @input – @end_input
- @javascript
Von Q. generierte (Java-)Scripte (muss innerhalb von <script> Tags sein
- @forward
- @header
Von Q. generierte (Java-)Scripte (muss innerhalb von <script> Tags sein
- @form
HTML Formular für Screeninhalte (später muss manuell ein "</form>" notiert sein)
- @body
- @submit – @end_submit
- @back – @end_back
- @cancel – @end_cance
- @pbar – @end_pbar
- @src1 – @src4
- @htmllabels
HTMLLabels (s. „HTML-Label“
- @language – @end_language
- @surveyname
- $surveyname
- @dummy
Damit Q. die Platzhalter durch ihren Inhalt ersetzt,
müssen sie immer am Zeilenanfang stehen. So wird für
die Web-Seite der Platzhalter
@input durch die eigentliche
Frage ersetzt. @submit,
@back, @cancel
liefern die entsprechenden Buttons (»weiter«,
»zurück«, »abbrechen«), wenn sie denn vorgesehen
sind, usw. Dabei kommt es auch auf den Kontext an,
ob die Platzhalter berücksichtigt werden.
@pbar wird z.B. nur innerhalb des
Fragebogens berücksichtigt,
@forward fügt dagegen nur am
Interview-Ende die Weiterleitung ein.
Der häufig auftauchende Platzhalter
@dummy wird immer berücksichtigt.
Er stellt für Q. eine Marke dar, bei der alle seit
dem letzten Platzhalter eingelesenen Zeilen des
Templates in die eigentliche Web-Seite geschrieben
werden.
Q. liest und puffert das Layout Zeile für Zeile. Zeilen, die mit einem Platzhalter beginnen, sorgen für die Auswertung des Puffers: Ist der Platzhalter im jeweiligen Kontext von Bedeutung schreibt Q. den Inhalt des Puffers in die Seite. Ist der Platzhalter nicht von Bedeutung, werden die gepufferten Zeilen gelöscht.
Man kann den Mechanismus des Platzhalters auch
verwenden, um eventuell benötigte Informationen aus
dem laufenden Interview einzublenden. Dafür
existieren acht frei belegbare Systemvariablen mit
den Namen template1 bis
template8. Die Platzhalter, die
dann im Template eingefügt werden müssen heißen
korrespondierend tt1 bis
tt8.
So lässt sich template1 über den Actionblock-Befehl
setText etwa mit der ID der
Interviewten belegen:
startActionBlock = { setText( template1, "@insert(_respid)" ); };
Um die ID einzublenden, wäre dann an der gewünschten Stelle im Template
@dummy
@tt1
@dummy
einzufügen. Das Einrahmen mit
@dummy-Platzhaltern geschieht zur
Sicherheit (erst die Inhalte seit dem letzten
Platzhalter in die Web-Seite schreiben und
anschließend sicher stellen, dass auch der Inhalt
von template1 eingefügt wird,
Man kann dem Platzhalter auch HTML-Schnipsel mitgeben:
startActionBlock = {
setText( template1, "<div style=\"color:red;\"> @insert(_respid) </div>" );
};
Die ID des Interviewten würde so in rot eingeblendet. Um die Einblendung zu beenden, ließe sich der Platzhalter zurücksetzen:
ContinueActionBlock = { setText( template1, "" ); };
Ein Fortschrittsbalken zeigt den Befragten an, wie
weit sie in der Umfrage sind bzw. wie lange sie noch
brauchen. Diese Stütze ist ein Vorteil, da der
Befragte ein Ende absehen kann, birgt aber
gleichzeitig die Gefahr der Entmutigung, wenn der
Balken bei einer entsprechend großen Umfrage nur
langsam voran schreitet. Im Template wird der
Fortschrittsbalken konfiguriert und durch
@pbar angezeigt bzw. durch
@end_pbar beendet. Grundsätzlich
zählt der Fortschrittsbalken die Anzahl der Screens
in einem Fragebogen, NICHT die Anzahl der Fragen. Im
Umkehrschluss heißt das, ob mehrere Fragen oder nur
eine Frage auf einem Screen erscheinen, macht für
den Fortschrittsbalken keinen Unterschied; er würde
in beiden Fällen gleich schnell voranschreiten.
Wenn ein Screen gefiltert ist (also nur bei einer
bestimmten Antwort angezeigt und sonst übersprungen
wird) würde der Fortschrittsbalken ohne den
Filterparameter changepBar(NUM)
nicht sauber abschließen. Der Parameter sorgt dafür,
dass der Fortschrittsbalken analog zu der Anzahl
übersprunger Screens voranschreitet.
NUM steht dabei für die Anzahl
der Screens, die ausgelassen werden.
singleq f0;
text = "Scheint bei Ihnen heute die Sonne?";
labels=
1 "Ja"
2 "Nein"
;
openq f1;
title = "Was machen Sie bei dem schönen Wetter heute?";
flt = (1 in f0) changepbar(1);
singleq f2;
text = "Würden Sie gern in den Urlaub fliegen?";
labels=
1 "Natürlich!"
2 "Ich arbeite lieber."
;
Eine weitere Variante entsteht, wenn ab einer bestimmten Frage in mehrere verschiedene Pfade eingestiegen werden kann, je nachdem welche Antwort gegeben wird. Zur Veranschaulichung hier ein Bild:
Im angezeigten Beispiel sind drei verschiedene Pfade
angelegt, von denen nur einer pro Umfrage angezeigt
wird. Der Fortschrittsbalken würde in diesem
Beispiel mit 17 Fragen rechnen (f1, 5 Fragen in Pfad
1, 5 Fragen in Pfad 2, 5 Fragen in Pfad 3 und f7).
Da nur ein Pfad mit Fragen gewählt und beantwortet
wird, fehlen am Ende der Umfrage 10 Fragen und der
Fortschrittsbalken schließt nicht ab. Um diese
Problematik zu beseitigen, wird im Script der Befehl
pBarMax = NUM eingefügt. Dadurch
wird die maximale Anzahl der Screens festgelegt und
angepasst. Außerdem bewegt sich der
Fortschrittsbalken langsam voran, da er mit mehr
Fragen rechnet, als in der Umfrage beantwortet
werden können. Dadurch wird suggeriert, der
Fragebogen sei sehr lang und die Umfrage ginge nur
schleppend voran. Im oben aufgeführten Beispiel
müsste der Befehl pBarMax=7
lauten. Aus wie vielen Screens sich der Fragebogen
zusammensetzt, kann übrigens im Script-Check
abgelesen werden.
Im folgenden finden Sie ein praktisches Beispielskript. Weiteres zu diesem Befehl ist im „Skriptparameter“ zu finden.
singleq f1;
text="Welche der Aussagen trifft bei Ihnen am ehesten zu?";
labels=
1 "Ich bin Vegetarier."
2 "Ich esse kein Gemüse."
3 "Mir ist das egal-ich esse alles."
;
//Pfad 1
textq t1; text=" t1";
textq t2; text=" t2";
textq t3; text=" t3";
textq t4; text=" t4";
textq t5; text=" t5";
//Pfad 2
textq t6; text=" t6";
textq t7; text=" t7";
textq t8; text=" t8";
textq t9; text=" t9";
textq t10; text="t10";
//Pfad 3
textq t11; text="t11";
textq t12; text="t12";
textq t13; text="t13";
textq t14; text="t14";
textq t15; text="t15";
//Ende der Pfade
textq f7;
text="Das ist sehr interessant. Vielen Dank für die ehrlichen Antworten."
pbarmax=7; //Anpassen des Fortschrittsbalken
block Pfad1 = (t1 t2 t3 t4 t5) ; flt= 1 in f1;
block Pfad2 = (t6 t7 t8 t9 t10) ; flt= 2 in f1;
block Pfad3 = (t11 t12 t13 t14 t15) ; flt= 3 in f1;
Wie in Abbildung 15.5, „Grafische Buttons“ zu sehen, können grafische Buttons in 3 Ausprägungen auftreten:
markiert
nicht markiert
deaktiviert
Entsprechende Bilder für die Buttons sind aus beliebigen webfähigen Formaten (z.B.: .gif, .jpg, .png) wählbar. Zu beachten ist hierbei, dass sie später in der Umfrage in Originalgröße dargestellt werden.
Speziell für Multi-Fragen lassen sich auch eigene Buttons definieren, so dass eine optische Unterscheidung zu Single-Fragen möglich ist (analog zu Checkboxen und Radiobuttons im HTML Standard). Zusätzlich gibt es die Möglichkeit eine minimal erforderliche, sowie eine maximale erlaubte Anzahl markierter Antwortmöglichkeiten vorzugeben. Die grafische MultiQ (auch die MultiGridQ) speichert die vom Befragten gegebenen Antworten immer in Klickreihenfolge, d.h. die zuerst angeklickte Antwort steht im Datensatz immer an erster Stelle und die zuletzt angeklickte Antwort am Ende.
Die grafischen Buttons stehen für die Fragetypen
SingleQ, MultiQ, SingleGridQ und MultigridQ zur
Verfügung. Um sie zu verwenden muss die GESS
Javascript Bibliothek gesstmpl.js
im Template eingebunden werden (siehe „
Die GESS Javascript Bibliothek
gesstmpl.js
“). Außerdem müssen die für die
Buttons zu verwendenden Bilder im Mediapfad der
zugehörigen Umfrage
(./media/UMFRAGENAME/) hinterlegt
werden.
Im Skript muss nun übergeben werden, dass für den jeweiligen Fragetyp an Stelle des Browser-Standards die grafischen Varianten verwendet werden sollen:
FRAGETYP ZU VERWENDENDE VARIANTE
HTML{ singleQClass = "GSingleQ"; };
HTML{ multiQClass = "GMultiQ"; };
HTML{ singleGridQClass = "GSingleGridQ"; };
HTML{ multiGridQClass = "GMultiGridQ"; };
Die grafischen Varianten der Standardfragetypen
beginnen im Namen üblicherweise mit einem
vorangestellten G. Die Zuweisung
der eigentlichen Bilddateien für die Buttons erfolgt
mit Hilfe des HTML
Befehls setProperty() und kann
von Frage zu Frage geändert werden:
HTML{ setProperty("button_checked" "bc.gif"); };
HTML{ setProperty("button_unchecked" "buc.gif"); };
HTML{ setProperty("button_inactive" "bia.gif"); };
SingleQ s1;
(...)
HTML{ setProperty("button_checked" "bc1.gif bc1.gif bc2.gif"); };
HTML{ setProperty("button_unchecked" "buc1.gif"); };
MultiGridQ mg1;
(...)
Werden die grafischen Fragetypen ausgewählt, aber keine Angaben zu den Bildern im Q Skript gemacht, geht die Software von Defaultfällen aus, die im Mediapfad der Umfrage hinterlegt sein müssen.
- button_checked
Anzugeben ist der Dateiname einer Grafik inkl. Endung für einen markierten Button. Um innerhalb einer Frage unterschiedliche Buttons zu benutzen, können mehrere, durch Leerzeichen getrennte Dateinamen angegeben werden. Die Integration erfolgt entsprechend der geschriebenen Labelreihenfolge im Q.Skript. Gibt es mehr Labels als angegebene Grafiken, wird die zuletzt genannte Datei weiter verwendet.
Default: button_checked.gif
- button_unchecked
Anzugeben ist der Dateiname einer Grafik inkl. Endung für einen unmarkierten Button. Die Verwendung unterschiedlicher Buttons innerhalb einer Frage entspricht button_unchecked.
Default: button_unchecked.gif
- button_inactive
Anzugeben ist der Dateiname einer Grafik inkl. Endung für einen deaktivierten Button. Die Verwendung unterschiedlicher Buttons innerhalb einer Frage entspricht button_unchecked.
Default: button_inactive.gif
- multi_button_checked
Analog zu button_checked. Speziell für Multi-Fragen.
Default: Nutzung von button_checked
- multi_button_unchecked
Analog zu button_unchecked. Speziell für Multi-Fragen.
Default: Nutzung von button_unchecked
- multi_button_inactive
Analog zu button_inactive. Speziell für Multi-Fragen.
Default: Nutzung von button_inactive
Die grafischen Buttons werden anhand ihrer Dateinamen
voneinander unterschieden. Es darf also kein Bild sowohl für
z.B.
button_unchecked
, als auch für
button_inactive
verwendet werden.
Neben den zuvor genannten Parametern für die Bilddateien gibt es zusätzliche Features, die über Property-Parameter genutzt und eingestellt werden:
Bildvorschau bei onMouseOver der Buttons
minimale und maximale Anzahl markierter Antworten (nur Multi(Grid)Q)
Mausklickverhalten (mouseUp / mouseDown)
Zeilen- bzw. zellenweises Highlighting in Gridfragen
Behandlungsmodi für single Antworten (nur Multi(Grid)Q)
Mit button_preview ist es
möglich den Buttons beim Überfahren mit der Maus
ein Vorschaubild zuzuweisen, siehe Abbildung 15.6, „Bildvorschau bei grafischen Buttons“.
- button_preview
Anzugeben ist der Dateiname einer Grafik inkl. Endung für einen markierten Button. Um innerhalb einer Frage unterschiedliche Vorschaubilder je Buttons zu benutzen, können mehrere, durch Leerzeichen getrennte Dateinamen angegeben werden. Die Integration erfolgt entsprechend der geschriebenen Labelreihenfolge im Q.Skript. Gibt es mehr Labels als angegebene Grafiken, wird für die überschüssigen Buttons kein Vorschaubild eingefügt.
Default: ""
Mit
minNumAnswers
und
minNumAnswers
können minimale und maximale
Anzahlen erforderlicher Antworten definiert werden. Bei einer
Unterschreitung der minimalen Anzahl wird der
Weiterbutton
bzw. im Falle eines Erreichens der maximalen Anzahl, die
verbleibenden Antwortbuttons deaktiviert.
- minNumAnswers
Anzugeben ist ein ganzzahliger Wert.
Default: 0
- maxNumAnswers
Anzugeben ist ein ganzzahliger Wert.
Default: 10000
Mit
mouseEvent
kann eingestellt werden, ob
Antworten beim Drücken bzw. beim Loslassen der Maustaste
markiert werden.
- mouseEvent
Je nach Einstellung werden Buttons beim Drücken bzw. Loslassen markiert.
Optionen: onMouseUp ∣ onMouseDown
Default: onMouseDown
Mit
gridHighlighting
kann eingestellt
werden, ob Antworten in Gridfragen zeilen- oder zellenweise
gehighlightet werden sollen.
- gridHighlighting
Je nach Einstellung werden in Gridfragen nur Zellen oder ganze Zeilen beim Überfahren mit dem Mauszeiger gehighlightet.
Optionen: row ∣ cell
Default: cell
Das Verhalten Antwortmöglichkeiten, die mit
single versehen wurden, kann
(wie bei anderen Fragetypen) über den Parameter
javascriptSingleMode gesteuert
werden. Da dieser Skriptbefehl allgemeingültig
auch an anderen Stellen verwendet wird, weicht die
Syntax von den vorherigen Parametern ab und kann
jederzeit neu gesetzt werden:
// Modus 'deselect'
HTML{ javascriptSingleMode=deselect; };
// Modus 'deactivate'
HTML{ javascriptSingleMode=deactivate; };
(...)
// ab hier wieder Modus 'deselect'
HTML{ javascriptSingleMode=deselect; };
- javascriptSingleMode
Stellt das Markierungsverhalten bei single Antworten ein.
Optionen: deselect ∣ deactivate
Default: deactivate
Im Modus
deselect
ist ein single
Antwortbutton jederzeit markierbar. Wird er markiert, werden
alle anderen möglicherweise vorhandenen Markierungen gelöscht.
Genauso wird die Markierung des single Antwortbuttons
gelöscht, sobald ein anderer Button markiert wird.
Im Modus
deactivate
kann der single
Antwortbutton nur markiert werden, wenn kein anderer Button
markiert ist (dann wäre er inaktiv). Wird er markiert, werden
alle
anderen möglichen Antwortbuttons deaktiviert.
Code für das Beispiel aus Abbildung 15.5, „Grafische Buttons“ :
HTML{
singleQClass="GSingleQ";
multiQClass="GMultiQ";
singleGridQClass="GSingleGridQ";
multiGridQClass="GMultiGridQ";
setProperty("button_checked" "smiley.gif");
setProperty("button_unchecked" "button_unchecked.gif");
setProperty("button_inactive" "button_inactive.gif");
setProperty("minNumAnswers" "1");
// setProperty("maxNumAnswers" "3");
// setProperty("mouseEvent" "onMouseUp");
// javascriptSingleMode=deselect;
};
MultiQ m1;
text="Frage mit Smiley-Buttons:";
labels=
1 "Multi 1a"
2 "Multi 1b"
3 "Multi 1c"
4 "Alle" single
;
Die grafischen Renderklassen sind
vollständig mit CSS-Klassen[4]
versehen und können darüber formatiert werden. Auf
diese Weise kann das Layout einer Umfrage vollständig
von den Inhalten gekapselt werden. Für grundlegende
Layout-Vorgaben ist das Anlegen von CSS Dateien
empfehlenswert. Das folgende Beispiel aus dem Template
einer Umfrage referenziert das Layout aus der Datei
default_gess.css, die sich im
Ordner css neben dem Mediaordner
befindet. Von diesem Layout ausgehend können
umfragespezifische Anpassungen z.B. direkt im
jeweiligen Template vorgenommen werden.
<html>
<head>
...
<link type="text/css" href="./css/default_gess.css" rel="stylesheet"/>
<style type="text/css">
// ... hier umfragespezifische CSS Formatierungen
// Beispiel: Fragetexte fett und unterstrichen
.qtext{
font-weight:bold;
text-decoration:underline;
}
</style>
</head>
...
CSS Formatierungen werden nach folgendem Schema vorgenommen:
ELEMENT {1. CSS-FORMATIERUNG; 2. CSS-FORMATIERUNG; ...}
Die (HTML-)Elemente können dabei über verschiedene Attribute referenziert werden:
(1) .NAME{...} über das HTML class-Attribut
(2) NAME{...} über das HTML name-Attribut
(3) #NAME{...} über das HTML id-Attribut
CSS ermöglicht verschiedene Arten der Selektion. Die wichtigsten werden hier kurz vorgestellt:
.SEL1, .SEL2 {...} alle Elemente mit class SEL1 und alle Elemente mit class SEL2
.SEL1.SEL2 {...} alle Elemente die gleichzeitig class SEL1 und SEL2 besitzen
.SEL1 .SEL2 {...} alle Elemente SEL2, die Kindelement eines Elements mit SEL1 sind
In „Beispiele“ werden mehrere praxisnahe Beispiele für CSS Formatierungen gegeben.
Abbildung 15.7, „CSS Classes für SingleQ und MultiQ“ veranschaulicht, mit welchen CSS Classnames die dargestellten Elemente einer SingleQ angesprochen werden. Die MultiQ verhält sich identisch. Abbildung 15.9, „CSS Classes für SingleGridQ und MultiGridQ“ stellt analog eine SingleGridQ dar. Auch hier verhält sich die MultiGridQ gleich.
Bei Screen-Definitionen bekommt jede einzelne im
Screen enthaltene Frage einen eigenen CSS-Selektor
nach dem Muster qscreencell-x-y.
»x-y« meint die Positionierung der Frage im
Koordinatensystem des Screens. mit qscreencell-1-2
ließe sich also die zweite Frage in der ersten Zeile
auswählen. Über den Selektor
qscreencell lassen sich alle Zellen
eines Screens auswählen.
Fragetexte und Fehlermeldungen unterscheiden sich von den restlichen Elementen. Sie lassen sich derzeit nur global für die gesamte Umfrage formatieren. Alle anderen Elemente befinden sich in einem definierten Bereich (HTML <div>). Sie sind mit seiner Hilfe von Frage zu Frage völlig frei und unabhängig gestaltbar. Details zu den Möglichkeiten befinden sich in „Formatierung von einzelnen Fragen, Bereichen und Fragetypen “.
Neben den in den Grafiken enthaltenen CSS Classnames gibt es noch ein paar weitere Elemente, die sich formatieren lassen:
// Sich abwechselnde, zeilenweise Hervorhebungen
.qrowclass1{...}
.qrowclass2{...}
...
.qrowclassN{...}
// Fehlerhafte (beim Ausfüllen vergessene) Gridzellen
.qgriderrorcell{...}
// Highlighting beim Überfahren mit der Maus
.qhighlight{...}
// Rechte Item-Text-Zelle bei bipolaren Grids
.qrightitemtextcell{...}
// Abstandsspalte bei SingleQ/MultiQ mit Nutzung von maxLabelsPerCol oder splitcolumn
.qcolseparator{...}
Abhängig vom Q. HTML-Parameter
cssLayout
werden die Inhalte einer Frage zeilenweise durch
.qrowclass
abgegrenzt.
- cssLayout
Setzt den Namen für einen Layoutabschnitt und definiert die Anzahl der unterschiedlich hervorgehobenen Zeilen. Beide Parameter müssen gesetzt werden.
Default: "",2
Beispiel
--------
HTML{ cssLayout = "LayoutA",2; };
// ab hier heißt der Layoutabschnitt "LayoutA" (bis der Name wieder geändert wird)
// Fragen enthalten abwechselnd Zeilen mit den Classes .qrowclass1 und .qrowclass2
Die Formatierung für .qhighlight
sollte möglichst zuletzt vorgenommen werden. So
überschreibt es im Fall von mehreren Angaben alle
vorherigen. Schreibt beispielsweise die
.qrowclass einen hellgrauen
Hintergrund vor und .qhighlight einen hellgrünen
wählt der Browser die jüngste (im Quelltext zuletzt
stehende) Angabe.
Neben globalen Definitionen kann das Layout auch auf feineren Ebenen definiert werden. Folgende Formatierungen sind möglich:
Formatierung einzelner Fragen
Formatierung von Abschnitten
Formatierung aller Fragen eines bestimmten Typs
Die Realisierung erfolgt über die in Abbildung 15.7, „CSS Classes für SingleQ und MultiQ“ und Abbildung 15.9, „CSS Classes für SingleGridQ und MultiGridQ“ stellvertretend angegebenen QNAME, CSSLAYOUT und QTYPE.
QNAME Name einer Frage
CSSLAYOUT Name eines Layoutbereichs (siehe Parameter cssLayout)
QTYPE Fragetyp {.singleq, .multiq, .singlegridq, .multigridq}
Die folgenden Beispiele aus dem Template eine Umfrage verdeutlichen die praktische Anwendung der bisher beschriebenen Formatierungsmöglichkeiten.
// Einbinden eines definierten Grundlayouts
<link type="text/css" href="./css/default_gess.css" rel="stylesheet"/>
// umfragespezifische CSS Formatierungen
// überschreiben evtl. vorhanden Angaben aus dem Grundlayout
<style type="text/css">
// Fehlertexte (global)
.qerror{
color : white; // Schriftfarbe weiß
background-color: #990000; // Hintergrund dunkelrot
font-weight : bold; // fette Schrift
}
// Tabelle zum Title (global)
.qtable{
margin-top : 25px; // Außenabstand oben (zum Title)
}
// Labeltexte UND Labelcodes (global)
.qlabeltextcell, qvlabelcell{
font-style : italic; // (1) kursive Schrift
padding-left : 20px; // linker Innenabstand zur Tabellenzelle
}
// Labeltext (speziell für Frage q1)
.q1 .qlabeltextcell{
font-style : normal; // normale Schrift, überschreibt (1)
}
// Title (speziell für Layoutbereich ABC)
.ABC .qtitle{
text-decoration : underline; // unterstrichene Schrift
}
// Highlighting (speziell für MultiQs)
.multiq .qhighlight{
background-color: yellow; // (2) gelber Hintergrund
}
// Highlight (speziell für MultiQs in Layoutbereich ABC)
.multiq.ABC .qhighlight{
background-color: #dddddd; // hellgrauer Hintergrund, überschreibt (2)
}
</style>
Neben
dem Anlegen einer CSS-Datei
den Style-Anweisungen im Template
dem Einfügen von Style-Anweisungen über
htmlPostTextim Fragebogen
existiert mit css ein eigener
Textbereich, der hinter dem Fragetext eingefügt
wird. css verhält sich damit
ähnlich wie htmlPostText hat
aber einen entscheidenden Vorteil: Die CSS-Angaben
werden nicht in die Sprachdateien für die
Übersetzung exportiert.
css=".element{ eigenschaft: festlegung; }";
Hier erscheint der Fragetext in rot:
openq start;
text="Welche Zeitung lesen Sie?";
css=".qtext{ color: red; }";
Die Vielzahl an Elementen, die Q. zur Verfügung stellt, um Möglichkeiten zur Gestaltung einzuräumen, von PreHelpText über htmlPostText bis hin zu css="...", zielt vor allem auf eines ab: Fragetexte und Antwortmöglichkeiten sollen ohne die Notwendigkeit des Nachbearbeitens vom Skript über das Reporting bis in etwaige Tabellen gelangen.
Wenn die Möglichkeiten trotzdem noch nicht
ausreichen, können Texten und Labels auch spezielle
Formate mitgegeben werden. Dazu ließen sich in
template.html eigene Klassen
vorsehen:
.smallcaps
{
font-variant: small-caps;
}
.red
{
color: red;
}
.large
{
font-size: 150%;
}
Die Definitionen in template.html können dann
beliebig in den Fragen des Skripts eingesetzt
werden:
singleq f0;
text="Welche Frage stellen sie am häufigsten? <div class=\"smallcaps\">Kapitälchen </div>";
title="
<div class=\"red\">rot </div>
";
labels=
1 "A"
2 "B <span class=\"large\">groß </span>"
3 "C"
;
Ob das Ergebnis sinnvoll ist, sei dahingestellt, aber »Kapitälchen« erscheint in kleinen Großbuchstaben, der Titel in rot und »groß« stellt der Browser 50% größer dar als das "B" daneben.
Derartige Konstruktionen überstehen Übersetzungen in der Regel nicht unbeschadet und ziehen sich womöglich durch bis zum Erstellen von Tabellen - sorgen also für zusätzlichen Aufwand.
Seit etwa 2010 rufen Nutzer Web-Seiten vermehrt mit mobilen Geräten auf. Damit rutscht der Desktop-Rechner, der bis dahin als Maß der Web-Entwicklung gegolten hatte, in die zweite Reihe und es heißt: »mobile first«. Die Antwort auf die sich damit einstellenden Probleme firmiert unter dem Schlagwort »responsive design«: Die Web-Seiten sollen sich auf den jeweiligen Bildschirm einstellen können. Das ist die Theorie, aber die Praxis erweist sich als widerspenstig.
CSS media queries sollen helfen, die Geräte anhand verschiedener Merkmale zu unterscheiden. Die Abfrage kann zunächst einen speziellen Medientyp ansprechen (all, screen, print usw.) und anschließend über die Abfrage bestimmter Eigenschaften des Typs (Breite, Höhe, Ausrichtung usw.) die CSS-Anweisungen eingrenzen[5]:
@media all and (eigenschaft: wert) { css-selektor { eigenschaft: wert;} }
Beim Ansatz des responsive Designs ist es empfehlenswert, keine festen Größen zu verwenden. Die ersten zwei Zeilen verbieten sich von selbst, wenn unklar ist, auf welchen Bildschirmen die Darstellung erfolgt:
width: 1024px;
font-size: 12px;
// statt dessen:
max-width: 1024px;
font-size: 75%;
Mit der Angabe einer maximalen Breite kann ein Browser die Anzeige für den Bildschirm anpassen, die feste Breite erzwingt dagegen die Anzeige über einen schmalen Bildschirm von z.B. 800 Pixel hinaus. Auch die Schriftgröße sollte eher als Relation festgelegt werden, da Bildschirme auf dem Schreibtisch ihre HD-Auflösung auf 20 Zoll und mehr verteilen, während Telefone die 1920x1080 Pixel womöglich auf fünf Zoll unterbringen. (Desktop-Browser setzen in der Regel eine 16 Pixel große Schrift mit 100% gleich, daher hier die Umrechnung von 12 Pixel auf 75%.)
In der Regel sind bestimmte Darstellungen, etwa ein Layout mit zwei Spalten (im Zentrum die Umfrage, am Rand etwaige Erläuterungen) beim Unterschreiten einer bestimmten Pixel-Breite nicht mehr sinnvoll. Das kann mit media queries abgefangen werden.
@media all and (max-width: 800px) {
.rand{ display: block; }
}
Bis zur Breite von 800 Pixeln würde ein Element mit der Klasse ».rand« als Block-Element dargestellt und erschiene damit nicht neben der Umfrage, sondern durch den mit dem Block-Element verbundenen Umbruch je nach Anordnung darüber oder darunter.
Wenn bekannt ist, welche Bildschirme bei einer Umfrage eine Rolle spielen (etwa Tablets bei einer Car Clinic), kann mit Blick auf die Auflösungen auch über Zoom-Faktoren eine einheitliche Darstellung erreicht werden.
@media only screen and (max-width: 1024px){ .maintab{ zoom: 80%; } }
@media only screen and (min-width: 1920px){ .maintab{ zoom: 150%; } }
Auf Bildschirmen mit einer Breite bis zu 1024 Pixeln wird die Darstellung auf 80% verkleinert, auf Bildschirmen mit einer Breite von 1920 Pixeln und mehr, wird die Darstellung auf 150% vergrößert. Auf den gängigen Breiten dazwischen (1280, 1366, 1600) bleibt die Darstellung bei 100%, da nichts anderes vorgegeben wurde. Zoom-Faktoren sind nicht der Weisheit letzter Schluss, aber sie können Arbeit ersparen.
Ist das Layout einer oder mehrerer
kombinierter Fragen einmal nicht im vorgegebenen Rahmen der Q.
Fragetypen realisierbar, lassen sich Screens
auch vollständig
manuell mit HTML-Code erstellen. Mit dem Parameter
input=no
wird unterdrückt, dass Q. den
Quelltext für Fragen erzeugt. Die Fragedefinitionen sind in
jedem Fall zwingend erforderlich, damit Sie als
Variablen in Q.
angelegt werden.
HTML{ input = no; };
SingleQ sq;
labels=
1 'Antwort A'
2 'Antwort B'
3 'Antwort C' single
;
HTML{ input = yes; };
An dieser Stelle soll nur auf die HTML Darstellung der relevanten Eingabefelder und Texte eingegangen werden. Um auch bei manuell erstellten Screens Randomisierungen und Filter zu verwenden sei auf „HTML-Label“ verwiesen. Ein schlichter Nachbau der SingleQ sq mit Labelcodes sähe wie folgt aus:
screen myscreen = column( sq );
text="
<div class='qtext'>Selbstgebaute Single Q Frage</div>
<div class='qtitle'>Single Q Title</div>
<table class='qtable'>
<tr>
<td name='id_sq1' class='qvlabelcell'> (1) </td>
<td name='id_sq1' class='sq qbuttoncell'> <img id='id_sq_bi1'> </td>
<td name='id_sq1' class='qlabeltextcell'> Antwort A </td>
</tr>
<tr>
<td name='id_sq2' class='qvlabelcell'> (2) </td>
<td name='id_sq2' class='sq qbuttoncell'> <img id='id_sq_bi2'> </td>
<td name='id_sq2' class='qlabeltextcell'> Antwort B </td>
</tr>
<tr>
<td name='id_sq3' class='qvlabelcell'> (3) </td>
<td name='id_sq3' class='sq qbuttoncell'> <img id='id_sq_bi3'> </td>
<td name='id_sq3' class='qlabeltextcell'> Antwort C </td>
</tr>
</table>
";
Die Angabe der names, ids und CSS Classes sind zwingend erforderlich, um die korrekte Funktionalität des Mausklickverhaltens, des Highlightings und der Gestaltung über CSS (siehe „Grafische Formatierung und Layout“ ) sicherzustellen. Name und id setzen sich wie folgt zusammen:
----- SingleQ und MultiQ -----
name : id_<QNAME>_<LABELCODE>
id (Button): id_<QNAME>_bi<LABELCODE>
--------- Gridfragen ---------
name : entfällt
id (Button): <QNAME>_bid<ITEMCODE>_<LABELGROUP>_<LABELCODE>
Das Highlighting in Q. geschieht über die CSS Class
qhighlight
. Q. highlightet immer
alle Tabellenzellen mit gleichen
names
und fügt ihnen ein
Klick-/Markierungsverhalten hinzu. Single-Attribute
bei Multifragen werden dabei automatisch
berücksichtigt. Sollen zwar alle
Zellen gehighlightet
werden, aber nicht alle ein Klickverhalten zugewiesen
bekommen, lässt sich letzteres auch gezielt über die
CSS Class
checkable
hinzufügen:
...
// in diesem Beispiel wird die Zelle mit dem Labelcode (2) zwar gehighlightet,
// aber nicht mit Mausklickfunktionalität versehen.
<tr>
<td name='id_sq2' class='qvlabelcell'> (2) </td>
<td name='id_sq2' class='checkable sq qbuttoncell'> <img id='id_sq_bi2'></td>
<td name='id_sq2' class='checkable qlabeltextcell'> Antwort B </td>
</tr>
...
Neben grafischen Buttons für Antwortlabels lassen sich auch die Navigationsbuttons eines Interviews frei gestalten, siehe Abbildung 15.10, „Grafische Navigationsbuttons“.
Weiterbutton
Zurückbutton
Abbruchbutton
Für ihre Verwendung muss die GESS Javascript
Bibliothek gesstmpl.js im Template
eingebunden werden, siehe „
Die GESS Javascript Bibliothek
gesstmpl.js
“.
Zu verwendende Bilddateien für die Buttons lassen sich
im Mediapfad der Umfrage ablegen. Weiterhin sind zwei
Schritte notwendig:
Erweiterung des Templates um <input> Felder und Javascript
Auswahl der Navigationsbuttons seitens des Q. Skripts
Im Javascript-Bereich des Templates müssen Image-Variablen für die Buttons angelegt und mit den Bilddateien initialisiert werden. Die Variablenamen im folgenden Beispiel sind zwingend einzuhalten, während die Bilddateien BUTTON.gif, MOUSEOVER.gif und INACTIVE.gif in Namen und Format frei gewählt werden können. Bedeutung der Kürzel:
cb: ContinueButton
bb: BackButton
cc: CancelButton
Außerdem ist im <body> Bereich direkt nach
@form
eine Ergänzung um jeweils ein
<input> Feld je Button notwendig:
<script type="text/javascript" src="./javascript/gesstmpl.js"></script>
@dummy
@header
<script type="text/javascript">
// grafischer Weiterbutton
var cbId = "img1";
cbImg = new Image(); cbImg.src = "./MEDIAPFAD/BUTTON.gif";
cbOmoImg = new Image(); cbOmoImg.src = "./MEDIAPFAD/MOUSEOVER.gif";
cbIaImg = new Image(); cbIaImg.src = "./MEDIAPFAD/INACTIVE.gif";
// grafischer Zurückbutton
var bbId = "img2";
bbImg = new Image(); bbImg.src = "./MEDIAPFAD/BUTTON.gif";
bbOmoImg = new Image(); bbOmoImg.src = "./MEDIAPFAD/MOUSEOVER.gif";
bbIaImg = new Image(); bbIaImg.src = "./MEDIAPFAD/INACTIVE.gif";
// // grafischer Abbruchbutton (beispielhaft auskommentiert)
// var ccId = "img3";
// ccImg = new Image(); ccImg.src = "./MEDIAPFAD/BUTTON.gif";
// ccOmoImg = new Image(); ccOmoImg.src = "./MEDIAPFAD/MOUSEOVER.gif";
// ccIaImg = new Image(); ccIaImg.src = "./MEDIAPFAD/INACTIVE.gif";
@dummy
@javascript
</script>
...
<body>
@dummy
@form
<div>
<input type="hidden" name="qcontinue" id="qcontinue" value="">
<input type="hidden" name="qback" id="qback" value="">
<input type="hidden" name="qcancel" id="qcancel" value="">
</div>
...
Seitens des Q. Skripts sind nun ebenfalls die Quellen
für die Buttons anzugeben. Hierfür gibt es die HTML
Parameter continueButtonSrc,
backButtonSrc und cancelButtonSrc.
- continueButtonSrc
Legt ein (zum Standard) alternatives HTML Codesnippet fest, das den Template Platzhalter @continue ersetzt.
Default:
- backButtonSrc
Legt ein (zum Standard) alternatives HTML Codesnippet fest, das den Template Platzhalter @back ersetzt.
Default:
- cancelButtonSrc
Legt ein (zum Standard) alternatives HTML Codesnippet fest, das den Template Platzhalter @cancel ersetzt.
Default:
HTML{
continueButtonSrc="
<img id='img1'
src='./MEDIAPFAD/CONTBUTTON.gif'
onclick='qcontinue_submit()'
onmouseover='mouseOverImage()'
onmouseout='mouseOutImage()'
style='cursor:pointer;'
/>
";
backButtonSrc="
<img id='img2'
src='./MEDIAPFAD/BACKBUTTON.gif'
onclick='qback_submit()'
onmouseover='mouseOverBBImage()'
onmouseout='mouseOutBBImage()'
style='cursor:pointer;'
/>
";
// cancelButtonSrc="...";
};
Um eigene Templates vorzusehen, die dann im [Survey
Manager] ausgewählt werden können (s. „Survey Manager - Anlegen neuer Studien“), sind ein paar Regeln zu
beachten. In der Konfigurationsdatei
qonline.cfg im Verzeichnis
config bestimmt die Variable
modelPath, wo Q. nach Vorlagen für
eine Studie suchen soll. In der Voreinstellung steht
der Wert auf models und bezieht
sich auf ein Unterverzeichnis im config-Ordner, so
dass der Pfad in der Voreinstellung auf
config/models steht.
Der Name des Verzeichnisses unterhalb von
config/models/ dient zugleich als
Name für die Auswahl, die Q. im [Survey Manager]
anbietet. Mit dem Namen
mytemplate muss die
Verzeichnisstruktur unterhalb von
config/models/mytemplate/ zwei
Ordner ausweisen: media und
mytemplate. Das Verzeichnis
media enthält wiederum einen
Ordner mytemplate:
config/models/mytemplate
/media/mytemplate (1)
/mytemplate (2)
Das mytemplate-Verzeichnis
unterhalb von media (1) nimmt die
grafischen Komponenten der Vorlage auf. Hier können,
soweit das vorab festgelegt werden soll, Knöpfe,
Fortschrittsbalken, Logos usw. hinterlegt werden, die
über template.html eingebunden
werden können. Das Verzeichnis
mytemplate enthält das Gerüst des
Studienverzeichnisses und kann vorkonfigurierte Dateien
z.B. access.lst,
active.cfg,
idproperties.cfg,
surveyconfig.cfg,
title.txt bereit stellen und
bereits eine Ausgangsbasis in einem Textverzeichnis
bieten mit den Dateien
finished.msg,
formats.q,
gbuttons.q,
skript.q,
summary.cfg,
surveystats.cfg,
template.html,
template_error.html.
[3] Z.B.: http://de.selfhtml.org/
[5] Die Liste von Typen und Eigenschaften legt ein in der Abstimmung befindlicher Standard des W3C fest: http://www.w3.org/TR/css3-mediaqueries/#media1