Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
de:create:questions:slider [22.08.2019 20:22]
admin [JavaScript Referenz]
de:create:questions:slider [01.02.2020 16:22] (aktuell)
admin alte Version wiederhergestellt (20.09.2019 20:48)
Zeile 102: Zeile 102:
 </​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.+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. 
 +   ​* ​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 175: Zeile 179:
 ==== 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 ''​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 {
de/create/questions/slider.1566498174.txt.gz · Zuletzt geändert: 22.08.2019 20:22 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