englisch6a/app/static/script.js

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 => {
        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();
                    }
                }
            });
        }
    });
});

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');
            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() {
    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() { 
    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 };
    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();
}

function nextQuestion() {
    document.getElementById('check-btn').style.display = 'inline-block';
    document.getElementById('next-btn').style.display = 'none';
    const feedback = document.getElementById('feedback-msg');
    feedback.innerText = '';
    feedback.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);
    })
    .catch(err => {
        console.error(err);
        alert("Fehler beim Laden der Frage.");
        stopQuiz();
    });
}

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');

    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';
}