Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
de:create:questions:slider [14.04.2022 18:44] – [Beispiel: Uhrzeit] admin | de:create:questions:slider [19.04.2023 21:55] (aktuell) – admin | ||
---|---|---|---|
Zeile 82: | Zeile 82: | ||
**Hinweis: | **Hinweis: | ||
- | **Hinweis: | + | **Hinweis: |
**Hinweis: | **Hinweis: | ||
- | ==== Beispiel: Euro-Beträge | + | ==== Basis-Script |
- | Der folgende | + | Der folgende JavaScript-Code |
<code javascript> | <code javascript> | ||
var formatter = function(value, | var formatter = function(value, | ||
// Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt | // Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt | ||
- | if (value < 0) return ""; | + | if (value < 0) { |
- | // Den Wert von 1-101 auf 0-100 transformieren (minus 1) und runden | + | |
- | // dann auf den Bereich 0-1 (dividiert durch 100), | + | } |
- | // dann auf den Bereich 0-20 (multipliziert mit 20) und | + | // Den Wert runden und als Texte zur Anzeige zurückgeben |
- | // Zuletzt noch ein Leerzeichen und Eurozeichen ergänzen (plus " €") | + | return String(Math.round(value)); |
- | return String(Math.round((value | + | |
} | } | ||
+ | |||
+ | // Die oben definierte Funktion für alle Schieberegler auf der Seite verwenden | ||
SoSciSliders.setFormat(formatter); | SoSciSliders.setFormat(formatter); | ||
</ | </ | ||
- | Es gibt unterschiedliche Möglichkeiten, | ||
- | * Am komfortabelsten ist das Eingabefeld // | + | ==== Einbindung des JavaScript-Codes ==== |
+ | |||
+ | Es gibt unterschiedliche Möglichkeiten, | ||
+ | |||
+ | * Am komfortabelsten ist das Eingabefeld // | ||
* Sie können den Code als Textbaustein speichern und beim **Fragebogen zusammenstellen** in die Fragebogen-Seite ziehen oder | * Sie können den Code als Textbaustein speichern und beim **Fragebogen zusammenstellen** in die Fragebogen-Seite ziehen oder | ||
* direkt mit einem // | * direkt mit einem // | ||
Zeile 120: | Zeile 124: | ||
**Tipp:** Der Name '' | **Tipp:** Der Name '' | ||
+ | |||
+ | |||
+ | ==== Beispiel: Euro-Beträge ==== | ||
+ | |||
+ | Der folgende HTML-/ | ||
+ | |||
+ | <code javascript> | ||
+ | var formatter = function(value, | ||
+ | // Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt | ||
+ | if (value < 0) return ""; | ||
+ | // Den Wert von 1-101 auf 0-100 transformieren (minus 1) und runden mittels Math.round(), | ||
+ | // dann auf den Bereich 0-1 (dividiert durch 100), | ||
+ | // dann auf den Bereich 0-20 (multipliziert mit 20) und | ||
+ | // Zuletzt noch ein Leerzeichen und Eurozeichen ergänzen (plus " €") | ||
+ | return String(Math.round((value - 1) / 100 * 20)) + " €"; | ||
+ | } | ||
+ | SoSciSliders.setFormat(formatter); | ||
+ | </ | ||
Zeile 178: | Zeile 200: | ||
// Der Prozentwert ist der interne Wert minus 1 | // Der Prozentwert ist der interne Wert minus 1 | ||
var percent = Math.round(value - 1); | var percent = Math.round(value - 1); | ||
- | return percent + "% / " + (100 - percent) + " | + | return percent + "% / " + (100 - percent) + " |
} | } | ||
SoSciSliders.setFormat(formatter); | SoSciSliders.setFormat(formatter); | ||
+ | SoSciSliders.setDisplay(" | ||
// --> | // --> | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | Das ''& | ||
Zeile 360: | Zeile 385: | ||
}); | }); | ||
</ | </ | ||
+ | |||
+ | |||
+ | ===== 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 " | ||
+ | |||
+ | <code html> | ||
+ | <div> | ||
+ | Die aktuelle Summe beträgt <span id=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Der JavaScript-Code muss dann bei jeder Änderung ('' | ||
+ | |||
+ | <code javascript> | ||
+ | window.addEventListener(" | ||
+ | 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(" | ||
+ | } | ||
+ | |||
+ | for (var key in items) { | ||
+ | items[key].addEventListener(" | ||
+ | } | ||
+ | refresh(); | ||
+ | }); | ||
+ | </ | ||
+ | |||
===== Literatur ===== | ===== Literatur ===== | ||
Funke, Frederik. (2010). Internet-based measurement with visual analogue scales: An experimental investigation (Internetbasierte Messungen mit visuellen Analogskalen: | Funke, Frederik. (2010). Internet-based measurement with visual analogue scales: An experimental investigation (Internetbasierte Messungen mit visuellen Analogskalen: |