app/static/script.js aktualisiert

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 = []; // Standard: Nichts ausgewählt
-            selectedPages = [];
+            updatePageDisplay();
-            updatePageDisplay(); // Zeigt "Keine Seiten gewählt!"
 
             pages.forEach(p => {
                 const div = document.createElement('div');
                 div.className = 'page-item';
-                // Hier KEIN 'checked' Attribut mehr
                 div.innerHTML = `
                     <input type="checkbox" id="p-${p}" value="${p}" onchange="updatePageSelection()">
                     <label for="p-${p}">${p}</label>
@@ -56,10 +52,7 @@ function fetchPages(type) {
 }
 
 function toggleAllPages(state) {
-    const checkboxes = document.querySelectorAll('#page-list input');
+    document.querySelectorAll('#page-list input').forEach(cb => cb.checked = state);
-    checkboxes.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';
+    const btn = document.getElementById('btn-action');
-    document.getElementById('btn-next').style.display = 'none';
+    const fb = document.getElementById('feedback');
-    document.getElementById('feedback').innerText = '';
+
-    document.getElementById('feedback').className = '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');
+            // FALSCH
-            finishTurn();
+            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++;
+    // Wenn "Weiter" geklickt wird
-    updateStats();
+    if (document.getElementById('btn-action').innerText === "Weiter") {
-    document.getElementById('btn-check').style.display = 'none';
+        if(attempts < 3) stats.total++; // Wenn richtig, hier Zähler hoch
-    document.getElementById('btn-next').style.display = 'block';
+        updateStats();
-    document.getElementById('btn-next').focus();
+        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');
+        document.getElementById('btn-action').click();
-        if (nextBtn.style.display !== 'none') nextQuestion();
-        else checkAnswer();
     }
 });