Werte von Slidern auslesen und auf der gleichen Seite anzeigen

Question

Hallo liebes SoSci-Team,

ich versuche den Wert mehrerer Schiebereglers auf der gleichen Fragebogenseite anzuzeigen und vorher nach einer Regel zu transformieren.

Zunächst habe ich versucht den Wert des Schiebereglers auszulesen und anzuzeigen:

Ich habe bereits den Foreneintrag gesehen (https://support.soscisurvey.de/?qa=19178/werte-von-schieberegler-auf-selber-seite-anzeigen) - leider funktioniert diese Anzeige bei mir nicht.

Ich habe folgenden Code (unterhalb der Sliders) verwendet:

1) html Box

<p>Punktestand: <span id="info01"></span></p>

2) html Box

<script type="text/javascript">
<!--

var slider =  SoSciSliders.getSlider("ST01_01");
slider.addEventListener("click", function() {
  var wert = slider.value;
  document.getElementById("info01").innerHTML = String(Math.round(wert));
});

// -->
</script>

Meine Fragen:

1. Habe ich etwas vergessen, damit der Wert des Sliders angezeigt wird?
2. Wie könnte ich vorgehen, wenn ich insgesamt 48 Slider auslesen will, nach einer Regel, dass (1) bei jedem Slider der Wert 51 genau 5 Punkte gibt und alle anderen Werte 0 Punkte und (2) die Gesamtpunkteanzahl in einem einzelnen Wert angezeigt werden soll.

Viele Grüße

Comments

Was zeigt denn die JavaScript Fehlerkonsole Ihres Browsers an?

Posten Sie gerne auch mal einen Pretest-Link direkt (!) zu der betroffenen Seite. Dann werfe ich einen Blick darauf.

---

Hallo,

bitte entschuldigen Sie die späte Antwort.

In der Console wird folgender Hinweis angezeigt:
TypeError: undefined is not an object (evaluating 'slider.addEventListener')

Und hier ist der Pretest-Link: https://www.soscisurvey.de/test301368/?act=Ldit17YZBgkJ1ytjehMfUgW1 (ist direkt die erste Seite, die angezeigt wird)

Answer 1

Danke für Link und Fehlermeldung. Ich denke, es handelt sich hier nur um eine Kleinigkeit, nämlich um die falsche ABfolge der Befehle. Ihr Code läuft bevor SoSci Survey das Objekt für den Schieberegler initialisiert hat.

Versuchen Sie es bitte wie folgt:

<script type="text/javascript">
<!--

window.addEventListener("load", function() {
    var slider =  SoSciSliders.getSlider("ST01_01");
    slider.addEventListener("click", function() {
      var wert = slider.value;
      document.getElementById("info01").innerHTML = String(Math.round(wert) - 1);
    });
});

// -->

Comments

Wunderbar, vielen Dank, das hat schonmal funktioniert. Komisch ist nur, dass bei dem Platzhalter ("info01") zunächst "-10" angezeigt wird. Sobald der Schieberegler verwendet wird, stimmt die Anzeige jedoch.

Noch eine Zusatzfrage zu meiner zweiten Frage: Haben Sie hierfür auch noch einen Tipp für mich, wie ich hier am besten vorgehen könnte?

---

> Komisch ist nur, dass bei dem Platzhalter ("info01") zunächst "-10" angezeigt wird.

Gar nicht komisch ;) Der Code für "keine Antwort" ist -9 und wenn man davon noch 1 subtrahiert, kommt -10 heraus. Mit einem kleinen IF in der Funktion können Sie einstellen, dass bei Werten <1 etwas anders angezeigt werden soll.

> Wie könnte ich vorgehen, wenn ich insgesamt 48 Slider auslesen will, nach einer Regel, dass (1) bei jedem Slider der Wert 51 genau 5 Punkte gibt und alle anderen Werte 0 Punkte und (2) die Gesamtpunkteanzahl in einem einzelnen Wert angezeigt werden soll.

Diese Gesamtpunktzahl soll auch per JavaScript direkt in der Seite angezeigt werden? Oder geht es da um eine Auswertung auf einer späteren Seite (und damit PHP- statt JavaScript-Code)

---

Das macht absolut Sinn! Dann probiere ich das mit der If-Funktion.

Genau, es soll auf der gleichen Seite ausgelesen und dynamisch angezeigt werden. Sonst hätte ich lieber direkt den Weg über das Auslesen des Wertes durch php-Code gewählt.

---

> es soll auf der gleichen Seite ausgelesen und dynamisch angezeigt werden

Dann brauchen Sie eine kleine FOR-Schleife. Und eine Variable. Die Variable setzen Sie auf 0. Und dann fragt die FOR-Schleife jeden Schieberegler, ob dessen Wert 51 ist. Wenn ja, dann wird die Variable um eins hochgezählt.

---

Sorry, das ich nochmal nachfragen muss. Wo würde ich die for-schleife denn einbauen und wie lese ich die Variable danach wieder aus, sodass mir immer sofort der addierte Wert angezeigt wird? Ich habe es leider bisher nicht hinbekommen, lediglich für einen Schieberegler funktioniert es inzwischen:

<script type="text/javascript">
  <!--
  
  window.addEventListener("load", function() {
    var slider =  SoSciSliders.getSlider("ST02_01");
    slider.addEventListener("click", function() {
      if (slider.getValue() == 51) {
        slider.addEventListener("click", function() {  
          var wert = slider.value;
          document.getElementById("info01").innerHTML = String(5);
        });
      }
      else {
        slider.addEventListener("click", function() {  
          var wert = slider.value;
          document.getElementById("info01").innerHTML = String(0);
        });
      }
    });
  });
// -->
  </script>

---

Sie brauchen genau genommen zwei Schleifen. Eine in der Funktion, welche zählt - und eine weitere, welche diese Zähl-und-Anzeige-Funktion als Event-Handler mit jedem einzelnen Schieberegler verknüpft.

Im Moment haben sie beides zusammengefasst. Vom Aufbau her müsste es aber so aussehen (nur abstrakt ohne Inhalt dargestellt):

var sliders = [];  // Liste der Slider erstellen

function anzeigen() {
  // Hier den Punktwert bestimmen
  var punkte = 0;
  for (var i=0; i<slider.length; i++) {
    if (sliders[i].value == 51) ...
  }
  // Anzeigen des Punktwerts
}

// Event-Handler aktivieren
for (var i=0; i<slider.length; i++) {
    sliders[i].addEventListener("change", anzeigen);
}