Fragenreihenfolge (und dazugehörendes Textelement) auf einer Seite mit Filterfrage definieren

Question

Guten Tag :),

ich versuche gerade einen Fragebogen anzulegen.

Dabei möchte ich gerne ausgehend von den Antworten auf die Frage "A101" auf derselben Seite entweder zuerst die Frage A102 und einen dazugehörigen textbaustein (Text A102) oder zuerst die Frage A103 und einen dazugehörigen Textbaustein (Text A103) ausgeben lassen. Ultimativ sollen also alle drei fragen beantwortet werden, nur die Reihenfolge sollte anders ein.

Also: wenn A101==1, dann zuerst Text A102+ Frage A102; wenn A101==2, dann zuerst Text A103+ Frage A103;

ich habe es mit dem code unten versucht, aber leider variiert dieser nicht die reihenfolge, sondern nur ob Frage A102 oder A103 angezeigt wird und ich habe es auch noch nicht geschafft die textblöcke dabei mit einzufügen.

Über jegliche Hilfe würde ich mich freuen :)! Vielen lieben dank!

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

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

var fragen = [
    document.getElementById("A102"),
];
var fragenNo = [
    document.getElementById("A103"),
];


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>

Answer 1

Die Reihenfolge von Fragen via JavaScript zu variieren, ist nicht ganz trivial. Dafür müssten Sie die Fragen aktiv umsortieren. Das könnte so aussehen:

var frageA = document.getElementById("A102_qst");
var frageB = document.getElementById("A103_qst");
var container = frageA.parentNode;

// Hier nur das Sortieren in neuer Reihenfolge
container.appendChild(frageB);
container.appendChild(frageA);

Die JavaScript-Funktion appendChild() hängt ein HTML-Element am Ende eines anderen Elements an. Und falls das Element bereits auf der Seite irgendwo steht, wird es dort herausgenommen.

Ihre toggle()-Funktion könnte also wie folgt aussehen:

function toggle() {
    if (dropdown.value == 1) {  
        container.appendChild(frageB);
        container.appendChild(frageA);
    } else {
        container.appendChild(frageA);
        container.appendChild(frageB);
    }
}

Comments

Vielen herzlichen Dank!!!

ich habe folgenden Code verwendet (unten). Es passiert nichts, entweder habe ich Klammern falsch gesetzt, oder ein Element vergessen (vermute ich) und wo würde ich denn in diesen Code den textblock einfügen, damit er mit variiert wird?

und ich habe den PHP code als letztes Element auf die Seite (Fragebogen zusammen stellen) gezogen, und alle drei Fragen und textbausteine darüber, ist das korrekt?

Vielen vielen Dank für die Hilfe (ohne wäre ich wirklich aufgeschmissen) und entschuldigen Sie bitte die Frage!

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

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

var frageA = document.getElementById("A102_qst");
var frageB = document.getElementById("A103_qst");
var container = frageA.parentNode;

// Hier nur das Sortieren in neuer Reihenfolge
container.appendChild(frageB);
container.appendChild(frageA);

function toggle() {
  function toggle() {
    if (dropdown.value == 1) {  
        container.appendChild(frageB);
        container.appendChild(frageA);
    } else {
        container.appendChild(frageA);
        container.appendChild(frageB);
    }
}
// -->
</script>

---

Den JavaScipt-Code sollten Sie bitte generell als letztes platzieren, denn er sucht nach den anderen Elementen - und wenn diese noch nicht darüer ausgegeben wurden, findet er sie nicht.

Was in Ihrem Code noch nciht so ganz stimmt: Die Funktion toggle() wird nirgends aufgerufen. Bitte entfernen Sie eines der doppelten "function toggle()" inkl. zugehöriger schließender Klammer und ergänzen Sie am Ende wieder das

SoSciTools.attachEvent(dropdown, "change", toggle);
SoSciTools.attachEvent(dropdown, "click", toggle);

---

Vielen herzlichen Dank!!

Der Php Code/JaveScript Code steht als letztes auf der Seite, die Zwei Fragen und dazugehörigen Textblöcke stehen darüber.

Ich habe das toggle etnfernt und die beiden Zeilen wieder eingefügt. Es passiert immer noch nichts, wenn ich die Seite aufrufe sehe ich einfach alle Fragen und Textblöcke auf einmal, auch bekomme ich keine "Fehlermeldung" etc, was mache ich falsch? Über jede Hilfe bin ich sehr dankbar!!

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

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

var frageA = document.getElementById("A102_qst");
var frageB = document.getElementById("A103_qst");
var container = frageA.parentNode;

// Hier nur das Sortieren in neuer Reihenfolge
container.appendChild(frageB);
container.appendChild(frageA);


  function toggle() {
    if (dropdown.value == 1) {  
        container.appendChild(frageB);
        container.appendChild(frageA);
    } else {
        container.appendChild(frageA);
        container.appendChild(frageB);
    }
SoSciTools.attachEvent(dropdown, "change", toggle);
SoSciTools.attachEvent(dropdown, "click", toggle);
// -->
</script>

---

Jetzt sollte sich die JavaScript-Konsole darüber beschweren, dass eine geschweifte Klammer zum Schließen der function toggle() fehlt. Wenn es dann noch nicht klappt, würde ich sie bitten, einen Pretest-Link direkt zur betroffenen Seite zu posten.

---

Vielen Dank!

jetzt ist eine Frage verschwunden (und wird unten auf der Seite eingeblendet), alles weitere erscheint nach wie vor gleichzeitig auf der Seite.

Hier wäre der Link: https://www.soscisurvey.de/discefrn_rating/?act=Hob2o2Dcj8LdBQGRjxsDFc2U

Ich bin Ihnen so dankbar, alleine hätte ich das nicht geschafft/würde ich es nicht hinbekommen, vielen herzlichen Dank!!

---

Nur um sicher zu gehen ...

> jetzt ist eine Frage verschwunden (und wird unten auf der Seite eingeblendet)

Ist es das, was Sie brauchen, und sind Sie schon am Ziel, oder brauchen Sie noch weitere konkrete Unterstützung? Wenn ich den Link aufrufe, steht da im Code z.B.

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

Aber A101 ist gar kein Dropdown, sondern eine sichtbare Auswahl.

---

Oh, entschuldidung, das war falsch fomuliert. Nein, es klappt leider nicht. Eigentlich sollte zuerst nur Frage A101 sichtbar sein auf der Seite (sonst nichts) und dann, wenn die Person 1 ausgewählt hat sollte folgende Reihenfolge eingeblendet werden: zuerst TextA102a, dann  die Frage A102, Text A102b, Frage A103; wenn die Person 2 ausgewählt hat, dann sollte zuerst TextA103a, Frage A103, TextA103b, Frage A102 stehen.

Im Moment ist einfach alles gleichzeitg auf der Seite.

Ahh, das stimmt es ist keine Dropdownfrage!!

---

Wollen Sie es erstmal so umbauen, dass es sich an der Script-Vorlage für eine sichtbare Auswahl orientiert - und dann sagen Sie kurz Bescheid, dann schaue ich auf den Pretest-Link und gebe möglichst hilfreiche Hilfestellung.

---

Vielen Dank! Ich habe den Code versucht entsprechend anzupassen (siehe unten), es passiert aber immer noch nichts :/.

vielen Dank!!

<script type="text/javascript">
  // Get references to options, questions, and text elements
  var optionA = document.getElementById("A101_01a");
  var optionB = document.getElementById("A101_02a");
  
  var frage1 = document.getElementById("A102");
  var frage2 = document.getElementById("A103");
  
  var textA102a = document.getElementById("TextA102a");
  var textA102b = document.getElementById("TextA102b");
  
  var textA103a = document.getElementById("TextA103a");
  var textA103b = document.getElementById("TextA103b");

  // Function to toggle the display sequence based on the selected option
  function toggle() {
    if (optionA.checked) {
      // Option A selected: Display sequence for option A
      textA102a.style.display = ""; // Show TextA102a
      frage1.style.display = "";   // Show Question A102
      textA102b.style.display = ""; // Show TextA102b
      frage2.style.display = "";   // Show Question A103
      
      // Hide elements for option B
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    } else if (optionB.checked) {
      // Option B selected: Display sequence for option B
      textA103a.style.display = ""; // Show TextA103a
      frage2.style.display = "";   // Show Question A103
      textA103b.style.display = ""; // Show TextA103b
      frage1.style.display = "";   // Show Question A102

      // Hide elements for option A
      textA102a.style.display = "none";
      textA102b.style.display = "none";
    } else {
      // Hide all elements if no option is selected
      textA102a.style.display = "none";
      frage1.style.display = "none";
      textA102b.style.display = "none";
      frage2.style.display = "none";
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    }
  }

  // Attach the toggle function to the click event of each option
  SoSciTools.attachEvent(optionA, "click", toggle);
  SoSciTools.attachEvent(optionB, "click", toggle);

  // Execute the function initially to set the correct display state
  toggle();
</script>

---

Die JavaScript-Konsole im Browser beschwert sich im Moment über

> Uncaught TypeError: textA102a is null

... und verweist auf diese Zeile im Code:

textA102a.style.display = "none";

Definiert wird textA102a hier:

var textA102a = document.getElementById("TextA102a");

Das wiederum funktioniert nicht, weil Textelemente, die unter "Beschritungen u.Textbausteine" angelegt werden, nicht automatisch eine HTML-ID erhalten. Sie können entweder im Tetbaustein im HTML-Code eine solche ID festlegen oder Sie legen den Inhalt als "Text" in einer Rubrik im Fragenkatalog an.

---

". Sie können entweder im Tetbaustein im HTML-Code eine solche ID festlegen "

--> ich habe jetzt in allen Textbausteinen mit dem folgenden Schema unten eine ID vergeben. Es funktioniert aber immer noch nicht, was habe ich denn (schon wieder) falsch gemacht? Vielen lieben Dank für Ihre Geduld & Hilfe!

<div id="Text A102a" style="padding: 15px; border: 2px solid #8AA9D8; background-color: #E3EBF7; display: flex; align-items: center; justify-content: flex-start;">
  <p style="text-align: justify; margin: 0;">
    <font size="3" face="Arial">You chose to set an even CEFR level:</font>
  </p>
</div>
<br>

---

Die JS-Konsole findet den Text immer noch nicht, wenn ich den Pretest-Link von oben aufrufe. Und wenn ich in den Quelltext der Seite schaue, finde ich die ID auch nicht.

Und auf den zweiten Blick sehe ich auch warum: Ihre ID ist "Text A102a", Ihr Code sucht nach "TextA102a". Sehen Sie den Unterschied?

---

Aaaah, das hätte ich nie gesehen, was für ein gutes Auge!! Ich habe das Leerzeichen gelöscht. Es passiert allerdings immer noch nichts und die Fragen findet es anscheinend auch nicht (oder warum stehen die auch direkt auf der Seite, ich kucke mal ob ich hier ähnliches finde). Was könnte denn nun das Problem sein? Entschuldigen Sie bitte die Umstände & vielen vielen Dank!!

---

Wir kommen der Sache näher :)

Die Frage wird nicht gefunden, weil das HTML-Element, welches die Frage beinhaltet nicht A102 heißt, wie hier angegeben,

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

sondern A102_qst.

---

Huraaaa, das hat jetzt wirklich was gebracht *freu* --> in der ersten Variante stimmt jetzt alles (dh zuerst steht nichts auf der Seite, wenn 1 ausgewählt wird werden die texte und Fragen in der richtigen Reihenfolge angezeigt)

ABER: wenn 2 ausgewählt wird stimmt die Fragenreihenfolge nicht, die Textreihenfolge aber schon!
Also wenn 2 ausgewählt ist sollte eigentlich:
- text A103a, Frage A103, Text A103b, Frage A102 erscheinen

es erscheint aber: TextA103a, Frage A102, TextA103b, Frage A103--> im Php code unten finde ich aber nicht warum das so ist, könnten Sie mir evtl noch einmal helfen?

Vielen vielen Dank für Ihre Zeit, Geduld und das gute Auge!!!!!

<script type="text/javascript">
  // Get references to options, questions, and text elements
  var optionA = document.getElementById("A101_01a");
  var optionB = document.getElementById("A101_02a");
  
  var frage1 = document.getElementById("A102_qst");
  var frage2 = document.getElementById("A103_qst");
  
  var textA102a = document.getElementById("TextA102a");
  var textA102b = document.getElementById("TextA102b");
  
  var textA103a = document.getElementById("TextA103a");
  var textA103b = document.getElementById("TextA103b");

  // Function to toggle the display sequence based on the selected option
  function toggle() {
    if (optionA.checked) {
      // Option A selected: Display sequence for option A
      textA102a.style.display = ""; // Show TextA102a
      frage1.style.display = "";   // Show Question A102
      textA102b.style.display = ""; // Show TextA102b
      frage2.style.display = "";   // Show Question A103
      
      // Hide elements for option B
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    } else if (optionB.checked) {
      // Option B selected: Display sequence for option B
      textA103a.style.display = ""; // Show TextA103a
      frage2.style.display = "";   // Show Question A103
      textA103b.style.display = ""; // Show TextA103b
      frage1.style.display = "";   // Show Question A102

      // Hide elements for option A
      textA102a.style.display = "none";
      textA102b.style.display = "none";
    } else {
      // Hide all elements if no option is selected
      textA102a.style.display = "none";
      frage1.style.display = "none";
      textA102b.style.display = "none";
      frage2.style.display = "none";
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    }
  }

  // Attach the toggle function to the click event of each option
  SoSciTools.attachEvent(optionA, "click", toggle);
  SoSciTools.attachEvent(optionB, "click", toggle);

  // Execute the function initially to set the correct display state
  toggle();
</script>

---

Ich Code mit dem style.display = "none" blendet Fragen nur aus und ein.

Wenn Sie die Reihenfolge interaktiv ändern möchten, müssen Sie wieder mit dem .appendChild() arbeiten, wie weiter oben beschrieben. Sie können testweise mal ein

<div id="container">
...
</div>

Mittels HTML-Code um die relevanten Fragen/Texte herum setzen. Dann können Sie die Reihenfolge relativ einfach anpassen:

var container = document.getElementById("container");
container.appendChild(textA103a);
container.appendChild(frage1);
container.appendChild(textA103b);
container.appendChild(frage2);

Das verwenden sie in den if/else-Blöcken zum Umsortieren.

---

vielen Dank! Oh, das erschlägt mich gerade etwas bzw, habe ich Angst etwas im code wieder "kaputt" zu machen, würden Sie das evtl an die richtige Stelle setzen (ich habe Angst im code wieder "Rückschritte" zu machen). Entschuldigen Sie bitte, vielen Dank & liebe Grüße!

---

Fügen Sie zum Ausprobieren meinen Code ainfach mal unter der Zeile

  } else if (optionB.checked) {

ein. Die Dopplung mit den Fragen a/b brauchen Sie evtl. gar nicht mehr ... aber das kann man nachträglich noch entfernen.

Und das

<div id="container">
...
</div>

fügen Sie als HTML-Code-Elemente vor und hinter den Fragen ein (auf der Fragebogen-Seite).

---

Vielen Dank!! Nur zur Sicherheit:
das <div id="container"> (und das /div) füge ich jeweils als ein flexibles Html element vor und hinter den Fragen auf der Seite ein (ich schreibe das nicht in die Frage als html text selbst), oder?

und stimmt es so wie ich es unten eingefügt habe? Entschuldigen Sie bitte den Stress und vielen lieben Dank!!

<script type="text/javascript">
  // Get references to options, questions, and text elements
  var optionA = document.getElementById("A101_01a");
  var optionB = document.getElementById("A101_02a");
  
  var frage1 = document.getElementById("A102_qst");
  var frage2 = document.getElementById("A103_qst");
  
  var textA102a = document.getElementById("TextA102a");
  var textA102b = document.getElementById("TextA102b");
  
  var textA103a = document.getElementById("TextA103a");
  var textA103b = document.getElementById("TextA103b");

  // Function to toggle the display sequence based on the selected option
  function toggle() {
    if (optionA.checked) {
      // Option A selected: Display sequence for option A
      textA102a.style.display = ""; // Show TextA102a
      frage1.style.display = "";   // Show Question A102
      textA102b.style.display = ""; // Show TextA102b
      frage2.style.display = "";   // Show Question A103
      
      // Hide elements for option B
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    } else if (optionB.checked) {
var container = document.getElementById("container");
container.appendChild(textA103a);
container.appendChild(frage1);
container.appendChild(textA103b);
container.appendChild(frage2);

      // Hide elements for option A
      textA102a.style.display = "none";
      textA102b.style.display = "none";
    } else {
      // Hide all elements if no option is selected
      textA102a.style.display = "none";
      frage1.style.display = "none";
      textA102b.style.display = "none";
      frage2.style.display = "none";
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    }
  }

  // Attach the toggle function to the click event of each option
  SoSciTools.attachEvent(optionA, "click", toggle);
  SoSciTools.attachEvent(optionB, "click", toggle);

  // Execute the function initially to set the correct display state
  toggle();
</script>

---

> as <div id="container"> (und das /div) füge ich jeweils als ein flexibles Html element vor und hinter den Fragen auf der Seite ein

Nicht jeweils, sondern das öffnende Tag vor der ersten Frage und das schließende nach der letzten. Die Idee ist, dass die darin befindlichen Fragen dann in ihrer Reihenfolge verändert werden, der Block aber bleibt wo er ist.

> und stimmt es so wie ich es unten eingefügt habe?

Sieht schonmal gut aus. Hinter dem

   if (optionA.checked) {

müssten sie dann die entsprechende andere Reihenfolge hinschreiben.

---

Vielen Dank!!

Ich habe es angepasst, allerdings passiert jetzt nichts mehr, wenn ich eine der beiden Auswahlmöglichkeiten der FrageA101 auswähle.

Stimmt es das sowohl die Fragen als auch die vier Textelemente in den Container müssen? habe es mit und ohne versucht, beides hat bis jetzt nicht funktioniert.

Den angepassten code füge ich unten ein, über jede Hilfe freue ich mich! Vielen herzlichen Dank!

<script type="text/javascript">
  // Get references to options, questions, and text elements
  var optionA = document.getElementById("A101_01a");
  var optionB = document.getElementById("A101_02a");
  
  var frage1 = document.getElementById("A102_qst");
  var frage2 = document.getElementById("A103_qst");
  
  var textA102a = document.getElementById("TextA102a");
  var textA102b = document.getElementById("TextA102b");
  
  var textA103a = document.getElementById("TextA103a");
  var textA103b = document.getElementById("TextA103b");

  // Function to toggle the display sequence based on the selected option
  function toggle() {
    if (optionA.checked) {
      // Option A selected: Display sequence for option A
var container = document.getElementById("container");
container.appendChild(textA102a);
container.appendChild(frage1);
container.appendChild(textA102b);
container.appendChild(frage2);

      
      // Hide elements for option B
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    } else if (optionB.checked) {
var container = document.getElementById("container");
container.appendChild(textA103a);
container.appendChild(frage2);
container.appendChild(textA103b);
container.appendChild(frage1);


      // Hide elements for option A
      textA102a.style.display = "none";
      textA102b.style.display = "none";
    } else {
      // Hide all elements if no option is selected
      textA102a.style.display = "none";
      frage1.style.display = "none";
      textA102b.style.display = "none";
      frage2.style.display = "none";
      textA103a.style.display = "none";
      textA103b.style.display = "none";
    }
  }

  // Attach the toggle function to the click event of each option
  SoSciTools.attachEvent(optionA, "click", toggle);
  SoSciTools.attachEvent(optionB, "click", toggle);

  // Execute the function initially to set the correct display state
  toggle();
</script>

---

> Stimmt es das sowohl die Fragen als auch die vier Textelemente in den Container müssen?

Ja, das ist korrekt.

>  allerdings passiert jetzt nichts mehr, wenn ich eine der beiden Auswahlmöglichkeiten der FrageA101 auswähle.

Wenn cih den Link von oben aufrufe, funktioniert es jetzt offenbar, dass die Fragen Platz tauschen. Allerdings findet die Auswahlfrage ihre Kärtchen nicht mehr, sodass diese nicht korrekt initialisiert werden.

Bitte packen Sie das `toogle()` noch wie folgt ein:

  // Execute the function initially to set the correct display state
  toggle();

wird zu

  // Execute the function initially to set the correct display state
  window.addEventListener("load", function() {
    toggle();
  });

---

Vielen lieben Dank!!! Ich glaube jetzt klappt alles!! Ich habe auch die toggle passage aktualisiert! Würden Sie sicherheitshalber noch einmal "von außen" kontrollieren, ob nun alles richtig aussieht/läuft wie es soll?

Vielen vielen Dank!!!

---

Es erscheint zumindest keine Fehlermeldung mehr.

Es wirkt noch so, als ob Sie eine Auswahlfrage "missbraucht" haben, um eigentlich nur 4 offene Eingaben abzufragen. Das dürfte problematisch sein, denn es wird nur der Wert in dem jeweils ausgewählten Feld gespeichert. Ich denke, das ist noch nicht ganz korrekt.

Aber das hat nicht dem dem JavaScript zu tun :)

---

Ach super, was für ein gutes Auge, vielen vielen Dank für alles!! Habe ich gleich angepasst :)!!