Java Script Filter funktioniert nicht

Question

Hi Zusammen,

ich bastele gerade an meinem Java Script Code für meinen Fragebogen. Dafür verwende ich eine Skala zwischen "1" (nie") und "6" (Immer), die Zwischenwerte sind beschriftet. Wenn mindestens "3" geantwortet wurde, soll eine Zusatzfrage eingeblendet werden, ansonsten soll zur nächsten Frage übergegangen werden. Die Fragen habe ich alle auf eine Seite aufgelistet, und die Zusatzfragen direkt unter die einzelnen Fragen geschrieben.
Ich habe bisher folgenden Code erstellt:

<script type="text/javascript">
<!--
var optionA = document.getElementById("DS01_Nie");  
var optionB = document.getElementById("DS01_Selten");  
var optionC = document.getElementById("DS01_Manchmal");  
var optionD = document.getElementById("DS01_Öfter");  
var optionE = document.getElementById("DS01_Meistens");  
var optionF = document.getElementById("DS_Immer");  
var Zusatzfrage = document.getElementById("DV01");  
 
function toogle() {
  if ((optionD.checked) || (optionE.checked) || (optionF.checked) || (optionE.checked)) {
    Zusatzfrage.style.display = "";
  } else {
    Zusatzfrage.style.display = "none";

Damit erscheint nun nur noch die Frage "DS_01", und alle anderen Fragen nicht mehr, auch nicht die Zusatzfragen. Können Sie erkennen, wo es klemmt?

Ich freue mich über Ihre Rückmeldung!

Comments

Ich bin ziemlich sicher, dass es kein HTML-Element mit der HTML-ID "DS01_Nie" gibt. Bitte sehen Sie sich da die Anleitung nochmal an - vermutlich muss das "DS01_01" u.s.w. heißen.

Prüfen Sie anschließend auch die Fehlerkonsole Ihres Browsers, wie in der Anleitung beschrieben.

---

1000 Dank für die Antwort, ich habe das probiert, die Fehlerkonsole zeigt mir "Uncaught SyntaxError: Unexpected token '<' " und "20 requires a node that responds" an

---

Wenn Sie auf die Fehlermeldung oder die Zeilennummer daneben klicken, sollten Sie direkt sehen, auf welche Stelle im Code sich die Meldung bezieht.

Bitte lassen Sie mal die Klammern um das option.checked weg ... es könnte sein, dass SoSci Survey das als Tooltip interpretiert (https://www.soscisurvey.de/help/doku.php/de:create:popup), also statt

if ((optionD.checked) || (optionE.checked) || (optionF.checked) || (optionE.checked)) {
 
bitte mal

if (optionD.checked || optionE.checked || optionF.checked || optionE.checked) {
 
Und falls Sie mit der Fehlerkonsole nicht weiter kommen, posten Sie gerne auch einen Pretest-Link direkt (!) zur betroffenen Fragebogen-Seite.

---

Guten Morgen, 1000 Dank für Ihre Geduld, im FB werden jetzt zumindest wieder alle Fragen angezeigt, aber der Filter ist nicht vorhanden. Hier einmal der Pretest Link:

https://www.soscisurvey.de/hst272/?act=ar459StXEA5QitL4cSABSNGR


Mein Wunsch ist, dass die "DV"- Fragen (Zusatzfragen) unsichtbar sind und nur dann beantwortet werden müssen, wenn die Person in der vorherigen Frage mindestens Option4 geantwortet hat. 1000 Dank noch einmal:-)

---

Die "DV" Fragen sind "das belastet mich", "das ängstigt mich" und "das erfreut mich" im FB

---

Bitte erstellen Sie doch einen Pretest-Link, der direkt zur betroffenen Seite leitet. Dann sehe ich mir das gerne mal an.

---

https://www.soscisurvey.de/hst272/?act=ar459StXEA5QitL4cSABSNGR

Das ist der Link, die betroffene Seite ist Seite 3 (HS1), da habe ich probehalber nur beim ersten Item den Code geschrieben....hoffe das klappt so mit dem Link. Vielen Dank noch einmal!

Answer 1

Auf Seite 3 beschwert sich der Browser über folgende Zeile:

var Zusatzfrage = document.getElementById("DV01_01a"; “DV_02a”;”DV_03a));  

Hier sind gleich mehrere Fehler.

• Zum einen kann getElementById() nur ein Element auf der Seite suchen. Es darf also auch nur ein Parameter angegeben werden. Sie haben drei Strings (Texte/Kennungen) angegeben.
• Zum zweiten haben Sie typografische Anführungszeichen verwendet. Das sieht man aber nur, wenn man hineinzoomt. Das passiert meist, wenn man Code in Word schreibt und dann in den Fragebogen kopiert. Denn Word ersetzt die geraden Anführungszeichen durch typografische.
• Zum dritten wurden die Parameter durch Semikolon getrennt, nicht durch Komma.
• Und hinter dem dritten Parameter fehlt noch ein Anführungszeichen.
• Last but not least brauchen Sie die HTML-Kennung der Zusatzfrage - diese ist vermutlich nicht "DV01_01a", sondern "DV01_qst"

Bitte korrigieren Sie diese Zeile schonmal. Dann können wir weiter schauen.

Ach ja: Beim Erstellen eines Pretest-Links können Sie rechts oben festlegen, aber welcher Seite der Fragebogen starten soll. Bitte tragen Sie da eine 3 ein, damit ich mich nicht immer durch die Pflichtfragen auf Seite 2 klicken muss. Danke.

Comments

> ich frage mich, ob ich irgendetwas bereits vor dem Programmieren falsch gemacht haben könnte

Das (und was) kann man erst beantworten, wenn die formalen Fehler (Syntaxfehler) behoben sind. Dann kann man sich um die inhaltlichen Fehler (semantische Fehler) kümmern.

Was ich spontan sehe ist, dass das new DynamicFilter(...) fehlt (s. Anleitung) und dass Sie innerhalb dieser Funktion/Klasse bisher noch nicht die Variablen nutzen, die im Aufruf übergeben werden (auswahlID, frageID). Im Beispiel in der Anleitung sehen Sie, wie diese verwendet werden können.

Im Moment beschwert sich die Konsole darüber, dass Sie immer noch Zahlen als Variablen verwenden ;)

function toggle () {
    if (4.checked || 5.checked || 6.checked) {

An der Stelle müssen die Namen (wie oben auch) angepasst werden, z.B. option1 statt 1.

Werfen Sie gerne auch mal einen Blick in die Fehlerkonsole des Browsers - sicher können Sie an einigen Stellen selbst erkennen, warum JavaScript mit dem Code noch nicht zufrieden ist. Und keine Sorge: Es ist ein wenig müßig, aber es geht voran.

---

Ich Schussel, habe das jetzt geändert...weiterhin passiert nichts, ich kann nicht erkennen, ob der Filter überhaupt greift. Bei der Fehlerkonsole habe ich eben geschaut, dort wurde mir kein Fehler angezeigt (no issues detected so far)... vielen Dank für die aufbauenden Worte, ich habe so gar keine Erfahrung mit Programmieren

---

Sehr gut, die Syntaxfehler sind behoben :)

Jetzt haben Sie zwar die Funktion/Klasse DynamicFilter(), rufen diese aber noch nirgends auf. Was Sie brauchen ist ein

new DynamicFilter();

Und eigentlich sind in der Funktion ja zwei Parameter vorgesehen, wo Sie die Kennungen von Fragen übergeben könnten. Da steht im moment:

function DynamicFilter (DS01_qst, DV01_qst) {
   ...
}

Das könnte aber auch heißen

function DynamicFilter (FilterID, FrageID) {
   ...
}

Und wenn Sie nochmal in die Anleitung schauen, dann sehen Sie, dass diese Parameter in der Anleitung auch weiter unten (innerhalb dieser function) verwendet werden. Bei Ihnen noch nicht.

Also: Um diese eine Funktion/Klasse aktiv werden zu lassen brauchen Sie nur das

new DynamicFilter();

Aber wenn Sie das für mehrere Fragen auf der Seite verwenden möchten, dann müssen Sie die Parameter noch nutzen und brauchen mehrere new-Aufrufe. Wie gesagt: Lesen Sie da bitte nochmal das Beispiel in der Anleitung.

> ich habe so gar keine Erfahrung mit Programmieren

Schlimm, schlimm... Aber Ihr Fragebogen kommt ja gerade noch rechtzeitig, um diese Wissenslücke zu füllen ;)

---

Guten Morgen,
die blöde Frage zuerst: wo genau wird new Dynamic Filter eingeführt?

Dann habe ich mich gefragt, warum die Filterfrage, die aus drei Unterfragen besteht (belastet-beunruhigt-freut mich) nicht als eine einzige Frage auftaucht (und nur eine ID bekommt), sondern eben aus diesen drei Einzelfragen (mit jeweils einer eigenen ID) besteht... am Ende soll es so sein, dass diese eine Filterfrage eingeblendet wird. Ich hoffe, dass dass Sinn macht, was ich schreibe.

Und dann frage ich mich, ob da die addevent-Funktion noch fehlt, damit die Zusatzfrage bei entsprechender Antwort eingeblendet werden kann.

Herzliche Grüße!

---

> die blöde Frage zuerst: wo genau wird new Dynamic Filter eingeführt?

Technisch haben Sie diese Funktion/Klasse programmiert, als Sie function DynamicFilter() in den JavaScript-Code geschrieben haben :)

Inhaltlich erklärt wird es in der Anleitung (https://www.soscisurvey.de/help/doku.php/de:create:dynamic#beispiel_1bmehrere_gleichartige_fragen) ich vermute, dort hatten Sie den JavaScript-Code auch entnommen.

> Dann habe ich mich gefragt, warum die Filterfrage, die aus drei Unterfragen besteht (belastet-beunruhigt-freut mich) nicht als eine einzige Frage auftaucht (und nur eine ID bekommt), sondern eben aus diesen drei Einzelfragen (mit jeweils einer eigenen ID) besteht...

DV01_qst sollte da als Kennung, die Sie ein/ausblenden vollkommen reichen. Die einzelnen Optionen müssen Sie nur für die Filterfrage (also nicht für die gefilterte Frage) angeben, weil Sie da die Auswahlfelder einzeln brauchen. Allerdings ist das JavaScript-Beispiel in der Anleitung so ausgelegt, dass Sie alle Eingabefelder anhand der Frage-ID definieren. Denn Sie haben ja nicht nur eine Filterfrage+Frage auf der Seite, sondern viele davon.

> Und dann frage ich mich, ob da die addevent-Funktion noch fehlt, damit die Zusatzfrage bei entsprechender Antwort eingeblendet werden kann.

Das SoSciTools.attachEvent() - Sie könnten mit einer anderen Syntax auch den addEventListener() verwenden - haben Sie in der DynamicFilter()-Funktion bereits.

Jetzt haben Sie übrigens geschrieben:

function New DynamicFilter (DS01_qst, DV01_qst) {

Das ist noch nicht ganz richtig. Entfernen Sie das "New" hier wieder, denn hier sind wir erst bei der Definition der Funktion/Klasse:

function DynamicFilter (FilterID, FrageID) {

Und unter dieser Definition - also wenn die letzte geschweifte Klammer wieder geschlossen wird - dort setzen Sie dann einen Aufruf ein:

new DynamicFilter("DS01", "DV01");

Sie sehen: Da übergeben Sie dann die Kennungen von Filter-Fragen und der Frage, die gefiltert werden soll. Und diese Zeile wiederholen Sie dann für alle Pärchen:

new DynamicFilter("NS35", "DV04");
new DynamicFilter("DS32", "DV05");
...

Dann müssen Sie also nicht alles kopieren, sondern Sie rufen denselben Code mit unterschiedlichen Parametern auf. Das "DS32" wird dann in der Klasse zur Variable FilterID, die Sie dann wiederum verwenden, um die Kennungen für die Optionen zu definieren.

var optionA = document.getElementById(FilterID + "_011");
var optionB = document.getElementById(FilterID + "_012");