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

289
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 currentCard = null;
let attempts = 0;
let stats = { correct: 0, total: 0 };
document.addEventListener('DOMContentLoaded', () => {
fetchPages();
// --- SETUP LOGIC ---
// Enter-Taste für alle Inputs
const inputs = ['answer-input', 'input-simple', 'input-participle'];
inputs.forEach(id => {
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 selectMainMode(mode) {
mainMode = mode;
subMode = null; // Reset submode
function setMode(mode) {
currentMode = mode;
document.querySelectorAll('.mode-select button').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-${mode}`).classList.add('active');
// UI Updates
document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
document.getElementById(`btn-main-${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() {
fetch('/api/pages')
function selectSubMode(mode) {
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(pages => {
const list = document.getElementById('page-list');
if(list) {
list.innerHTML = '';
// Auto-select logic: Select all by default
selectedPages = pages;
updatePageDisplay();
pages.forEach(p => {
const div = document.createElement('div');
div.className = 'page-item';
div.innerHTML = `
<input type="checkbox" id="p-${p}" value="${p}" onchange="updatePageSelection()">
<label for="p-${p}">S. ${p}</label>
<input type="checkbox" id="p-${p}" value="${p}" checked onchange="updatePageSelection()">
<label for="p-${p}">${p}</label>
`;
list.appendChild(div);
});
}
})
.catch(err => console.error("Fehler beim Laden der Seiten:", err));
});
}
function updatePageSelection() {
const checkboxes = document.querySelectorAll('#page-list input:checked');
selectedPages = Array.from(checkboxes).map(cb => parseInt(cb.value));
const display = document.getElementById('selected-pages-display');
if (selectedPages.length === 0) display.innerText = "Alle Seiten";
else display.innerText = `Seiten: ${selectedPages.join(', ')}`;
updatePageDisplay();
}
function openPageOverlay() {
const overlay = document.getElementById('overlay');
if(overlay) overlay.style.display = 'flex';
function updatePageDisplay() {
const d = document.getElementById('selected-pages-display');
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() {
const overlay = document.getElementById('overlay');
if(overlay) overlay.style.display = 'none';
}
// --- QUIZ LOGIC ---
function startQuiz() {
stats = { correct: 0, total: 0 };
updateProgress();
updateStats();
document.getElementById('setup-screen').style.display = 'none';
document.getElementById('quiz-screen').style.display = 'flex';
nextQuestion();
@ -81,96 +94,88 @@ function startQuiz() {
function stopQuiz() {
document.getElementById('quiz-screen').style.display = 'none';
document.getElementById('setup-screen').style.display = 'flex';
fetchPages();
document.getElementById('setup-screen').style.display = 'block';
}
function nextQuestion() {
document.getElementById('check-btn').style.display = 'inline-block';
document.getElementById('next-btn').style.display = 'none';
const feedback = document.getElementById('feedback-msg');
feedback.innerText = '';
feedback.className = '';
// UI Reset
document.getElementById('btn-check').style.display = 'block';
document.getElementById('btn-next').style.display = 'none';
document.getElementById('feedback').innerText = '';
document.getElementById('feedback').className = 'feedback';
// Inputs leeren
document.getElementById('answer-input').value = '';
document.getElementById('input-simple').value = '';
document.getElementById('input-participle').value = '';
// Clear Inputs
document.querySelectorAll('input').forEach(i => i.value = '');
attempts = 0;
// Abfrage an Backend
fetch('/api/question', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ mode: currentMode, pages: selectedPages })
body: JSON.stringify({ mainMode, subMode, pages: selectedPages })
})
.then(res => res.json())
.then(data => {
if (data.error) {
alert(data.error);
stopQuiz();
return;
}
if(data.error) { alert(data.error); stopQuiz(); return; }
currentCard = data;
renderCard(data);
})
.catch(err => {
console.error(err);
alert("Fehler beim Laden der Frage.");
stopQuiz();
});
}
function renderCard(card) {
const label = document.getElementById('question-label');
const text = document.getElementById('question-text');
const hint = document.getElementById('hint-text');
const lbl = document.getElementById('q-label');
const txt = document.getElementById('q-text');
const hint = document.getElementById('q-hint');
const standardInput = document.getElementById('answer-input');
const verbInputs = document.getElementById('verb-inputs');
const inpStd = document.getElementById('inp-standard');
const boxVerbs = document.getElementById('verb-inputs');
const inpInf = document.getElementById('inp-inf');
if(hint) hint.innerText = '';
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})`;
if (card.type === 'vocab') {
lbl.innerText = 'Übersetze:';
txt.innerText = card.question;
inpStd.style.display = 'block';
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';
verbInputs.style.display = 'flex';
document.getElementById('input-simple').focus();
} else {
// UI für normale Vokabeln
label.innerText = 'Übersetze:';
text.innerText = card.question;
inpStd.style.display = 'none';
boxVerbs.style.display = 'flex';
inpInf.style.display = 'none'; // Infinitiv ist gegeben
document.getElementById('inp-simple').focus();
}
else if (card.type === 'irregular_full') {
lbl.innerText = 'Unregelmäßiges Verb (Alle Formen):';
txt.innerText = card.question; // Deutsch
standardInput.style.display = 'block';
verbInputs.style.display = 'none';
standardInput.focus();
inpStd.style.display = 'none';
boxVerbs.style.display = 'flex';
inpInf.style.display = 'block'; // Muss eingegeben werden
inpInf.focus();
}
}
function checkAnswer() {
const feedback = document.getElementById('feedback-msg');
let payload = { type: currentCard.type };
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
};
if (currentCard.type === 'vocab') {
payload.input = document.getElementById('inp-standard').value;
payload.correct = currentCard.answer;
} else {
payload = {
type: 'vocab',
input: document.getElementById('answer-input').value,
correct: currentCard.answer
};
// Verben
payload.simple = document.getElementById('inp-simple').value;
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;
}
}
fetch('/api/check', {
@ -180,57 +185,47 @@ function checkAnswer() {
})
.then(res => res.json())
.then(res => {
const fb = document.getElementById('feedback');
fb.innerText = res.msg;
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();
fb.classList.add('correct');
stats.correct++;
stats.total++;
updateProgress();
finishTurn();
} else if (res.status === 'typo') {
feedback.innerText = res.msg;
feedback.classList.add('msg-typo');
attempts++;
checkAttempts();
fb.classList.add('typo');
// Darf nochmal probieren
} else {
feedback.innerText = res.msg;
feedback.classList.add('msg-wrong');
attempts++;
checkAttempts();
fb.classList.add('wrong');
finishTurn();
}
});
}
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';
function finishTurn() {
stats.total++;
updateProgress();
}
updateStats();
document.getElementById('btn-check').style.display = 'none';
document.getElementById('btn-next').style.display = 'block';
document.getElementById('btn-next').focus();
}
function updateProgress() {
let percent = 0;
if (stats.total > 0) {
percent = Math.round((stats.correct / stats.total) * 100);
function updateStats() {
let p = 0;
if (stats.total > 0) p = 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'; }