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();
}
});