0 votes
in SoSci Survey (dt.) by s272152 (180 points)
edited by SoSci Survey

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.

by SoSci Survey (309k points)
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

1 Answer

0 votes
by SoSci Survey (309k points)

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.

by s272152 (180 points)
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>
by SoSci Survey (309k points)
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");
by s272152 (180 points)
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>
by SoSci Survey (309k points)
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.
by s272152 (180 points)
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.
by SoSci Survey (309k points)
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.

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

...