Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:slider [14.04.2022 18:55] – [Beispiel: Prozente] admin
+++ de:create:questions:slider [19.04.2023 21:55] (aktuell) – admin
@@ Zeile 82: / Zeile 82: @@
 **Hinweis:** Damit überhaupt ein Wert angezeigt wird, aktivieren Sie in der Frage zunächst die Option //Wert anzeigen//.
-**Hinweis:** Der interne Wert liegt zwischen 1 und der definierten Differenzierung der Skala (Standard: 101). Der interne Wert muss keine ganze Zahl sein, denn der Schieberegler bewegt sich ja stufenlos, sofern die Differenzierung größer als 20 ist.
+**Hinweis:** Der interne Wert liegt zwischen 1 und der definierten Differenzierung der Skala (Standard: 101).
 **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 (''value'') evtl. auf eine Ganzzahl gerundet werden, um den gleichen Wert zu erhalten, wie er später im Datensatz gespeichert wird: ''Math.round(value)''
-==== Beispiel: Euro-Beträge ====
+==== Basis-Script ====
-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 JavaScript-Code zeigt den eingestellten Wert so an, wie er im Datensatz gespeichert wird, also ohne Prozentzeichen und beginnend bei 1.
 <code javascript>
 var formatter = function(value, reversed) {
   // 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 mittels Math.round(),
+    return "";
-  // 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 - 1) / 100 * 20)) + " €";
 }
+// Die oben definierte Funktion für alle Schieberegler auf der Seite verwenden
 SoSciSliders.setFormat(formatter);
 </code>
-Es gibt unterschiedliche Möglichkeiten, den JavaScript-Code zu platzieren.
-   * Am komfortabelsten ist das Eingabefeld //JavaScript-Code// unter //Weitere Einstellungen// -> //zusätzlicher Code// direkt in der Schieberegler-Frage. Dort wird das umgebende ''<script>'' weggelassen und mit ''%%s2["%q.id%"].setFormat(formatter);%%'' kann man die Funktion direkt an die Schieberegler der Frage binden.
+==== Einbindung des JavaScript-Codes ====
+Es gibt unterschiedliche Möglichkeiten, den JavaScript-Code zu platzieren. Lesen Sie dazu auch mehr in der Anleitung [[:de:create:javascript]].
+   * Am komfortabelsten ist das Eingabefeld //JavaScript-Code// unter //Weitere Einstellungen// -> //zusätzlicher Code// direkt in der Schieberegler-Frage. Dort wird das umgebende ''<script>'' weggelassen und mit ''%%s2["%q.id%"].setFormat(formatter);%%'' kann man die Funktion direkt an die Schieberegler der einzelnen Frage binden.
    * Sie können den Code als Textbaustein speichern und beim **Fragebogen zusammenstellen** in die Fragebogen-Seite ziehen oder
    * direkt mit einem //HTML-Code// Element auf der Seite platzieren. Der Code muss dabei __unter__ der Frage auf der Seite platziert werden.
@@ Zeile 120: / Zeile 124: @@
 **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: 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.
+<code javascript>
+var formatter = function(value, reversed) {
+  // 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);
+</code>
@@ Zeile 363: / Zeile 385: @@
 });
 </code>
+===== 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 "hineinschreiben" kann. Dies kann in einem Element der Frage (Titel, Erklärung, ...) platziert werden oder als HTML-Code separat auf der Seite.
+<code html>
+<div>
+Die aktuelle Summe beträgt <span id="output">-</span>%.
+</div>
+</code>
+Der JavaScript-Code muss dann bei jeder Änderung (''%%"change"%%'') alle Regler durchgehen. Darum kümmert sich hier die Funktion `''refresh()''. Ist deren Wert eines Reglers größer als 0 (also nicht auf der "keine Angabe" Position), dann wird der Wert in die Summe aufgenommen. Im folgenden Code wird der Wert zunäcsht gerundet (Schieberegler können auch nicht-ganzzahlige Werte liefern) und jeweils noch 1 subtrahiert, weil der Wertebereich hier von 1 bis 101 geht, diese Werte aber für 0 bis 100 % stehen.
+<code javascript>
+window.addEventListener("load", function() {
+    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("output").innerHTML = sum;
+    }
+    for (var key in items) {
+        items[key].addEventListener("change", refresh);
+    }
+    refresh();
+});
+</code>
 ===== Literatur =====
 Funke, Frederik. (2010). Internet-based measurement with visual analogue scales: An experimental investigation (Internetbasierte Messungen mit visuellen Analogskalen: Eine experimentelle Untersuchung). Dissertation. [[http://frederikfunke.net/dissertation/Funke_%282010%29_Internet-based_measurement_with_visual_analogue_scales-Dissertation.pdf|Online verfügbar]]