initial page

public/app.js

@@ -0,0 +1,202 @@
+// 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);
+            }
+        }
+    });
+});