Text bei Auswahl einer bestimmten Option sofort einblenden

Question

Guten Tag,
Analog zum Vorgehen "Fragen bei Auswahl einer bestimmten Option sofort einblenden" möchte ich einen bestimmten Buchstaben bei einer bestimmten Option sofort einblenden. Die Idee ist, 5 Fragen mit je 4 Antwort Optionen zu haben. Vor jeder Antwortoption steht ein Buchstabe, und wenn die Teilnehmerin jeweils die richtige Antwort anklickt, ergibt es ein Lösungswort. Der Code funktioniert, wenn ich den Buchstabe als Frage (z.B. im Titel einer Auswahlfrage) definiere.

Ich hab jedoch nicht rausgefunden, wie ich den Buchstaben als "Text" oder "Textelement" definiere kann (und die Bezeichnung entsprechend dem Name im Entwicklertool anpasse), oder noch besser direkt in java script, damit es mir beim Auswählen einer Option einen bestimmten Buchstabe anzeigt, am besten noch nebeneinander nicht untereinander.

Gibt es da eine Möglichkeit oder ist dies nur für Fragen einblenden vorgesehen? Besten Dank. Der Code lautet:

question('WB01');  // Frage1
question('WB02');  // Frage2
question('WB03');  // Frage3
question('WB04');  // Frage4
question('WB05');  // Frage5

question('LS01');  // L
question('LS02');  // I
question('LS03');  // O
question('LS04');  // N

...

<script type="text/javascript">

var optionA1 = document.getElementById("WB01_01a");  // 
var optionB1 = document.getElementById("WB01_02a");  // 
var optionC1 = document.getElementById("WB01_03a");  //
var optionD1 = document.getElementById("WB01_04a");  // 

var optionA2 = document.getElementById("WB02_01a");  //
var optionB2 = document.getElementById("WB02_02a");  //
var optionC2 = document.getElementById("WB02_03a");  //
var optionD2 = document.getElementById("WB02_04a");  // 

var optionA3 = document.getElementById("WB03_01a");  //
var optionB3 = document.getElementById("WB03_02a");  //
var optionC3 = document.getElementById("WB03_03a");  //
var optionD3 = document.getElementById("WB03_04a");  // 

var optionA4 = document.getElementById("WB04_01a");  //
var optionB4 = document.getElementById("WB04_02a");  //
var optionC4 = document.getElementById("WB04_03a");  //
var optionD4 = document.getElementById("WB04_04a");  // 

var optionA5 = document.getElementById("WB05_01a");  //
var optionB5 = document.getElementById("WB05_02a");  //
var optionC5 = document.getElementById("WB05_03a");  //
var optionD5 = document.getElementById("WB05_04a");  // 


var letA1 = document.getElementById("LS01_qst");
var letB1 = document.getElementById("LS02_qst");
var letC1 = document.getElementById("LS03_qst");
var letD1 = document.getElementById("LS04_qst");

var letA2 = document.getElementById("LS05_qst");
var letB2 = document.getElementById("LS06_qst");
var letC2 = document.getElementById("LS07_qst");
var letD2 = document.getElementById("LS08_qst");

function toggle() {
  if (optionA1.checked) {
    letA1.style.display = "";
    letB1.style.display = "none";
    letC1.style.display = "none";
    letD1.style.display = "none";
  } else if (optionB1.checked) {
    letB1.style.display = "";
    letA1.style.display = "none";
    letC1.style.display = "none";
    letD1.style.display = "none";
  } else if (optionC1.checked) {
    letC1.style.display = "";
    letA1.style.display = "none";
    letB1.style.display = "none";
    letD1.style.display = "none";
  } else if (optionD1.checked) {
    letD1.style.display = "";
    letA1.style.display = "none";
    letB1.style.display = "none";
    letC1.style.display = "none";
  } if (optionA2.checked) {
    letA2.style.display = "";
    letB2.style.display = "none";
    letC2.style.display = "none";
    letD2.style.display = "none";
  } else if (optionB2.checked) {
    letB2.style.display = "";
    letA2.style.display = "none";
    letC2.style.display = "none";
    letD2.style.display = "none";
  } else if (optionC2.checked) {
    letC2.style.display = "";
    letA2.style.display = "none";
    letB2.style.display = "none";
    letD2.style.display = "none";
  } else if (optionD2.checked) {
    letD2.style.display = "";
    letA2.style.display = "none";
    letB2.style.display = "none";
    letC2.style.display = "none";
  } else {
    letA1.style.display = "none";
    letB1.style.display = "none";
    letC1.style.display = "none";
    letD1.style.display = "none";
    letA2.style.display = "none";
    letB2.style.display = "none";
    letC2.style.display = "none";
    letD2.style.display = "none";
  }
}
 
// Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird
SoSciTools.attachEvent(optionA1, "click", toggle);
SoSciTools.attachEvent(optionB1, "click", toggle);
SoSciTools.attachEvent(optionC1, "click", toggle);
SoSciTools.attachEvent(optionD1, "click", toggle);

SoSciTools.attachEvent(optionA2, "click", toggle);
SoSciTools.attachEvent(optionB2, "click", toggle);
SoSciTools.attachEvent(optionC2, "click", toggle);
SoSciTools.attachEvent(optionD2, "click", toggle);

SoSciTools.attachEvent(optionA3, "click", toggle);
SoSciTools.attachEvent(optionB3, "click", toggle);
SoSciTools.attachEvent(optionC3, "click", toggle);
SoSciTools.attachEvent(optionD3, "click", toggle);

SoSciTools.attachEvent(optionA4, "click", toggle);
SoSciTools.attachEvent(optionB4, "click", toggle);
SoSciTools.attachEvent(optionC4, "click", toggle);
SoSciTools.attachEvent(optionD4, "click", toggle);

SoSciTools.attachEvent(optionA5, "click", toggle);
SoSciTools.attachEvent(optionB5, "click", toggle);
SoSciTools.attachEvent(optionC5, "click", toggle);
SoSciTools.attachEvent(optionD5, "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>

Comments

> Ich hab jedoch nicht rausgefunden, wie ich den Buchstaben als "Text" oder "Textelement" definiere kann

Sie können Teile des Textes als HTML-Elemente anlegen, z.B.

<p>Dieses <span id="wort01">Wort</span> hier hat eine eigene ID.</p>

Meinen Sie so etwas in der Art?