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 18:23:37 +00:00
parent a4b1a949e1
commit 6c22425292
1 changed files with 158 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

315
app/static/script.js
View File

@ -1,79 +1,92 @@
let currentMode = 'random'; let mainMode = null; // 'vocab' oder 'irregular'
let subMode = null; // 'de-en', 'start-german', etc.
let selectedPages = []; let selectedPages = [];
let currentCard = null; let currentCard = null;
let attempts = 0;
let stats = { correct: 0, total: 0 }; let stats = { correct: 0, total: 0 };
document.addEventListener('DOMContentLoaded', () => { // --- SETUP LOGIC ---
fetchPages();
// Enter-Taste für alle Inputs function selectMainMode(mode) {
const inputs = ['answer-input', 'input-simple', 'input-participle']; mainMode = mode;
inputs.forEach(id => { subMode = null; // Reset submode
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();
}
}
});
}
});
});
function setMode(mode) { // UI Updates
currentMode = mode; document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.mode-select button').forEach(b => b.classList.remove('active')); document.getElementById(`btn-main-${mode}`).classList.add('active');
document.getElementById(`btn-${mode}`).classList.add('active');
// Hide all submodes first
document.querySelectorAll('.submode-container').forEach(el => el.style.display = 'none');
// Show correct submode
document.getElementById(`submode-${mode}`).style.display = 'block';
// Hide Start & Pages until submode selected
document.getElementById('page-section').style.display = 'none';
// Reset Submode buttons
document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active'));
// Fetch pages for this mode immediately
fetchPages(mode);
} }
function fetchPages() { function selectSubMode(mode) {
fetch('/api/pages') subMode = mode;
document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-sub-${mode}`).classList.add('active');
// Now show page selection and start button
document.getElementById('page-section').style.display = 'block';
document.getElementById('btn-start').disabled = false;
document.getElementById('btn-start').style.opacity = '1';
}
function fetchPages(type) {
fetch(`/api/pages?type=${type}`)
.then(res => res.json()) .then(res => res.json())
.then(pages => { .then(pages => {
const list = document.getElementById('page-list'); const list = document.getElementById('page-list');
if(list) { list.innerHTML = '';
list.innerHTML = '';
pages.forEach(p => { // Auto-select logic: Select all by default
const div = document.createElement('div'); selectedPages = pages;
div.className = 'page-item'; updatePageDisplay();
div.innerHTML = `
<input type="checkbox" id="p-${p}" value="${p}" onchange="updatePageSelection()"> pages.forEach(p => {
<label for="p-${p}">S. ${p}</label> const div = document.createElement('div');
`; div.className = 'page-item';
list.appendChild(div); div.innerHTML = `
}); <input type="checkbox" id="p-${p}" value="${p}" checked onchange="updatePageSelection()">
} <label for="p-${p}">${p}</label>
}) `;
.catch(err => console.error("Fehler beim Laden der Seiten:", err)); list.appendChild(div);
});
});
} }
function updatePageSelection() { function updatePageSelection() {
const checkboxes = document.querySelectorAll('#page-list input:checked'); const checkboxes = document.querySelectorAll('#page-list input:checked');
selectedPages = Array.from(checkboxes).map(cb => parseInt(cb.value)); selectedPages = Array.from(checkboxes).map(cb => parseInt(cb.value));
updatePageDisplay();
const display = document.getElementById('selected-pages-display');
if (selectedPages.length === 0) display.innerText = "Alle Seiten";
else display.innerText = `Seiten: ${selectedPages.join(', ')}`;
} }
function openPageOverlay() { function updatePageDisplay() {
const overlay = document.getElementById('overlay'); const d = document.getElementById('selected-pages-display');
if(overlay) overlay.style.display = 'flex'; if (selectedPages.length === 0) {
d.innerText = "Keine Seiten gewählt!";
document.getElementById('btn-start').disabled = true;
} else {
d.innerText = `Seiten: ${selectedPages.join(', ')}`;
if (subMode) document.getElementById('btn-start').disabled = false;
}
} }
function closeOverlay() { // --- QUIZ LOGIC ---
const overlay = document.getElementById('overlay');
if(overlay) overlay.style.display = 'none';
}
function startQuiz() { function startQuiz() {
stats = { correct: 0, total: 0 }; stats = { correct: 0, total: 0 };
updateProgress(); updateStats();
document.getElementById('setup-screen').style.display = 'none'; document.getElementById('setup-screen').style.display = 'none';
document.getElementById('quiz-screen').style.display = 'flex'; document.getElementById('quiz-screen').style.display = 'flex';
nextQuestion(); nextQuestion();
@ -81,156 +94,138 @@ function startQuiz() {
function stopQuiz() { function stopQuiz() {
document.getElementById('quiz-screen').style.display = 'none'; document.getElementById('quiz-screen').style.display = 'none';
document.getElementById('setup-screen').style.display = 'flex'; document.getElementById('setup-screen').style.display = 'block';
fetchPages();
} }
function nextQuestion() { function nextQuestion() {
document.getElementById('check-btn').style.display = 'inline-block'; // UI Reset
document.getElementById('next-btn').style.display = 'none'; document.getElementById('btn-check').style.display = 'block';
const feedback = document.getElementById('feedback-msg'); document.getElementById('btn-next').style.display = 'none';
feedback.innerText = ''; document.getElementById('feedback').innerText = '';
feedback.className = ''; document.getElementById('feedback').className = 'feedback';
// Inputs leeren // Clear Inputs
document.getElementById('answer-input').value = ''; document.querySelectorAll('input').forEach(i => i.value = '');
document.getElementById('input-simple').value = '';
document.getElementById('input-participle').value = '';
attempts = 0;
// Abfrage an Backend
fetch('/api/question', { fetch('/api/question', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ mode: currentMode, pages: selectedPages }) body: JSON.stringify({ mainMode, subMode, pages: selectedPages })
}) })
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
if (data.error) { if(data.error) { alert(data.error); stopQuiz(); return; }
alert(data.error);
stopQuiz();
return;
}
currentCard = data; currentCard = data;
renderCard(data); renderCard(data);
})
.catch(err => {
console.error(err);
alert("Fehler beim Laden der Frage.");
stopQuiz();
}); });
} }
function renderCard(card) { function renderCard(card) {
const label = document.getElementById('question-label'); const lbl = document.getElementById('q-label');
const text = document.getElementById('question-text'); const txt = document.getElementById('q-text');
const hint = document.getElementById('hint-text'); const hint = document.getElementById('q-hint');
const standardInput = document.getElementById('answer-input'); const inpStd = document.getElementById('inp-standard');
const verbInputs = document.getElementById('verb-inputs'); const boxVerbs = document.getElementById('verb-inputs');
const inpInf = document.getElementById('inp-inf');
if(hint) hint.innerText = ''; hint.innerText = '';
if (card.type === 'irregular') { if (card.type === 'vocab') {
// UI für Verben lbl.innerText = 'Übersetze:';
label.innerText = 'Bilde Simple Past & Past Participle:'; txt.innerText = card.question;
text.innerText = `to ${card.question}`; inpStd.style.display = 'block';
if(hint) hint.innerText = `(Deutsch: ${card.german_hint})`; boxVerbs.style.display = 'none';
inpStd.focus();
}
else if (card.type === 'irregular_standard') {
lbl.innerText = 'Unregelmäßiges Verb:';
txt.innerText = `to ${card.question}`;
hint.innerText = `(Deutsch: ${card.german_hint})`;
standardInput.style.display = 'none'; inpStd.style.display = 'none';
verbInputs.style.display = 'flex'; boxVerbs.style.display = 'flex';
document.getElementById('input-simple').focus(); inpInf.style.display = 'none'; // Infinitiv ist gegeben
} else { document.getElementById('inp-simple').focus();
// UI für normale Vokabeln }
label.innerText = 'Übersetze:'; else if (card.type === 'irregular_full') {
text.innerText = card.question; lbl.innerText = 'Unregelmäßiges Verb (Alle Formen):';
txt.innerText = card.question; // Deutsch
standardInput.style.display = 'block'; inpStd.style.display = 'none';
verbInputs.style.display = 'none'; boxVerbs.style.display = 'flex';
standardInput.focus(); inpInf.style.display = 'block'; // Muss eingegeben werden
inpInf.focus();
} }
} }
function checkAnswer() { function checkAnswer() {
const feedback = document.getElementById('feedback-msg'); let payload = { type: currentCard.type };
let payload = {}; if (currentCard.type === 'vocab') {
payload.input = document.getElementById('inp-standard').value;
if (currentCard.type === 'irregular') { payload.correct = currentCard.answer;
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 { } else {
payload = { // Verben
type: 'vocab', payload.simple = document.getElementById('inp-simple').value;
input: document.getElementById('answer-input').value, payload.participle = document.getElementById('inp-part').value;
correct: currentCard.answer 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;
}
} }
fetch('/api/check', { fetch('/api/check', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: {'Content-Type': 'application/json'},
body: JSON.stringify(payload) body: JSON.stringify(payload)
}) })
.then(res => res.json()) .then(res => res.json())
.then(res => { .then(res => {
const fb = document.getElementById('feedback');
fb.innerText = res.msg;
if (res.status === 'correct') { if (res.status === 'correct') {
feedback.innerText = res.msg; fb.classList.add('correct');
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.correct++;
stats.total++; finishTurn();
updateProgress();
} else if (res.status === 'typo') { } else if (res.status === 'typo') {
feedback.innerText = res.msg; fb.classList.add('typo');
feedback.classList.add('msg-typo'); // Darf nochmal probieren
attempts++;
checkAttempts();
} else { } else {
feedback.innerText = res.msg; fb.classList.add('wrong');
feedback.classList.add('msg-wrong'); finishTurn();
attempts++;
checkAttempts();
} }
}); });
} }
function checkAttempts() { function finishTurn() {
if (attempts >= 3) { stats.total++;
const feedback = document.getElementById('feedback-msg'); updateStats();
if (currentCard.type === 'irregular') { document.getElementById('btn-check').style.display = 'none';
feedback.innerText = `Leider nicht geschafft. Lösung: ${currentCard.answer_simple} | ${currentCard.answer_participle}`; document.getElementById('btn-next').style.display = 'block';
} else { document.getElementById('btn-next').focus();
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() { function updateStats() {
let percent = 0; let p = 0;
if (stats.total > 0) { if (stats.total > 0) p = Math.round((stats.correct / stats.total) * 100);
percent = Math.round((stats.correct / stats.total) * 100); document.getElementById('progress-bar').style.width = `${p}%`;
} document.getElementById('stats-text').innerText = `${p}% Richtig (${stats.correct}/${stats.total})`;
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';
} }
// Enter Key Handler
document.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const nextBtn = document.getElementById('btn-next');
if (nextBtn.style.display !== 'none') nextQuestion();
else checkAnswer();
}
});
// Overlay Logic
function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }