===== Anzeige der aktuellen Position =====
In einer Schieberegler-Frage lässt sich mit //Wert anzeigen// einstellen, dass über/neben/unter dem Regler-Knopf der aktuelle Wert (in Prozent) angezeigt wird.
Falls etwas anderes als der Prozentwert angezeigt werden soll, lässt sich dies mit ein wenig JavaScript bewerkstelligen. Zunächst benötigt man dafür eine Funktion, welche den internen Wert des Schiebereglers in den Text überführt, der angezeigt werden soll.
**Hinweis:** Damit überhaupt ein Wert angezeigt wird, aktivieren Sie in der Frage zunächst die Option //Wert anzeigen//.
**Hinweis:** Der interne Wert liegt zwischen 1 und der definierten Differenzierung der Skala (Standard: 101).
**Hinweis:** Während der Bedienung des Schiebereglers wird intern mit einer Dezimalzahl gearbeitet, denn der Schieberegler bewegt sich ja stufenlos, wenn eine Differenzierung größer als 20 eingestellt ist. Für die Ausgabe muss dieser Wert (''value'') evtl. auf eine Ganzzahl gerundet werden, um den gleichen Wert zu erhalten, wie er später im Datensatz gespeichert wird: ''Math.round(value)''
==== Basis-Script ====
Der folgende JavaScript-Code zeigt den eingestellten Wert so an, wie er im Datensatz gespeichert wird, also ohne Prozentzeichen und beginnend bei 1.
var formatter = function(value, reversed) {
// Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt
if (value < 0) {
return "";
}
// Den Wert runden und als Texte zur Anzeige zurückgeben
return String(Math.round(value));
}
// Die oben definierte Funktion für alle Schieberegler auf der Seite verwenden
SoSciSliders.setFormat(formatter);
==== Einbindung des JavaScript-Codes ====
Es gibt unterschiedliche Möglichkeiten, den JavaScript-Code zu platzieren. Lesen Sie dazu auch mehr in der Anleitung [[:de:create:javascript]].
* Am komfortabelsten ist das Eingabefeld //JavaScript-Code// unter //Weitere Einstellungen// -> //zusätzlicher Code// direkt in der Schieberegler-Frage. Dort wird das umgebende ''
Mit dem gleiche Code lässt sich natürlich eine Uhrzeit abfragen, es muss lediglich das "Std." am Ende gegen "Uhr" ausgestauscht werden.
==== Beispiel: Prozente ====
In diesem Beispiel soll eine Prozentaufteilung, z.B. "40% / 60%" angezeigt werden. Im Schieberegler muss eine Differenzierung "1..101" eingestellt werden (101 Schritte von 0 bis 100%).
Das '' '' ist ein geschütztes Leerzeichen. Alternativ kann man eine Funktion zur Positionierung verwenden (s. unten), welche die Breite des Anzeigefeldes ein wenig erhöht.
==== Beispiel: Anzeige für einzelne Schieberegler ====
Mittels JavaScript können Sie für einzelne Schieberegler die Anzeige der Position deaktivieren. Folgender HTML-/JavaScript-Code deaktiviert die Anzeige für den zweiten Schieberegler in Frage "AB01".
==== Beispiel: Positionierung des angezeigten Werts ====
Sie können exakt steuern, an welcher Position der Wert angezeigt wird. Dafür müssen Sie eine JavaScript-Funktion definieren, welche die gewünschte Position der Beschriftung (Mittelpunkt ''x'', ''y'') und optional die Breite (''width'' in Pixeln), Ausrichtung (''align'') und Schriftgröße (''fontSize'') als Objekt zurückgibt. Als Parameter erhält die Funktion die Position des Regler-Knopfs (Mittelpunkt x, y), die relative Position (im Wertebereich 0 bis 1) sowie Breite und Höhe der Beschriftung und den Index des Regler-Knopfes, für den Fall, dass ein zweiter Regler aktiviert ist.
Der folgende JavaScript-Code (welcher in einem ''
**Hinweis:** Die JavaScript-Funktion ''attachInput()'' erwartet als Parameter die HTML-ID des Eingabefelds.
**Tipp:** Sie können das Eingabefeld an beliebiger Stelle auf der Fragebogen-Seite platzieren: [[de:create:inputs-single]]
===== Anbindung einer weiß-nicht Option =====
Die Vorlagen für Schieberegler (wählbar unter **Frage hinzufügen**) beinhalten bereits Schieberegler mit "weiß nicht" Option. Allerdings nur für den einseitigen Schieberegler und auch nur
eine "weiß nicht" Option.
Das folgende Beispiel zeigt, wie Sie pro Schieberegler mehrere "weiß nicht" Optionen verwenden können. Dafür wird ein Schieberegler mit einer voll beschrifteten Skala kombiniert ([[:de:create:combine]]). Im folgenden Beispiel hat der Schieberegler die Kennung "AB01", die Skala mit 3 Optionen hat die Kennung "AB02" und während die erste Option (Code 1) eine Auswahl am Schieberegler indiziert, sollen die beiden anderen Optionen (Codes 2 und 3) den Schieberegler deaktivieren.
**Tipp:** Falls Sie keine dritte Option für den aktivierten Schieberegler verwenden möchten, dann aktivieren Sie im Fragebogen (**Fragebogen zusammenstellen** -> Karteireiter //Einstellungen//) die Option, dass man ausgewählte Optionen wieder abwählen kann.
{{ :de:create:questions:exp.slider.combined.png?nolink | Schieberegler mit 2 weiß-nicht Optionen}}
Folgender PHP- und HTML-/JavaScript-Code ist für die Darstellung erforderlich.
question('AB01', 'combine=AB02');
Den JavaScript-Code speichert man am besten als Textbaustein. Wichtig: Vor dem JavaScript-Code muss ggf. noch ''%%%%'', um ihn in HTML einzubetten.
// Define questions
var sliderID = "AB01";
var scaleID = "AB02";
// Define items to tune
var items = [1,2,3];
// Define scale options to disable the slider
var scaleDK = [2,3];
// Define scale options to enable the slider
var scaleVA = [1];
// Remember slider values before disabling
var sliderValues = []
// Convenience function
function makeID(questionID, item, option) {
var itemID = String(item);
if (itemID.length < 2) {
itemID = "0" + itemID;
}
var itemFull = questionID + "_" + itemID;
if (!option) {
return itemFull;
}
return itemFull + option;
}
// Function to care about setting the correct values
function refreshSlider(item, status) {
var slider = SoSciSliders.getSlider(makeID(sliderID, item));
// Optionally reset slider value
if (status) {
if ((slider.value == -9) && sliderValues[item]) {
slider.value = sliderValues[item];
}
} else {
sliderValues[item] = slider.value;
slider.value = -9;
}
// Optionally disable slider
slider.disabled = !status;
}
// Function to select the (first) enabled-option if slider is used
function refreshScale(item) {
if (scaleVA.length < 1) {
return;
}
var slider = SoSciSliders.getSlider(makeID(sliderID, item));
if (slider.value > 0) {
var option = scaleVA[0];
var scaleOption = document.getElementById(makeID(scaleID, item, option));
scaleOption.checked = true;
}
}
// Attach events to the scale
SoSciTools.attachEvent(window, "load", function() {
for (var ii=0; ii
===== Summe der Regler anzeigen =====
Die Anzeige der aktuellen Summe aller Regeler erfordert zunächst ein HTML-Element mit einer ID, in welches man den Wert "hineinschreiben" kann. Dies kann in einem Element der Frage (Titel, Erklärung, ...) platziert werden oder als HTML-Code separat auf der Seite.
Die aktuelle Summe beträgt -%.
Der JavaScript-Code muss dann bei jeder Änderung (''%%"change"%%'') alle Regler durchgehen. Darum kümmert sich hier die Funktion `''refresh()''. Ist deren Wert eines Reglers größer als 0 (also nicht auf der "keine Angabe" Position), dann wird der Wert in die Summe aufgenommen. Im folgenden Code wird der Wert zunäcsht gerundet (Schieberegler können auch nicht-ganzzahlige Werte liefern) und jeweils noch 1 subtrahiert, weil der Wertebereich hier von 1 bis 101 geht, diese Werte aber für 0 bis 100 % stehen.
window.addEventListener("load", function() {
var slider = s2.SR01;
var items = slider.items;
function refresh() {
var sum = 0;
for (var key in items) {
var value = items[key].value;
if (value > 0) {
sum+= Math.round(value) - 1;
}
}
document.getElementById("output").innerHTML = sum;
}
for (var key in items) {
items[key].addEventListener("change", refresh);
}
refresh();
});
===== Literatur =====
Funke, Frederik. (2010). Internet-based measurement with visual analogue scales: An experimental investigation (Internetbasierte Messungen mit visuellen Analogskalen: Eine experimentelle Untersuchung). Dissertation. [[http://frederikfunke.net/dissertation/Funke_%282010%29_Internet-based_measurement_with_visual_analogue_scales-Dissertation.pdf|Online verfügbar]]