app/static/script.js aktualisiert

app/static/script.js

@@ -10,15 +10,18 @@ document.addEventListener('DOMContentLoaded', () => {
     // Enter-Taste für alle Inputs
     const inputs = ['answer-input', 'input-simple', 'input-participle'];
     inputs.forEach(id => {
-        document.getElementById(id).addEventListener('keypress', function (e) {
+        const el = document.getElementById(id);
-            if (e.key === 'Enter') {
+        if (el) {
-                if (document.getElementById('next-btn').style.display !== 'none') {
+            el.addEventListener('keypress', function (e) {
-                    nextQuestion();
+                if (e.key === 'Enter') {
-                } else {
+                    if (document.getElementById('next-btn').style.display !== 'none') {
-                    checkAnswer();
+                        nextQuestion();
+                    } else {
+                        checkAnswer();
+                    }
                 }
-            }
+            });
-        });
+        }
     });
 });
 
@@ -26,11 +29,6 @@ function setMode(mode) {
     currentMode = mode;
     document.querySelectorAll('.mode-select button').forEach(b => b.classList.remove('active'));
     document.getElementById(`btn-${mode}`).classList.add('active');
-    
-    // Wenn Verben-Modus, wähle automatisch Seite 206/207 aus (optional, aber hilfreich)
-    if (mode === 'irregular') {
-        // Logik könnte hier erweitert werden, um Checkboxen zu setzen
-    }
 }
 
 function fetchPages() {
@@ -38,17 +36,20 @@ function fetchPages() {
         .then(res => res.json())
         .then(pages => {
             const list = document.getElementById('page-list');
-            list.innerHTML = '';
+            if(list) {
-            pages.forEach(p => {
+                list.innerHTML = '';
-                const div = document.createElement('div');
+                pages.forEach(p => {
-                div.className = 'page-item';
+                    const div = document.createElement('div');
-                div.innerHTML = `
+                    div.className = 'page-item';
-                    <input type="checkbox" id="p-${p}" value="${p}" onchange="updatePageSelection()">
+                    div.innerHTML = `
-                    <label for="p-${p}">S. ${p}</label>
+                        <input type="checkbox" id="p-${p}" value="${p}" onchange="updatePageSelection()">
-                `;
+                        <label for="p-${p}">S. ${p}</label>
-                list.appendChild(div);
+                    `;
-            });
+                    list.appendChild(div);
-        });
+                });
+            }
+        })
+        .catch(err => console.error("Fehler beim Laden der Seiten:", err));
 }
 
 function updatePageSelection() {
@@ -60,8 +61,15 @@ function updatePageSelection() {
     else display.innerText = `Seiten: ${selectedPages.join(', ')}`;
 }
 
-function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
+function openPageOverlay() { 
-function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }
+    const overlay = document.getElementById('overlay');
+    if(overlay) overlay.style.display = 'flex'; 
+}
+
+function closeOverlay() { 
+    const overlay = document.getElementById('overlay');
+    if(overlay) overlay.style.display = 'none'; 
+}
 
 function startQuiz() {
     stats = { correct: 0, total: 0 };
@@ -74,14 +82,15 @@ function startQuiz() {
 function stopQuiz() {
     document.getElementById('quiz-screen').style.display = 'none';
     document.getElementById('setup-screen').style.display = 'flex';
-    fetchPages(); // Seiten neu laden falls was dazu kam
+    fetchPages();
 }
 
 function nextQuestion() {
     document.getElementById('check-btn').style.display = 'inline-block';
     document.getElementById('next-btn').style.display = 'none';
-    document.getElementById('feedback-msg').innerText = '';
+    const feedback = document.getElementById('feedback-msg');
-    document.getElementById('feedback-msg').className = '';
+    feedback.innerText = '';
+    feedback.className = '';
     
     // Inputs leeren
     document.getElementById('answer-input').value = '';
@@ -105,6 +114,11 @@ function nextQuestion() {
         }
         currentCard = data;
         renderCard(data);
+    })
+    .catch(err => {
+        console.error(err);
+        alert("Fehler beim Laden der Frage.");
+        stopQuiz();
     });
 }
 
@@ -116,4 +130,107 @@ function renderCard(card) {
     const standardInput = document.getElementById('answer-input');
     const verbInputs = document.getElementById('verb-inputs');
 
-    hint.innerText
+    if(hint) hint.innerText = ''; 
+
+    if (card.type === 'irregular') {
+        // UI für Verben
+        label.innerText = 'Bilde Simple Past & Past Participle:';
+        text.innerText = `to ${card.question}`; 
+        if(hint) hint.innerText = `(Deutsch: ${card.german_hint})`;
+        
+        standardInput.style.display = 'none';
+        verbInputs.style.display = 'flex';
+        document.getElementById('input-simple').focus();
+    } else {
+        // UI für normale Vokabeln
+        label.innerText = 'Übersetze:';
+        text.innerText = card.question;
+        
+        standardInput.style.display = 'block';
+        verbInputs.style.display = 'none';
+        standardInput.focus();
+    }
+}
+
+function checkAnswer() {
+    const feedback = document.getElementById('feedback-msg');
+    
+    let payload = {};
+    
+    if (currentCard.type === 'irregular') {
+        payload = {
+            type: 'irregular',
+            input_simple: document.getElementById('input-simple').value,
+            input_participle: document.getElementById('input-participle').value,
+            correct_simple: currentCard.answer_simple,
+            correct_participle: currentCard.answer_participle
+        };
+    } else {
+        payload = {
+            type: 'vocab',
+            input: document.getElementById('answer-input').value,
+            correct: currentCard.answer
+        };
+    }
+
+    fetch('/api/check', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+    })
+    .then(res => res.json())
+    .then(res => {
+        if (res.status === 'correct') {
+            feedback.innerText = res.msg;
+            feedback.classList.add('msg-correct');
+            document.getElementById('check-btn').style.display = 'none';
+            document.getElementById('next-btn').style.display = 'inline-block';
+            document.getElementById('next-btn').focus();
+            stats.correct++;
+            stats.total++;
+            updateProgress();
+        } else if (res.status === 'typo') {
+            feedback.innerText = res.msg;
+            feedback.classList.add('msg-typo');
+            attempts++;
+            checkAttempts();
+        } else {
+            feedback.innerText = res.msg;
+            feedback.classList.add('msg-wrong');
+            attempts++;
+            checkAttempts();
+        }
+    });
+}
+
+function checkAttempts() {
+    if (attempts >= 3) {
+        const feedback = document.getElementById('feedback-msg');
+        if (currentCard.type === 'irregular') {
+            feedback.innerText = `Leider nicht geschafft. Lösung: ${currentCard.answer_simple} | ${currentCard.answer_participle}`;
+        } else {
+            feedback.innerText = `Leider nicht geschafft. Lösung: ${currentCard.answer}`;
+        }
+        document.getElementById('check-btn').style.display = 'none';
+        document.getElementById('next-btn').style.display = 'inline-block';
+        stats.total++;
+        updateProgress();
+    }
+}
+
+function updateProgress() {
+    let percent = 0;
+    if (stats.total > 0) {
+        percent = Math.round((stats.correct / stats.total) * 100);
+    }
+    const text = document.getElementById('progress-text');
+    const bar = document.getElementById('progress-bar');
+    
+    text.innerText = `${percent}% Richtig (${stats.correct}/${stats.total})`;
+    bar.style.width = `${percent}%`;
+    
+    if (percent < 50) bar.style.backgroundColor = '#dc3545';
+    else if (percent < 65) bar.style.backgroundColor = '#f08080';
+    else if (percent < 85) bar.style.backgroundColor = '#ffc107';
+    else bar.style.backgroundColor = '#28a745';
+}