sascha/englisch6a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

app/static/script.js aktualisiert

Browse Source
This commit is contained in:
sascha 2026-01-28 15:38:34 +00:00
parent 6aa8bd053f
commit f23d309b2b
1 changed files with 69 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
app/static/script.js
View File

@ -1,13 +1,16 @@
let currentMode = 'random';
let selectedPages = [];
let quizQueue = [];
let currentCard = null;
let attempts = 0;
let stats = { correct: 0, total: 0 };
document.addEventListener('DOMContentLoaded', () => {
fetchPages();
document.getElementById('answer-input').addEventListener('keypress', function (e) {
// 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();
@ -16,12 +19,18 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
});
});
});
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() {
@ -45,114 +54,66 @@ function fetchPages() {
function updatePageSelection() {
const checkboxes = document.querySelectorAll('#page-list input:checked');
selectedPages = Array.from(checkboxes).map(cb => parseInt(cb.value));
const disp = document.getElementById('selected-pages-display');
if (selectedPages.length === 0) disp.innerText = "Alle Seiten";
else disp.innerText = `${selectedPages.length} Seite(n) ausgewählt`;
const display = document.getElementById('selected-pages-display');
if (selectedPages.length === 0) display.innerText = "Alle Seiten";
else display.innerText = `Seiten: ${selectedPages.join(', ')}`;
}
function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }
function startQuiz() {
fetch('/api/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ pages: selectedPages, mode: currentMode })
})
.then(res => res.json())
.then(data => {
quizQueue = data;
stats = { correct: 0, total: 0 };
updateProgress();
document.getElementById('setup-screen').style.display = 'none';
document.getElementById('quiz-screen').style.display = 'block';
document.getElementById('quiz-screen').style.display = 'flex';
nextQuestion();
});
}
function nextQuestion() {
if (quizQueue.length === 0) {
alert("Runde beendet! Alle Vokabeln gelernt.");
stopQuiz();
return;
}
currentCard = quizQueue.pop();
attempts = 0;
document.getElementById('question-label').innerText = currentCard.direction === 'de-en' ? "Deutsch -> Englisch" : "Englisch -> Deutsch";
document.getElementById('question-text').innerText = currentCard.question;
document.getElementById('answer-input').value = '';
document.getElementById('answer-input').focus();
document.getElementById('feedback-msg').innerText = '';
document.getElementById('check-btn').style.display = 'inline-block';
document.getElementById('next-btn').style.display = 'none';
}
function checkAnswer() {
const input = document.getElementById('answer-input').value;
fetch('/api/check', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ input: input, correct: currentCard.answer })
})
.then(res => res.json())
.then(res => {
const feedback = document.getElementById('feedback-msg');
feedback.className = '';
if (res.status === 'correct') {
feedback.innerText = res.msg;
feedback.classList.add('msg-correct');
stats.correct++;
stats.total++;
updateProgress();
setTimeout(nextQuestion, 1000);
} 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');
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';
}
function stopQuiz() {
document.getElementById('quiz-screen').style.display = 'none';
document.getElementById('setup-screen').style.display = 'block';
document.getElementById('setup-screen').style.display = 'flex';
fetchPages(); // Seiten neu laden falls was dazu kam
}
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 = '';
// Inputs leeren
document.getElementById('answer-input').value = '';
document.getElementById('input-simple').value = '';
document.getElementById('input-participle').value = '';
attempts = 0;
// Abfrage an Backend
fetch('/api/question', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mode: currentMode, pages: selectedPages })
})
.then(res => res.json())
.then(data => {
if (data.error) {
alert(data.error);
stopQuiz();
return;
}
currentCard = data;
renderCard(data);
});
}
function renderCard(card) {
const label = document.getElementById('question-label');
const text = document.getElementById('question-text');
const hint = document.getElementById('hint-text');
const standardInput = document.getElementById('answer-input');
const verbInputs = document.getElementById('verb-inputs');
hint.innerText