Fragen bei Auswahl einer bestimmten Option sofort einblenden

Question

Hallo,
leider bin ich bisher Anfänger im Bereich html / java Skripte.
Ich versuche nun auf einer Seite meines Fragebogens folgendes Umzusetzen:

• Frage PF07 ist eine Mehrfachauswahlfrage und hat 6 Antworten: bei Antwort 1 soll Frage PF08 eingeblendet sein, ansonsten ausgeblendet. Die anderen Antworten sollen mit ermittelt werden, aber keine Auswirkungen auf die Folgefrage haben.
• Frage PF09 ist eine Auswahlfrage und hat 2 Antworten, bei Antwort 1 soll Frage PF10 eingeblendet sein, ansonsten ausgeblendet.
• Frage PF11 ist eine horizontale Auswahl und hat 5 Antworten, bei Antwort 4 & 5 soll Frage PF12 eingeblendet sein, ansonsten ausgeblendet.
• Bei Änderung der Antworten der Fragen PF07, PF09, PF11 soll sich das Ein-/Ausblenden aktualisieren.

Mein Code funktioniert nun für PF09 und PF11, PF07 hat leider keine Funktion und die Fehlerkonsole des Browsers zeigt keine Fehler. Als Probleme sind folgende aufgelistet: Ausgeblendet wird die Frage PF08, jedoch nicht eingeblendet bei Auswahl von Antwort 1.
Leider komme ich hierbei nicht weiter und wäre über Hilfe sehr dankbar.

Mein Code:

<script type="text/javascript">
<!--
function DynamicToggle(auswahlID, frageID, sichtbarOptionen) {
    var frage = document.getElementById(frageID + "_qst");

    function toggle() {
        var sichtbar = false;

        // Überprüfen, ob eine der definierten Optionen ausgewählt ist
        sichtbarOptionen.forEach(function(optionNummer) {
            var option = document.getElementById(auswahlID + "_0" + optionNummer + "a");
            if (option && option.checked) {
                sichtbar = true;
            }
        });

        // Einblenden, wenn sichtbar = true, sonst ausblenden
        frage.style.display = sichtbar ? "" : "none";
    }

    // Event-Listener für jede Option hinzufügen (unabhängig ob Teil der sichtbarOptionen oder nicht)
    for (var i = 1; i <= 6; i++) { // maximal 6 Antwortoptionen, je nach Frage anpassen
        var option = document.getElementById(auswahlID + "_0" + i + "a");
        if (option) {
            SoSciTools.attachEvent(option, "click", toggle);
        }
    }

    // Initiale Sichtbarkeitsprüfung beim Laden der Seite
    toggle();
}

// Initialisierung für jede gewünschte Abhängigkeit

// PF07: Bei Antwort "1" wird PF08 eingeblendet, ansonsten ausgeblendet
DynamicToggle("PF07", "PF08", [1]);

// PF09: Bei Antwort "1" wird PF10 eingeblendet, ansonsten ausgeblendet
DynamicToggle("PF09", "PF10", [1]);

// PF11: Bei Antwort "4" oder "5" wird PF12 eingeblendet, ansonsten ausgeblendet
DynamicToggle("PF11", "PF12", [4, 5]);
// -->
</script>

Über Antworten freue ich mich sehr! Danke im Voraus!

Answer 1

Der Hinweis auf das aria-description bezieht sich darauf, dass dieses Attribute vom Standard für Barrierefreiheit noch nicht verabschiedet ist. Ei, ei, ei, da mahlen die Mühlen langsam ...

Wie Sie schon schreiben, hat das mit dem Problem im Fragebogen nichts zu tun. Das Problem dürfte eher sein, dass Sie für Mehrfachauswahl und einfache Auswahlfrage unterschiedlichen Code benötigen. In dem einen Fall steht nämlich noch ein "a" an der HTML-ID, im anderen Fall nicht.

In dem Karteireiter "Konsole" (in Ihrem Screenshot) wird nichts angezeigt?

Ich würde empfehlen, dass Sie den - zugegeben, weniger eleganten - aber dafür funktionalen Code aus der SoSci-Anleitung nochmal als Basis verwenden, und erstmal mit dem ersten Filter starten. Wie gesagt: Bei der Mehrfachauswahl müssten Sie bitte das "a" in der HTML-ID weglassen. Wenn der funktioniert sehen wir uns die weiteren Filter an.

Wenn Sie möchten können Sie auch mal folgende Kurzfassung probieren, welche die SoSci-integrierte JavaScript-Anbindung nutzt (funktioniert bisher nur auf www.soscisurvey.de).

<script>
window.addEventListener("load", function() {
    var frage = document.getElementById("PF08_qst");
    function toggle() {
        if (s2.PF07.value.indexOf(1) > -1) {
            frage.style.display = "";
        } else {
            frage.style.display = "none";
        }
    }
    s2.PF07.addEventListener("click", toggle);
    toggle();
});
</script>

Comments

Perfekt, vielen Dank für die Antwort. Der Hinweis mit dem "a" hat das Problem geklärt. Nun funktioniert mein Code fehlerfrei:

    <script type="text/javascript">
    <!--
    function DynamicToggle(auswahlID, frageID, sichtbarOptionen, maxAntworten = 6, hatSuffix = true) {
        var frage = document.getElementById(frageID + "_qst");
    
        function toggle() {
            var sichtbar = false;
    
            // Überprüfen, ob eine der definierten Optionen ausgewählt ist
            sichtbarOptionen.forEach(function(optionNummer) {
                var optionID = auswahlID + "_0" + optionNummer + (hatSuffix ? "a" : ""); // Suffix nur, wenn hatSuffix true ist
                var option = document.getElementById(optionID);
                if (option && option.checked) {
                    sichtbar = true;
                }
            });
    
            // Einblenden, wenn sichtbar = true, sonst ausblenden
            frage.style.display = sichtbar ? "" : "none";
        }
    
        // Event-Listener für jede Option hinzufügen (unabhängig ob Teil der sichtbarOptionen oder nicht)
        for (var i = 1; i <= maxAntworten; i++) { // maximale Anzahl der Antwortoptionen
            var optionID = auswahlID + "_0" + i + (hatSuffix ? "a" : ""); // Suffix nur, wenn hatSuffix true ist
            var option = document.getElementById(optionID);
            if (option) {
                SoSciTools.attachEvent(option, "click", toggle);
            } else {
                console.log("Option nicht gefunden: " + optionID);
            }
        }
    
        // Initiale Sichtbarkeitsprüfung beim Laden der Seite
        toggle();
    }
    
    // Initialisierung für jede gewünschte Abhängigkeit
    
    // PF07: Bei Antwort "1" wird PF08 eingeblendet, ansonsten ausgeblendet (6 Antwortmöglichkeiten, ohne "a" Suffix)
    DynamicToggle("PF07", "PF08", [1], 6, false);
    
    // PF09: Bei Antwort "1" wird PF10 eingeblendet, ansonsten ausgeblendet (2 Antwortmöglichkeiten, mit "a" Suffix)
    DynamicToggle("PF09", "PF10", [1], 2, true);
    
    // PF11: Bei Antwort "4" oder "5" wird PF12 eingeblendet, ansonsten ausgeblendet (5 Antwortmöglichkeiten, mit "a" Suffix)
    DynamicToggle("PF11", "PF12", [4, 5], 5, true);
    -->
    </script>