app/static/script.js aktualisiert
This commit is contained in:
parent
f23d309b2b
commit
9121d86c7f
@ -10,15 +10,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Enter-Taste für alle Inputs
|
||||
const inputs = ['answer-input', 'input-simple', 'input-participle'];
|
||||
inputs.forEach(id => {
|
||||
document.getElementById(id).addEventListener('keypress', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
if (document.getElementById('next-btn').style.display !== 'none') {
|
||||
nextQuestion();
|
||||
} else {
|
||||
checkAnswer();
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -26,11 +29,6 @@ function setMode(mode) {
|
||||
currentMode = mode;
|
||||
document.querySelectorAll('.mode-select button').forEach(b => b.classList.remove('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() {
|
||||
@ -38,17 +36,20 @@ function fetchPages() {
|
||||
.then(res => res.json())
|
||||
.then(pages => {
|
||||
const list = document.getElementById('page-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);
|
||||
});
|
||||
});
|
||||
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));
|
||||
}
|
||||
|
||||
function updatePageSelection() {
|
||||
@ -60,8 +61,15 @@ function updatePageSelection() {
|
||||
else display.innerText = `Seiten: ${selectedPages.join(', ')}`;
|
||||
}
|
||||
|
||||
function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
|
||||
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }
|
||||
function openPageOverlay() {
|
||||
const overlay = document.getElementById('overlay');
|
||||
if(overlay) overlay.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeOverlay() {
|
||||
const overlay = document.getElementById('overlay');
|
||||
if(overlay) overlay.style.display = 'none';
|
||||
}
|
||||
|
||||
function startQuiz() {
|
||||
stats = { correct: 0, total: 0 };
|
||||
@ -74,14 +82,15 @@ function startQuiz() {
|
||||
function stopQuiz() {
|
||||
document.getElementById('quiz-screen').style.display = 'none';
|
||||
document.getElementById('setup-screen').style.display = 'flex';
|
||||
fetchPages(); // Seiten neu laden falls was dazu kam
|
||||
fetchPages();
|
||||
}
|
||||
|
||||
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 = '';
|
||||
const feedback = document.getElementById('feedback-msg');
|
||||
feedback.innerText = '';
|
||||
feedback.className = '';
|
||||
|
||||
// Inputs leeren
|
||||
document.getElementById('answer-input').value = '';
|
||||
@ -105,6 +114,11 @@ function nextQuestion() {
|
||||
}
|
||||
currentCard = data;
|
||||
renderCard(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
alert("Fehler beim Laden der Frage.");
|
||||
stopQuiz();
|
||||
});
|
||||
}
|
||||
|
||||
@ -116,4 +130,107 @@ function renderCard(card) {
|
||||
const standardInput = document.getElementById('answer-input');
|
||||
const verbInputs = document.getElementById('verb-inputs');
|
||||
|
||||
hint.innerText
|
||||
if(hint) 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})`;
|
||||
|
||||
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;
|
||||
|
||||
standardInput.style.display = 'block';
|
||||
verbInputs.style.display = 'none';
|
||||
standardInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function checkAnswer() {
|
||||
const feedback = document.getElementById('feedback-msg');
|
||||
|
||||
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
|
||||
};
|
||||
} else {
|
||||
payload = {
|
||||
type: 'vocab',
|
||||
input: document.getElementById('answer-input').value,
|
||||
correct: currentCard.answer
|
||||
};
|
||||
}
|
||||
|
||||
fetch('/api/check', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
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();
|
||||
stats.correct++;
|
||||
stats.total++;
|
||||
updateProgress();
|
||||
} 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');
|
||||
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 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';
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user