Text einblenden

Question

Hallo,
ich habe einen Fragebogen mit mehren Ja/Nein Fragen. Für jede Frage gilt: Wenn "nein" angekreuzt wurde, soll eine Text mit der Info "Sie können leider nicht teilnehmen!" erscheinen (habe ich als Text in der Rubrik angelegt).
Ich habe jetzt schon mit der Funktion toggle () etwas rumgespielt, aber die Einblendung des Textes funktioniert nicht wirklich: Bei der 1. Frage is alles ok. Bei der 2. Frage wird der Text bei der 1. Frage eingeblendet.

Ich muss vermutlich für jede Frage einen neuen js-Textbaustein anlegen. Ich kann aber nicht immer auf den gleichen Text zurückgreifen, oder? Muss ich für jede Frage einen neuen Text anlegen?
Oder gibt es eine Möglichkeit, in der js-Funktion direkt den Text einzubinden? Also, dass ich die Textausgabe direkt reinprogrammiere, sodass ich zwar mehrere Bausteine haben muss, aber zumindest nicht zwanzig gleiche Texte.
Ich hoffe, es ist einigermaßen verständlich, was ich meine...

Herzlichen Dank und viele Grüße

Comments

> Ich habe jetzt schon mit der Funktion toggle () etwas rumgespielt

Ergänzen Sie Ihre Frage doch bitte um den Code, der "ein bisschen" funktioniert. Dann finden wir heraus, wo es noch hakt.

> Ich muss vermutlich für jede Frage einen neuen js-Textbaustein anlegen.

Vielleicht, aber eher das JavaScript ein wenig erweitern.

> Bei der 2. Frage wird der Text bei der 1. Frage eingeblendet.

Das bedeutet, Sie möchten für jede ja/nein-Frage eine andere Info anzeigen? Oder für alle dieselbe?

Answer 1

Guten Morgen,
erstmal zu letzten Frage: Es soll für jede Ja/nein Frage die gleiche Info angezeigt werden: Sobald 'Nein' gewählt wurde, soll die Info "Sie können nicht teilnehmen." erscheinen.

Folgender Aufbau bisher:
Frage 1:
Info (als Text angelegt)
js-Script:`

    <script type="text/javascript">
     var optionA = document.getElementById("A001_01a"); //Ja-Option (Frage 1)
     var optionB = document.getElementById("A001_02a"); //Nein-Option (Frage 1)
     var frage = document.getElementById("A008_media"); // Die Info als Text.
 
    function toogle() {
     if (optionB.checked) {
     frage.style.display = "";
     } else {
     frage.style.display = "none";
   }
  }
 
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);

toogle();
</script>

Dann folgt
Frage 2
Info wie oben
js-Script:

  <script type="text/javascript">
   
var optionC = document.getElementById("A002_01a"); //Ja-Option Frage 2
var optionD = document.getElementById("A002_02a");  //Nein-Option Frage 2

var frage1 = document.getElementById("A008_media"); //Info Text wie oben
 
function toogle() {
  if (optionD.checked) {
  frage1.style.display = "";
  } else {
    frage1.style.display = "none";
 }
}

SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);

toogle();
</script>

Vielen Dank!
VG

Answer 2

Danke für die Ergänzung des bisherigen Scripts. Tragen Sie dort bitte einfach mehr Optionen ein, z.B.

<script type="text/javascript">
var optionA = document.getElementById("A001_01a"); //Ja-Option (Frage 1)
var optionB = document.getElementById("A001_02a"); //Nein-Option (Frage 1)
var optionC = document.getElementById("A002_01a"); //Ja-Option (Frage 2)
var optionD = document.getElementById("A002_02a"); //Nein-Option (Frage 2)
// u.s.w.
var info = document.getElementById("A008_media"); // Die Info als Text.
 
function toogle() {
  if (optionB.checked || optionD.checked) {
     info.style.display = "";
     } else {
     info.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);

toogle();
</script>

Sie sehen, dass die zusätzlichen Optionen dann auch im Filter und am Ende nochmal auftauchen.

Die Variable frage habe ich lediglich aus ästhetischen Gründen nach info umbenannt.

Comments

Vielen Dank. Das macht alles Sinn und funktioniert. Allerdings sollte es so sein, dass unter jeder Frage direkt die Info erscheint, wenn 'Nein' ausgewählt wurde. Im jetzigen Script habe ich einmal die Info irgendwo angelegt und genau da erscheint sie auch. Wenn ich die Info mehrfach reinziehe, funktioniert das Ganze nicht. Oder habe ich was übersehen?

---

> Allerdings sollte es so sein, dass unter jeder Frage direkt die Info erscheint, wenn 'Nein' ausgewählt wurde

Dann müssen Sie die Info tatsächlich 8-mal einbinden - entweder mit einem per HTML gesetzten <div id="..."> außenherum oder mit 8 Kopien. Außerdem müssen Sie dann 8 Scripts schreiben, eins pro Info. Damit es funktioniert müssen Sie die Funktion toogle() jedesmal anders benennen. Zum Beispiel toogle1(), toogle2() u.s.w.

Es geht auch eleganter, indem man eine JavaScript-Klasse definiert und dann nur noch die Frage-ID einsetzt ... das ist auch deutlich kürzer, aber inhaltlich anspruchsvoller. Wenn Sie sich das ansehen möchten, sagen Sie gerne Bescheid.

---

Alles klar. Vielen Dank. Ich nehme dann die von Ihnen beschriebene nicht ganz so elegante, dafür aber weniger anspruchsvollere Variante;-).