Schieberegler: Wert aus vorhergehender Antwort als Minimum für Folgefrage setzen

Question

Hallo Zusammen,

seit einigen Tagen verzweifle ich an folgendem Problem, was ich erfolglos versuche mit internen Variablen zu lösen. Vielleicht haben Sie einen Hinweis?

In einem experimentellen Set-up sollen die Umfrageteilnehmenden ein Produkt ersteigern. Dazu haben sie vier mal die Möglichkeit ihr Gebot auf einen höheren Wert anzupassen. Das Gebot erfolgt jeweils über die Auswahl des Einsatzes (in Euro) über einen Schieberegler.

Schieberegler
Skaliert von 0 Euro bis 3.500 Euro

Fragebogen Seite 1 / Frage 1
Teilnehmer wählt auf dem Schieberegler den Wert 500 Euro aus (Variable: GB1_01).

Fragebogen Seite 2 / Frage 2
Der/die Teilnehmende erhält einen Text mit Bitte um Nachbesserung des Gebots (um weiter im Rennen zu sein).
Dazu soll ihm/ihr erneut der Schieberegler angezeigt werden, allerdings darf keine Auswahl mehr zwischen 0 und einer Einheit unterhalb des ausgewählten Werts aus der 1. Frage (GB1_01) (also bspw. keine Auswahl zwischen 0 und 499 Euro in dem Beispiel).

Die Ideallösung wäre die vollständige Anzeige des Schiebereglers aus Frage 1 (Skala 0 bis 3.500 Euro), wobei in der 2. Frage der Regler auf dem ausgewählten Wert der 1. Frage (GB1_01, hier: 500 Euro) steht. Gleichzeitig kann der Regler aber nicht auf einen Wert unterhalb 500 Euro verschoben werden.

Eine Alternativlösung wäre, dass der Schieberegler in Frage 2 als Minimum-Wert die Eingabe aus der 1. Frage (also hier 500 Euro) übernimmt. Somit also die Werte 0 bis 499 Euro abschneidet.

Wie gesagt, ich habe bereits recht viel probiert - aber scheitere immer an der Übernahme der vom Umfrageteilnehmer ausgewählten Variable aus der 1. Frage auf den Schieberegler der 2. Frage.

Herzlichen Dank für Ihre Mühen

Answer 1

Gleichzeitig kann der Regler aber nicht auf einen Wert unterhalb 500 Euro verschoben werden.

Sie benötigen dafür ein wenig JavaScript. Und zwar prüfen Sie bei jeder Änderung des Schiebereglers (slider.addEventListener("click", ...)), ob der Wert unter dem erlaubten Minimum ist - und wenn ja, dann ändern Sie den Wert auf das Minimum.

Wie bekommen Sie den Wert aus der vorigen Auswahl als Minimum in den Filter? Das setzen Sie einfach per replace() und Platzhalter in den JavaScript-Code ein.

Versuchen Sie sich erstmal an ein wenig JavaScript, welches das Minimum auf 50 begrenzt. Und dann geht es mit dem Platzhalter weiter. Wenn Sie auf Probleme stoßen (ganz einfach ist das beim ersten Mal nicht, nein), dann posten Sie hier gerne den verwendeten Code und (!) einen Pretest-Link, der direkt zur betroffenen Seite im Fragebogen führt.

Comments

Besten Dank für Ihr rasches Feedback. Habe mich nun heute noch intensiver mit JavaScript auseinander gesetzt und im Netz einiges recherchiert. Für einen Anfänger nicht so einfach.

Folgendes habe ich nun getan (und bekomme noch einen Fehler angezeigt):

1. Im Anschluss an die erste Stufe der Erhebung (Variable BM01_01) auf der gleichen Seite des Fragebogens per PHP-Code den Replace eingegeben: "replace('%gebot1%', 'BM01_01', 'response');"

2. In der zweiten Stufe der Erhebung unter "zusätzlicher Code" beim Fragetyp Schieberegler folgendes ergänzt:

Slider.addEventListener("click", function() {
    var slider = SoSciSliders.getSlider("BM02_01");
    if (slider.getValue() < '%gebot1%') {
        Slider.setValue('%gebot1%');
    }
}

Hier ist der dazugehörige Pretest-Link auf die entsprechende Seite:
https://www.soscisurvey.de/MA_Flugreisen/index.php?i=RYP2AG2YAWBC&rnd=YFGL

Besten Dank vorab!

---

> Im Anschluss an die erste Stufe der Erhebung (Variable BM01_01) auf der gleichen Seite des Fragebogens per PHP-Code den Replace eingegeben: "replace('%gebot1%', 'BM01_01', 'response');"

Es kann icht funktionieren, wenn die Abfrage von BM01_01 und das replace() auf derselben Seite sehen. Dann ist die Antwort ja noch gar nicht bekannt, wenn der replace()-Code ausgeführt gehört.

Das replace() gehört zusammen mit dem JavaScript auf die nächste Seite, wo das Gebot nachgebessert werden kann/soll.

Weiterhin zeigt die JavaScript-Fehlerkonsole im Browser (!) folgendes:

> Uncaught SyntaxError: missing ) after argument list

Das bezieht sich darauf, dass Sie das addEventListener() noch nicht ganz korrekt verwenden. Die Syntax ist:

addEventListener(EventCode, Funktion);

Den EventCode haben Sie korrekt eingetragen und die Funktion auch, aber danach fehlt noch die schließende Klammer!

Slider.addEventListener("click", function() {
    var slider = SoSciSliders.getSlider("BM02_01");
    if (slider.getValue() < '%gebot1%') {
        Slider.setValue('%gebot1%');
    }
});

Also ganz am Ende. Dadurch, dass die Funktion direkt in der Klammer steht, wird es (zugegeben) ein wenig verwirrend. Man könnte es stattdessen auch wie folgt schreiben:

function onClick() {
    var slider = SoSciSliders.getSlider("BM02_01");
    if (slider.getValue() < '%gebot1%') {
        Slider.setValue('%gebot1%');
    }
}

Slider.addEventListener("click", onClick);

---

Vielen Dank für die Rückmeldung. Den Code habe ich entsprechend um die fehlende Klammer ergänzt und das replace auf die 2. Seite des Fragebogens gesetzt.

Meine Erwartungshaltung ist nun, dass sich der Slider bei Auswahl eines Wertes unterhalb des %gebot1% auf diesen Mindestwert (%gebot1%) verschiebt.

Dem ist jedoch nicht so. Darf ich Sie noch einmal höflich um Unterstützung bitten?

Hier der aktualisierte Code (auf Seite 2):
Slider.addEventListener("click", function() {
    var slider = SoSciSliders.getSlider("BM02_01");
    if (slider.getValue() < '%gebot1%') {
        Slider.setValue('%gebot1%');
    }
});

Und hier der PHP-Code auf Seite 2:
replace('%gebot1%', 'BM01_01', 'response');

Sowie der Link zum Pre-Test:
Seite 1:  https://www.soscisurvey.de/MA_Flugreisen/?act=mPEVKqK8pcDJgeOpRl6aEvTm
Seite 2:https://www.soscisurvey.de/MA_Flugreisen/index.php?i=BFL70R5UH5VF&rnd=YLPZ

Besten Dank!

---

Die Fehlerkonsole im Browser meldet nun:

> Uncaught ReferenceError: Slider is not defined

Verwenden Sie statt "Slider" bitte "s2.BM02", damit SoSci Survey bzw. JavaScript auch weiß, um welchen Slider es geht.

---

Nun habe ich erstmal herausgefunden, wie ich die Fehlerkonsole und den Quelltext (u.a. zum Herausfinden des Slider-Namens "s2.BM02") aufrufe.

Anschliessend habe ich "Slider" in "s2.BM02" beschriftet.

Ich war mir nicht sicher wo überall das "Slider" durch "s2.BM02" ersetzt werden muss. Aber alle mir erdenkbaren Kombinationen führen zur gleichen Fehlermeldung.

 > Uncaught ReferenceError: Slider is not defined

Das "var slider" kann ich nicht durch s2.BM02 ersetzen. Hier zeigt mir die Konsole an "Missing ";" before statement / expected an identifier and instead saw '.' "

Hier mal die Varianten, die ich probiert habe und die immer zum gleichen Fehler führen:

*Varante 1*

Slider.addEventListener("click", function() {
    var slider = SoSciSliders.gets2.BM02("BM02_01");
    if (s2.BM02.getValue() < '%gebot1%') {
        s2.BM02.setValue('%gebot1%');
    }
});

-> hierzu mal der Link zum Pretest
Seite 1: https://www.soscisurvey.de/MA_Flugreisen/?act=0Ka8HLkCfuw83GTDWhhIcHNR
Seite 2: https://www.soscisurvey.de/MA_Flugreisen/index.php?i=WKV1GV3P1TL4&rnd=WKGY


*Variante 2*
Slider.addEventListener("click", function() {
    var slider = SoSciSliders.gets2.BM02("BM02_01");
    if (slider.getValue() < '%gebot1%') {
        slider.setValue('%gebot1%');
    }
});

*Variante 3*
Slider.addEventListener("click", function() {
    var slider = SoSciSliders.getSlider("BM02_01");
    if (s2.BM02.getValue() < '%gebot1%') {
        s2.BM02.setValue('%gebot1%');
    }
});

---

Wenn Sie ohnehin schon das SoSciSliders.getSlider() verwenden, ist es tatsächlich noch ein wenig einfacher. Versuchen Sie es mal hiermit:

var slider = SoSciSliders.getSlider("BM02_01");
slider.addEventListener("click", function() {
    if (slider.getValue() < %gebot1%) {
        slider.setValue(%gebot1%);
    }
});

---

Jetzt erscheint in der Debug-Info kein Fehler mehr. Allerdings verschiebt sich der Regler auf Seite 2 bei unterschreiten von %gebot1% nicht auf die Position von %gebot1%.

Code:
var slider = SoSciSliders.getSlider("BM02_01");
slider.addEventListener("click", function() {
    if (slider.getValue() < '%gebot1%') {
        slider.setValue('%gebot1%');
    }
});

Link Pretest Seite 1: https://www.soscisurvey.de/MA_Flugreisen/?act=gd7RdJYcmmbGTAUzA2NyPyK1
Link Pretest Seite 2: https://www.soscisurvey.de/MA_Flugreisen/index.php?i=H7951SOOQEF2&rnd=KRCV

---

Bitte lassen Sie noch die Anführungszeichen um den Platzhalter weg und (!) sorgen Sie dafür, dass nicht der Prozentwert, sondern die Zahl im Platzhalter abgelegt wird:

replace('%gebot1%', value('BM01_01'));

---

Perfekt. Vielen Dank. Nun geht es wie gewünscht (allerdings musste ich die Anführungszeichen um den Platzhalter beibehalten, da mir sonst ein Fehler angezeigt wurde).

Jetzt stehe ich noch vor einem unschönen, aber erwarteten Nebeneffekt. Die im 2. Schritt angezeigten Werte stimmen nicht mit den Werten aus Schritt 1 überein. In der Datentabelle ist es aber korrekt.

Beispiel:
Fragebogen Seite 1 wird 860€ ausgewählt.
Klickt der Nutzer nun auf Seite 2 auf einen Wert unter 860 €, springt der Regler auf 875 €.
Übernehme ich nun das "Minimum", wird in der Datentabelle wird aber für beide Variablen der gleiche Wert (26) eingesetzt. Dies ist gemäss Erwartung.

Nun aber die Frage, ob eine identische Anzeige gegenüber dem Nutzer forciert werden kann? Oder spielt hier die Skalierung/Rundungen/o.ä. negativ mit?

Link Pretest Seite 1: https://www.soscisurvey.de/MA_Flugreisen/?act=gd7RdJYcmmbGTAUzA2NyPyK1
Link Pretest Seite 2: https://www.soscisurvey.de/MA_Flugreisen/index.php?i=H7951SOOQEF2&rnd=KRCV