Guten Tag zusammen,
ich arbeite an einem Fragebogen in SoSci Survey, bei dem Teilnehmende eine Reihe von Bildern (insgesamt 24) bewerten sollen, indem sie für jedes Bild „Ja“ oder „Nein“ auswählen. Die Abstimmung erfolgt automatisch mit einem 1-Sekunden-Countdown pro Bild, und die Antworten sollen in den internen Variablen BILD01 bis BILD24 gespeichert werden (wie in der Variablenübersicht definiert). Leider gelingt es mir nicht, die Daten korrekt im Datensatz zu speichern, obwohl der JavaScript-Code ohne Fehler ausgeführt wird. Ich hoffe, ihr könnt mir helfen!
Beschreibung des Problems
Die Bildabstimmung funktioniert einwandfrei: Die Bilder wechseln alle 1 Sekunde, und die gewählten Antworten (1 für „Ja“, 0 für „Nein“ oder leer) werden in der Console protokolliert.
Nach dem Absenden der Seite (via Klick auf „Weiter“) fehlen die Spalten BILD01 bis BILD24 im exportierten Datensatz, obwohl temporäre Werte in versteckten Feldern gesetzt werden.
Es tritt keine Fehlermeldung auf, aber die Daten gehen verloren.
Was wir schon alles probiert haben
Wir haben verschiedene Ansätze getestet, um die Daten zu speichern, darunter:
Versteckte Eingabefelder mit name="BILDXX": Direkt in der Frage „BT01“ eingefügt, aber die Daten wurden nicht im Datensatz erkannt.
JavaScript mit SoSciTools.setValue(): Versucht, die Werte direkt in BILDXX zu setzen, aber es kam zu einem Fehler („TypeError: SoSciTools.setValue is not a function“).
Validierung mit attachCheck: Die Werte wurden in einem answers-Objekt gesammelt und vor dem Absenden in versteckte Felder geschrieben, aber ohne Erfolg im Datensatz.
PHP mit preset(): Versucht, die Variablen BILD01 bis BILD24 vor der Frage mit leeren Werten zu initialisieren, aber der PHP-Code wurde wegen der ?>-Zeichenkette blockiert.
PHP-Verarbeitung nach Absenden: Aktueller Ansatz mit temporären Feldern (temp_BILDXX) und PHP im Bereich „Antworten mit PHP verarbeiten“, aber die Warnung über ?> verhindert die Ausführung.
Warum wir JavaScript nutzen
Weil die Bildabstimmung dynamisch ist und ein automatischer Wechsel der Bilder mit einem Countdown (1 Sekunde pro Bild) erfordert, was mit reinen SoSci-Funktionen nicht umsetzbar ist.
Die Benutzerinteraktion (Auswahl von „Ja“ oder „Nein“) muss in Echtzeit erfasst und zwischengespeichert werden, während die Bilder angezeigt werden.
JavaScript ermöglicht eine flexible Steuerung der Benutzeroberfläche und die Sammlung der Antworten, die dann an SoSci übergeben werden sollen.
Notiz: Da fehlt noch ein Teil, der mit div die position etc der seite bearbeitet, aber den kriege ich hier nicht eingefügt ohne dass der html code ausgeführt wird.
Notiz 2: Ich bin ein blutiger amateur und hab das komplett mit hilfe von KI gemacht. Ich weiß mittlerweile aber nicht weiter.
Der aktuelle HTML / javascript code für die Seite, wo die Bilder gezeigt werden:
Ich hoffe, ihr könnt mir weiterhelfen.
<script type="text/javascript">
var images = [
"face1.jpg", "face2.jpg", "face3.jpg", "face4.jpg", "face5.jpg",
"face6.jpg", "face7.jpg", "face8.jpg", "face9.jpg", "face10.jpg",
"face11.jpg", "face12.jpg", "face13.jpg", "face14.jpg", "face15.jpg",
"face16.jpg", "face17.jpg", "face18.jpg", "face19.jpg", "face20.jpg",
"face21.jpg", "face22.jpg", "face23.jpg", "face24.jpg"
];
var currentIndex = 0;
var totalImages = 24;
var countdownInterval;
function startCountdown() {
var count = 1; // 1 Sekunde pro Bild
document.getElementById("countdown").textContent = count;
countdownInterval = setInterval(function() {
count--;
document.getElementById("countdown").textContent = count;
if (count <= 0) {
clearInterval(countdownInterval);
nextImage();
}
}, 1000); // 1 Sekunde pro Schritt
}
function nextImage() {
var selectedValue = document.querySelector('input[name="vote"]:checked');
console.log("Current Index:", currentIndex, "Selected Value:", selectedValue ? selectedValue.value : "Keine Antwort");
if (currentIndex < totalImages) {
var varName = "temp_BILD" + (currentIndex + 1).toString().padStart(2, "0");
try {
if (selectedValue) {
document.getElementById(varName).value = selectedValue.value;
console.log("Gespeichert in temp:", varName, "=", selectedValue.value);
} else {
document.getElementById(varName).value = "";
console.log("Gespeichert in temp:", varName, "= leer");
}
} catch (error) {
console.error("Fehler beim Speichern:", varName, error);
}
document.getElementById("voteOptions").style.display = "none";
if (currentIndex + 1 < totalImages) {
currentIndex++;
document.getElementById("currentImage").src = images[currentIndex];
document.getElementById("voteOptions").style.display = "block";
document.querySelectorAll('input[name="vote"]').forEach(radio => radio.checked = false);
startCountdown();
} else {
console.log("Alle Bilder durchlaufen, zeige Pausennachricht");
document.getElementById("voteOptions").style.display = "none";
document.getElementById("pauseMessage").style.display = "block";
}
}
}
function submitForm() {
console.log("Versuche, zur nächsten Seite zu navigieren");
try {
SoSciTools.submitPage();
console.log("Seite erfolgreich abgesendet");
} catch (error) {
console.error("Fehler beim Seitenwechsel:", error);
}
}
// Initialisiere und starte die Bildabfrage
window.addEventListener("load", function() {
console.log("Seite geladen, starte Bildabfrage");
document.getElementById("voteOptions").style.display = "block";
startCountdown();
});
// Klick-Event für Pausennachricht
document.getElementById("pauseMessage").addEventListener("click", submitForm);
</script>
<!-- end question(BT01) -->
<script type="text/javascript">
<!--
SoSciEnhancedInputs.instance.initSensitive();
// -->
</script>