Mehrfachantwort-Fragen und Function toggle()

Question

Hallo,

ich habe versucht die function toggle() zum Ein-bzw. Ausblenden einer weiteren Frage zu programmieren. Die Filterfrage ist eine Mehrfachantwort.

Leider ist es so, dass die Frage zwar bei mindestens einer Ja-Bedingung eingeblendet, aber bei der Nein-Bedingung nicht wieder ausgeblendet wird.
Nur wenn ich die Ja-Bedingungen abwähle wird die Frage ausgeblendet.

Bei einfachen Auswahlfragen funktioniert die Funktion gut.

Gibt es einen Trick bei den Mehrfachantworten?
Muss ich vielleicht optionA,checked bei dem else noch nennen, also ein else if daraus machen (es kann ja sein, dass optionB und optionC angekreuzt sind)?
Hier mal mein Code:

<script type="text/javascript">
<!--
var optionA = document.getElementById("FR08_01");  // Option "Nein"
var optionB = document.getElementById("FR08_02");  // Option "Ja, pos"
var optionC = document.getElementById("FR08_03");  // Option "Ja, neg"

var frage8 = document.getElementById("blockFr8a");  

function toggle2() {
  
  if (optionB.checked || optionC.checked){

    frage8.style.display = "";

  } else {
  
   frage8.style.display = "none";

  }
}
     
SoSciTools.attachEvent(optionA, "click", toggle2);
SoSciTools.attachEvent(optionB, "click", toggle2);
SoSciTools.attachEvent(optionC, "click", toggle2);
 
toggle2();
// -->
</script>

Answer 1

Sicher, dass das eine Mehrfachauswahl sein soll und keine einfache Auswahl? Auf den ersten Blick scheint es so, dass nur eine Option ausgewählt werden soll.

Nur wenn ich die Ja-Bedingungen abwähle wird die Frage ausgeblendet.

Genso so haben SIe das im Code geschrieben. Sie haben formuliert, dass die Frage angezeigt werden soll, wenn eine der beiden Ja-Optionen markiert ist:

if (optionB.checked || optionC.checked)

Vermutlich würde es ausreichen, wenn Sie das "Nein" als exklusive Option markieren (in den Detail-Einstellungen der Option), sodass die Ja-Optionen abgewählt werden, sobald die Nein-Option gewählt wird.

Sie können es aber auch explizit in den Filter schreiben (falls optionA das "Nein" ist).

if ((optionB.checked || optionC.checked) && !optionA.checked)

Comments

Hallo,

ja, es ist eine Mehrfachantwort, da es die Möglichkeit von zwei Ja-Antworten gibt mit unterschiedlichem Inhalt.
Die Option 'Nein' ist bei mir schon exklusiv gewesen, aber ich habe den Filter nun angepasst und die optionA(=nein) mit eingebaut.

Nun funktioniert es, dass die Frage bei Nein ausgeblendet  und bei Ja eingeblendet wird, allerdings wird das ODER zwischen optionB und optionC nicht erkannt und die Frage wird nur eingeblendet wenn beide Optionen ausgewählt wurden.
Ich habe schon mit dem Setzen der Klammern 'gespielt' und die optionA nach vorne gesetzt, auch eine geschachtelte if-Bedingung versucht - leider ohne Erfolg.

Haben Sie noch eine Idee?

---

> allerdings wird das ODER zwischen optionB und optionC nicht erkannt und die Frage wird nur eingeblendet wenn beide Optionen ausgewählt wurden.

Schreiben Sie vor das IF bitte mal folgende Zeile:

console.log(optionB.checked, optionC.checked, optionA.checked);

Dann zeigt der Browser in der Fehlerkonsole an, was er da an Werte hat, wenn nur ein "Ja" angeklickt ist.

Wenn das seltsam ist, dann noch als Erzgänzung:

console.log(optionB, optionC, optionA);

Vielleicht sind es einfach die falschen Elemente, die da angesprochen werden... Oder es ist ein Timing-Problem. Oder ein Problem mit einem anderen JavaScript auf der Seite.

---

Ich habe auf der Seite noch ein JavaScript - eine weitere toggle-Funktion, aber ich habe darauf geachtet, dass der Funktionsname als auch die items keine identischen Namen haben. Und der Filter bei den einfachen Auswahlfragen funktioniert mit der toggle-Funktion auch ohne Probleme.

Das console.log(optionB, optionC, optionA); ergibt genau die Zuweisungen, die es haben soll optionA=FR08_01, optionB=FR08_02, optionC=FR08_03.

Das console.log(optionB.checked, optionC.checked, optionA.checked); zeigt, dass die optionen nicht auf false gesetzt werden bei einer Änderung.

Ich habe das mal dargestellt:

1.    Option A angeklickt
2.    Option B nicht angeklickt
3.    Option C nicht angeklickt
                                                    false false true
geändert
4.    Option A nicht angeklickt
5.    Option B angeklickt
6.    Option C nicht angeklickt
                                                    true false true  -
                                                    Hätte hier nicht OptionA auf false gehen müssen?
                                                    Unterfrage wird nicht eingeblendet
geändert
7.    Option A nicht angeklickt
8.    Option B angeklickt
9.    Option C angeklickt
                                                    true true false –
                                                    hier wird erst OptionA false, d.h., wenn beide
                                                   Ja-Optionen angeklickt sind
                                                    Unterfrage wird eingeblendet
geändert
10.    Option A angeklickt
11.    Option B wird zurückgesetzt, da A exklusiv ist
12.    Option C wird zurückgesetzt, da A exklusiv ist

                                                   true true true – hier sind nun alle Optionen true
                                                   Unterfrage wird ausgeblendet
Geändert
1.    Option A Klick manuel abgewählt
2.    Option B erscheint wieder angeklickt (obwohl ja eigentlich nun nichts angeklickt
                                                                    erscheinen dürfte)
3.    Option C erscheint wieder angeklickt (obwohl ja eigentlich nun nichts angeklickt
                                                                    erscheinen dürfte)

                                                    false false false

Ich habe Ihnen mal einen pretest-Link für die Seite erstellt:

https://sozmed.charite.de/rosenkranz/?act=5SW6mLzDBKHOeorc5yn9K7VW

Es geht um Frage 10 ziemlich am Ende der Seite.

Ich habe keine Idee mehr, woran das liegen könnte, kann aber die Frage auch nicht umgestalten.

Vielen Dank!

---

> Hätte hier nicht OptionA auf false gehen müssen?

Für das Antwortmuster mit einem Kreuzchen unten bekomme ich auf Ihrer Seite
false true false
angezeigt.

Bei mir wird (im Firefox) aber Frage 10a auch korrekt immer dann angezeigt, wenn eine der beiden Ja-Optionen ausgewählt ist.

Welchen Browser hatten Sie denn zum Testen verwendet?

Was bei mir nicht funktioniert: Wenn man erst die Ja-Optionen auswählt und dann auf "Nein" klickt, dann läuft erst Ihr Script und dann aktiviert die interne Funktion von SoSci Survey für exklusive Optionen erst die beiden "Ja"-Optionen.

Bauen Sie dafür mal eine kleine Verzögerung ein:

SoSciTools.attachEvent(optionA, "click", toggle2a);
SoSciTools.attachEvent(optionB, "click", toggle2a);
SoSciTools.attachEvent(optionC, "click", toggle2a);

function toggle2a() {
  toggle2();
  window.setTimeout(toggle2, 150);
}

Ändert das etwas?

---

Ich arbeite immer im Edge.

Aber mit der Verzögerung klappt es, auch die Zustände werden richtig angezeigt, aber nun ist die Unterfrage bei Öffnen des Formulars sichtbar und wird erst ausgeblendet, wenn ich nein, also OptionA anklicke.
Muss ich durch die Verzögerung noch etwas anderes ändern?

---

Das Problem war dann wohl die Abfolge, in welcher die Felder aktiviert wurden und Ihr Script ablief.

> Muss ich durch die Verzögerung noch etwas anderes ändern?

Nein, mir fällt nichts ein, was hier noch anzupassen wäre.

---

Hm, okay, dann muss ich noch mal nachsehen, warum beim Öffnen die Unterfrage sichtbar ist.

Aber ich bin ja schon ein Stück weiter. Vielen Dank!

---

Rufen Sie die Funktion beim Laden auch verzögert auf. Also am Ende des Codes einfach:

window.setTimeout(toggle2, 500);

---

Wenn ich das ganz am Ende meines JavaScripts einsetze, wird die Unterfrage überhaupt nicht mehr eingeblendet...

---

Bei mir schon?! Auch in Edge.

---

Bei mir jetzt auch - habe mich noch mal neu angemeldet...

Danke!