diff --git a/app/static/script.js b/app/static/script.js index e35a19d..1d5b135 100644 --- a/app/static/script.js +++ b/app/static/script.js @@ -2,6 +2,7 @@ let mainMode = null; let subMode = null; let selectedPages = []; let currentCard = null; +let attempts = 0; let stats = { correct: 0, total: 0 }; function selectMainMode(mode) { @@ -24,10 +25,7 @@ function selectSubMode(mode) { subMode = mode; document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active')); document.getElementById(`btn-sub-${mode}`).classList.add('active'); - document.getElementById('page-section').style.display = 'block'; - - // Button Check: Nur aktivieren wenn Seiten gewählt sind updatePageDisplay(); } @@ -38,14 +36,12 @@ function fetchPages(type) { const list = document.getElementById('page-list'); list.innerHTML = ''; - // WICHTIG: selectedPages resetten und KEINE Haken standardmäßig setzen - selectedPages = []; - updatePageDisplay(); // Zeigt "Keine Seiten gewählt!" + selectedPages = []; // Standard: Nichts ausgewählt + updatePageDisplay(); pages.forEach(p => { const div = document.createElement('div'); div.className = 'page-item'; - // Hier KEIN 'checked' Attribut mehr div.innerHTML = ` @@ -56,10 +52,7 @@ function fetchPages(type) { } function toggleAllPages(state) { - const checkboxes = document.querySelectorAll('#page-list input'); - checkboxes.forEach(cb => { - cb.checked = state; - }); + document.querySelectorAll('#page-list input').forEach(cb => cb.checked = state); updatePageSelection(); } @@ -84,12 +77,13 @@ function updatePageDisplay() { } } -// --- QUIZ LOGIC (Unverändert) --- +// --- QUIZ LOGIC --- + function startQuiz() { stats = { correct: 0, total: 0 }; updateStats(); document.getElementById('setup-screen').style.display = 'none'; - document.getElementById('quiz-screen').style.display = 'flex'; // Flex, wegen CSS column + document.getElementById('quiz-screen').style.display = 'flex'; nextQuestion(); } @@ -99,12 +93,19 @@ function stopQuiz() { } function nextQuestion() { - document.getElementById('btn-check').style.display = 'block'; - document.getElementById('btn-next').style.display = 'none'; - document.getElementById('feedback').innerText = ''; - document.getElementById('feedback').className = 'feedback'; + const btn = document.getElementById('btn-action'); + const fb = document.getElementById('feedback'); + + // Button zurücksetzen auf "Prüfen" + btn.innerText = "Prüfen"; + btn.onclick = checkAnswer; + btn.className = "action-btn primary"; // Farbe Grün + + fb.innerText = ''; + fb.className = 'feedback'; document.querySelectorAll('input').forEach(i => i.value = ''); + attempts = 0; // Versuche resetten fetch('/api/question', { method: 'POST', @@ -141,7 +142,6 @@ function renderCard(card) { lbl.innerText = 'Unregelmäßiges Verb:'; txt.innerText = `to ${card.question}`; hint.innerText = `(Deutsch: ${card.german_hint})`; - inpStd.style.display = 'none'; boxVerbs.style.display = 'flex'; inpInf.style.display = 'none'; @@ -150,7 +150,6 @@ function renderCard(card) { else if (card.type === 'irregular_full') { lbl.innerText = 'Unregelmäßiges Verb (Alle Formen):'; txt.innerText = card.question; - inpStd.style.display = 'none'; boxVerbs.style.display = 'flex'; inpInf.style.display = 'block'; @@ -169,7 +168,6 @@ function checkAnswer() { payload.participle = document.getElementById('inp-part').value; payload.correct_simple = currentCard.answer_simple; payload.correct_participle = currentCard.answer_participle; - if (currentCard.type === 'irregular_full') { payload.infinitive = document.getElementById('inp-inf').value; payload.correct_infinitive = currentCard.answer_infinitive; @@ -187,24 +185,47 @@ function checkAnswer() { fb.innerText = res.msg; if (res.status === 'correct') { - fb.classList.add('correct'); + // RICHTIG -> Button auf "Weiter" schalten + fb.className = 'feedback correct'; stats.correct++; - finishTurn(); + switchToNextMode(); } else if (res.status === 'typo') { - fb.classList.add('typo'); + fb.className = 'feedback typo'; + attempts++; + checkAttempts(res.msg); // Typo zählt auch als Versuch } else { - fb.classList.add('wrong'); - finishTurn(); + // FALSCH + fb.className = 'feedback wrong'; + attempts++; + checkAttempts(res.msg); } }); } +function checkAttempts(msg) { + if (attempts >= 3) { + // Zu viele Versuche -> Button auf "Weiter" + document.getElementById('feedback').innerText = "Leider falsch (3 Versuche). " + msg; + stats.total++; // Zählt als fertig (aber falsch) + updateStats(); + switchToNextMode(); + } +} + +function switchToNextMode() { + const btn = document.getElementById('btn-action'); + btn.innerText = "Weiter"; + btn.onclick = finishTurn; // Beim Klick auf Weiter -> finishTurn + btn.focus(); +} + function finishTurn() { - stats.total++; - updateStats(); - document.getElementById('btn-check').style.display = 'none'; - document.getElementById('btn-next').style.display = 'block'; - document.getElementById('btn-next').focus(); + // Wenn "Weiter" geklickt wird + if (document.getElementById('btn-action').innerText === "Weiter") { + if(attempts < 3) stats.total++; // Wenn richtig, hier Zähler hoch + updateStats(); + nextQuestion(); + } } function updateStats() { @@ -214,11 +235,10 @@ function updateStats() { document.getElementById('stats-text').innerText = `${p}% Richtig (${stats.correct}/${stats.total})`; } +// Enter Key: Klickt einfach den aktiven Button document.addEventListener('keypress', (e) => { if (e.key === 'Enter') { - const nextBtn = document.getElementById('btn-next'); - if (nextBtn.style.display !== 'none') nextQuestion(); - else checkAnswer(); + document.getElementById('btn-action').click(); } });