Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision |
de:create:questions:slider [21.07.2017 09:14] – admin | de:create:questions:slider [11.01.2019 11:29] – admin |
---|
* ''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 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. |
* ''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 Regler verwendet werden). |
| * ''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. |
| |
| Folgender HTML-/JavaScript-Code ([[:de:create:javascript]]) sorgt beispielsweise dafür, dass der Teilnehmer direkt nach Klick auf das erste Item der Schieberegler-Frage "AB01" zur nächsten Seite weitergeleitet wird, wenn ein gültiger Wert ausgewählt wurde. |
| |
| <code javascript> |
| <script type="text/javascript"> |
| // Der Schieberegler ist erst verfügbar, wenn die Seite vollständig geladen wurde |
| SoSciTools.attachEvent(window, "load", function() { |
| var slider = SoSciSliders.getSlider("AB01_01"); |
| // Das "click" Event wird aufgerufen, wenn der Teilnehmer den Schieberegler setzt/bewegt |
| slider.addEventListener("click", function() { |
| if (slider.getValue() > 0) { |
| SoSciTools.submitPage(); |
| } |
| }); |
| }); |
| </script> |
| </code> |
| |
| |
| |
| |
==== Beispiel 1 ==== | ==== Beispiel: Euro-Beträge ==== |
| |
Der folgende HTML-/JavaScript-Code transformiert den Wertebereich 1-101 auf 0-20, rundet auf ganze Zahlen und zeigt ein Euro-Zeichen hinter dem Wert an. | Der folgende HTML-/JavaScript-Code transformiert den Wertebereich 1-101 auf 0-20, rundet auf ganze Zahlen und zeigt ein Euro-Zeichen hinter dem Wert an. |
SoSciSliders.setFormat(formatter, "AB01_03"); | SoSciSliders.setFormat(formatter, "AB01_03"); |
</code> | </code> |
| |
| **Hinweis:** Wenn Sie den obigen JavaScript-Code verwenden und die Items __nicht__ einzeln angeben, dann wird die Formatierungs-Funktion auf alle zugleich sichtbaren Schieberegler angewandt, nicht nur auf jene der aktuellen Seite. Die Druckansicht des Fragebogens (Korrekturfahne und ausgefüllte Fragebögen) ist dann unter Umständen fehlerhaft. |
| |
**Tipp:** Der Name ''formatter'' für die Formatierungs-Funktion ist willkürlich gewählt. Sie können unterschiedliche Funktionen definieren, um bei unterschiedlichen Schiebereglern unterschiedliche Werte anzuzeigen. | **Tipp:** Der Name ''formatter'' für die Formatierungs-Funktion ist willkürlich gewählt. Sie können unterschiedliche Funktionen definieren, um bei unterschiedlichen Schiebereglern unterschiedliche Werte anzuzeigen. |
| |
| |
==== Beispiel 2 ==== | ==== Beispiel: Negative Werte ==== |
| |
Der folgende JavaScript-Code (er muss wieder wie oben von einem ''<script>''-Tag umschlossen werden) zeigt eine Zahl zwischen -25.0°C und +25.0°C. Die JavaScript-Methode ''toFixed()'' sorgt für die Nachkommastelle. | Der folgende JavaScript-Code (er muss wieder wie oben von einem ''<script>''-Tag umschlossen werden) zeigt eine Zahl zwischen -25.0°C und +25.0°C. Die JavaScript-Methode ''toFixed()'' sorgt für die Nachkommastelle. |
| |
| |
==== Beispiel 3 ==== | ==== Beispiel: Uhrzeit ==== |
| |
| Um einen Zeitwert zwischen "0:00 Std." und "24:00 Std." mit einer Schrittweite von 15 Minuten anzuzeigen, muss im Schieberegler eine Differenzierung "1..97" eingestellt werden (4 Schritte mal 24 Stunden plus den Wert 24:00). |
| |
| <code javascript> |
| <script type="text/javascript"> |
| <!-- |
| formatter = function(value, reversed) { |
| if (value < 0) return ""; |
| // Transformation auf 0..96 |
| value = Math.round(value - 1); |
| // Stunden und Minuten durch Division/Rest (Modulo) mit 4 ermitteln |
| var hours = Math.floor(value / 4); |
| var minutes = Math.floor(60 * (value % 4) / 4); |
| // Die Minuten immer zweistellig anzeigen |
| if (minutes < 10) minutes = "0" + minutes; |
| // Die Werte durch einen Doppelpunkt verbinden |
| return hours + ":" + minutes + " Std."; |
| } |
| SoSciSliders.setFormat(formatter); |
| // --> |
| </script> |
| </code> |
| |
| Mit dem gleiche Code lässt sich natürlich eine Uhrzeit abfragen, es muss lediglich das "Std." am Ende gegen "Uhr" ausgestauscht werden. |
| |
| |
| ==== 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". | 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 4 ==== | ==== 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'') 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. |