    </div>
  </div>
</div>

<script>
const QUIZ_TYPE    = 'event';
const QUIZ_ID      = <?= $eventId ?>;
const TOTAL_Q      = <?= count($questions) ?>;
const CSRF         = '<?= csrfToken() ?>';

// Track answers
const userAnswers = {};

// Update answered count when option selected
document.querySelectorAll('.quiz-option input').forEach(input => {
  input.addEventListener('change', () => {
    const qid = input.name.replace('q_', '');
    userAnswers[qid] = input.value;
    updateAnsweredCount();
    // Highlight selected option
    const block = input.closest('.quiz-options');
    block.querySelectorAll('.quiz-option').forEach(lbl => lbl.classList.remove('selected'));
    input.closest('.quiz-option').classList.add('selected');
  });
});

function updateAnsweredCount() {
  const count = Object.keys(userAnswers).length;
  document.getElementById('answeredCount').textContent = count + ' / ' + TOTAL_Q + ' answered';
  if (count === TOTAL_Q) {
    document.getElementById('btnSubmit').classList.add('ready');
  }
}

async function submitQuiz() {
  const answeredCount = Object.keys(userAnswers).length;
