Dynamische Filterfrage mit Java-Script

Question

Hallo zusammen,

ich versuche derzeit eine Umfrage zu gestalten, die eine dynamische Filterfrage enthalten soll. Es geht um eine Frage, die entweder mit Ja oder Nein beantwortet werden kann.

Bei Nein soll auf die nächste Seite weitergeleitet werden. Bei Ja soll eine weitere Frage, noch auf derselben Seite erscheinen.

Ich habe mir die Anleitungen zwar angeschaut, verstehe sie leider jedoch nicht...

Ich würde mich sehr freuen, wenn mir jemand das etwas detaillierter erläutern könnte :)

Comments

> verstehe sie leider jedoch nicht...

Wenn Sie konstruktive Unterstützung haben möchten, müssten Sie bitte entweder genauer spezifizieren, an welcher Stelle Sie die Anleitung nicht verstehen, oder den Code posten, soweit Sie gekommen sind, und beschreiben, was nicht funktioniert.

---

Da ich eine Person bin, die sich noch NIE in ihrem Leben mit Codierung auseinander gesetzt hat, sind die Anleitungen unverständlich. Um es verständlicher zu formulieren: Ich verstehe noch nicht einmal, was ich in der Anleitung durch meine eigenen Angaben ersetzen soll. Was genau meinen Sie mit IDs?

Selbst in der ersten Zeile (<script type="text/javascript">) wüsste ich jetzt nicht, ob ich da eine eigene Angabe machen müsste oder nicht...

---

> Da ich eine Person bin, die sich noch NIE in ihrem Leben mit Codierung auseinander gesetzt hat ...

dann ist jetzt der perfekte Zeitpunkt damit anzufangen. Wir leben in einer Welt, die an allen Ecken und Enden von Computern durchdrungen ist - da schaden ein paar grundlegende Ideen von Programmierung nicht.

> Selbst in der ersten Zeile (<script type="text/javascript">) wüsste ich jetzt nicht, ob ich da eine eigene Angabe machen müsste oder nicht...

Nein, müssen Sie nicht. Dies ist ein sog. "HTML-Tag", welche den Beginn des Script-Bereichs definiert. Abgeschlossen wird das dann weiter unten durch </script>.

>  Was genau meinen Sie mit IDs?

In HTML-Elementen (s.o.) können innerhalb des "Tags" Attribute angegeben werden. Zum Beispiel hier ein <div>-Tag mit einem style- und einem id-Attribut:

<div style="border: 1px solid red" id="meineBox">

Hier wird die HTML-ID "meineBox" für dieses Element definiert. Das ist sowas wie ein Name. Anhand dieses Namens kann der JavaScript-Code dann darauf zugreifen, also das Element "ansprechen".

Ich habe das hier noch mit einem Beispiel ausgeführt: https://www.soscisurvey.de/help/doku.php/de:create:javascript#html_und_javascript

Was ist noch unklar?

---

Vielen Dank für die Antwort!

---

Ich kopiere mal das, was ich nach den 2 Fragen, die betroffen sind, in das HTML-Feld kopiert habe.

Folgendes möchte ich eigentlich erreichen:

Ich möchte, dass Frage AF07 ausgeblendet ist und nur angezeigt wird, wenn die Frage AF06 mit Ja beantwortet wird. Ich bin soweit gekommen, dass die Frage AF07 auf der Seite ausgeblendet wird. Sobald ich jedoch auf JA klicke, erscheint die Frage leider nicht.

<script type="text/javascript">
<!--
var optionA = document.getElementById("AF06_01a");
var optionC = document.getElementById("AF06_02a");  
var frage = document.getElementById("AF07_qst");
 
function toggle() {
  if (optionC.checked) {
    frage.style.display = "AF07_qst";
  } else {
    frage.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toggle);
SoSciTools.attachEvent(optionC, "click", toggle);
 
toggle();
// -->
</script>

---

frage.style.display = "AF07_qst"; ---> frage.style.display = "";

An der Stelle sollte nichts in die Anführungszeichen eingefüllt werden.

---

Vielen Dank! Es funktioniert!

Answer 1

<script type="text/javascript">
<!--
var optionA = document.getElementById("JN01_01a");  // JN01_01a ist die HTML-ID der Auswahloption "Ja"
var optionC = document.getElementById("JN01_03a");  // Option "Nein"
var frage = document.getElementById("TX01_qst");  // HTML-ID der Texteingabe
 
function toggle() {
  // Die zwei Pipes (||) sind ein logisches "Oder"
  // Die Bedingung prüft also: Ist Option A ausgewählt oder ist B ausgewählt?
  if (optionA.checked) {
    // Wurde "Ja" oder "Vielleicht" ausgewählt, dann wird die Frage angezeigt
    // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
    frage.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
  }
}
 
// Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird
SoSciTools.attachEvent(optionA, "click", toggle);
SoSciTools.attachEvent(optionC, "click", toggle);
 
// Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist
// (z.B. ausblenden der Texteingabe zu Beginn)
toggle();
// -->
</script>

Das ganze Teil einfach in ein javascript Feld setzen und die IDs der Fragen austauschen. Für den "Nein" Teil müssen Sie ja keinen Filter einbauen, da sie automatisch dann auf die nächste Seite kommen. Generell kann ich besser helfen, wenn sie mir genau sagen, wo das Problem liegt - "verstehe es nicht" ist manchmal etwas abstrakt :)

EDIT: ein Java Script Feld ist ein html Feld, bei dem javascript durch markiert wird

Comments

Da ich eine Person bin, die sich noch NIE in ihrem Leben mit Codierung auseinander gesetzt hat, sind die Anleitungen unverständlich. Um es verständlicher zu formulieren: Ich verstehe noch nicht einmal, was ich in der Anleitung durch meine eigenen Angaben ersetzen soll. Was genau meinen Sie mit IDs?

Selbst in der ersten Zeile (<script type="text/javascript">) wüsste ich jetzt nicht, ob ich da eine eigene Angabe machen müsste oder nicht...