Folgefrage anzeigen basierend auf Rangordnung

Question

Hallo,
leider stehe ich erneut vor einem weiteren Problem mit dem Anzeigen/Ausblenden einer Frage basierend auf einer vorherigen Frage.
Hierbei bin ich mir unsicher, ob dies möglich ist.
Grundlage für meine Anzeige der Frage PF13 ist FragePF01.

• PF01 ist eine Rangordnung
• PF13 eine einfache Auswahl
• Item PF01_07 ist das ausschlaggebende Item,
• wird PF01_07 auf Rang 1, 2, 3 oder 4 platziert, soll die Folgefrage PF13 angezeigt werden, ansonsten ausgeblendet sien
• Beim verschieben der Karten soll sich die Ausblendung stets aktualiseren und überprüfen, dass PF01_07 auf Rang 1-4 liegt.

Leider bekomme ich keinerlei Erfolge mit meinen Codes hin, diese sind alle komplett unbrauchbar.
Über Hilfe wäre ich sehr dankbar!

Mein bisheriger Versuch:

<script type="text/javascript">
  // Funktion zur Überprüfung der Rangordnung und Ein-/Ausblenden der Frage PF13
  function checkRanking() {
    // Hole die aktuelle Position von PF01_07
    var pf01_07 = document.querySelector('#PF01_07Tkn');
    var pf01_07_position = Array.from(pf01_07.parentElement.children).indexOf(pf01_07) + 1;

    // Überprüfe, ob PF01_07 in einer der Zielpositionen ist
    if (pf01_07_position >= 1 && pf01_07_position <= 4) {
      // Frage PF13 einblenden
      document.getElementById('PF13_qst').style.display = 'block';
    } else {
      // Frage PF13 ausblenden
      document.getElementById('PF13_qst').style.display = 'none';
    }
  }

  // Event-Listener für Änderungen in der Rangordnung
  document.addEventListener('DOMContentLoaded', function() {
    // Initiale Überprüfung
    checkRanking();

    // Überwache Änderungen in der Rangordnung
    var rankingItems = document.querySelectorAll('.rankingTkn');
    rankingItems.forEach(function(item) {
      item.addEventListener('dragend', checkRanking);
      item.addEventListener('drop', checkRanking);
    });

    // Überwache Änderungen bei Klicks auf die Rangordnung
    var rankingTargets = document.querySelectorAll('.rankingTgt');
    rankingTargets.forEach(function(target) {
      target.addEventListener('click', checkRanking);
    });
  });
</script>

Viele Grüße und bereits danke!

Comments

Den aktuellen Wert des Kärtchens 7 können Sie über

s2.PD01.item(7).input.value

ermitteln. Aber ich muss noch in den Quellcode des Rangordnungs-Frage schauen, wie Sie auf die Platzierung der Kärtchen reagieren.

---

Vielen Dank bereits für die erste Antwort!
Leider komme ich bisher mit dieser Information auch noch nicht weiter.
Über die weitere Recherche freue ich mich!

Answer 1

Das Ranking-Objekt erzeugt ein "click" Event, wenn ein Kärtchen abgelegt wird. Zusammen könnte das so aussehen:

<script>
function toggle() {
  var frage = document.getElementById('PF13_qst');
  var input = s2.PD01.item(7).input;
  if ((input.value >= 1) && (input.value <= 2)) {
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}

window.addEventListener("load", function() {
    s2.PD01.addEventListener("click", toggle);
    toggle();
});
</script>

Comments

Vielen Dank für die Hilfe! Mit ein paar kleiner Anpassung funktioniert der Code super.