Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
de:create:questions:slider [17.03.2018 21:01] adminde:create:questions:slider [19.04.2023 21:55] (aktuell) admin
Zeile 50: Zeile 50:
   * ''int **Slider.value**''\\ Der aktuelle Wert des Schiebereglers (wenn nur ein Knopf pro Regler verwendet wird).   * ''int **Slider.value**''\\ Der aktuelle Wert des Schiebereglers (wenn nur ein Knopf pro Regler verwendet wird).
   * ''boolean **Slider.disabled**''\\ Den Schieberegler deaktivieren.   * ''boolean **Slider.disabled**''\\ Den Schieberegler deaktivieren.
-  * ''number **Slider.getValue**(int //index//, Boolean //exakt//)''\\ Der aktuelle Wert des Schiebereglers (wenn mehrere Knöpfe pro Regler verwendet werden). Der Parameter //exakt// legt fest, ob der exakte Fließkomma-Wert für die Position oder ein gerundeter Wert zurückgegeben werden soll, wie er im Datensatz gespeichert wird. +  * ''number **Slider.getValue**(int //index//, Boolean //exakt//)''\\ Der aktuelle Wert des Schiebereglers (wenn mehrere Knöpfe pro Item verwendet werden). Der Parameter //exakt// legt fest, ob der exakte Fließkomma-Wert für die Position oder ein gerundeter Wert zurückgegeben werden soll, wie er im Datensatz gespeichert wird. 
-  * ''void **Slider.setValue**(number //Wert//, int //index//)''\\ Den //Wert// des Schiebereglers festlegen (wenn mehrere Knöpfe pro Regler verwendet werden).+  * ''void **Slider.setValue**(number //Wert//, int //index//)''\\ Den //Wert// des Schiebereglers festlegen (wenn mehrere Knöpfe pro Item verwendet werden)
 +  * ''void **Slider.fixValue**(number //Wert//, int //index//)''\\ Den Knopf des Schiebereglers mit dem //index// (0 oder 1) auf den angegeben //Wert// festlegen. Der Knopf wird dadurch gesperrt. 
 +  * ''object **Slider.getButtonPosition**(int //index//)''\\ Die Position (Mitte) des ggf. durch //index// spezifizierten Reglers in Pixeln, relativ zur Skala. Der Rückgabewert hat die Eigenschaften ''x'' und ''y''.
   * ''void **Slider.addEventListener**(string //EventID//, callable //Funktion//)''\\ Die Funktion //Funktion// aufrufen, sobald der Teilnehmer auf den Schieberelger klickt und damit einen Wert festlegt. Der Parameter //EventID// muss den Wert "click" haben.   * ''void **Slider.addEventListener**(string //EventID//, callable //Funktion//)''\\ Die Funktion //Funktion// aufrufen, sobald der Teilnehmer auf den Schieberelger klickt und damit einen Wert festlegt. Der Parameter //EventID// muss den Wert "click" haben.
  
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, der angezeigt werden soll. 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, der angezeigt werden soll.
- 
-**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:** Damit überhaupt ein Wert angezeigt wird, aktivieren Sie in der Frage zunächst die Option //Wert anzeigen//. **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).
  
-==== Beispiel 1 ====+**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)''
  
-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 html> +==== Basis-Script ==== 
-<script type="text/javascript"+ 
-<!-- +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, reversed) { + 
-  if (value < 0) return ""; +<code javascript> 
-  return String(Math.round((value - 1/ 100 * 20)) + " €";+var formatter = function(value, reversed) { 
 +  // Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt 
 +  if (value < 0) 
 +    return ""; 
 +  } 
 +  // 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);
-// --> 
-</script> 
 </code> </code>
  
-Sie können den Code entweder als Textbaustein speichern und in die Fragebogen-Seite ziehen oder direkt mit einem //HTML-Code// Element auf der Seite platzieren. Der Code muss __unter__ der Frage auf der Seite platziert werden.+ 
 +==== 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.
  
 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 ''SoSciSliders.setFormat()'' als zweiten Parameter spezifizieren, welcher Schieberegler angepasst werden soll: 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 ''SoSciSliders.setFormat()'' als zweiten Parameter spezifizieren, welcher Schieberegler angepasst werden soll:
Zeile 113: Zeile 126:
  
  
-==== Beispiel ====+==== 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> 
 + 
 + 
 +==== 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.
  
 <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) + "°C";   var text = ((value - 51) / 50 * 25).toFixed(1) + "°C";
Zeile 130: Zeile 161:
  
  
-==== Beispiel ====+==== 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"> 
 +<!-- 
 +var 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: Prozente ==== 
 + 
 +In diesem Beispiel soll eine Prozentaufteilung, z.B. "40% / 60%" angezeigt werden. Im Schieberegler muss eine Differenzierung "1..101" eingestellt werden (101 Schritte von 0 bis 100%). 
 + 
 +<code javascript> 
 +<script type="text/javascript"> 
 +<!-- 
 +var formatter = function(value, reversed) { 
 +  if (value < 0) return ""; 
 +  // Der Prozentwert ist der interne Wert minus 1 
 +  var percent = Math.round(value - 1); 
 +  return percent + "%&nbsp;/&nbsp;" + (100 - percent) + "%"; 
 +
 +SoSciSliders.setFormat(formatter); 
 +SoSciSliders.setDisplay("top"); 
 +// --> 
 +</script> 
 +</code> 
 + 
 +Das ''&nbsp;'' ist ein geschütztes Leerzeichen. Alternativ kann man eine Funktion zur Positionierung verwenden (s. unten), welche die Breite des Anzeigefeldes ein wenig erhöht. 
 + 
 + 
 +==== 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".
Zeile 143: Zeile 224:
  
  
-==== Beispiel  ====+==== 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''und optional die Breite (''width'' in Pixeln), Ausrichtung (''align'') und Schriftgröße (''fontSize'') 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.
  
 Der folgende JavaScript-Code (welcher in einem ''<script>''-Tag zu platzieren ist, s. oben) zeigt im Schieberegler "AB01_01" die Beschriftung des ersten Knopfes links über dem Knopf, die Beschriftung des zweiten Knopfes rechts über dem Knopf an. Der folgende JavaScript-Code (welcher in einem ''<script>''-Tag zu platzieren ist, s. oben) zeigt im Schieberegler "AB01_01" die Beschriftung des ersten Knopfes links über dem Knopf, die Beschriftung des zweiten Knopfes rechts über dem Knopf an.
  
 <code javascript> <code javascript>
-function positioner(x, y, position, width, height, button) {+function positioner(x, y, position, width, height, buttonIndex) {
   if (button == 0) {   if (button == 0) {
     return {     return {
Zeile 190: Zeile 271:
 **Hinweis:** Die JavaScript-Funktion ''attachInput()'' erwartet als Parameter die HTML-ID des Eingabefelds. **Hinweis:** Die JavaScript-Funktion ''attachInput()'' erwartet als Parameter die HTML-ID des Eingabefelds.
  
-**Tipp:** Mithilfe der Funktion ''[[:de:create:functions:prepare_input]]'' und einem [[:de:create:placeholders|Platzhalter]] können Sie das Eingabefeld an beliebiger Stelle auf der Fragebogen-Seite platzieren.+**Tipp:** Sie können das Eingabefeld an beliebiger Stelle auf der Fragebogen-Seite platzieren: [[de:create:inputs-single]]
  
  
Zeile 304: Zeile 385:
 }); });
 </code> </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 ===== ===== 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]] 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]]
de/create/questions/slider.1521316861.txt.gz · Zuletzt geändert: 17.03.2018 21:01 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki