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 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 = '';
|
||||||
|
|
||||||
|
// Auto-select logic: Select all by default
|
||||||
|
selectedPages = pages;
|
||||||
|
updatePageDisplay();
|
||||||
|
|
||||||
pages.forEach(p => {
|
pages.forEach(p => {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'page-item';
|
div.className = 'page-item';
|
||||||
div.innerHTML = `
|
div.innerHTML = `
|
||||||
<input type="checkbox" id="p-${p}" value="${p}" onchange="updatePageSelection()">
|
<input type="checkbox" id="p-${p}" value="${p}" checked onchange="updatePageSelection()">
|
||||||
<label for="p-${p}">S. ${p}</label>
|
<label for="p-${p}">${p}</label>
|
||||||
`;
|
`;
|
||||||
list.appendChild(div);
|
list.appendChild(div);
|
||||||
});
|
});
|
||||||
}
|
});
|
||||||
})
|
|
||||||
.catch(err => console.error("Fehler beim Laden der Seiten:", err));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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) {
|
|
||||||
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++;
|
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() {
|
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'; }
|
||||||
Loading…
x
Reference in New Issue
Block a user