Randomisierung in zwei Gruppen

Question

Sehr geehrte Damen und Herren,
ich möchte im Rahmen meines Fragebogens eine Randomisierung in eine Experimentalgruppe und in eine Kontrollgruppe vornehmen. Dabei sollen den jeweiligen Gruppen insgesamt 3 Bilder gezeigt werden, zu denen Fragen beantworten werden müssen.
Die Bilder sollen nicht auf einer Seite, sondern auf verschiedenen Seiten dargestellt werden.
Mithilfe der Randomisierung soll die Einteilung in die beiden Gruppen erfolgen. Jedoch soll das erste Bild darüber entscheiden, welche anderen Bilder im späteren Verlauf des Fragebogens angezeigt werden.
Dafür habe ich auf der Seite des Fragebogens auf der sich das erste Bild befinden soll den folgenden Code verwendet:

// Randomisierung in zwei Gruppen
var group = Math.random() < 0.5 ? '1' : '2';

// Bildgruppen definieren
var imagesGroup1 = [
    'TrueFruits_Stimulus_1.png',
    'Benetton_Stimulus_1.jpg',
    'Alexander_Wang_Stimulus_1.jpg'
];
var imagesGroup2 = [
    'TrueFruits_Stimulus_2.png',
    'Benetton_Stimulus_2.jpg',
    'Alexander_Wang_Stimulus_2.jpg'
];

// Auswahl der Bilder je nach Gruppe
var selectedImages = group === '1' ? imagesGroup1 : imagesGroup2;

// Bilder in die Umfrage einfügen
for (var i = 0; i < selectedImages.length; i++) {
    // Hier wird angenommen, dass es ein HTML-Element mit der ID 'imageContainer' gibt
    var imgElement = document.createElement('img');
    imgElement.src = selectedImages[i];
    document.getElementById('imageContainer').appendChild(imgElement);
}

Auf den Seiten, wo das zweite Bild und das dritte Bild angezeigt werden soll, habe ich den folgenden Code jeweils verwendet:

// Holen Sie den aktuellen Bildindex
var currentImageIndex = parseInt(localStorage.getItem('currentImageIndex')) || 0;

// Erhöhe den Index für das nächste Bild
currentImageIndex++;

// Überprüfen, ob es noch weitere Bilder gibt
var selectedImages = JSON.parse(localStorage.getItem('selectedImages'));
if (currentImageIndex < selectedImages.length) {
    // Zeige das nächste Bild
    displayImage(currentImageIndex);
    // Speichern des neuen Index
    localStorage.setItem('currentImageIndex', currentImageIndex);
} else {
    // Wenn keine weiteren Bilder verfügbar sind, setze eine Nachricht
    document.getElementById('imageContainer').innerHTML = '<p>Keine weiteren Bilder verfügbar.</p>';
}

Leider funktioniert diese Vorgehensweise nicht und ich bekomme Bilder aus beiden Gruppe angezeigt. Können Sie mir sagen, wie ich den Code bei HTML ändern muss um das richtige Ergebnis zu erhalten?

Vielen Dank bereits im Voraus.

Answer 1

Die Verwendung von Math.random() und einer Menge JavaScript-Code scheint mir hier unnötig kompliziert. Man könnte meinen, ChatGPT habe hier ohne Kontextwissen eine Lösung gebastelt.

Folgen Sie bitte der Anleitung für die experimentelle Variation in SoSci Survey.

Sobald Sie die Gruppenzuordnung vorgenommen haben, können Sie mit sehr wenig PHP-Code (hier gleich der erste oder zweite Code) in der Folge dazu paseend Bilder anzeigen.

Comments

Sehr geehrte Damen und Herren,
vielen Dank für Ihre Rückmeldung. Leider funktionieren die von mir verwendeten Codes weiterhin nicht.
Ich habe eine Rubrik angelegt für die Randomisierung. Dabei habe ich auf dem Zettel folgende Angaben gemacht: 1= TrueFruits_Stimulus_1.png und 2= TrueFruits_Stimulus_2.png. Da ich insgesamt 6 Bilder (jeweils 3 für die Experimentalgruppe und 3 für die Kontrollgruppe) habe, habe ich zwei weitere Zettel angelegt, diese beinhalten auch jeweils 1= Benetton_Stimulus_1.jpg 2 = Benetton_Stimulus_2.jpg bzw. 1= Alexander_Wang_Stimulus_1.jpg und 2= Alexander_Wang_Stimulus_2.jpg.
Im Anschluss habe ich die Randomisierung in meinem Fragebogen eingefügt. Das erste angezeigte Bild soll zufällig ausgewählt werden (Bezeichnung R001) und die anderen späteren Bilder sollen auf der Zuordnung des ersten Bildes beruhen. Daher habe ich bei der Anzeige für das zweite Bild folgenden Code verwendet:
// Auslesen der Bildkennung für R001
$bildkennung = value('R001');

// Grafik für R002 anzeigen
if ($bildkennung == 'TrueFruits_Stimulus_1.png') {
    html('<p><img src="Benetton_Stimulus_1.jpg"></p>'); // Bild für Experimentalgruppe
} elseif ($bildkennung == 'TrueFruits_Stimulus_2.png') {
    html('<p><img src="Benetton_Stimulus_2.jpg"></p>'); // Bild für Kontrollgruppe
}
bzw. für das dritte Bild den folgenden Code:
// Auslesen der gezogenen Zufallszahl für R001
$bild = value('R001');  // Angenommen, dies gibt den Bildstatus zurück

// Grafik für R003 anzeigen
if ($bild == '<img src="TrueFruits_Stimulus_1.png">') {
    html('<img src="Alexander_Wang_Stimulus_1.jpg">'); // Bild für Experimentalgruppe
} elseif ($bild == '<img src="TrueFruits_Stimulus_2.png">') {
    html('<img src="Alexander_Wang_Stimulus_2.jpg">'); // Bild für Kontrollgruppe
}

Können Sie mir sagen welchen Fehler ich mache? Den Code auf der Hilfeseite zur Randomisierung bezieht sich auch einen text daher habe ich diesen durch $bild ersetzt scheinbar scheint dies aber nicht die richtige Lösung zu sein.

Vielen Dank für Ihre Bemühungen.