Schieberegler bzw. Slider helfen dabei, spielerisch Werte in bestimmten Wertebereichen anzugeben und visuell darzustellen. In Abbildung 17.1, „Schieberegler“ werden unterschiedliche Funktionalitäten auf einmal verdeutlicht:
Gestaltung der Regler
Gestaltung der Leisten selbst
Anzeige der gewählten Werte
Anzeige der Summe aller Werte
Verbleibende Punkte zur Verteilung
Ferner unterstützen die Schieberegler Eingabezwang über den Skriptparameter defaultnomissing und sie bieten einen Enthaltungsmechanismus über das OpenNumFormat.
Um Schieberegler 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 zu
verwendenden Bilder im Mediapfad der zugehörigen Umfrage
(./media/<Name der Umfrage>/)
hinterlegt werden.
Die Schieberegler sind eine Alternative zur NumQ und können sie durch folgende Skriptanweisung ersetzen:
HTML{ numQClass = SliderQ; };
Mit dieser Einstellung verwendet Q. anstelle einfacher
Eingabefelder, Schieberegler mit einem
voreingestellten Aussehen. Der einstellbare
Wertebereich wird analog zur NumQ mit dem
OpenNumFormat festgelegt.
Exkurs:
missingValue=999;
OpenNumFormat f1 = 1 2 0 1 0.0 10.0 997 "Ungültige Eingabe!";
// | | | | Fehlermeldung
// | | | 997 Wert für Enthaltung/kA (optional)
// | | 0.0-10.0 Wertebereich
// | 0-1 Ziffern (Nachkomma)
// 1-2 Ziffern (Vorkomma)
NumQ punkte;
Text="Bitte bewerten Sie Marke A (0-schlecht, 10-sehr gut).";
labels=
1 "Marke A" format f1
;
Beinhaltet das OpenNumFormat den optionalen Wert für
eine Enthaltung/kA (noAnswer)
erscheint automatisch ein Button zur Enthaltung. Die
dazu gehörige Beschriftung erfolgt über die global
definierbare Textkonstante
noAnswerText. Wie bei jedem
OpenNumFormat muss sich der Labelcode für
Enthaltung (und auch für
_missingValue) außerhalb des
erlaubten Wertebereichs befinden, sonst kommt es
zu Überschneidungen in den Codedefinitionen.
Sämtliche Einstellungen an den Schiebereglern werden mit Hilfe des setProperty() Mechanismus vorgenommen (s.a. „Q. Skript“). Die Parameter beginnen mit dem Kürzel sl_ und lassen sich in 2 Kategorien unterteilen:
grafische Parameter
funktionale Parameter
Eine Ausnahme bildet die Grafik für den Regler selbst.
Anstelle des überholten Parameters
sl_image kann die Grafik dem
jeweiligen Label mitgegeben werden:
labels=
1 "@slider(grafik.png) Text"
;
Grafische Parameter
Mit den grafischen Parametern lassen sich der Regler und die Leisten optisch frei gestalten. Sie können sowohl schlicht mit Farben aus der RGB Palette, als auch mit Grafiken versehen werden. Entsprechende Bilder sind in beliebigen webfähigen Formaten frei gestaltbar. Zu beachten ist hierbei, dass sie später in der Umfrage in Originalgröße dargestellt werden.
Die Verwendung von Breiten-, Höhen- und Farbangaben wird als »überholt« eingestuft und mittelfristig nicht mehr unterstützt. Es wird ausdrücklich die Verwendung von Bildern für die Leiste und den Regler empfohlen. In diesem Fall werden die Bildgrößen automatisch ermittelt.
- sl_barWidth
Breite der Leiste. Anzugeben als ganzzahliger Wert in Pixel. Gilt für alle Standard-Schieberegler (ohne Verwendung von sl_barImage) innerhalb einer Frage.
Default: 200
- sl_barHeight
Höhe der Leiste. Anzugeben wie bei sl_barWidth.
Default: 15
- sl_barColor
Farbe der (gesamten) Leiste. Anzugeben in HEX (6 Ziffern) oder transparent.
Default: transparent
- sl_barColorLeft
Farbe des linken Teils der Leiste ab Position des Regelelements. Sie ist anzugeben wie bei sl_barColor und höher priorisiert. Für unterschiedliche Farben links und rechts vom Regelelement sind also beide Angaben notwendig. Werden gleichzeitig auch Bilder für die Leiste definiert, so werden diese gegenüber den Farbangaben bevorzugt.
Default: transparent
- sl_barImage
Grafik für die (gesamte) Leiste. Sie wird zentriert und in Originalgröße angezeigt. Anzugeben ist der Dateiname einer Grafik inkl. Endung.
Default:
- sl_barImageLeft
Grafik für den linken Teil der Leiste ab Position des Regelelements. Sie ist anzugeben wie bei sl_barImage und höher priorisiert. Das bedeutet, dass Sie auf der Grafik aus sl_barImage liegt und entsprechend die gleiche Größe besitzen sollte.
Default:
- sl_imageWidth
Breite des Regelelements. Anzugeben als ganzzahliger Wert in Pixel. Bei mehreren Schiebereglern können die Regelelemente individuell gestaltet werden, indem man mehrere Breiten, getrennt durch Leerzeichen, angibt. Gibt es mehr Schieberegler als angegebene Breiten, wird jeweils die zuletzt angegebene weiter verwendet.
Default: 15
- sl_imageHeight
Höhe des Regelelements. Anzugeben wie bei sl_imageWidth.
Default: 25
- sl_color
Farbe des Regelelements. Anzugeben in HEX (6 Zeichen) oder transparent. Bei mehreren Schiebereglern können die Regelelemente individuell eingefärbt werden, indem man mehrere Farben, getrennt durch Leerzeichen, angibt. Gibt es mehr Schieberegler als angegebene Farben, wird jeweils die zuletzt angegebene weiter verwendet.
Default: e6e6e6
- sl_image veraltet
Anstelle von sl_image kann man dem Label selbst die Grafik über
@slider(grafik.png)mitgeben. Der Mechanismus ist robuster, besonders wenn Labels zufällig angeordnet oder gefiltert werden sollen.[Ansonsten gilt: Grafik für das Regelelement. Es wird zur Leiste zentriert und in Originalgröße angezeigt. Anzugeben ist der Dateiname einer Grafik inkl. Endung. Bei mehreren Schiebereglern können die Regelelemente individuell mit Grafiken versehen werden, indem man mehrere, durch Leerzeichen getrennte Angaben macht. Gibt es mehr Schieberegler als angegebene Grafiken, wird jeweils die zuletzt angegebene Bilddatei weiter verwendet.]
Funktionale Parameter
Mit den funktionalen Parameter lassen sich Startwerte, Schrittweiten, Anzeigefelder, verteilbare Punkte, Verhaltensmodi, Eingabezwänge und Enthaltungsoptionen konfigurieren:
- Felder für Summe und Rest
Bei mehreren Slidern kann es sinnvoll sein, sich die Gesamtsumme aller eingestellten Werte und/oder die Anzahl der noch zu verteilenden Punkte anzeigen zu lassen. Entsprechende Felder können frei im title der Frage platziert werden. Mit dem Schlüsselbegriff
@slider_sumwird ein Feld für die Summe platziert, mit@slider_rest(<VALUE>)ein Feld für die noch verteilbaren Punkte, wobei<VALUE>die Gesamtheit der zu verteilenden Punkte darstellt.- sl_startValues
Startwerte der Schieberegler. Anzugeben als ganzzahliger Wert innerhalb des Wertebereichs. Bei mehreren Schiebereglern innerhalb einer Frage können Startwerte mit Leerzeichen getrennt hintereinander geschrieben werden. Bei fehlenden oder fehlerhaften Angaben wird der Minimalwert aus dem OpenNumFormat genutzt.
Default: Minimalwert aus OpenNumFormat
- sl_stepSize
Schrittweiten der Schieberegler. Anzugeben als ganzzahliger Wert innerhalb des Wertebereichs. Bei mehreren Schiebereglern innerhalb einer Frage können Startwerte mit Leerzeichen getrennt hintereinander geschrieben werden. Bei fehlenden oder fehlerhaften Angaben, wird die kleinstmögliche Schrittweite entsprechend der Anzahl der Nachkommastellen aus dem OpenNumFormat genutzt.
Default: Kleinstmögliche Schrittweite
- sl_visibility
Anfangs-Sichtbarkeit der Regelelemente. Anzugeben sind ein oder mehrere, mittels Leerzeichen getrennte Werte aus den Optionen. Bei fehlenden oder fehlerhaften Angaben wird der Defaultwert verwendet.
Optionen: hidden ∣ visible
Default: visible
- sl_showValues
Anzeige der eingestellten Werte neben den Schiebereglern. Auf der rechten und linken Seite kann eine Anzeige mit dem tatsächlich eingestellten Wert erscheinen. Die Einstellung yes ist identisch mit right. Die Option slider führt dazu, dass der eingestellte Wert auf dem jeweiligen Regelelement selbst dargestellt wird.
Optionen: yes ∣ no ∣ left ∣ right ∣ both ∣ slider.
Default: no
- sl_maxSum
Legt eine maximal einstellbare Gesamtsumme fest. Identisch zum Parameter in @slider_rest(XX). Werden beide Angaben getätigt, hat der angegebene Wert in @slider_rest(XX) die höhere Priorität.
Default: ∞
- sl_mode
Stellt ein, ob und wie sich mehrere Schieberegler zueinander verhalten und beeinflussen. Nur sinnvoll, wenn über @slider_rest(XX) oder sl_maxSum maximale Gesamtsummen der Schieberegler vorgeschrieben sind. Option block unterbindet die Überschreitung der Maximalsumme, ohne andere Schieberegler zu beeinflussen. Option modify hingegen stellt die anderen Regler bei Überschreitung der Maximalsumme automatisch zu gleichen Anteilen zurück.
Optionen: block ∣ modify ∣ none
Default: none
- Enthaltung: sl_unspecified_button_checked
Anzugeben ist der Dateiname einer Grafik inkl. Endung für einen markierten Enthaltungs-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
- Enthaltung: sl_unspecified_button_unchecked
Anzugeben ist der Dateiname einer Grafik inkl. Endung für einen unmarkierten Enthaltungs-Button. Die Verwendung unterschiedlicher Buttons innerhalb einer Frage entspricht sl_unspecified_button_checked.
Default: button_unchecked.gif
Code für das Beispiel aus Abbildung 17.1, „Schieberegler“:
HTML{ numQClass=SliderQ; };
missingValue=999;
OpenNumFormat f1 = 1 2 0 1 0.0 10.0 "Zahl zwischen 0 und 10 eingeben!";
HTML{
//veraltet (s.o.): setProperty("sl_image" "gess.gif"); // Regelelement
setProperty("sl_barImage" "gtor.png"); // Leiste
setProperty("sl_showValues" "yes"); // Werte anzeigen
setProperty("sl_startValues" " 4 5 6 "); // Startwerte
setProperty("sl_mode" "block"); // Modus: block
};
NumQ sl6;
Text="Bitte verteilen Sie 20 Punkte auf diese Marken.";
Title="
Bisher vergebene Punkte: @slider_sum<br>
Übrige Punkte: @slider_rest(20)
";
labels=
1 "@slider(gess.gif) Marke A" format f1
2 "@slider(gess.jpg) Marke B" format f1
3 "@slider(gess.png) Marke C" format f1
;
assert sl6.1 + sl6.2 + sl6.3 eq 20 "Summe muss 20 ergeben!";
Die Schieberegler reihen sich nahtlos in das Formatierungskonzept der grafischen Buttons ein. Ihr Layout lässt sich daher beliebig über CSS gestalten. Die grundlegende Verfahrensweise ist ausführlich und exemplarisch in „Grafische Formatierung und Layout“ beschrieben. Die nötigen CSS-Klassen sind in Abbildung 17.2, „CSS-Klassen SliderQ“ dargestellt.
Optional lassen sich bereits bewegte Schieberegler von denen im Ausgangszustand unterscheiden. Hierzu kann die CSS-Klasse .qslidermoved verwendet werden, z.B.:
.qslidermoved{ background:url(/media/@insert(_surveyname)/img.png) no-repeat 50% 50%; }