JavaScript um Antwortoptionen dynamisch einzublenden

Question

Liebes Support-Team,

das JavaScript zum Ein-und Ausblenden der Alternativen funktioniert - dank der Anleitung - wunderbar!

    <script type="text/javascript">
<!--
var optionA = document.getElementById("A111_01");  // Auswahl der Alternativoption
var addElement1 = document.getElementById("A101_03_container") // Zusätzliches Element 1
var addElement2 = document.getElementById("A101_06_container") // Zusätzliches Element 2
var addElement3 = document.getElementById("A101_09_container") // Zusätzliches Element 3

 
function toogle() {
  if (optionA.checked) {
    
    addElement1.style.display = ""
    addElement2.style.display = ""
    addElement3.style.display = "";
  } else {
    addElement1.style.display = "none"
    addElement2.style.display = "none"
    addElement3.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toogle);

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

Jetzt hätte ich noch zwei Anliegen:

1. Tracking, ob und wie oft die Alternativoptionen eingeblendet wurden (interne Variable dazu ist angelegt: [A112])
2. Randomisierung: ist es möglich, dass die ersten sechs Auswahloptionen (ohne die zusätzlichen drei) randomisiert angezeigt werden und die drei zusätzlichen Optionen beim Einblenden 'unter' diesen erscheinen (in einer Zeile), also nicht mit in die Randomisierung aufgenommen werden?

Vielen Dank!

Answer 1

Tracking, ob und wie oft die Alternativoptionen eingeblendet wurden (interne Variable dazu ist angelegt: [A112])

Ziehen Sie die Frage A112 bitte auf die Fragebogen-Seite.

Die Kennung der internen Variable lautet höchstwahrscheinlich A112_01.

Jetzt müssen wir also nur noch zählen, wannn immer das Kreuzchen gesetzt wird. Dafür erweitern wir Ihre JavaScript-Funktion toogle().

function toogle() {
  if (optionA.checked) {
    countClick("A112_01");
    addElement1.style.display = ""
    // u.s.w.

Die Funktion countClick() müssen wir natürlich darunter noch definieren.

function countClick(varID) {
  var input = document.getElementById(varID);
  var val = parseInt(input.value);
  if (isNaN(val)) {
    val = 0;
  }
  val = val + 1;
  input.value = val;
}

Und dann wäre es noch geschickt zu speichern, dass JavaScript überhaupt aktiv ist:

document.getElementById("A112_01").value = "0";

Wenn JavaScript inaktiv ist, bleibt die Variable leer, sonst steht eine 0 oder eine andere Zahl darin.

Wenn es nicht gleich klappt, sehen Sie bitte mal in die JavaScript-Fehlerkonsole Ihres Browsers und prüfen Sie ggf. wo ein Fehler im Code moniert wird.

Randomisierung: ist es möglich, dass die ersten sechs Auswahloptionen (ohne die zusätzlichen drei) randomisiert angezeigt werden und die drei zusätzlichen Optionen beim Einblenden 'unter' diesen erscheinen (in einer Zeile), also nicht mit in die Randomisierung aufgenommen werden?

Natürlich. Wenn Sie z.B. 12+3 Optionen hätten, könnte der PHP-Code wie folgt aussehen:

if (!isset($options)) {
  $options = [1,2,3,4,5,6,7,8,9,10,11,12];
  shuffle($options);
  registerVariable($options);
}
$addOn = [13,14,15];

question('A101', array_merge(array_slice($options, 0, 6), $addOn));

Nicht ganz trivial auf den ersten Blick, aber versuchen Sie trotzdem mal, diesen Code nachzuvollziehen.