Schieberegler nach bestimmter Zeit einblenden, bei "Click" direkt zur nächsten Seite,

Question

Hallo,

Ich habe in meinem Fragebogen den Ablauf bestimmter Seiten vorgegeben bzw randomisiert. Auf jeder dieser Seiten soll nun nach 5 Sekunden ein Schieberegler erscheinen, der auch gleichzeitig als "Weiterbutton" dient, sodass Probanden ihre Angaben nicht revidieren können. Wie stelle ich das am geschicktesten an?

Liebe Grüße

Answer 1

Ein Schieberegler als Weiter-Knopf? Machbar, könnte aber den ein oder anderen Teilnehmer irritieren, wenn dieser vorher auf einem Schieberegler schieben durfte.

Das Erscheinen ist relative einfach. Sie brauchen die HTML-Kennung der Frage (s. Fragen bei Auswahl einer bestimmten Option sofort einblenden) und einen Timer (s. Timer: Weiter-Knopf nach bestimmter Zeit einblenden).

Für das automatische Weiter können Sie mittels Slider.addEventListener() (JavaScript Referenz) eine Funktion aufrufen, die beim ersten Klick gleich SoSciTools.submitPage() aufruft (JavaScript-Bibliothek SoSciTools).

Comments

Ok, also was klappt, ist das Einblenden nach 5 Sekunden, aber das Anzeigen der nächsten Seite durch "Click" auf den Regler klappt nicht. Meine Reglerfrage heißt PR01, diese gebe ich im Befehl ja mit "PR01_qst" an oder? Kann es sein, dass der submitpage() - Befehl nicht klappt, wenn ich zuvor eine shuffle-Funktion für die Seiten eingestellt habe? Das hier ist der HTML Code den ich verwende:

<script type="text/javascript">
// Der Schieberegler ist erst verfügbar, wenn die Seite vollständig geladen wurde
SoSciTools.attachEvent(window, "load", function() {
  var slider = SoSciSliders.getSlider("PR01_qst");
  // Das "click" Event wird aufgerufen, wenn der Teilnehmer den Schieberegler setzt/bewegt
  slider.addEventListener("click", function() {
    if (slider.getValue() > 0) {
      SoSciTools.submitPage();
    }
  });
});
</script>

---

Die submitPage()-Methode klickt lediglich den Weiter-Knopf. Die Rotation sollte also keinen Ärger bereiten.

Testen Sie bitte als erstes anhand der JavaScript-Fehlerkonsole im Browser, ob die click-Funktion aufgerufen wird:

  slider.addEventListener("click", function() {
    console.log("Click funktioniert");
    if (slider.getValue() > 0) {

---

Folgendermaßen sieht der HTML-Code aus. In der Konsole erscheint beim Durchführen dann "undefined is not an object" bezogen auf die Zeile slider.addEvent ......

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

// Funktion zum Einblenden der Knöpfe
function showContent() {
  var content = document.getElementById("PR01_qst");
  // Den normalen Anzeigemodus wiederherstellen
  content.style.display = "";
}

// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    var content = document.getElementById("PR01_qst");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 5 Sek einblenden
  }
);
SoSciTools.attachEvent(window, "load", function() {
  var slider = SoSciSliders.getSlider("PR01_qst");
  // Das "click" Event wird aufgerufen, wenn der Teilnehmer den Schieberegler setzt/bewegt
  slider.addEventListener("click", function() {
    if (slider.getValue() > 0) {
      SoSciTools.submitPage();
    }
  });
});
// -->

---

>  "undefined is not an object" bezogen auf die Zeile slider.addEvent ......

Das bedeutet, dass SoSciSliders.getSlider("PR01_qst") keinen Schieberegler zurückliefert, sondern NULL. Und ja, wenn man weiß, WO der Fehler liegt, dann ist auch die Lösung gar nicht so fern: getSlider() erwartet nur die Kennung der Frage, nicht die HTML-ID, also:

var slider = SoSciSliders.getSlider("PR01_01");

---

OK, danke!
Jetzt klappt zwar das "weiter mittels Schieberegler", aber nun funktioniert die vorige Randomisierung der Seiten nicht mehr, die ich mit einer shuffle Funktion im PHP-Code vorgenommen habe. Beim Click auf den Schieberegler springt er immer nur zur chronologisch nächsten Seite, sollte aber die Reihenfolge eigentlich  variieren:

$seiten = array('AG01', 'AG02', 'AG03', 'AG04', 'AG05', 'AG06', 'AG07', 'AG08', 'AG09', 'AG10', 'AG11', 'AG12', 'AG13', 'AG14', 'AG15', 'AG16', 'AG17', 'AG18', 'AG19', 'AG20', 'AG21', 'AG22', 'AG23', 'AG24', 'AG25', 'AG26', 'AG27', 'AG28', 'AG29', 'AG30', 'AG31', 'AG32', 'AG33', 'AG34', 'AG35');
shuffle($seiten);
$seiten[] = 'AG FAKE';
setPageOrder($seiten);

wie könnte ich denn vorgehen, um die Randomisierung der Seiten beizubehalten?

---

Das JavaScript sollte - wie oben schon geschrieben - keinerlei Einfluss auf die Abfolge haben. Könnte es sein, dass Sie ab der Seite mit dem Schieberegler getestet haben und nicht aber der Seite mit setPageOrder().

Falls es daran nicht liegt: Posten Sie doch bitte die Debug-Information, die angezeigt wird.

---

Sie haben recht. Nun klappt alles wie es soll. Jetzt muss ich nur noch den normalen Weiterbutton ausblenden, sodass die Probanden nicht in Verwirrung geraten. Hierzu verwende ich einfach die submitbuttons.hide() Funktion, richtig?

Wenn ich zu Beginn der Umfrage eine Testseite vorgebe, bei der ich den Ablauf und den Vorgang mit dem Schieberegler beschreibe, sollte es meinen Zweck erfüllen. Vielen Dank für die Hilfe!

---

Genau, stellen Sie dem JavaScript-Code einfach voran ein
SoSciTools.submitButtonsHide()