Filter, dass eine Frage auf derselben Seite angezeigt wird.

Question

Hallo,

ich möchte gerne auf einer Seite im Fragebogen folgendes erstellen:

zuerst gibt es eine Filterfrage (LA02) und je nachdem ob die Personen dabei 1 oder 2 ausgewählt haben werden ihn jeweils drei unterschiedliche Fragen angezeigt (LA05, LA06, LA07, LA09 wenn sie 1 gewählt haben; LA08, LA10, wenn sie 2 gewählt haben)

die filterfrage ist dabei eine dropdownfrage (weil das weniger platz auf der seite wegnimmt).

jetzt habe ich schon gefunden, dass dies über einen javascript code funktioniert. Soweit ich das verstanden habe müssen alle Fragen zuerst auf der Seite erscheinen und dann der html code.

Ich habe ihn von der SoSci Seite übernommen und versucht erst mal für eine Frage anzupassen. Bei mir passiert aber gar nichts. Die Fragen erscheinen alle immer gleichzeitig, und ich bekomme auch keine fehlermeldung, d.h. ich mache etwas falsch, ich weiß aber nicht was :/

Könnten Sie mir evtl beim schreiben des codes helfen?

Vielen lieben Dank!

Code:

<script type="text/javascript">
<!--

var dropdown = document.getElementById("LA02");  
var frage = document.getElementById("LA05"); 
function toggle() {
  if (dropdown.value == "1") {  
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
 
SoSciTools.attachEvent(dropdown, "change", toggle); 
SoSciTools.attachEvent(dropdown, "click", toggle);  
toggle();
// -->
</script>

 
 

Comments

> Bei mir passiert aber gar nichts.

Dann brauchen Sie als nächstes das hier:
https://www.soscisurvey.de/help/doku.php/de:general:browser-tools

Dort in der Browser-Konsole steht wahrscheinlich ein Fehler, und vermutlich müssen Sie einfach LA05 durch LA05_qst ersetzen, weil das die HTML-ID der Frage LA05 ist.

---

Vielen lieben Dank!!! Wenn ich es nur mit einer Frage ausprobiere, dann klappt es.

Jetzt habe ich versucht den code so umzuschreiben, dass je nach auswahl mehrere Fragen eingeblendet werden, das habe ich aber nicht geschafft, würden Sie mir evtl dabei helfen?

Wenn 1 gewählt wird, sollen LA05, LA06, LA07, LA09 angezeigt werden; wenn sie zwei gewählt haben  LA08, LA10.

Würden Sie mir helfen hier die Schleife dafür zu schreiben?

VIELEN DANK!

Answer 1

Im Prinzip geht es um diese beiden Zeilen:

frage.style.display = "";

und

frage.style.display = "none";

Die brauchen Sie für jede Frage. Also, z.B. ersetzen Sie ...

var frage = document.getElementById("LA05_qst"); 

durch

var fragen = [
    document.getElementById("LA05_qst"),
    document.getElementById("LA06_qst"),
    document.getElementById("LA07_qst")
];

Man könnte auch separate Variablen machen, aber Sie wollten ja eine Schleife ;)

Und dann unten bei der Anzeige ersetzen Sie

  if (dropdown.value == "1") {  
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }

durch

for (var i=0; i<fragen.length; i++) {
    frage = fragen[i];
    if (dropdown.value == "1") {  
      frage.style.display = "";
    } else {
      frage.style.display = "none";
    }
}

Comments

Aaaah, ja so kann es manchmal gehen, vielen lieben Dank!!!

und wie würde ich jetzt den zweiten fragenblock mit in diesen code aufnehmen? also quasi zusätzlich diesen Teil:

Wenn LA02==2 (No), dann sollen auf der Seite zusätzlich LA08, 10 angezeigt werden
Wenn LA02==3 (dont know) dann soll nur das angezeigt werden, was immer auf der Seite steht

VIELEN DANK!!!

---

> Wenn LA02==2 (No), dann sollen auf der Seite zusätzlich LA08, 10 angezeigt werden

Dafür würden Sie unter der FOR-Schleife einfach noch eine ergänzen, die dann auf eine zweite Liste fragenNo verweist, also z.B.



function toggle() {
  for (var i=0; i<fragen.length; i++) {
    frage = fragen[i];
    if (dropdown.value == "1") {  
      frage.style.display = "";
    } else {
      frage.style.display = "none";
    }
  }
  for (var i=0; i<fragenNo.length; i++) {
    frage = fragenNo[i];
    if (dropdown.value == "2") {  
      frage.style.display = "";
    } else {
      frage.style.display = "none";
    }
  }
}

---

Vielen lieben Dank!!

Ich habe den code entsprechend angepasst. Und für die erste Hälfte (==1) funktioniert es nun auch auf der Seite. Die Zweite hälft funktioniert nicht, hier stehen die Fragen noch auf der Seite.

Ich habe oben auch fragenNO definiert, aber vielleicht habe ich etwas falsch gemacht? Über  Hilfe wäre ich sehr dankbar :).

<script type="text/javascript">
<!--

var dropdown = document.getElementById("LA02");  

var fragen = [
    document.getElementById("LA05_qst"),
    document.getElementById("LA06_qst"),
    document.getElementById("LA07_qst"),
    document.getElementById("LA09_qst"),
];
var fragenNO = [
    document.getElementById("LA08_qst"),
    document.getElementById("LA10_qst"),
];


function toggle() {
  for (var i=0; i<fragen.length; i++) {
    frage = fragen[i];
    if (dropdown.value == "1") {  
      frage.style.display = "";
    } else {
      frage.style.display = "none";
    }
  }
  for (var i=0; i<fragenNo.length; i++) {
    frage = fragenNo[i];
    if (dropdown.value == "2") {  
      frage.style.display = "";
    } else {
      frage.style.display = "none";
    }
  }
}
SoSciTools.attachEvent(dropdown, "change", toggle);
SoSciTools.attachEvent(dropdown, "click", toggle);  
toggle();
// -->
</script>


Mit Demut und Dankbarkeit, ein user :)

---

Also, die JavaScript Fehlerkonsole (schauen Sie da unbedingt mal rein!) sagt

> Uncaught ReferenceError: fragenNo is not defined

Und bei genauem Hinsehen hat sie recht: Sie definieren fragenNO, verwenden aber FragenNo (mit kleinem "o" hinten).

---

AHAHAHA; ES KLAPPT; DAS IST EIN WUNDER!!!!!!!

vielen vielen dank!!! sie sind alle magier :)!!! Vielen lieben Dank!!!