Fragen bei Auswahl einer bestimmten Option sofort einblenden - Skala Extrema beschriftet und folgende Mehrfachauswahl

Question

Hallo zusammen,
ich sitze jetzt seit mehreren Tagen an dem gleichen Problem und komme einfach nicht weiter.
Ich habe in meinem Fragebogen eine Itembatterie als Skala (Extrema beschriftet) angelegt (Insgesamt 4 Items).
Ziel wäre wenn bei einem dieser Items eine bestimmte Auswahl getroffen wird ("Trifft überhaupt nicht zu" und 2) im Folgenden eine Mehrfachauswahl angezeigt wird, bei der die Befragten angeben, warum Sie "Trifft überhaupt nicht zu" und 2 angeklickt haben.

Ich bin absoluter JavaScript und HTML-Anfängerin und habe mich durch die ganzen Anleitungen zu "Fragen bei der Auswahl einer bestimmten Option sofort einblenden" durchgekämpft und auch die Antworten auf die hier bereits gestellten Fragen durchgearbeitet.
Ich habe folgenden Code, um dieses Thema umzusetzen:

<script type="text/javascript">
<!--
var optionA = document.getElementById("ZU03_31");
var optionB = document.getElementById("ZU03_32");
var optionC = document.getElementById("ZU03_33");
var optionD = document.getElementById("ZU03_34");
var optionE = document.getElementById("ZU03_35");
var optionF = document.getElementById("ZU03_03DK");
var frage1 = document.getElementById("ZU02");
 
function toogle() {
  if (optionA.checked) || (optionB.checked) {
    frage1.style.display = "";
  } else {
    frage1.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);

toogle();
// -->
</script>

Die folgende Mehrfachauswahl wird beim Wechsel auf die Fragebogenseite immer angezeigt. Sobald aber alle vier Items beantwortet wurden, unabhängig von den Antworten, springt der Fragebogen auf die nächste Seite und die Mehrfachauswahlfrage kann nicht beanwortet werden.

In der Konsole wird folgender Fehler angezeigt Uncaught SyntaxError: missing ( before condition
Wenn ich wie in einer anderen Anleitung steht hier noch Klammern hinzufüge, funktioniert der Code aber auch nicht.

Ich wäre sehr, sehr dankbar, wenn Sie mir weiterhelfen könnten. Vielen herzlichen Dank schon Mal!

Answer 1

Nicht schlecht. Hier zwei Fehler, welche die korrekte Ausführung wahrscheinlich verhindern:

var frage1 = document.getElementById("ZU02");

Die korrekte HTML-Kennung des Frage-Element ist wahrscheinlich ZU02_qst, also müsste es heißen

var frage1 = document.getElementById("ZU02_qst");

Und die Fehlermeldung, die Sie in der Konsole korrekte identifziert haben, bezieht sich auf diese Zeile:

  if (optionA.checked) || (optionB.checked)

Die Bedingung eines IF-Filters muss (komplett) in Klammern stehen. Demnach wäre korrekt

  if ((optionA.checked) || (optionB.checked))

Außerdem müssen Sie das

SoSciTools.attachEvent(optionA, "click", toogle);

Für alle Optionen plus Ausweichoption aufrufen, damit die Frage bei Auswahl einer anderen Option auch wieder ausgeblendet wird.

Evenutell ginge es übrigens auch einfacher, und zwar

<script type="text/javascript">
window.addEventListener("load", function() {
  // Frage TX01 anzeigen, wenn in JN01 entweder 1 oder 2 ausgewählt wurde
  new SoSciTools.ToggleSelection("ZU03_3", [1,2], ["ZU02_qst"]);
});
</script>

Probieren Sie es gerne mal aus, wobei ich nicht sicher bin, ob ToggleSelection mit den Skalenoptionen korrekt umgeht.

Comments

Vielen lieben Dank für die schnelle Antwort.

Ich habe jetzt nochmals was anderes ausprobiert, aber leider funktioniert es immer noch nicht.

Der Code sieht jetzt folgendermaßen aus:

<script type="text/javascript">
<!--
var optionA = document.getElementById("ZU01_31");
var optionB = document.getElementById("ZU01_32");
var optionC = document.getElementById("ZU01_33");
var optionD = document.getElementById("ZU01_34");
var optionE = document.getElementById("ZU01_35");
var optionF = document.getElementById("ZU01_03DK");
var frage1 = document.getElementById("ZU02_qst");
 
function toogle() {
  if ((optionA.checked) || (optionB.checked)) {
    frage1.style.display = "";

  } else {
    frage1.style.display = "none";
  }
};
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);
SoSciTools.attachEvent(optionE, "click", toogle);
SoSciTools.attachEvent(optionF, "click", toogle);

toogle();

// -->
</script>

Die Fehlermeldung, die jetzt erscheint ist Missing ( before condition. Die hatte ich ja bereits eingefügt.

Wie ist das mit einer Mehrfachauswahl. Dort hat ja die Frage an sich keine ID, sondern nur die einzelnen Antwortmöglichkeiten. Muss ich dann alle einzelnen Antwortmöglichkeiten angeben?

Vielen lieben Dank schon Mal für die Unterstützung!

---

> Die Fehlermeldung, die jetzt erscheint ist Missing ( before condition.

Posten Sie gerne einen Pretest-Link direkt (!) zur betroffenen Seite - ohne Referenz, auf welche Zeile genau sich die Fehlermeldugn bezieht, kann ich dazu nichts konstruktives beitragen.

> Wie ist das mit einer Mehrfachauswahl.

Sie adressieren hier bereits die einzelnen Eingabefelder - das ist bei der Mehrfachauswahl genau, es ändern sich nur die HTML-IDs.

---

Die Fehlermeldung bezieht sich auf die Zeile  if ((optionA.checked) || (optionB.checked)) {

Ich sende Ihnen hiermit den Pretest-Link zu der entsprechenden Seite
...
Vielen herzlichen Dank schon Mal!

---

Arg ... da hat Sosci Survey die doppelte Klammer falsch interpretiert. Ändern Sie die Zeile bitte wie folgt.

  if (optionA.checked || optionB.checked) {

---

Vielen Dank schon Mal. Aber leider besteht das Problem weiterhin. Die Mehrfachantwort wird nicht wie gewünscht ausgeblendet.
Es wird folgender Fehler angezeigt: Uncaught Error: No element specified for SoSciTools.attachEvent()

Ziel wäre es, wenn bei einem der Items einer Skala (Extrema beschriftet) eine bestimmte Auswahl getroffen wird ("Trifft überhaupt nicht zu" und 2 - Option A und Option B) im Folgenden eine Frage, die als Mehrfachauswahl angelegt ist, angezeigt wird.

---

> No element specified for SoSciTools.attachEvent()

Das liegt daran, weil optionA (und die anderen) nicht gefunden wird, also konkret an der Zeile

var optionA = document.getElementById("ZU01_31");
etc.

> Ziel wäre es, wenn bei einem der Items einer Skala ...

Ihre Code wäre geeignet, dass der Filter reagiert, wenn bei einem einzelnen Skalenitem eine bestimmte Auswahl getroffen wird. Wenn Sie also z.B. auf das erste Skalenitem "Ich bin sehr zufrieden mit dem Angebot" reagieren möchten, dann müssten Sie sich spezifisch auf die Auswahlfelder zu dieser Skala beziehen:

var optionA = document.getElementById("ZU01_021");
etc.

(beachten Sie, dass hier 3 Ziffern nach dem Unterstrich kommen statt 2)

Wenn Sie auf alle Skalenitems gleichermaßen reagieren möchten, dann müssen Sie ein wenig anders vorgehen. Dafür starten wir aber bitte eine neue Frage, das sieht nämlich ganz anders aus :)

Was wir dafür nutzen werden, ist die Möglichkeit, über s2.ZU01 auf eine JavaScript-Repräsentation der Skalenbatterie zuzugreifen, welche eine Auflistung aller Items erlaubt und eine Abfrage der jeweils ausgewählen Option sowie ein vereinfachstes addEventListener().

---

Ich wollte, dass der Filter nur dann angezeigt wird, wenn bei einem einzelnen Skalenitem eine bestimmte Auswahl getroffen wird.
Grandios es funktioniert jetzt! Vielen, vielen Dank für die Hilfe!!!!!