Erweiterte Mehrfachauswahl: Textfeld bei Klick auf Auswahloption anzeigen

Question

Ich komme nicht mehr weiter. Ich möchte eine Erweiterte Mehrfachauswahl mit 76 Auswahloptionen erstellen. Der Aufbau ist dabei folgendermaßen:

01 Hämatologische Erkrankungen 
- 02 Autoimmunhämolytische Anämie (AIHA)
- 03 Akute Lymphatische Leukämie (ALL) 
- 04 Akute Myeloische Leukämie (AML) 
- 05 Akute Promyelozyten Leukämie (APL) 
- 06 Amyloidose (Leichtketten (AL) - Amyloidose) 
- 07 Aplastische Anämie 
- 08 Beta Thalassämie 
- 09 Blastische plasmazytoide dendritische Zellneoplasie (BPDCN) 
- 10 Bone Marrow Failure Syndrome (Fanconi A., Telomeropathien u. a.)
- 11 Burkitt Lymphom
- 12 Chronische Lymphatische Leukämie (CLL) 
- 13 Chronische Myeloische Leukämie (CML) 
- 14 Chronische Myelomonozytäre Leukämie (CMML) 
- 15 Chronische Neutrophilen-Leukämie (CNL) 
- 16 Diffuses großzelliges B-Zell-Lymphom 
- 17 Essentielle (oder primäre) Thrombozythämie (ET) 
- 18 Extranodales Marginalzonen-Lymphom (MALT LYMPHOM) 
- 19 Follikuläres Lymphom 
- 20 Haarzell-Leukämie (HZL) 
- 21 Hämophagozytische Lymphohistiozytose (HLH) 
- 22 HIV-assoziierte Lymphome 
- 23 HIV-assoziierte Neoplasien 
- 24 Hodgkin Lymphom 
- 25 Immundefekte, primär / sekundär
- 26 Immunthrombozytopenie (ITP) 
- 27 Mantelzell-Lymphom 
- 28 Mastozytose, systemische  
- 29 Morbus Castleman 
- 30 Morbus Waldenström (Lymphoplasmozytisches Lymphom) 
- 31 Multiples Myelom 
- 32 Myelodysplastische Neoplasien (Myelodysplastische Syndrome, MDS) 
- 33 Myeloische Neoplasien mit Eosinophilie (früher: Eosinophilie - assoziierte Myeloproliferative Erkrankungen (MPN-Eo)) 
- 34 Nodales Marginalzonen Lymphom 
- 35 Paroxysmale nächtliche Hämoglobinurie (PNH) 
- 36 Periphere T-Zell Lymphome 
- 37 Polycythaemia Vera (PV) 
- 38 Primäre Myelofibrose (PMF) 
- 39 Sichelzellkrankheiten 
- 40 T-Zell Prolymphozytenleukämie 
- 41 Thrombozytopenien
- 42 ZNS Lymphome 
43 Solide Tumore
- 44 Analkarzinom
- 45 Biliäre Karzinome 
- 46 Blasenkarzinom (Urothelkarzinom) 
- 47 CUP Syndrom - Krebserkrankungen mit unbekanntem Primärtumor 
- 48 Endometriumkarzinom
- 49 Ewing Sarkom 
- 50 Gastrointestinale Stromatumoren (GIST) 
- 51 Gliome im Erwachsenenalter 
- 52 HIV-assoziierte Lungenkarzinome 
- 53 HIV-assoziiertes Analkarzinom 
- 54 Kaposi-Sarkom 
- 55 Keimzelltumoren des Mannes 
- 56 Kolorektalkarzinom 
- 57 Kopf-Hals-Plattenepithelkarzinome 
- 58 Lungenkarzinom, kleinzellig (SCLC) 
- 59 Lungenkarzinom, nicht-kleinzellig (NSCLC) 
- 60 Magenkarzinom 
- 61 Mammakarzinom der Frau 
- 62 Mammakarzinom des Mannes 
- 63 Melanom 
- 64 Neuroendokrine Neoplasien
- 65 Nierenzellkarzinom (Hypernephrom) 
- 66 Ösophaguskarzinom 
- 67 Osteosarkome 
- 68 Ovarialkarzinom 
- 69 Pankreaskarzinom 
- 70 Peritoneales Mesotheliom und Pseudomyxoma peritonei 
- 71 Pleuramesotheliom
- 72 Prostatakarzinom 
- 73 Schilddrüsenkarzinom
- 74 Vulvakarzinom
- 75 Weichgewebssarkome (maligne Weichgewebstumoren) des Erwachsenen 
- 76 Zervixkarzinom

Außer Option 01 und 43 soll bei allen Optionen bei Click auf eine Option ein Textfeld eingeblendet werden, dass dann auch ausgefüllt werden muss, aber nur so lange die Option ausgewählt ist. Ich scheitere jedoch schon daran die Textfelder bei klick einzublenden. Ich bin auch kein Programmierer und habe mit Halbwissen und einer Plausibilitätsprüfung folgenden Code erstellt:

<script type="text/javascript">
function DynamicFilter(auswahlID, frageID) {
  var optionA = document.getElementById("F002" + frageID);
  var textEingabe = document.getElementById(auswahlID + "_01");

  function toggle() {
    if (optionA.checked) {
      textEingabe.style.display = "block";
      textEingabe.required = true;
    } else {
      textEingabe.style.display = "none";
      textEingabe.required = false;
      textEingabe.value = "";
    }
  }

  optionA.addEventListener("change", toggle);

  toggle();
}

// Aufruf für jede Auswahloption und Texteingabefeld
for (var i = 2; i <= 76; i++) {
  if (i !== 43) {
    var frageID = (i < 10 ? "0" : "") + i;
    var auswahlID = "EF" + (i < 10 ? "0" : "") + i;
    DynamicFilter(auswahlID, frageID);
  }
}
</script>

Der Code scheint auch nicht falsch zu sein. Ich habe diesen unterhalb der Frage auf der entsprechenden Seite als HTML-Code eingefügt. Zumindest ist der Code im Pretest auch auf der entsprechenden Seite vorhanden, scheint aber nichts zu machen. Kann mir jemand helfen. Vielleicht sagen, wie der Code korrekt aussehen muss bzw. wie ich noch sicherstellen kann das ein mit der Auswahloption angezeigter Freitext als Pflichtfeld erscheint?
Das Handbuch hat mir zwar schon erklärt was nicht funktioniert, aber was funktioniert habe ich trotz langer Suche nicht gefunden.

Hier noch der Link zum Pretest:
https://www.soscisurvey.de/off-label-use/?act=USc0rnHuSokTOzkx3znx43YQ

Answer 1

Wenn Sie 76 Auswahloptionen haben, brauchen Sie - wenn ich Ihre Frage korrekt verstehe - auch 76 Texteingabefelder. Oder zumindest 43 Eingabefelder für die ersten 43 Optionen. Es scheint mir nur bedingt effizient, das manuell mittels Platzhaltern zu realisieren.

Nachdem Sie nur zwei Oberkategorien haben, würde ich empfehlen, dass Sie stattdessen mit zwei Fragen vom Typ "Mehrfachauswahl" arbeiten. Dort können Sie die Eingabefelder einfach für die einzelnen Optionen aktivieren - und SoSci Survey kümmert sich im Bedarfsfall auch darum, dass überprüft wird, ob diese (bei ausgewählter Option) auch ausgefüllt wurden.

Ob man das Ein- und Ausblenden braucht, ist Geschmackssache. Aber ich würde vorschlagen, dass wir uns erst einmal um die Eingabefelder und die Prüfung kümmern, und das Ein-/Ausblenden danach eventuell im zweiten Schritt angehen.

Comments

Das hatte ich auch getestet. Nachteil daran ist, dass dadurch die Antworten noch mehr Platz weg nehmen, die Übersichtlichkeit noch mehr leidet und wenn jedes Freitextfeld angezeigt wird Verdoppelt sich der Platz den die Antworten benötigen. Da scrollt man sich als Benutzer auf dem Smartphone einen Wolf und einige Befragte werden mit Sicherheit sofort abbrechen. Die Zielgruppe sind Ärzte, die haben wenig Zeit und noch weniger Geduld um sich mit unübersichtlichen Fragebogen zu befassen. Eine Mehrfachauswahl zu Basteln ist ja nicht mein Problem und die 76 Texteingabefelder habe ich schon gebastelt. Ich habe auch schon seitenweise Code erstellt dafür, der aber in keinen Fall funktioniert hat, warum auch immer.
Die Anforderung ist es die 76 Items mit möglichst wenig Platz verbrauch auf eine Seite zu bekommen. Wenn Sie mir dabei behilflich sein könnten wäre ich sehr dankbar. Ich bin da auch für andere Wege offen, aber zwei Mehrfachauswahlen führt zu einer Liste, die mehr platz einnimmt und unübersichtlicher ist, als das jetzt schon ohnehin der Fall ist.

---

Okay, verstehe. Dann wird es aber notwendig sein, dass Sie die Eingabefelder via Platzhalter einfügen: https://www.soscisurvey.de/help/doku.php/de:create:inputs-single

Anschließend können wir uns dann um das JavaScript zum Ein-/Ausblenden kümmern. Da werden wir aber mindestens diesen Weg hier gehen müssen, damit es nicht zu voluminös wird: https://www.soscisurvey.de/help/doku.php/de:create:dynamic#beispiel_1bmehrere_gleichartige_fragen

Für die Antwortpflicht brauchen wir dann nochmal eine manuelle Antwortprüfung mittels PHP-Code.

Eine Alternative bestünde darin, dass Sie auf Seite A (nur) die Mehrfachauswahl abfragen und auf Seite B dann die offene Antworten (nur) zur den ausgewählten Optionen erfragen, vgl. https://www.soscisurvey.de/help/doku.php/de:create:filter-items - diese Variante wäre in der Umsetzung deutlich einfacher.

---

Die Platzhalter hatte ich schon drin, hatte die aber entfernt, weil ich nicht wusste ob die JavaScript Funktion wie hier beschrieben (https://www.soscisurvey.de/help/doku.php/de:create:dynamic#beispiel_1bmehrere_gleichartige_fragen) damit Probleme hat. Den Scrip für diese Funktion habe ich ja oben bereits ober veröffentlicht. Der scheint aber nicht zu laufen.
Die Platzhalter habe ich jetzt wieder eingefügt und auch den Script mit der "S2Selection"-Funktion erneut ergänzt. Die Funktion scheint aber auch nicht bei mir zu funktionieren. Ob ich es nun mit einer Schleife darstelle, oder wie jetzt, einfach stumpf eine Zuordnung für jedes Element mache.

Die Alternative auf Seite A nur erstmal eine Mehrfachauswahl anzuzeigen und dann auf Seite B für die getroffene Auswahl nur per Freitext die Medikament abzufragen, hatte ich auch schon überlegt. Doch da weiß ich dann nicht genau wie ich da vorgehe. Die Hilfeseite habe ich nicht so recht auf meinen Fall übertragen können. Ich muss ja dann konkret bis zu 10 Freitextfelder mit den Namen der ausgewählten Erkrankungen anzeigen. Das habe ich nicht codiert bekommen. So wie ich das verstehe müsste ich jeden Fall per Code abfragen und zuweisen, also z.B. wenn Auswahl "F002_03" ausgewählt wird dann zeige auf nächster Seite Freitextfeld "EF03_01". Das war dann selbst für mich zu viel aufwand und das ohne zu wissen, ob das dann auch wirklich funktioniert. Vielleicht geht das auch einfacher, ich weiß aber nicht wie.

---

Okay, also ... die JavaScript-Konsole sagt:

> Uncaught There is no selection input with ID F002_02

Das bezieht sich auf die Zeile

> S2Selection.linkOptionToInput("F002_02", "EF02_01");

Die korrekte HTML-ID finden Sie ebenfalls in der Konsole. Für das erste Auswahlfeld ist es F002_2 (ohne führende 0 vor der zweiten 2).

> Doch da weiß ich dann nicht genau wie ich da vorgehe. Die Hilfeseite habe ich nicht so recht auf meinen Fall übertragen können.

Eigentlich ist es 1:1 dasselbe. Sie müssen einfach nut mittels getItems() herausfinden, welche Items (=Optionen) der Frage den Wert 2 haben, also getItems('F002', 'is', 2);

> Das war dann selbst für mich zu viel aufwand und das ohne zu wissen, ob das dann auch wirklich funktioniert.

Das ist eigentlich ziemlich einfach (also nur genau diese zwei Zeilen):

$ausgeaehlt = getItems('F002', 'is', 2);
question('EF02', $ausgeaehlt);

---

> Die korrekte HTML-ID finden Sie ebenfalls in der Konsole. Für das erste Auswahlfeld ist es F002_2 (ohne führende 0 vor der zweiten 2).

Danke für den Hinweis. Jetzt scheint der Code zu funktionieren.

Nach Rücksprache mit den Kollegen sollen die 76 Items auf einer Seite angezeigt werden und die (insgesamt 74) Freitextfelder solle eingeblendet werden wenn das entsprechende dazugehörige Item angeklickt wird und bei Abwählen soll der Freitext wieder ausgeblendet werden. Wie mache ich das? Mein Code scheint nicht zu funktionieren:

<script type="text/javascript">
function DynamicFilter(auswahlID, frageID) {
  var optionA = document.getElementById("F002" + frageID);
  var textEingabe = document.getElementById(auswahlID + "_01");

  function toggle() {
    if (optionA.checked) {
      textEingabe.style.display = "block";
      textEingabe.required = true;
    } else {
      textEingabe.style.display = "none";
      textEingabe.required = false;
      textEingabe.value = "";
    }
  }

  optionA.addEventListener("change", toggle);

  toggle();
}

// Aufruf für jede Auswahloption und Texteingabefeld
for (var i = 2; i <= 76; i++) {
  if (i !== 43) {
    var frageID = i.toString();
    var auswahlID = "EF" + frageID;
    DynamicFilter(auswahlID, frageID);
  }
}
</script>

---

Wenn ich auf den Pretest-Link aus Ihrer Frage klicke, scheint der JavaScript-Code aus Ihrem letzten Kommanter nirgends auf der Seite platziert zu sein?

---

Da waren Sie zu schnell. Ich habe im Anschluss erst den Code eingefügt, weil mir aufgefallen ist, dass ich in meinen Code noch einen Fehler hatte. Doch auch mit der Korrektur (ist im Kommentar oben auch schon korrigiert) bekomme ich in der Browserkonsole eine Fehlermeldung. Ich weiß nicht wo der Fehler ist. Wie schon erwähnt, bin ich kein Profi in der Programmierung.

---

> Uncaught TypeError: optionA is null

Das bezieht sich auf diese Zeile:

optionA.addEventListener("change", toggle);

Und definiert wird optionA hier:

var optionA = document.getElementById("F002" + frageID);

Nachdem Sie auf F002_1 etc. hinaus wollen, müssten Sie vermutlich nur den Unterstrich ergänzen:

var optionA = document.getElementById("F002_" + frageID);

Aber lassen Sie sich zur Sicherheit in der Konsole anzeigen, was da herauskommt:

var optionA = document.getElementById("F002_" + frageID);
console.log("F002_" + frageID);

> Wie schon erwähnt, bin ich kein Profi in der Programmierung.


Schon klar, aber daran arbeiten wir ja gerade ;)

---

Ich habe den Unterstrich ergänzt. Leider war das nicht die Lösung. Jetzt hat sich der Fehler "Uncaught TypeError: Cannot read properties of null" vermehrt. Es scheint mit der "toggle();" Funktion zu tun zu haben. Ich weiß aber nicht wieso.

---

Die Meldung stamm daher, dass auch das zweite Element nicht gefunden wird, in dieser Zeil hier:

var textEingabe = document.getElementById(auswahlID + "_01");

Als auswahlID  übergeben Sie im Moment "EF" + frageID - wenn die frageID 1 ist, kommt da EF1 heraus, es müsste aber EF01 sein.

Ersetzen Sie daher

var auswahlID = "EF" + frageID;

Wie folgt:

var frageID0 = frageID;
if (frageID0 < 10) {
  frageID0 = "0" + frageID0;
}
var auswahlID = "EF" + frageID0;

Es ist wichtig, dass Sie die Variable frageID nicht ändern, sondern nur diese neue frageID0, denn die Zahl ohne 0 brauchen wir ja für die Auswahlfelder.

---

Vielen, herzlichen Dank für die Hilfe. Jetzt scheint es zu funktionieren. Wenn nicht im Pretest jetzt noch Probleme Auftreten, oder die Tester was geändert haben wollen, ist das jetzt soweit fertig und verwendbar.