lukas/mathquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update design

Browse Source
This commit is contained in:
Lukas Cremer
2026-01-25 22:03:40 +01:00
parent 8356ae9ebe
commit 2fdc1b0d3e
3 changed files with 243 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/app.js
View File

@@ -76,6 +76,14 @@ function renderSidebar() {
sidebar.style.display = 'block';
// Sidebar Header
const sidebarHeader = document.createElement('div');
sidebarHeader.className = 'sidebar-header';
const headerTitle = document.createElement('h2');
headerTitle.textContent = 'Aktenübersicht';
sidebarHeader.appendChild(headerTitle);
sidebar.appendChild(sidebarHeader);
chapters.forEach(chapter => {
const sidebarItem = document.createElement('div');
sidebarItem.className = `sidebar-item ${activeChapter === chapter ? 'active' : ''}`;
@@ -136,8 +144,8 @@ function renderTasks() {
taskCard.innerHTML = `
<div class="task-header">
<div class="task-title">Aufgabe</div>
<div class="task-points">⭐ ${task.points} Punkte</div>
<div class="task-title">Ermittlungsaufgabe</div>
<div class="task-points">${task.points} EP</div>
</div>
<div class="task-question">${task.question}</div>
<div class="task-input-group">
@@ -156,7 +164,7 @@ function renderTasks() {
</button>
</div>
<div class="task-status" id="status-${task.id}">
${hasAnswer && !task.isCorrect ? '❌ Falsch - versuche es nochmal!' : ''}
${hasAnswer && !task.isCorrect ? '✗ Berechnung fehlerhaft. Bitte erneut prüfen.' : ''}
</div>
`;
@@ -181,14 +189,14 @@ async function checkAnswer(taskId) {
const userAnswer = parseInt(input.value);
if (isNaN(userAnswer)) {
status.textContent = 'Bitte gib eine Zahl ein!';
status.textContent = 'Ungültige Eingabe. Bitte eine Zahl eingeben.';
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.textContent = '✓ Fall bereits abgeschlossen.';
status.className = 'task-status completed';
return;
}
@@ -211,11 +219,11 @@ async function checkAnswer(taskId) {
calculateTotalPoints();
if (data.correct) {
status.textContent = '🎉 Richtig! Super gemacht!';
status.textContent = '✓ Berechnung korrekt. Fall weiter bearbeiten.';
status.className = 'task-status success';
// Zeige Erfolgsnachricht
showMessage(`🎉 ${data.points} Quest-Punkte verdient!`, 'success');
showMessage(`✓ ${data.points} Ermittlungspunkte erhalten`, 'success');
// Konfetti-Animation und Aufgabe verschwinden lassen
const taskCard = document.getElementById(`task-${taskId}`);
@@ -231,7 +239,7 @@ async function checkAnswer(taskId) {
}, 1500);
}
} else {
status.textContent = '❌ Nicht ganz richtig. Versuch es nochmal!';
status.textContent = '✗ Berechnung fehlerhaft. Bitte erneut prüfen.';
status.className = 'task-status error';
input.focus();
}
@@ -244,7 +252,7 @@ async function checkAnswer(taskId) {
}
} catch (error) {
console.error('Fehler beim Prüfen der Antwort:', error);
status.textContent = 'Fehler beim Prüfen. Bitte versuche es erneut.';
status.textContent = 'Systemfehler. Bitte erneut versuchen.';
status.className = 'task-status error';
}
}
@@ -273,7 +281,7 @@ function updateProgress() {
// Erstelle Konfetti-Animation
function createConfetti(element) {
const colors = ['#ffd700', '#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6c5ce7'];
const colors = ['#3498db', '#2980b9', '#34495e', '#2c3e50', '#1a252f', '#27ae60', '#16a085', '#7f8c8d'];
const confettiCount = 50;
// Hole Position des Elements