Fragebogenprojekt mit 5 Bedingungen: Click-Event, den passenden Schieberegler zum Bild einblenden und bei "click" weiter...

Question

Hallo,

nun klappt es mit der LoopFunktion und der Randomisierung der Probanden und Bilder. Ich muss allerdings noch den passenden Schieberegler einbauen. Wie kann ich denn nun das passende Item der Schieberegler-Frage zum Bild der gleichen Nummer laden?

mein bisheriger HTML-Code lautet:

<!-- 
SoSciTools.submitButtonsHide();
// Funktion zum Einblenden der Knöpfe
function showContent() {
  var content = document.getElementById("SL01_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("SL01_qst");
    // Ausblenden
    content.style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 5000); // Nach 5 Sek = 5.000 ms
  }
);

SoSciTools.attachEvent(window, "load", function() {
  var slider = SoSciSliders.getSlider("SL01");
  // Das "click" Event wird aufgerufen, wenn der Teilnehmer den Schieberegler setzt/bewegt
  slider.addEventListener("click", function() {
    if (slider.getValue() > -2) {
      SoSciTools.submitPage();
    }
  });
}); 
// -->
</script>

Danke!:)

Comments

> Wie kann ich denn nun das passende Item der Schieberegler-Frage zum Bild der gleichen Nummer laden?

Für eine qualifizierte Antwort wäre Ihre PHP-Code sehr hilfreich!

Der HTML-/JavaScript-Code kümmert sich ja nur um die Steuerung innerhalb der Seite.

---

Hier der PHP-Code. Insgesamt kann "RA01" 5 Werte annehmen. Damit es übersichtlicher ist, habe ich nur eine Experimentalbedingung gepostet. Alle Bedingungen folgen aber dem gleichen Format, 35 Bilder. Jedem Bild soll das Item (Schieberegler) mit der entsprechenden Nummer zugeordnet werden (Bild 1--> Regler 1, Bild 2 --> Regler 2 etc). Die Regler sollen jedoch erst nach 5 Sekunden erscheinen, wobei der Click auf die Skala das nächste Bild aufrufen soll.

if (!isset($bilder)) {
  if (value('RA01') == 1) { // abstrakte Gemälde
    $kuenstler = [
    'AG01' => 1, // Alexej von Jawlensky
    'AG02' => 2, // Arthur Dove
    'AG03' => 3, // Hilma af Klimt
    'AG04' => 4, // Marsden Hartley
    'AG05' => 5, // Paul Klee
    'AG06' => 6, // Theo Van Doesburg
    'AG07' => 7, // Dixon
    'AG08' => 8, // Schwitters
    'AG09' => 9, // Archile Gorky
    'AG10' => 10, // Maletwitsch
    'AG11' => 10, // Malewitsch
    'AG12' => 11, // Michail Matjuschin
    'AG13' => 12, // Ola Rosanova
    'AG14' => 5, // Paul Klee
    'AG15' => 5, // Paul Klee
    'AG16' => 5, // Paul Klee
    'AG17' => 5, // Paul Klee
    'AG18' => 5, // Paul Klee
    'AG19' => 13, // Moholy
    'AG20' => 13, // Moholy
    'AG21' => 13, // Moholy
    'AG22' => 13, // Moholy
    'AG23' => 13, // Mondrian
    'AG24' => 14, // Mondrian
    'AG25' => 14, // Mondrian
    'AG26' => 14, // Mondrian
    'AG27' => 14, // Mondrian
    'AG28' => 12, // Olga Rosanova
    'AG29' => 15, // Chashnik
    'AG30' => 15, // Chashnik
    'AG31' => 15, // Chashnik
    'AG32' => 16, // Kliun
    'AG33' => 16, // Kliun
    'AG34' => 17, // Otto Freundlich
    'AG35' => 18, // Amadeo de Souza Cardoso
    ];
  }

 // Rotation
  $bilder = array_keys($kuenstler);

  do {
    shuffle($bilder);
    $lastOne = -1;
    $double = false;
    foreach ($bilder as $bild) {
      if ($kuenstler[$bild] == $lastOne) {
        $double = true;
      }
      $lastOne = $kuenstler[$bild];
    }
  } while ($double);

  registerVariable($kuenstler);
  registerVariable($bilder);
}

$i = loopPage(count($bilder));
html('<div style="text-align: center"><img src="'.$bilder[$i].'.jpg"></div>');
// Frage
$bildNr = (int)ltrim(substr($bild, 3), '0');
question('SL01', $bildNr);

---

> Jedem Bild soll das Item (Schieberegler) mit der entsprechenden Nummer zugeordnet werden (Bild 1--> Regler 1, Bild 2 --> Regler 2 etc).

Okay, das ist ja in dem Code unten schon vorgesehen:

// Frage
$bildNr = (int)ltrim(substr($bild, 3), '0');
question('SL01', $bildNr);

Insofern meine Frage: Was ist Ihre Frage?

---

die erste Frage: Welchen Code brauche ich, damit durch den Click auf den Regler die nächste Seite im loop angezeigt wird. Der "Click" als "weiter"-Button. Ich habe bereits einen HTML Code dafür (siehe oben), der den Regler nach 5 Sekunden einblendet, die Click-funktion funktioniert aber nicht.

die zweite Frage: Manchmal erscheint im Testlauf, dass die Reglerfrage SL01 kein Item mit der ID 0 besitzt. Hier weiß ich nicht, was ich am PHP Code ändern muss. Die Items der Frage sind von 01-35 durchnummeriert.

Answer 1

Welchen Code brauche ich, damit durch den Click auf den Regler die nächste Seite im loop angezeigt wird.

Dafür haben Sie ja den folgenden JavaScript-Code:

SoSciTools.attachEvent(window, "load", function() {
  var slider = SoSciSliders.getSlider("SL01");
  // Das "click" Event wird aufgerufen, wenn der Teilnehmer den Schieberegler setzt/bewegt
  slider.addEventListener("click", function() {
    if (slider.getValue() > -2) {
      SoSciTools.submitPage();
    }
  });
});

Ersetzen Sie das "SL01" in der zweiten Zeile bitte durch die komplette Item-Kennung SL01_01. Sonst wird der Schieberegler (eine Schieberegler-Frage erlaubt ja mehr als ein Regler-Item) nicht erkannt.

Wenn das noch nicht reicht, werfen SIe bitte einen Blick in die JavaScript-Fehlerkonsole. Womöglich kommt Ihr Code gar nicht bis zu diesem Punkt, weil es weiter oben noch ein Problemche gibt.

Manchmal erscheint im Testlauf, dass die Reglerfrage SL01 kein Item mit der ID 0 besitzt.

Ich gehe davon aus, dass es sich dabei um denselben Fehler handelt. Wenn diese Meldung nur "manchmal" erscheint, tritt in den anderen Fällen womöglich ein Fehler auf, sodass der Code vorher abbricht. Das müssen wir uns dann nochmal separat ansehen.

Comments

>Da wurde also schon der dynamische Platzhalter eingesetzt, korrekt? Dann ist das vermutlich nicht korrekt. Das passt aber zur Fehlermeldung mit dem "Item 0". Was zeigt denn die Debug-Information mit den beiden zusätzlichen Zeilen?

Hier zeigt die Konsole bei der folgenden Zeile eine Fehlermeldung:
content.style.display = "none"; --> null is not an object (evaluating 'content.style')

Oder meinen Sie etwas anderes mit Debugger-Information?

Also diese Fehlermeldung kam jetzt, nachdem ich alle von Ihnen vorgeschlagene Änderungen am Code vorgenommen habe. Was den Code angeht, sind wir nun an einem Level angelangt, bei welchem ich nicht mehr wirklich nachvollziehen kann, wo ein Fehler liegen könnte :D

Wie kann es sein, dass die Frage bei manchen Seiten geladen wird und bei anderen komplett fehlt?

---

> Oder meinen Sie etwas anderes mit Debugger-Information?

Ja, ich meinte die Debug-Information von Sosci Survey:
https://www.soscisurvey.de/help/doku.php/de:create:debugging

Dann wird es auch mit dem Nachvollziehen wieder besser :)

> Wie kann es sein, dass die Frage bei manchen Seiten geladen wird und bei anderen komplett fehlt?

Ich denke der Bildname ist schuld. Daher die debug()-Zeilen.

---

Eine Debug-Information erscheint bei so ziemlich jedem Bild:

Beispiel 1)
Debug information for $bilder[$i]:
$bilder[$i] = SG12 (string)

Debug information for $bildNr:
$bildNr = 2 (integer)

Beispiel 2)
Debug information for $bilder[$i]:
$bilder[$i] = SG06 (string)

Debug information for $bildNr:
$bildNr = 6 (integer)  

Beispiel 3)
Debug information for $bilder[$i]:
$bilder[$i] = SG20 (string)

Debug information for $bildNr:
$bildNr = 0 (integer)

warning: For the question SL01 no item with the ID 0 has been found.

--> Ich denke Beispiel drei erklärt die Fehlermeldung, dass es kein Item mit ID = 0 gibt

--> Der Code scheint die die Items nicht korrekt den Bildern zuzuordnen (oder umgekehrt?), da immer nur die zweite Stelle verwendet wird. Also bei Bild 18 wird nur die 8 angenommen.
--> aber hier endet aber mein Verständnis auch schon :)

---

Okay, das hilft weiter. Bei SG20 klappt es nicht. Dann weiß ich, wo ich suchen muss. Hier:

$bildNr = (int)ltrim(substr($bilder[$i], 3), '0');

Und zwar ist die 3 falsch. Es müsste 2 heißen:

$bildNr = (int)ltrim(substr($bilder[$i], 2), '0');

Arg ... immer diese lästigen Details beim Programmieren.

---

Vielen vielen Dank! Wirklich :)

jetzt müsste alles sitzen. Hab das bei jeder Bedingung mehrmals geprüft. Es erscheinen immer die richtigen Item-IDs zu den Bildnummern und die Versuche laufen ohne weitere Fehlermeldungen durch. Jetzt muss ich nur noch mit einem Pretest überprüfen, ob auch alle Variablen korrekt abgespeichert werden.

Eine schwere aber nun eine schöne Geburt! :D