From 9121d86c7f9fa13df3500d2c4ad998af2919206f Mon Sep 17 00:00:00 2001 From: sascha Date: Wed, 28 Jan 2026 15:47:56 +0000 Subject: [PATCH] app/static/script.js aktualisiert --- app/static/script.js | 177 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 147 insertions(+), 30 deletions(-) diff --git a/app/static/script.js b/app/static/script.js index 918a491..8119a6c 100644 --- a/app/static/script.js +++ b/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) { - if (e.key === 'Enter') { - if (document.getElementById('next-btn').style.display !== 'none') { - nextQuestion(); - } else { - checkAnswer(); + const el = document.getElementById(id); + if (el) { + el.addEventListener('keypress', function (e) { + if (e.key === 'Enter') { + if (document.getElementById('next-btn').style.display !== 'none') { + 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 = ''; - pages.forEach(p => { - const div = document.createElement('div'); - div.className = 'page-item'; - div.innerHTML = ` - - - `; - list.appendChild(div); - }); - }); + if(list) { + list.innerHTML = ''; + pages.forEach(p => { + const div = document.createElement('div'); + div.className = 'page-item'; + div.innerHTML = ` + + + `; + 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 closeOverlay() { document.getElementById('overlay').style.display = 'none'; } +function openPageOverlay() { + 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 = ''; - document.getElementById('feedback-msg').className = ''; + const feedback = document.getElementById('feedback-msg'); + 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 \ No newline at end of file + 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'; +} \ No newline at end of file