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:55] – [Beispiel: Prozente] admin | de:create:questions:slider [11.06.2024 15:52] (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 209: | Zeile 231: | ||
<code javascript> | <code javascript> | ||
- | function | + | window.addEventListener(" |
- | if (button == 0) { | + | |
- | | + | // Erste Funktion für die Beschriftung des Haupt-Reglers (Index 0, links vom Regler) |
- | x:x - width / 2, | + | |
- | y:y - 20, | + | return { |
- | align:" | + | x: x - width / 2, |
+ | y: y - 20, | ||
+ | align: " | ||
+ | } | ||
} | } | ||
- | } else { | + | s2.AB01.item(1).setDisplay(positionerA, 0); |
- | return { | + | |
- | x:x + width / 2, | + | |
- | y:y - 20, | + | |
- | align:" | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | SoSciSliders.setDisplay(positioner, "AB01_01"); | + | // Zweite Funktion für die Beschriftung des sekundären Reglers |
+ | function positionerB(x, | ||
+ | return { | ||
+ | x: x + width / 2, | ||
+ | y: y - 20, | ||
+ | align: | ||
+ | } | ||
+ | } | ||
+ | s2.AB01.item(1).setDisplay(positionerB, | ||
+ | |||
+ | }); | ||
</ | </ | ||
Zeile 363: | Zeile 391: | ||
}); | }); | ||
</ | </ | ||
+ | |||
+ | |||
+ | ===== 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(); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ===== Summe der Regler prüfen ===== | ||
+ | |||
+ | In der Schieberegler-Frage kann eingestellt werden, dass die Regler-Summe begrenzt oder fixiert wird -- wobei SoSci Survey im zweiten Fall die restlichen Regler bewegt, damit die Summe stimmt. | ||
+ | |||
+ | Falls Sie einfach nur prüfen möchten, ob die Summe der Regler einem bestimmten Wert entspricht, können Sie eine [[: | ||
+ | |||
+ | - Wenn ein Regler noch nicht bewegt wurde, speichert er einen negativen Antwortcode. | ||
+ | - In der Null-Position speichert der Schiebereger den Antwortcode 1. | ||
+ | |||
+ | Für das Aufsummieren müssen also negative Codes und ggf. eine Verschiebung um -1 beachtet werden. Der PHP-Code für die Überprüfung könnte wie folgt aussehen. Dieses Beispiel geht davon aus, dass der Schieberegler die Kennung '' | ||
+ | |||
+ | <code php> | ||
+ | // Summe ermitteln | ||
+ | $sum = 0; | ||
+ | foreach (valueList(' | ||
+ | if ($value > 0) { | ||
+ | $sum+= $value - 1; | ||
+ | } | ||
+ | } | ||
+ | // Prüfung der korrekte Summe | ||
+ | if ($sum != 100) { | ||
+ | repeatPage(' | ||
+ | } | ||
+ | </ | ||
+ | |||
===== 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: |