119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
let currentMode = 'random';
|
|
let selectedPages = [];
|
|
let currentCard = null;
|
|
let attempts = 0;
|
|
let stats = { correct: 0, total: 0 };
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
fetchPages();
|
|
|
|
// 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();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
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() {
|
|
fetch('/api/pages')
|
|
.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);
|
|
});
|
|
});
|
|
}
|
|
|
|
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(', ')}`;
|
|
}
|
|
|
|
function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
|
|
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }
|
|
|
|
function startQuiz() {
|
|
stats = { correct: 0, total: 0 };
|
|
updateProgress();
|
|
document.getElementById('setup-screen').style.display = 'none';
|
|
document.getElementById('quiz-screen').style.display = 'flex';
|
|
nextQuestion();
|
|
}
|
|
|
|
function stopQuiz() {
|
|
document.getElementById('quiz-screen').style.display = 'none';
|
|
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 |