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