| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision |
| de:create:questions:slider [06.05.2019 17:16] – [Beispiel: Euro-Beträge] jonaden | de:create:questions:slider [20.09.2019 20:48] – [Beispiel: Positionierung des angezeigten Werts] msd-media |
|---|
| * ''int **Slider.value**''\\ Der aktuelle Wert des Schiebereglers (wenn nur ein Knopf pro Regler verwendet wird). | * ''int **Slider.value**''\\ Der aktuelle Wert des Schiebereglers (wenn nur ein Knopf pro Regler verwendet wird). |
| * ''boolean **Slider.disabled**''\\ Den Schieberegler deaktivieren. | * ''boolean **Slider.disabled**''\\ Den Schieberegler deaktivieren. |
| * ''number **Slider.getValue**(int //index//, Boolean //exakt//)''\\ Der aktuelle Wert des Schiebereglers (wenn mehrere Knöpfe pro Regler verwendet werden). Der Parameter //exakt// legt fest, ob der exakte Fließkomma-Wert für die Position oder ein gerundeter Wert zurückgegeben werden soll, wie er im Datensatz gespeichert wird. | * ''number **Slider.getValue**(int //index//, Boolean //exakt//)''\\ Der aktuelle Wert des Schiebereglers (wenn mehrere Knöpfe pro Item verwendet werden). Der Parameter //exakt// legt fest, ob der exakte Fließkomma-Wert für die Position oder ein gerundeter Wert zurückgegeben werden soll, wie er im Datensatz gespeichert wird. |
| * ''void **Slider.setValue**(number //Wert//, int //index//)''\\ Den //Wert// des Schiebereglers festlegen (wenn mehrere Knöpfe pro Regler verwendet werden). | * ''void **Slider.setValue**(number //Wert//, int //index//)''\\ Den //Wert// des Schiebereglers festlegen (wenn mehrere Knöpfe pro Item verwendet werden). |
| | * ''object **Slider.getButtonPosition**(int //index//)''\\ Die Position (Mitte) des ggf. durch //index// spezifizierten Reglers in Pixeln, relativ zur Skala. Der Rückgabewert hat die Eigenschaften ''x'' und ''y''. |
| * ''void **Slider.addEventListener**(string //EventID//, callable //Funktion//)''\\ Die Funktion //Funktion// aufrufen, sobald der Teilnehmer auf den Schieberelger klickt und damit einen Wert festlegt. Der Parameter //EventID// muss den Wert "click" haben. | * ''void **Slider.addEventListener**(string //EventID//, callable //Funktion//)''\\ Die Funktion //Funktion// aufrufen, sobald der Teilnehmer auf den Schieberelger klickt und damit einen Wert festlegt. Der Parameter //EventID// muss den Wert "click" haben. |
| |
| |
| 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. | 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). Der interne Wert muss keine ganze Zahl sein, denn der Schieberegler bewegt sich ja stufenlos, sofern die Differenzierung größer als 20 ist. | **Hinweis:** Der interne Wert liegt zwischen 1 und der definierten Differenzierung der Skala (Standard: 101). Der interne Wert muss keine ganze Zahl sein, denn der Schieberegler bewegt sich ja stufenlos, sofern die Differenzierung größer als 20 ist. |
| |
| **Hinweis:** Damit überhaupt ein Wert angezeigt wird, aktivieren Sie in der Frage zunächst die Option //Wert anzeigen//. | **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)'' |
| |
| |
| <!-- | <!-- |
| formatter = function(value, reversed) { | formatter = function(value, reversed) { |
| value = Math.round(value); | |
| if (value < 0) return ""; | if (value < 0) return ""; |
| return String(Math.round((value - 1) / 100 * 20)) + " €"; | return String(Math.round((value - 1) / 100 * 20)) + " €"; |
| </code> | </code> |
| |
| Sie können den Code entweder als Textbaustein speichern und in die Fragebogen-Seite ziehen oder direkt mit einem //HTML-Code// Element auf der Seite platzieren. Der Code muss __unter__ der Frage auf der Seite platziert werden. | Es gibt unterschiedliche Möglichkeiten, den JavaScript-Code zu platzieren. |
| | |
| | * Am komfortabelsten ist das Eingabefeld //JavaScript-Code// unter //Weitere Einstellungen// -> //zusätzlicher Code// direkt in der Schieberegler-Frage. Dort wird das umgebende ''<script>'' weggelassen und mit ''%%s2["%q.id%"].setFormat(formatter);%%'' kann man die Funktion direkt an die Schieberegler der Frage binden. |
| | * Sie können den Code als Textbaustein speichern und beim **Fragebogen zusammenstellen** in die Fragebogen-Seite ziehen oder |
| | * direkt mit einem //HTML-Code// Element auf der Seite platzieren. Der Code muss dabei __unter__ der Frage auf der Seite platziert werden. |
| |
| Falls der angezeigte Wert nicht für alle Schieberegler auf der Seite (gleichermaßen) geändert werden soll, können Sie in der JavaScript-Funktion ''SoSciSliders.setFormat()'' als zweiten Parameter spezifizieren, welcher Schieberegler angepasst werden soll: | Falls der angezeigte Wert nicht für alle Schieberegler auf der Seite (gleichermaßen) geändert werden soll, können Sie in der JavaScript-Funktion ''SoSciSliders.setFormat()'' als zweiten Parameter spezifizieren, welcher Schieberegler angepasst werden soll: |
| ==== Beispiel: Positionierung des angezeigten Werts ==== | ==== 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'') sowie deren Ausrichtung (''align'') 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. | 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 ''<script>''-Tag zu platzieren ist, s. oben) zeigt im Schieberegler "AB01_01" die Beschriftung des ersten Knopfes links über dem Knopf, die Beschriftung des zweiten Knopfes rechts über dem Knopf an. | Der folgende JavaScript-Code (welcher in einem ''<script>''-Tag zu platzieren ist, s. oben) zeigt im Schieberegler "AB01_01" die Beschriftung des ersten Knopfes links über dem Knopf, die Beschriftung des zweiten Knopfes rechts über dem Knopf an. |
| |
| <code javascript> | <code javascript> |
| function positioner(x, y, position, width, height, button) { | function positioner(x, y, position, width, height, buttonIndex) { |
| if (button == 0) { | if (button == 0) { |
| return { | return { |
