mathquest/public/app.js

// API Base URL
const API_BASE = '';

// Globale Variablen
let totalPoints = 0;
let tasks = [];

// Initialisiere die App
async function init() {
    await loadTasks();
    calculateTotalPoints();
    renderTasks();
    updateProgress();
}

// Berechne Gesamtpunktzahl aus abgeschlossenen Aufgaben
function calculateTotalPoints() {
    totalPoints = tasks
        .filter(task => task.isCorrect === true)
        .reduce((sum, task) => sum + (task.points || 0), 0);
    updatePointsDisplay();
}

// Lade Aufgaben vom Server
async function loadTasks() {
    try {
        const response = await fetch(`${API_BASE}/api/tasks`);
        const data = await response.json();
        tasks = data.tasks || [];
    } catch (error) {
        console.error('Fehler beim Laden der Aufgaben:', error);
        tasks = [];
    }
}

// Rendere Aufgaben
function renderTasks() {
    const container = document.getElementById('taskContainer');
    container.innerHTML = '';

    tasks.forEach(task => {
        const taskCard = document.createElement('div');
        taskCard.className = 'task-card';
        taskCard.id = `task-${task.id}`;

        const isCompleted = task.isCorrect === true;
        const hasAnswer = task.userAnswer !== undefined;

        taskCard.innerHTML = `
            <div class="task-header">
                <div class="task-title">Aufgabe</div>
                <div class="task-points">⭐ ${task.points} Punkte</div>
            </div>
            <div class="task-question">${task.question}</div>
            <div class="task-input-group">
                <input 
                    type="number" 
                    class="task-input" 
                    id="input-${task.id}"
                    placeholder="?"
                    value="${hasAnswer ? task.userAnswer : ''}"
                    ${isCompleted ? 'disabled' : ''}
                >
                <button 
                    class="task-button" 
                    onclick="checkAnswer('${task.id}')"
                    ${isCompleted ? 'disabled' : ''}
                >
                    Prüfen
                </button>
            </div>
            <div class="task-status" id="status-${task.id}">
                ${isCompleted ? '✅ Richtig beantwortet!' : hasAnswer && !isCompleted ? '❌ Falsch - versuche es nochmal!' : ''}
            </div>
        `;

        if (isCompleted) {
            const statusEl = taskCard.querySelector('.task-status');
            statusEl.className = 'task-status success';
        } else if (hasAnswer && !isCompleted) {
            const statusEl = taskCard.querySelector('.task-status');
            statusEl.className = 'task-status error';
        }

        container.appendChild(taskCard);
    });
}

// Prüfe Antwort
async function checkAnswer(taskId) {
    const task = tasks.find(t => t.id === taskId);
    if (!task) return;

    const input = document.getElementById(`input-${taskId}`);
    const status = document.getElementById(`status-${taskId}`);
    const button = input.nextElementSibling;

    const userAnswer = parseInt(input.value);

    if (isNaN(userAnswer)) {
        status.textContent = 'Bitte gib eine Zahl ein!';
        status.className = 'task-status error';
        return;
    }

    // Prüfe ob Aufgabe bereits korrekt beantwortet wurde
    if (task.isCorrect === true) {
        status.textContent = '✅ Diese Aufgabe wurde bereits richtig beantwortet!';
        status.className = 'task-status completed';
        return;
    }

    // Sende Antwort an Backend zur Prüfung
    try {
        const response = await fetch(`${API_BASE}/api/check-answer`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ taskId, answer: userAnswer })
        });

        const data = await response.json();

        // Lade Tasks neu, um die gespeicherte Antwort zu erhalten
        await loadTasks();
        calculateTotalPoints();

        if (data.correct) {
            status.textContent = '🎉 Richtig! Super gemacht!';
            status.className = 'task-status success';

            // Deaktiviere Input und Button
            input.disabled = true;
            button.disabled = true;

            // Zeige Erfolgsnachricht
            showMessage(`🎉 ${data.points} Quest-Punkte verdient!`, 'success');
        } else {
            status.textContent = '❌ Nicht ganz richtig. Versuch es nochmal!';
            status.className = 'task-status error';
            input.focus();
        }

        // Rendere Tasks neu, um den aktuellen Status anzuzeigen
        renderTasks();
        updateProgress();
    } catch (error) {
        console.error('Fehler beim Prüfen der Antwort:', error);
        status.textContent = 'Fehler beim Prüfen. Bitte versuche es erneut.';
        status.className = 'task-status error';
    }
}

// Aktualisiere Punkte-Anzeige
function updatePointsDisplay() {
    document.getElementById('totalPoints').textContent = totalPoints;
}

// Berechne maximale mögliche Punkte (Summe aller Tasks)
function calculateMaxPoints() {
    return tasks.reduce((sum, task) => sum + (task.points || 0), 0);
}

// Aktualisiere Progress-Balken
function updateProgress() {
    const maxPoints = calculateMaxPoints();
    const percentage = maxPoints > 0 ? Math.min((totalPoints / maxPoints) * 100, 100) : 0;
    
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');
    
    progressBar.style.width = `${percentage}%`;
    progressText.textContent = `${totalPoints} / ${maxPoints}`;
}

// Zeige Nachricht
function showMessage(text, type) {
    const message = document.getElementById('message');
    message.textContent = text;
    message.className = `message ${type} show`;

    setTimeout(() => {
        message.classList.remove('show');
    }, 3000);
}

// Enter-Taste für Input-Felder
document.addEventListener('DOMContentLoaded', () => {
    init();
    
    // Event Listener für Enter-Taste
    document.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            const input = document.activeElement;
            if (input && input.classList.contains('task-input')) {
                const taskId = input.id.replace('input-', '');
                checkAnswer(taskId);
            }
        }
    });
});