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.