0 votes
in SoSci Survey (dt.) by s225763 (110 points)

Hallo,

ich möchte folgende Funktionalität (mehrfach) umsetzen:
Nach der Auswahl einer Antwort in einer Auswahlfrage soll ein "Weiter"-Button erscheinen.
Bei Klick auf diesen Button soll die Antwort nicht mehr geändert werden können. Gleichzeitig soll unterhalb die nächste Auswahlfrage eingeblendet und der Button ausgeblendet werden.

Ich habe mir dazu folgende Funktionen in JavaScript geschrieben und beim Erstellen des Fragebogens an erster Stelle eingefügt:

//Antwort einloggen, nächste Teilfrage einblenden, Button Ausblenden (als "onclick"-Methode im Button)
function disable_showNext(qst1ID, qst2ID, btnID) {
	//Antwortänderung verhindern
    var radios = document.getElementsByName(qst1ID)
	var len = radios.length
	
	   for(let i=0;i<len;i++) {
		   radios[i].disabled=true;
		}
    
    //Button ausblenden
	document.getElementById(btnID).style.visibility = "hidden"
	//zweite Teilfrage einblenden
    document.getElementById(qst2ID + "_qst").style.display=""	
}

//zweite Teilfrage zu Beginn verstecken (beim Erstellen nach den Teilfragen ausführen)
function hide(qst2ID) {
	var qst2 = document.getElementById(qst2ID + "_qst")
	qst2.style.display="none"
}

//"Weiter"-Button anzeigen, sobald eine Auswahl getroffen wurde
function showBtnWeiter(qstID, btnID) {
	var radios = document.getElementsByName(qstID)
	var len = radios.length
	
	var btn = document.getElementById(btnID)
	
	function toggle() {
		btn.style.visibility="visible"
	}

	for(let i=0;i<len;i++) {
		   SoSciTools.attachEvent(radios[i], "click", toggle)
	}
}

Der Button sieht so aus und wird zwischen den Teilfragen per HTML-Code eingefügt:

<p><button id='btn1' onclick = "disable_showNext('EL10', 'btn1')" style = "visibility:hidden">Weiter</button></p>

Der Code tut in einem externen Test genau das, was er soll.

Im Fragebogen-Testmodus erscheint der Button nach Antwortauswahl wie gewünscht, bei Klick darauf wird jedoch nur ganz kurz die zweite Frage eingeblendet, sofort wieder ausgeblendet und der Standard-Hinweis ("Pflichtfrage") angezeigt, man solle die erste Teilfrage beantworten. Die zuvor gegebene Antwort ist wieder weg und alles ist scheinbar auf Anfang (bis auf den eingeblendeten Hinweis). Dies kann man endlos wiederholen.

Ich vermute, es hat etwas damit zu tun, dass ich die Radio-Buttons deaktiviere und dadurch ein weiteres Ereignis ausgelöst wird (?).
Ich bin auch auf die Funktion SoSciTools.disableInputs() gestoßen, aber die scheint immer nur die Eingabemöglichkeiten aller Fragen zu deaktivieren...

Gibt es eine Lösung dafür?

Danke für eure Hilfe!

by SoSci Survey (305k points)
Könnten Sie bitte einen Pretest-Link direkt (!) zur betroffenen Seite posten? Es ist deutlich einfacher, sich solche Probleme live und im Kontext anzusehen. Danke.
by s225763 (110 points)
Klar, hier ist ein Pretest-Link zur Seite, auf der der Code ausgeführt wird:
https://www.soscisurvey.de/elehretest/index.php?i=RTKRHPGMN9EH&rnd=BLOD

1 Answer

0 votes
by SoSci Survey (305k points)

Danke für den Pretest-Link. Die Ursache ist trivial - und zwar wird ein <button>-Element ohne Spezifikation des type automatisch als Knopf zum Abschicken des Formulars (=der aktuellen Seite) verwendet.

Ergänzen Sie

<button id='btn1' onclick = "disable_showNext('EL10', 'btn1')" style = "visibility:hidden">Weiter</button>

wie folgt:

<button id='btn1' type="button" onclick = "disable_showNext('EL10', 'btn1')" style = "visibility:hidden">Weiter</button>
by s225763 (110 points)
edited by s225763
Vielen Dank, die Einblendung der Teilfragen nacheinander hat schonmal funktioniert.
Leider ist mir grad noch aufgefallen: Beim Klick auf den "Weiter"-Button zur nächsten Seite wird wieder die "Pflichtfrage"-Meldung ausgelöst, als hätte man nichts beantwortet (siehe Pretest-Link oben, jetzt mit 3 Stufen).

Woran könnte das liegen?

EDIT: Wenn ich nur die dritte Teilfrage als Pflichtfrage definiere, dann funktioniert die Weiterleitung zur nächsten Seite, jedoch sind die Teilfragen 1&2 unter "Erhobene Daten" als "nicht beantwortet" drin.
by SoSci Survey (305k points)
Das oben ist ein Link zu Ihrem (Test-)Interview, kein Pretest-Link.

>  jedoch sind die Teilfragen 1&2 unter "Erhobene Daten" als "nicht beantwortet" drin.

Das klingt so, als wären sie nicht korrekt in die Seite eingebunden. Und das erklärt auch die Warnung, dass sie nicht beantwortet wären. Könnte es sein, dass Sie irgendwo noch einen Fehler im HTML-Code haben, der das Formular "zerschießt"?

Posten Sie doch bitte mal einen (richtigen) Pretest-Link, am besten mit Debug-Informationen, dann kann ich mir das nochmal ansehen.
by s225763 (110 points)
Ich hatte den Link oben unter "Pretest und Vorschau" erzeugt, war das falsch?

Hier jedenfalls ein Link zur "Vorschau mit Debug-Informationen":
https://www.soscisurvey.de/elehretest/?act=8DW26CI8PGvwNu1kCV3MwEha

Der Code oben tut ja jetzt bzgl. Benutzerführung, was er soll.

Ich bin leider ziemlich neu, was HTML-/Javascript-Code angeht, daher kann ich nicht wirklich beurteilen, ob das Formular irgendwie "zerschossen" werden könnte - was auch immer das genau bedeuten mag.

Meine Vermutung ist, dass die beantworteten Fragen durch die Deaktivierung der Radio-Buttons (wie im vorliegenden Code) als nicht beantwortet angesehen werden - kann aber auch ganz falsch liegen.
by SoSci Survey (305k points)
> Ich hatte den Link oben unter "Pretest und Vorschau" erzeugt, war das falsch?

Dieser hier ist richtig - zu erkennen am act= im Link. Der i= ist der Link direkt in ein laufendes Interview.

Mit dem Link konnte ich das Problem jetzt nachvollziehen. Ursache ist, wie Sie schon vermuten, dass Sie das Eingabeelement auf "disabled" stellen. Das führt dazu, dass es richtig deaktivert wird, und daher auch keine Antort mehr übermittelt. Versuchen Sie es stattdessen mit "readonly". Mit style.opacity=0.5 können Sie das Eingabefeld auch noch transparent schalten, sodass es deaktiviert aussieht.
by s225763 (110 points)
Vielen Dank für die Bestätigung der Vermutung und den Lösungsansatz, mit dessen Hilfe habe ich es jetzt hingekriegt.

"readonly" erlaubte noch eine Änderung der Antwort, warum auch immer.

Ich habe nun alle Radio-Buttons auf "disabled" gestellt, außer den ausgewählten (Abfrage mit "checked") und diesen dann mit "opacity" halb transparent gestellt.
So werden die Antworten übermittelt.

Hier der endgültige Code, falls nochmal jemand sowas machen möchte:

<script>
//Beim Erstellen als erstes über allen Teilfragen einbinden

//als "onclick"-Methode der Buttons zwischen den Teilfragen definieren
function disable_showNext(qst1ID, qst2ID, btnID) {

    //Antwortänderung verhindern
    var radios = document.getElementsByName(qst1ID)
    var len = radios.length
   
    for(let i=0;i<len;i++) {
        if(radios[i].checked) {
            radios[i].style.opacity = 0.5
        }
        else {
            radios[i].disabled = true
        }
    }
    
    //Button ausblenden
    document.getElementById(btnID).style.visibility = "hidden"

    //nächste Teilfrage einblenden
    document.getElementById(qst2ID + "_qst").style.display=""   
}

//Teilfragen 2+3 (beliebig erweiterbar) zu Beginn verstecken
function hide(qst2ID, qst3ID) {
    document.getElementById(qst2ID + "_qst").style.display="none"
    document.getElementById(qst3ID + "_qst").style.display="none"
}

//"Weiter"-Button anzeigen, sobald eine Auswahl getroffen wurde
function showBtnWeiter(qstID, btnID) {
    var radios = document.getElementsByName(qstID)
    var len = radios.length
   
    var btn = document.getElementById(btnID)
    var done = false
       
    function toggle() {
                if(done == false) {
                    btn.style.visibility="visible"
                    done = true
                }
    }

    for(let i=0;i<len;i++) {
           SoSciTools.attachEvent(radios[i], "click", toggle)
    }
}
</script>

Die Buttons mit jeweils eigener ID wie oben zwischen den Teilfragen per HTML-Code einbinden.

Unter den Teilfragen folgenden HTML-Code einbinden (auf beliebige Anzahl Teilfragen erweiterbar):
<script>
     hide("ID2", "ID3")
     new showBtnWeiter("ID1", "btn1")
     new showBtnWeiter("ID2", "btn2")
</script>
by SoSci Survey (305k points)
> "readonly" erlaubte noch eine Änderung der Antwort, warum auch immer.

Ach ja, das war noch was ... readonly gilt nur für beschreibbare Felder, aber der Inhalt eines Auswahlfelds wird ja nicht geändert. Nur dessen Status.

Eine geschickte Lösung haben Sie da erdacht, mit dem selektiven Deaktivieren!

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...