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 15:47:56 +00:00
parent f23d309b2b
commit 9121d86c7f
1 changed files with 147 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
app/static/script.js
View File

@ -10,7 +10,9 @@ 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) {
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();
@ -19,6 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
});
}
});
});
@ -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,6 +36,7 @@ function fetchPages() {
.then(res => res.json())
.then(pages => {
const list = document.getElementById('page-list');
if(list) {
list.innerHTML = '';
pages.forEach(p => {
const div = document.createElement('div');
@ -48,7 +47,9 @@ function fetchPages() {
`;
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';
}