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

Ach, super vielen lieben Dank!!!

:DDD die Schleife ist natürlich das Beste :D!!!


Es funktioniert jetzt auch für die erste Hälfte: Wenn 1 gewählt wird, sollen LA05, LA06, LA07, LA09 angezeigt werden;

Ich habe versucht das ganze noch einmal für die zweite Hälfte zu erstellen und noch einen zweiten html code imselben stil dafür:  wenn sie "2" gewählt haben Fragen  LA08, LA10 einzugfügen. Das hat aber nicht mehr geklappt-

Wie müsste ich denn den code anpassen, damit der erste Fragenblock ausgewählt wird, wenn sie die 1 wählen und der zweite wenn sie die 2 wählen?

VIELEN DANK!!

---

Posten Sie Ihren Code, und am besten auch einen Pretest-Link direkt (!) zur betroffenen Seite, dann versuche ich mich an einer hilfreichen Antwort :)

---

Ach super, vielen vielen Dank!

Der link ist hier:https://www.soscisurvey.de/discefrn/?act=CNW5HWwu4BRryBHScDSFfZCy

Die "Filterfrage" ist LA02

Wenn LA02 ==1 (Yes), dann sollen auf der Seite zusätzlich LA05,06,07,09 angezeigt werden
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.

Immer auf der Seite stehen die Fragen: LA01, 02, 03, 12, 11.

je nach Antwort auf LA02, sollen dann eben in der Mitte einer der beiden Fragenblöcke (LA05,06,07,09 wenn LA02==1 oder LA08, 10 wenn LA02==2) angezeit werden.

Ich hoffe ich habe das jetzt halbwegs verständlich beschrieben.

das ist der code den ich bisher habe

<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")
];

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";
    }
}
SoSciTools.attachEvent(dropdown, "change", toggle);
SoSciTools.attachEvent(dropdown, "click", toggle);  
toggle();
// -->
</script>


VIELEN DANK!

---

> Der link ist hier:

Wenn da einer war, ist er nicht mehr da?!

---

Entschuldigung!!
https://www.soscisurvey.de/discefrn/?act=CNW5HWwu4BRryBHScDSFfZCy

---

Ich sehe die Frage LA02 auf der Seite, aber das JavaScript scheint nicht eingebunden zu sein?!

---

Oh, ja ich hatte ihn rausgenommen, weil er nicht funktioniert hat. Jetzt habe ich ihn aber wieder eingefügt (ganz unten auf der Seite)

---

Die JavaScript-Fehlerkonsole beschwert sich über folgendes Problem:

> Uncaught SyntaxError: missing ] after element listindex.php:1544:5
> note: [ opened at line 1540, column 14

Das bezieht sich lt. Browser auf dieser Zeilen:

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

Und ja, wenn man weiß, wo man schauen muss, ist die Lösung ganz einfach: Da fehlt in der Zeile mit LA07_qst ein Komma :) Die eckigen Klammern definieren ja eine Array (eine Liste), und da müssen zwischen allen Elemente natürlich Kommata stehen.

---

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!!!