SoSci Survey
Übersetzungen dieser Seite:
 

Schieberegler

Eine detaillierte Beschreibung des Frage-Typs „Schieberegler“ fehlt im Moment.

Wert des Schiebereglers anzeigen

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>
de/create/questions/slider.txt · Zuletzt geändert: 11.04.2013 19:52 von msd-media
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 3.0 Unported
Driven by DokuWiki