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

Die JavaScript-Fehlerkonsole behauptet, es sein ein Problem mit dem HTML-Inhalt aufgetreten, den Sie da einbinden. Dieser verwendet für die dynamische Darstellung "React" und die Fehlermeldung wird hier "erklärt": https://react.dev/errors/329?invariant=329

Also, irgenwas mit dem eingebenen Inhalt ist wohl falsch, aber was genau, das müssten Sie vielleicht mal ChatGPT fragen. Mit SoSci kennt sich das nicht aus, mit React aber schon.

---

Vielen Dank!

Die Seite zeigt es allerdings an. Nur der darum gebaute Filter funktioniert nicht mehr.  
Chatgbt konnte mir leider nicht helfen, bzw. habe ich damit nicht weiter gefunden.

Liegt es evtl daran, dass der container dann nicht mehr richtig erkannt wird? Über jede Hilfe bin ich wirklich dankbar.

---

> Die Seite zeigt es allerdings an.

Ja, das schon. Aber wenn das Script auf dem Weg bis zu *Ihrem* Script einen Fehler erzeugt, dann bricht der Browser die weitere Ausführung von Script ab, und dann kommt ihr JavaScript-Code gar nicht mehr zum Zuge. Der Fehler in dem Stimulus blockiert also Ihren Script-Filter.

---

vielen Dank! Das Problem hatte ich (durch eine Bereinigung des html textes) gelöst.

Jetzt habe ich neue Fragen (und Fragennamen) erstellt - Fragebogen für ein Projekt neu und sauberer angelegt, allerdings bricht der code jetzt schon wieder ab. Die Filterfrage wird noch angezeigt, aber es passiert nichts, wenn ich eine der beiden Alternativen auswähle. Diesmal scheint es (zumindest in meiner laienhaften fehlersuche) aber nicht am html code zu liegen.

Könnten sie mir helfen?

Die Definitionen der Fragen und Textelemente oben (Referenzen ) sind neu, sonst ist alles gleich geblieben

https://www.soscisurvey.de/discefrn_rating_ads/?act=SHyLrdwS406qU44t5n4JDQZr

<script type="text/javascript">
  // Get references to options, questions, and text elements
  var optionA = document.getElementById("QN01_01a");
  var optionB = document.getElementById("QN01_02a");

  var frage1 = document.getElementById("QN09_qst");
  var frage2 = document.getElementById("QN17_qst");

  var textA102a = document.getElementById("Text even a");
  var textA102b = document.getElementById("Text even b");

  var textA103a = document.getElementById("Text uneven a");
  var textA103b = document.getElementById("Text uneven b");

  var container = document.getElementById("container");

  // Function to toggle the display sequence based on the selected option
  function toggle() {
      console.log("Toggle function executed"); // Debugging log
      container.innerHTML = ""; // Clear container

      if (optionA.checked) {
          console.log("Option A selected"); // Debugging log

          // Add text and questions for Option A with spacing
          textA102a.style.marginBottom = "15px"; // Add space below text
          frage1.style.marginBottom = "50px"; // Add space below question
          textA102b.style.marginBottom = "15px";

          container.appendChild(textA102a);
          container.appendChild(frage1);
          container.appendChild(textA102b);
          container.appendChild(frage2);
      } else if (optionB.checked) {
          console.log("Option B selected"); // Debugging log

          // Add text and questions for Option B with spacing
          textA103a.style.marginBottom = "15px"; // Add space below text
          frage2.style.marginBottom = "50px"; // Add space below question
          textA103b.style.marginBottom = "15px";

          container.appendChild(textA103a);
          container.appendChild(frage2);
          container.appendChild(textA103b);
          container.appendChild(frage1);
      } else {
          console.log("No option selected"); // Debugging log
      }
  }

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

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

---

Wenn Sie die Fehlerkonsole im Browser öffnen, wird bei Auswahl einer Option folgender Fehler angezeigt:

> Uncaught TypeError: textA102a is null

Der Fehler verweist auf dies Zeile:

> container.appendChild(textA102a);

Definiert wird textA102a in dieser Zeile:

> var textA102a = document.getElementById("Text even a");

Und weil es kein HTML-Element mit der id="Text even a" gibt, findet diese Zeile kein HTML-Element.

Sie meinten vermutlich

> var textA102a = document.getElementById("TextA103b");

Aber auch damit gibt es ein kleines Problem, denn in Ihrem HTML-Code steht kein "a", sondern nur zweimal (!)

> id="TextA103b"