Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision |
de:create:questions:slider [17.03.2018 20:53] – [Beispiel 1] admin | de:create:questions:slider [11.01.2019 11:29] – admin |
---|
| |
| |
==== 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. |
</code> | </code> |
| |
**Hinweis:** Wenn Sie den obigen JavaScript-Code verwenden und die Items __nicht__ einzeln angeben, dann wird die Druckansicht des Fragebogens (Korrekturfahne und ausgefüllte Fragebögen) fehlerhaft sein. Die Formatierungs-Funktion wird dann auf alle zugleich sichtbaren Schieberegler angewandt, nicht nur auf jene der jeweiligen Seite. | **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. |