Filterfragen auf derselben Seite im Fragebogen

Question

Sehr geehrtes Support-Team,

ich arbeite derzeit an einer Umfrage und versuche, ein JavaScript-Skript zu implementieren, das bestimmte Fragen basierend auf den Antworten des Benutzers ein- und ausblendet. Leider funktioniert das Skript nicht wie erwartet, und ich würde mich über Ihre Unterstützung bei der Problemlösung freuen. Ich habe die Anleitung dazu "Fragen bei Auswahl einer bestimmten Option sofort
einblenden" schon gelesen und auf der Basis das Script erstellt.

Hier ist der Code, den ich verwende:

<script type="text/javascript">
// <!--
function DynamicFilter(auswahlIDT202, frageIDT203, frageIDT204) {
    this.optionJa = document.getElementById(auswahlIDT202 + "_01a");
    this.optionNein = document.getElementById(auswahlIDT202 + "_02a");
    this.optionKeineAngabe = document.getElementById(auswahlIDT202 + "_03a");
    this.frageT203 = document.getElementById(frageIDT203);
    this.frageT204 = document.getElementById(frageIDT204);

    var that = this;

    this.toggle = function() {
        if (that.optionJa.checked) {
            that.frageT203.style.display = "";
            that.frageT204.style.display = "";
        } else if (that.optionNein.checked || that.optionKeineAngabe.checked) {
            that.frageT203.style.display = "none";
            that.frageT204.style.display = "none";
        }
    }

    SoSciTools.attachEvent(this.optionJa, "click", this.toggle);
    SoSciTools.attachEvent(this.optionNein, "click", this.toggle);
    SoSciTools.attachEvent(this.optionKeineAngabe, "click", this.toggle);

    this.toggle();
}

new DynamicFilter("T202", "T203", "T204");
// -->
</script>

Die Absicht dieses Skripts ist es, die Fragen T203 und T204 anzuzeigen, wenn die Option "Ja" (ID: T202_01a) ausgewählt ist, und sie auszublenden, wenn "Nein" (T202_02a) oder "Keine Angabe" (T202_03a) ausgewählt sind. Jedoch scheint der Code nicht das gewünschte Ergebnis zu zeigen. Die Fragen T203 und T204 werden nicht wie erwartet ausgeblendet.

Habe ich etwas in der Umsetzung übersehen? Gibt es besondere Einschränkungen oder spezifische Methoden, die ich in Ihrem System beachten muss, um solche interaktiven Elemente korrekt zu implementieren?

Vielen Dank im Voraus für Ihre Unterstützung.

Comments

Posten Sie gerne einen Pretest-Link direkt (!) zur betroffenen Seite - und werfen Sie auch einen Blick in die Fehlerkonsole des Browsers: https://www.soscisurvey.de/help/doku.php/de:general:browser-tools#javascript-probleme

---

Anbei der Pretest-Link: https://www.soscisurvey.de/test397003/?act=YoyvNWSFtpaGXDbWKkS7xBzV

Answer 1

Die JavaScript-Konsole beschwert sich beim Klick auf die Auswahlfrage

that.frageT203 is null

Diese Variable wird indirekt hier definiert:

this.frageT203 = document.getElementById(frageIDT203);

und Die Variable frageIDT203 wiederum wird an die Funktion übergeben als "T203".

Zwei Dinge müssten Sie bitte korrigieren. Erstens ist die HTML-Kennung des Frage-Elements nicht "T203" sondern "T203_qst". Sie können das entweder hier ändern...

new DynamicFilter("T202", "T203", "T204");

oder hier

this.frageT203 = document.getElementById(frageIDT203);

z.B. wie folgt:

this.frageT203 = document.getElementById(frageIDT203 + "_qst");

Und zweitens muss der JavaScript-Code unterhalb der Frage stehen, damit er das HTML-Element auch finden kann, wenn er ausgeführt wird.

Comments

Das habe ich nun wie folgt erledigt und unter die Frage gesetzt, allerdings funktioniert es trotzdem nicht:

<script type="text/javascript">
// <!--
function DynamicFilter(auswahlIDT202_qst, frageIDT203_qst, frageIDT204_qst) {
    this.optionJa = document.getElementById(auswahlIDT202 + "_01a");
    this.optionNein = document.getElementById(auswahlIDT202 + "_02a");
    this.optionKeineAngabe = document.getElementById(auswahlIDT202 + "_03a");
    this.frageT203 = document.getElementById(frageIDT203 + "_qst");
    this.frageT204 = document.getElementById(frageIDT204 + "_qst");

    var that = this;

    this.toggle = function() {
        if (that.optionJa.checked) {
            that.frageT203.style.display = "";
            that.frageT204.style.display = "";
        } else if (that.optionNein.checked || that.optionKeineAngabe.checked) {
            that.frageT203.style.display = "none";
            that.frageT204.style.display = "none";
        }
    }

    SoSciTools.attachEvent(this.optionJa, "click", this.toggle);
    SoSciTools.attachEvent(this.optionNein, "click", this.toggle);
    SoSciTools.attachEvent(this.optionKeineAngabe, "click", this.toggle);

    this.toggle();
}

new DynamicFilter("T202_qst", "T203_qst", "T204_qst");
// -->
</script>

---

In dieser Zeile ...

function DynamicFilter(auswahlIDT202_qst, frageIDT203_qst, frageIDT204_qst)

... stehen nur Variablennamen. Dort sollte kein _qst stehen, zumindest muss hier dassselbe stehen wie hier:

    this.optionKeineAngabe = document.getElementById(auswahlIDT202 + "_03a");
    this.frageT203 = document.getElementById(frageIDT203 + "_qst");
    this.frageT204 = document.getElementById(frageIDT204 + "_qst");

---

Das habe ich gemacht, aber es funktioniert trotzdem nicht...

<script type="text/javascript">
// <!--
function DynamicFilter(auswahlIDT202, frageIDT203, frageIDT204) {
    this.optionJa = document.getElementById(auswahlIDT202 + "_01a");
    this.optionNein = document.getElementById(auswahlIDT202 + "_02a");
    this.optionKeineAngabe = document.getElementById(auswahlIDT202 + "_03a");
    this.frageT203 = document.getElementById(frageIDT203 + "_qst");
    this.frageT204 = document.getElementById(frageIDT204 + "_qst");

    var that = this;

    this.toggle = function() {
        if (that.optionJa.checked) {
            that.frageT203.style.display = "";
            that.frageT204.style.display = "";
        } else if (that.optionNein.checked || that.optionKeineAngabe.checked) {
            that.frageT203.style.display = "none";
            that.frageT204.style.display = "none";
        }
    }

    SoSciTools.attachEvent(this.optionJa, "click", this.toggle);
    SoSciTools.attachEvent(this.optionNein, "click", this.toggle);
    SoSciTools.attachEvent(this.optionKeineAngabe, "click", this.toggle);

    this.toggle();
}

new DynamicFilter("T202", "T203", "T204");
// -->
</script>

---

Der JavaScript-Code steht auf der Seite - soweit ich das aus dem Pretest-Link erkennen kann - immer noch oberhalb von T203. Schieben Sie den Code bitte weiter nach unten auf die Seite.

Im Quellcode sieht das aktuell aus wie folgt:

new DynamicFilter("T202", "T203", "T204");
// -->
</script>

<!-- begin question(T203) -->
<div class="SoSciDebug question pretest">
                    <div class="container">
                        <div class="ballot"></div>
                        <div class="box">
                            <div class="label">T203</div>
</div>
                    </div>
                    <!-- TODO: Variables per question (debug only) -->
                </div>
<div id="T203_qst" class="s2question spacing">
<div class="title s2readable" id="T203_title">

Die Seite wird vom Browser streng von oben nach unten verarbeitet. Heißt, wenn die Zeile

new DynamicFilter("T202", "T203", "T204");

ausgeführt wird, wurde das Element, welches mit dieser Zeile beginnt

<div id="T203_qst" class="s2question spacing">

noch gar nicht eingelesen.

---

Vielen Dank, das funktioniert nun. Was kann ich dagegen tun, dass wenn ich mich bei der Antwort, die als Filter dient, verklickt habe und dann die andere Antwort auswählen müsste, die zu einer anderen Frage führt. Weil bis dato musste ich die Seite neu laden, weil es sonst so stehen bleibt.

---

Im Prinzip können Sie beim Verbergen der Frage auch die Antworten mittels JavaScript löschen. Dann sind die Befragten aber unglücklich, wenn sie bei der FIlterfrage testweise die andere Option wählen und dann alles weg ist. Besser ist es, wenn Sie überflüssige Antworten bei der Auswertung entfernen.