Eine detaillierte Beschreibung des Frage-Typs „Schieberegler“ fehlt im Moment.
Im Nachfolgenden wird beschrieben, wie man neben dem Regler den aktuellen Wert (in Prozent) anzeigen kann. Der Wert wird dabei erst angezeigt, wenn der Regler das erste mal bewegt bzw. angeklickt wurde.
Hinweis: Die Anzeige des Wertes mit folgendem Script funktioniert im Moment nur korrekt, wenn der Schiebereglern keinen „weiß nicht“-Bereich anzeigt.
Für die Anzeige legen Sie zunächst unter Textbausteine und Beschriftung einen Textbaustein mit folgendem Inhalt an. Als Kennung können Sie z.B. „js_slidervalue“ verwenden.
<script type="text/javascript"> <!-- /** * Klasse zur Anzeige des Wertes eines Schiebereglers */ function sliderPercentage(sliderID, dx, dy) { var pcInfobox; // Anzeigefeld var infoWidth = 60; // Breite des Anzeigefelds (nicht sichtbar) var yPos = dy; // vertikale Position (Abstand vom oberen Ende der Skala) var inset = dx; // horizontale Position (Abstand vom Regler-Knopf) var slider = oFbSliderInstance.getSlider(sliderID); var scale = slider.getScale(); var widthScale = slider.getWidthScale(); var widthButton = slider.getWidthButton(); var xMin = Math.ceil(widthButton / 2); var xMax = Math.floor(widthScale - widthButton / 2); // Show percentage on change function showPercentage() { var value = (slider.getValue() - 1) / 99 * 100; if (!pcInfobox) { pcInfobox= document.createElement("div"); pcInfobox.style.position = "absolute"; pcInfobox.style.top = yPos + "px"; pcInfobox.style.fontSize = "11px"; pcInfobox.style.width = infoWidth + "px"; scale.appendChild(pcInfobox); } // Clear content while (pcInfobox.firstChild) { pcInfobox.removeChild(pcInfobox.firstChild); } // Do not show an invalid value if (value < 0) { return; } // Add new content var newtext = document.createTextNode(Math.round(value)+"%"); pcInfobox.appendChild(newtext); // Set position var x = (xMax - xMin ) / 100 * value + xMin; if (value > 50) { x -= infoWidth + inset; pcInfobox.style.textAlign = "right"; } else { x += inset; pcInfobox.style.textAlign = "left"; } pcInfobox.style.left = x + "px"; } // Update percentage on change slider.addEventListener("change", showPercentage); // Show percentage immediately after loading the slider (optionally) showPercentage(); } /** * Funktion zur Registrierung einer Schieberegler-Anzeige */ sliderPercentage.showValue = function(sliderID, dx, dy) { if (dx === undefined) { dx = 8; } if (dy === undefined) { dy = 1; } var register = function() { new sliderPercentage(sliderID, dx, dy); } if (window.addEventListener) { window.addEventListener("load", register, false); } else if (window.attachEvent) { window.attachEvent("onload", register); } else { window["onload"] = register; } } // --> </script>
Fügen Sie diesen Textbaustein nun beim Fragebogen zusammenstellen auf der Seite ein, die auch den Schieberegler beinhaltet.
Weiterhin fügen Sie auf dieser Seite einen HTML-Code ein, der die Anzeige aktiviert. Dabei müssen Sie als Argument für die Funktion showValue()
(mittlere Zeile) die Kennung des Schiebereglers (Item) eintragen, für den der Wert angezeigt werden soll.
<script type="text/javascript"> <!-- sliderPercentage.showValue("AB01_01"); // --> </script>
Je nachdem, welche Darstellung Ihr Schieberegler verwendet, müssen Sie die Position der Anzeige noch ein wenig anpassen. Dafür können Sie in der Funktion showValue()
neben der Kennung der Schiebereglers noch den horizontalen Abstand vom Regler (Standard: 8 Pixel) und den vertikalen Abstand vom oberen Rand der Skala (Standard: 1 Pixel) angeben.
Im folgenden Beispiel ist die Anzeige 20 Pixel vom Mittelpunkt des Knopfes nach links bzw. rechts entfernt und 4 Pixel vom oberen Ende der Skala.
<script type="text/javascript"> <!-- sliderPercentage.showValue("AB01_01", 20, 4); // --> </script>
Falls Ihre Frage mehrere Items und damit mehrere Schieberegler enthält, muss jeder einzeln eingetragen werden.
Tipp: Die äußeren Zeilen definieren lediglich, dass es sich um JavaScript handelt. Für mehrere Schieberegler müssen Sie lediglich die mittlere Zeile wiederholen.
<script type="text/javascript"> <!-- sliderPercentage.showValue("AB01_01"); sliderPercentage.showValue("AB01_02"); sliderPercentage.showValue("AB01_03"); // --> </script>