Automatisches Öffnen eines Lückentextes, wenn eine Auswahl getroffen wurde.

Question

Hallo SoSci-Forum,

ich möchte bei einer Mehrfachauswahl mit sechs Möglichkeiten, immer wenn ein Teilnehmer eine Auswahl trifft, direkt darunter einen Lückentext einfügen.

Ich würde das über Java-Script machen, aber bis jetzt funktioniert es nicht. Ich habe den Code von der Hilfeseite. Vielleicht kann mir jemand einen Tipp geben. Danke schonmal im Voraus.

<script type="text/javascript">
<!--
var optionA = document.getElementById("DE07_01");  // Option 1 usw
var optionB = document.getElementById("DE07_02");  
var optionC = document.getElementById("DE07_03");
var optionD = document.getElementById("DE07_04");
var optionE = document.getElementById("DE07_05");
var optionF = document.getElementById("DE07_06");
var frage = document.getElementById("DE14");  // Frage die darunter eingefügt werden soll
 
function toogle() {
  if ((optionA.checked) || (optionB.checked)) || (optionC.checked)) || (optionD.checked)) || (optionE.checked)) || (optionF.checked)) {
    frage.style.display = "";
  } else {
    // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
  }
}
 

SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
SoSciTools.attachEvent(optionD, "click", toogle);
SoSciTools.attachEvent(optionE, "click", toogle);
SoSciTools.attachEvent(optionF, "click", toogle);
 

toogle();
// -->
</script>

Answer 1

Ich würde Ihnen empfehlen, dass Sie bei der Mehrfachauswahl für jede Option das Eingabefeld aktivieren. Wenn sie keine Breite angeben, sollte es unter dem Text der Option erscheinen.

Falls Sie es abhängig vom Auswahlfeld (Checkbox) ein-/ausblenden möchten, müssten Sie für jedes Auswahlfeld einen JavaScript-Event-Handler für das "click" Ereignis registrieren, welcher das Feld ein- oder ausblendet. Entweder einzeln (=JavaScript-Code 6-mal kopieren) oder Sie basteln sich ein Objekt.

Letzteres könnte etwa wie folgt aussehen:

function DisplayWhenChecked(checkboxID, inputID) {
  var checkbox = document.getElementById(checkboxID);
  var input = document.getElementById(inputID);
  if (!(checkbox && input)) {
    throw "Element not found";
  }
  function toogle() {
    if (checkbox.checked) {
      input.style.display = "";
    } else {
      input.style.display = "hidden";
    }
  }
  SoSciTools.attachEvent(checkbox, "click", toogle);
  toogle();
}

// Für jedes Paar aufrufen
new DisplayWhenChecked("AB01_01", "AB01_01a");
new DisplayWhenChecked("AB01_02", "AB01_02a");