alpinux.site.2026/dynamic/static/quiz.js

/* Quiz navigation — vanilla JS, aucune dépendance */
(function () {
  const quiz = JSON.parse(document.getElementById('quiz-data').textContent);
  const total = quiz.questions.length;
  let current = 0;

  function showQuestion(index) {
    document.querySelectorAll('.question-block').forEach(function (el) {
      el.hidden = parseInt(el.dataset.index) !== index;
    });

    document.getElementById('progress-text').textContent =
      (index + 1) + ' / ' + total;
    document.getElementById('progress-bar').style.width =
      Math.round((index / total) * 100) + '%';

    document.getElementById('btn-prev').hidden   = index === 0;
    document.getElementById('btn-next').hidden   = index === total - 1;
    document.getElementById('btn-submit').hidden = index !== total - 1;
  }

  window.navigate = function (delta) {
    var next = current + delta;
    if (next < 0 || next >= total) return;
    current = next;
    showQuestion(current);
  };

  window.onChoice = function (questionIndex, choiceIndex) {
    /* Mise à jour visuelle */
    document.querySelectorAll('.question-block[data-index="' + questionIndex + '"] .choice-label')
      .forEach(function (lbl, j) {
        lbl.classList.toggle('selected', j === choiceIndex);
      });

    /* Le radio button natif sert de valeur soumise avec le formulaire.
       On synchronise aussi un hidden input de secours. */
    var hidden = document.getElementById('ans-' + questionIndex);
    if (hidden) hidden.value = choiceIndex;

    /* Avancer automatiquement sauf sur la dernière question */
    if (questionIndex < total - 1) {
      setTimeout(function () { navigate(1); }, 350);
    }
  };

  /* Init */
  showQuestion(0);
})();