Kies hoeveel vragen je wilt oefenen
+ @@ -70,6 +71,14 @@ + diff --git a/js/quiz.js b/js/quiz.js index 7686ada..a2e6701 100644 --- a/js/quiz.js +++ b/js/quiz.js @@ -11,8 +11,11 @@ let sessionQ = []; let currentIdx = 0; let score = 0; let wrongIds = []; +let correctIds = []; +let chosenAnswers = []; // chosenAnswers[i] = chosen option index for question i let selectedCount = 0; let answered = false; +let quizMode = 'feedback'; // 'feedback' | 'exam' let timerInterval = null; let elapsedSeconds = 0; @@ -66,7 +69,7 @@ function shuffleQuestion(q) { function initLangScreen() { if (LANG_OPTIONS.length === 1) { ALL_QUESTIONS = LANG_OPTIONS[0].data; - initCountButtons(); + initStartScreen(); showScreen('start'); return; } @@ -79,7 +82,7 @@ function initLangScreen() { btn.innerHTML = '' + lang.flag + '' + lang.label + ''; btn.onclick = () => { ALL_QUESTIONS = lang.data; - initCountButtons(); + initStartScreen(); showScreen('start'); }; grid.appendChild(btn); @@ -89,6 +92,11 @@ function initLangScreen() { } /* ===== Start screen ===== */ +function initStartScreen() { + initCountButtons(); + initModeButtons(); +} + function initCountButtons() { const counts = [5, 10, 20, 60, 9999]; const grid = document.getElementById('count-grid'); @@ -111,6 +119,26 @@ function initCountButtons() { selectedCount = 0; } +function initModeButtons() { + const modes = [ + { key: 'feedback', label: 'Directe feedback', desc: 'Antwoord zien na elke vraag' }, + { key: 'exam', label: 'Examenmodus', desc: 'Alle vragen eerst, daarna beoordeling' }, + ]; + const grid = document.getElementById('mode-grid'); + grid.innerHTML = ''; + modes.forEach(m => { + const btn = document.createElement('button'); + btn.className = 'mode-btn' + (m.key === quizMode ? ' selected' : ''); + btn.innerHTML = '' + m.label + '' + m.desc + ''; + btn.onclick = () => { + quizMode = m.key; + document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('selected')); + btn.classList.add('selected'); + }; + grid.appendChild(btn); + }); +} + function selectCount(n, btn) { selectedCount = Math.min(n, ALL_QUESTIONS.length); document.querySelectorAll('.count-btn').forEach(b => b.classList.remove('selected')); @@ -121,10 +149,11 @@ function selectCount(n, btn) { function startQuiz() { const pool = shuffle(ALL_QUESTIONS.map(shuffleQuestion)); sessionQ = pool.slice(0, selectedCount); - currentIdx = 0; score = 0; wrongIds = []; answered = false; + currentIdx = 0; score = 0; wrongIds = []; correctIds = []; chosenAnswers = []; answered = false; elapsedSeconds = 0; answeredCount = 0; updateTimerDisplay(); showScreen('quiz'); + if (quizMode === 'exam') startTimer(); renderQuestion(); } @@ -149,23 +178,52 @@ function renderQuestion() { document.getElementById('explanation').style.display = 'none'; document.getElementById('next-btn').style.display = 'none'; - startTimer(); + + if (quizMode === 'feedback') { + startTimer(); + } + // In exam mode the timer is already running (started in startQuiz via first renderQuestion) } function handleAnswer(chosen) { if (answered) return; answered = true; - stopTimer(); answeredCount++; - updateTimerDisplay(); + chosenAnswers[currentIdx] = chosen; + const q = sessionQ[currentIdx]; + const isCorrect = chosen === q.correct; + + if (isCorrect) { score++; correctIds.push(currentIdx); } + else { wrongIds.push(currentIdx); } + + if (quizMode === 'feedback') { + stopTimer(); + updateTimerDisplay(); + showAnswerFeedback(q, chosen); + const nextBtn = document.getElementById('next-btn'); + nextBtn.style.display = 'inline-flex'; + nextBtn.textContent = currentIdx === sessionQ.length - 1 ? 'Bekijk resultaat' : 'Volgende vraag →'; + } else { + // Exam mode: highlight answer, keep timer running, show minimal next + updateTimerDisplay(); + document.querySelectorAll('.option-btn').forEach((btn, i) => { + btn.disabled = true; + if (i === q.correct) btn.classList.add('correct'); + else if (i === chosen && !isCorrect) btn.classList.add('wrong'); + }); + const nextBtn = document.getElementById('next-btn'); + nextBtn.style.display = 'inline-flex'; + nextBtn.textContent = currentIdx === sessionQ.length - 1 ? 'Bekijk resultaat' : 'Volgende vraag →'; + } +} + +function showAnswerFeedback(q, chosen) { document.querySelectorAll('.option-btn').forEach((btn, i) => { btn.disabled = true; if (i === q.correct) btn.classList.add('correct'); else if (i === chosen && chosen !== q.correct) btn.classList.add('wrong'); }); - if (chosen === q.correct) score++; - else wrongIds.push(currentIdx); const expDiv = document.getElementById('explanation'); expDiv.style.display = 'block'; @@ -175,10 +233,6 @@ function handleAnswer(chosen) { q.explanation.map((e, i) => '' + e.replace(/^[A-D]\.\s*/, 'ABCD'[i] + '. ') + '
' ).join(''); - - const nextBtn = document.getElementById('next-btn'); - nextBtn.style.display = 'inline-flex'; - nextBtn.textContent = currentIdx === sessionQ.length - 1 ? 'Bekijk resultaat' : 'Volgende vraag →'; } function nextQuestion() { @@ -203,6 +257,75 @@ function showResult() { document.getElementById('stat-time').textContent = answeredCount > 0 ? Math.round(elapsedSeconds / answeredCount) + 's' : '—'; document.getElementById('retry-btn').style.display = wrongIds.length > 0 ? 'inline-flex' : 'none'; + + // In exam mode: render review section + const reviewSection = document.getElementById('review-section'); + if (quizMode === 'exam') { + renderReview(); + reviewSection.style.display = 'block'; + } else { + reviewSection.style.display = 'none'; + } +} + +function renderReview() { + // Wrong questions (always shown) + const wrongContainer = document.getElementById('wrong-review'); + wrongContainer.innerHTML = wrongIds.length === 0 + ? 'Geen fout beantwoorde vragen.
' + : wrongIds.map(i => buildReviewCard(sessionQ[i], chosenAnswers[i], true)).join(''); + + // Correct questions (hidden by default) + const correctContainer = document.getElementById('correct-review'); + correctContainer.innerHTML = correctIds.length === 0 + ? 'Geen goed beantwoorde vragen.
' + : correctIds.map(i => buildReviewCard(sessionQ[i], chosenAnswers[i], false)).join(''); + correctContainer.style.display = 'none'; + + // Toggle button + const toggleBtn = document.getElementById('toggle-correct-btn'); + if (correctIds.length === 0) { + toggleBtn.style.display = 'none'; + } else { + toggleBtn.style.display = 'inline-flex'; + toggleBtn.textContent = 'Toon ook goed beantwoorde vragen (' + correctIds.length + ')'; + toggleBtn.classList.remove('active'); + } +} + +function buildReviewCard(q, chosen, isWrong) { + const letters = 'ABCD'; + const chosenLetter = letters[chosen]; + const correctLetter = letters[q.correct]; + const explanations = q.explanation.map((e, i) => + '' + e.replace(/^[A-D]\.\s*/, letters[i] + '. ') + '
' + ).join(''); + + return '