app/static/script.js aktualisiert
This commit is contained in:
parent
a4b1a949e1
commit
6c22425292
@ -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 = '';
|
||||
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>
|
||||
`;
|
||||
list.appendChild(div);
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => console.error("Fehler beim Laden der Seiten:", err));
|
||||
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}" checked onchange="updatePageSelection()">
|
||||
<label for="p-${p}">${p}</label>
|
||||
`;
|
||||
list.appendChild(div);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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,156 +94,138 @@ 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 })
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
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', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
.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';
|
||||
stats.total++;
|
||||
updateProgress();
|
||||
}
|
||||
function finishTurn() {
|
||||
stats.total++;
|
||||
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);
|
||||
}
|
||||
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 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})`;
|
||||
}
|
||||
|
||||
// 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'; }
|
||||
Loading…
x
Reference in New Issue
Block a user