app/static/script.js aktualisiert
This commit is contained in:
parent
6aa8bd053f
commit
f23d309b2b
@ -1,20 +1,24 @@
|
|||||||
let currentMode = 'random';
|
let currentMode = 'random';
|
||||||
let selectedPages = [];
|
let selectedPages = [];
|
||||||
let quizQueue = [];
|
|
||||||
let currentCard = null;
|
let currentCard = null;
|
||||||
let attempts = 0;
|
let attempts = 0;
|
||||||
let stats = { correct: 0, total: 0 };
|
let stats = { correct: 0, total: 0 };
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
fetchPages();
|
fetchPages();
|
||||||
document.getElementById('answer-input').addEventListener('keypress', function (e) {
|
|
||||||
if (e.key === 'Enter') {
|
// Enter-Taste für alle Inputs
|
||||||
if (document.getElementById('next-btn').style.display !== 'none') {
|
const inputs = ['answer-input', 'input-simple', 'input-participle'];
|
||||||
nextQuestion();
|
inputs.forEach(id => {
|
||||||
} else {
|
document.getElementById(id).addEventListener('keypress', function (e) {
|
||||||
checkAnswer();
|
if (e.key === 'Enter') {
|
||||||
|
if (document.getElementById('next-btn').style.display !== 'none') {
|
||||||
|
nextQuestion();
|
||||||
|
} else {
|
||||||
|
checkAnswer();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -22,6 +26,11 @@ function setMode(mode) {
|
|||||||
currentMode = mode;
|
currentMode = mode;
|
||||||
document.querySelectorAll('.mode-select button').forEach(b => b.classList.remove('active'));
|
document.querySelectorAll('.mode-select button').forEach(b => b.classList.remove('active'));
|
||||||
document.getElementById(`btn-${mode}`).classList.add('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() {
|
function fetchPages() {
|
||||||
@ -45,114 +54,66 @@ function fetchPages() {
|
|||||||
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));
|
||||||
const disp = document.getElementById('selected-pages-display');
|
|
||||||
if (selectedPages.length === 0) disp.innerText = "Alle Seiten";
|
const display = document.getElementById('selected-pages-display');
|
||||||
else disp.innerText = `${selectedPages.length} Seite(n) ausgewählt`;
|
if (selectedPages.length === 0) display.innerText = "Alle Seiten";
|
||||||
|
else display.innerText = `Seiten: ${selectedPages.join(', ')}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
|
function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
|
||||||
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }
|
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }
|
||||||
|
|
||||||
function startQuiz() {
|
function startQuiz() {
|
||||||
fetch('/api/start', {
|
stats = { correct: 0, total: 0 };
|
||||||
method: 'POST',
|
updateProgress();
|
||||||
headers: { 'Content-Type': 'application/json' },
|
document.getElementById('setup-screen').style.display = 'none';
|
||||||
body: JSON.stringify({ pages: selectedPages, mode: currentMode })
|
document.getElementById('quiz-screen').style.display = 'flex';
|
||||||
})
|
nextQuestion();
|
||||||
.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';
|
|
||||||
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() {
|
function stopQuiz() {
|
||||||
document.getElementById('quiz-screen').style.display = 'none';
|
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
|
||||||
Loading…
x
Reference in New Issue
Block a user