Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
de:create:questions:slider [11.01.2019 11:29] – admin | de:create:questions:slider [11.06.2024 15:52] (aktuell) – admin | ||
---|---|---|---|
Zeile 50: | Zeile 50: | ||
* '' | * '' | ||
* '' | * '' | ||
- | * '' | + | * '' |
- | * '' | + | * '' |
+ | * '' | ||
+ | * '' | ||
* '' | * '' | ||
Zeile 77: | Zeile 79: | ||
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, | 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, | ||
- | |||
- | **Hinweis: | ||
**Hinweis: | **Hinweis: | ||
+ | **Hinweis: | ||
- | ==== Beispiel: Euro-Beträge ==== | + | **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 ('' |
- | Der folgende HTML-/ | ||
- | <code html> | + | ==== Basis-Script ==== |
- | <script type=" | + | |
- | <!-- | + | Der folgende JavaScript-Code zeigt den eingestellten Wert so an, wie er im Datensatz gespeichert wird, also ohne Prozentzeichen und beginnend bei 1. |
- | formatter = function(value, | + | |
- | if (value < 0) return ""; | + | <code javascript> |
- | return String(Math.round((value | + | var formatter = function(value, |
+ | // Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt | ||
+ | if (value < 0) { | ||
+ | | ||
+ | } | ||
+ | // Den Wert runden und als Texte zur Anzeige zurückgeben | ||
+ | return String(Math.round(value)); | ||
} | } | ||
+ | |||
+ | // Die oben definierte Funktion für alle Schieberegler auf der Seite verwenden | ||
SoSciSliders.setFormat(formatter); | SoSciSliders.setFormat(formatter); | ||
- | // --> | ||
- | </ | ||
</ | </ | ||
- | Sie können den Code entweder | + | |
+ | ==== Einbindung des JavaScript-Codes ==== | ||
+ | |||
+ | Es gibt unterschiedliche Möglichkeiten, | ||
+ | |||
+ | * Am komfortabelsten ist das Eingabefeld // | ||
+ | | ||
+ | | ||
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 '' | 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 '' | ||
Zeile 111: | 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 118: | Zeile 149: | ||
<code javascript> | <code javascript> | ||
- | formatter = function(value) { | + | var formatter = function(value) { |
if (value < 0) return ""; | if (value < 0) return ""; | ||
var text = ((value - 51) / 50 * 25).toFixed(1) + " | var text = ((value - 51) / 50 * 25).toFixed(1) + " | ||
Zeile 137: | Zeile 168: | ||
<script type=" | <script type=" | ||
<!-- | <!-- | ||
- | formatter = function(value, | + | var formatter = function(value, |
if (value < 0) return ""; | if (value < 0) return ""; | ||
// Transformation auf 0..96 | // Transformation auf 0..96 | ||
Zeile 155: | Zeile 186: | ||
Mit dem gleiche Code lässt sich natürlich eine Uhrzeit abfragen, es muss lediglich das " | Mit dem gleiche Code lässt sich natürlich eine Uhrzeit abfragen, es muss lediglich das " | ||
+ | |||
+ | |||
+ | |||
+ | ==== Beispiel: Prozente ==== | ||
+ | |||
+ | In diesem Beispiel soll eine Prozentaufteilung, | ||
+ | |||
+ | <code javascript> | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | var formatter = function(value, | ||
+ | if (value < 0) return ""; | ||
+ | // Der Prozentwert ist der interne Wert minus 1 | ||
+ | var percent = Math.round(value - 1); | ||
+ | return percent + " | ||
+ | } | ||
+ | SoSciSliders.setFormat(formatter); | ||
+ | SoSciSliders.setDisplay(" | ||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Das ''& | ||
Zeile 172: | Zeile 226: | ||
==== 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 '' | + | 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 '' |
Der folgende JavaScript-Code (welcher in einem ''< | Der folgende JavaScript-Code (welcher in einem ''< | ||
<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 217: | Zeile 277: | ||
**Hinweis: | **Hinweis: | ||
- | **Tipp: | + | **Tipp: |
Zeile 331: | 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: |