englisch6a/app/static/script.js

let currentMode = 'random';
let selectedPages = [];
let quizQueue = [];
let currentCard = null;
let attempts = 0;
let stats = { correct: 0, total: 0 };

document.addEventListener('DOMContentLoaded', () => {
    fetchPages();
    document.getElementById('answer-input').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');
}

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 disp = document.getElementById('selected-pages-display');
    if (selectedPages.length === 0) disp.innerText = "Alle Seiten";
    else disp.innerText = `${selectedPages.length} Seite(n) ausgewählt`;
}

function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }

function startQuiz() {
    fetch('/api/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ pages: selectedPages, mode: currentMode })
    })
    .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() {
    document.getElementById('quiz-screen').style.display = 'none';
    document.getElementById('setup-screen').style.display = 'block';
}