Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:imgscale [12.11.2014 15:05] – angelegt admin
+++ de:create:questions:imgscale [01.11.2018 16:55] – JavaScript-Anbindung ergänzt admin
@@ Zeile 9: / Zeile 9: @@
 ===== Instruktionen =====
-Es mag notwendig sein, dem Befragten die Auswahloptionen kurz zu erläutern. Dafür muss man keine zusätzlichen Bildschirmabdrücke (Screenshots) erstellen, sondern kann direkt auf die Skalengrafik zurückgreifen. Verwendet man nicht ohnehin eine eigene Grafik, kann die Adresse der Grafik (URL) aus dem HTML-Quellcode der Frage ermittelt werden.
+Es mag notwendig sein, dem Befragten die Auswahloptionen kurz zu erläutern.
+{{:de:create:questions:scr.imgscale.instructions.png?nolink|Instruktionen für die Bild-Skala}}
+Dafür muss man keine zusätzlichen Bildschirmabdrücke (Screenshots) erstellen, sondern kann direkt auf die Skalengrafik zurückgreifen. Verwendet man nicht ohnehin eine eigene Grafik, kann die Adresse der Grafik (URL) aus dem HTML-Quellcode der Frage ermittelt werden.
 Ist die URL der Skalengrafik bekannt, zeigt folgender HTML-Code (hier am Beispiel der Standard-Sterne) eine visuelle Erklärung der Skala:
@@ Zeile 38: / Zeile 42: @@
 Neben Bild-URL (im Beispiel ''../images/imgscale.stars5.png'') und der Beschreibung ist evtl. noch der Wert für ''background-position'' anzupassen. Beginnend mit ''0px'' ist der zweite Wert für jeden Zustand um die Höhe einer Einzelgrafik (im Beispiel 30 Pixel) zu reduzieren.
 ===== Benutzerdefinierte Skalen =====
@@ Zeile 61: / Zeile 64: @@
 Nach dem Speichern kann die korrekte Funktion in der Vorschau direkt überprüft werden.
+===== JavaScript-Anbindung =====
+Zur Bild-Skala existieren im Fragebogen Formularfelder, welche den aktuellen Antwortcode verraten und die Events '''click''' und '''change''' auslösen. Das nachfolgende Beispiel zeigt exemplarisch den aktuell ausgewählten Antwortcode des ersten Skalenitems in der Bild-Skala "BS02" als PopUp-Fenster an.
+<code javascript>
+<script type="text/javascript">
+<!--
+var scaleItem = document.getElementById("NR14_01");
+scaleItem.addEventListener("change", function() {
+  alert("Der Antwortcode wurde geändert: " + scaleItem.value);
+});
+// -->
+</script>
+</code>