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.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 => { chapters.forEach(chapter => {
const sidebarItem = document.createElement('div'); const sidebarItem = document.createElement('div');
sidebarItem.className = `sidebar-item ${activeChapter === chapter ? 'active' : ''}`; sidebarItem.className = `sidebar-item ${activeChapter === chapter ? 'active' : ''}`;
@@ -136,8 +144,8 @@ function renderTasks() {
taskCard.innerHTML = ` taskCard.innerHTML = `
<div class="task-header"> <div class="task-header">
<div class="task-title">Aufgabe</div> <div class="task-title">Ermittlungsaufgabe</div>
<div class="task-points">⭐ ${task.points} Punkte</div> <div class="task-points">${task.points} EP</div>
</div> </div>
<div class="task-question">${task.question}</div> <div class="task-question">${task.question}</div>
<div class="task-input-group"> <div class="task-input-group">
@@ -156,7 +164,7 @@ function renderTasks() {
</button> </button>
</div> </div>
<div class="task-status" id="status-${task.id}"> <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> </div>
`; `;
@@ -181,14 +189,14 @@ async function checkAnswer(taskId) {
const userAnswer = parseInt(input.value); const userAnswer = parseInt(input.value);
if (isNaN(userAnswer)) { if (isNaN(userAnswer)) {
status.textContent = 'Bitte gib eine Zahl ein!'; status.textContent = 'Ungültige Eingabe. Bitte eine Zahl eingeben.';
status.className = 'task-status error'; status.className = 'task-status error';
return; return;
} }
// Prüfe ob Aufgabe bereits korrekt beantwortet wurde // Prüfe ob Aufgabe bereits korrekt beantwortet wurde
if (task.isCorrect === true) { if (task.isCorrect === true) {
status.textContent = '✅ Diese Aufgabe wurde bereits richtig beantwortet!'; status.textContent = '✓ Fall bereits abgeschlossen.';
status.className = 'task-status completed'; status.className = 'task-status completed';
return; return;
} }
@@ -211,11 +219,11 @@ async function checkAnswer(taskId) {
calculateTotalPoints(); calculateTotalPoints();
if (data.correct) { if (data.correct) {
status.textContent = '🎉 Richtig! Super gemacht!'; status.textContent = '✓ Berechnung korrekt. Fall weiter bearbeiten.';
status.className = 'task-status success'; status.className = 'task-status success';
// Zeige Erfolgsnachricht // Zeige Erfolgsnachricht
showMessage(`🎉 ${data.points} Quest-Punkte verdient!`, 'success'); showMessage(`✓ ${data.points} Ermittlungspunkte erhalten`, 'success');
// Konfetti-Animation und Aufgabe verschwinden lassen // Konfetti-Animation und Aufgabe verschwinden lassen
const taskCard = document.getElementById(`task-${taskId}`); const taskCard = document.getElementById(`task-${taskId}`);
@@ -231,7 +239,7 @@ async function checkAnswer(taskId) {
}, 1500); }, 1500);
} }
} else { } else {
status.textContent = '❌ Nicht ganz richtig. Versuch es nochmal!'; status.textContent = '✗ Berechnung fehlerhaft. Bitte erneut prüfen.';
status.className = 'task-status error'; status.className = 'task-status error';
input.focus(); input.focus();
} }
@@ -244,7 +252,7 @@ async function checkAnswer(taskId) {
} }
} catch (error) { } catch (error) {
console.error('Fehler beim Prüfen der Antwort:', 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'; status.className = 'task-status error';
} }
} }
@@ -273,7 +281,7 @@ function updateProgress() {
// Erstelle Konfetti-Animation // Erstelle Konfetti-Animation
function createConfetti(element) { 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; const confettiCount = 50;
// Hole Position des Elements // Hole Position des Elements

22
public/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathQuest - Mathe lernen mit Quest-Punkten!</title> <title>Kriminalfälle - Mathematische Ermittlungen</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
@@ -14,19 +14,23 @@
<div class="main-content"> <div class="main-content">
<div class="container"> <div class="container">
<header> <header>
<h1>🌟 MathQuest 🌟</h1> <div class="header-content">
<div class="points-display"> <h1>Kriminalfälle - Mathematische Ermittlungen</h1>
<div class="points-label">Quest-Punkte</div> <div class="points-display">
<div class="points-value" id="totalPoints">0</div> <div class="points-label">Ermittlungspunkte</div>
<div class="points-value" id="totalPoints">0</div>
</div>
</div> </div>
</header> </header>
<div class="progress-section"> <div class="progress-section">
<div class="progress-label">Fortschritt</div> <div class="progress-content">
<div class="progress-bar-container"> <div class="progress-label">Ermittlungsfortschritt</div>
<div class="progress-bar" id="progressBar"></div> <div class="progress-bar-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="progress-text" id="progressText">0 / 100</div>
</div> </div>
<div class="progress-text" id="progressText">0 / 100</div>
</div> </div>
<div class="task-section"> <div class="task-section">

376
public/style.css
View File

@@ -5,177 +5,212 @@
} }
body { body {
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive, sans-serif; font-family: 'Arial', 'Helvetica', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #2c3e50;
min-height: 100vh; min-height: 100vh;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #333; color: #1a1a1a;
} }
.app-wrapper { .app-wrapper {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
gap: 20px; gap: 0;
padding: 20px; padding: 0;
} }
.sidebar { .sidebar {
width: 280px; width: 280px;
background: white; background: #34495e;
border-radius: 20px; border-right: 3px solid #1a252f;
padding: 20px; padding: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
position: sticky; position: sticky;
top: 20px; top: 0;
height: fit-content; height: 100vh;
max-height: calc(100vh - 40px);
overflow-y: auto; overflow-y: auto;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}
.sidebar-header {
background: #1a252f;
padding: 20px;
border-bottom: 2px solid #0f1419;
}
.sidebar-header h2 {
color: #ecf0f1;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
} }
.sidebar-item { .sidebar-item {
padding: 15px; padding: 15px 20px;
margin-bottom: 10px;
border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: background-color 0.2s;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-bottom: 1px solid #2c3e50;
border: 2px solid transparent; background: #34495e;
color: #ecf0f1;
} }
.sidebar-item:hover { .sidebar-item:hover {
transform: translateX(5px); background: #3d566e;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
} }
.sidebar-item.active { .sidebar-item.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #1a252f;
color: white; border-left: 4px solid #3498db;
border-color: rgba(255, 255, 255, 0.3); color: #ecf0f1;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); font-weight: bold;
} }
.sidebar-item-title { .sidebar-item-title {
font-size: 1.1em; font-size: 0.95em;
font-weight: bold; line-height: 1.4;
margin-bottom: 5px;
} }
.main-content { .main-content {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
background: #ecf0f1;
} }
.container { .container {
max-width: 100%; max-width: 100%;
background: white; background: #ffffff;
border-radius: 20px; padding: 0;
padding: 30px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); min-height: 100vh;
} }
header { header {
text-align: center; background: #1a252f;
margin-bottom: 30px; padding: 25px 40px;
border-bottom: 4px solid #3498db;
color: #ecf0f1;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
} }
h1 { h1 {
font-size: 2.5em; font-size: 1.8em;
color: #667eea; color: #ecf0f1;
margin-bottom: 20px; margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
} }
.points-display { .points-display {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); background: #2c3e50;
padding: 20px; padding: 15px 25px;
border-radius: 15px; border: 2px solid #3498db;
color: white; border-radius: 4px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.points-label {
font-size: 1.2em;
margin-bottom: 10px;
}
.points-value {
font-size: 3em;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.progress-section {
margin-bottom: 30px;
text-align: center; text-align: center;
} }
.points-label {
font-size: 0.85em;
color: #bdc3c7;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.points-value {
font-size: 2em;
font-weight: bold;
color: #3498db;
}
.progress-section {
background: #34495e;
padding: 20px 40px;
border-bottom: 2px solid #2c3e50;
}
.progress-content {
max-width: 1200px;
margin: 0 auto;
}
.progress-label { .progress-label {
font-size: 1.3em; font-size: 0.9em;
color: #667eea; color: #ecf0f1;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
} }
.progress-bar-container { .progress-bar-container {
width: 100%; width: 100%;
height: 30px; height: 25px;
background: #e0e0e0; background: #2c3e50;
border-radius: 15px; border: 1px solid #1a252f;
overflow: hidden; overflow: hidden;
margin-bottom: 10px; margin-bottom: 8px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
} }
.progress-bar { .progress-bar {
height: 100%; height: 100%;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); background: #3498db;
width: 0%; width: 0%;
transition: width 0.5s ease; transition: width 0.5s ease;
border-radius: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} }
.progress-text { .progress-text {
font-size: 1.1em; font-size: 0.9em;
color: #666; color: #bdc3c7;
font-weight: bold; font-weight: bold;
} }
.task-section { .task-section {
margin-top: 30px; padding: 30px 40px;
max-width: 1200px;
margin: 0 auto;
} }
.chapter-description { .chapter-description {
background: linear-gradient(135deg, #e8f5e9 0%, #fff3e0 100%); background: #f8f9fa;
padding: 20px; padding: 20px 25px;
border-radius: 15px; margin-bottom: 30px;
margin-bottom: 25px; font-size: 1em;
font-size: 1.1em; line-height: 1.7;
line-height: 1.6; color: #2c3e50;
color: #555; border-left: 4px solid #3498db;
border-left: 4px solid #667eea; border-top: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} }
.task-container { .task-container {
display: grid; display: grid;
gap: 20px; gap: 25px;
} }
.task-card { .task-card {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); background: #ffffff;
padding: 25px; padding: 30px;
border-radius: 15px; border: 2px solid #e0e0e0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-left: 4px solid #3498db;
transition: transform 0.2s, box-shadow 0.2s, opacity 0.5s ease, transform 0.5s ease; transition: border-color 0.2s, box-shadow 0.2s;
position: relative; position: relative;
overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
} }
.task-card:hover { .task-card:hover {
transform: translateY(-3px); border-color: #3498db;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
.task-card.confetti-animation { .task-card.confetti-animation {
@@ -184,24 +219,19 @@ h1 {
@keyframes confettiFadeOut { @keyframes confettiFadeOut {
0% { 0% {
transform: scale(1) rotate(0deg);
opacity: 1; opacity: 1;
} }
50% {
transform: scale(1.1) rotate(5deg);
opacity: 0.8;
}
100% { 100% {
transform: scale(0) rotate(10deg);
opacity: 0; opacity: 0;
transform: translateY(-20px);
} }
} }
.confetti { .confetti {
position: absolute; position: absolute;
width: 10px; width: 8px;
height: 10px; height: 8px;
background: #ffd700; background: #3498db;
animation: confettiFall linear forwards; animation: confettiFall linear forwards;
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
@@ -222,106 +252,112 @@ h1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e0e0e0;
} }
.task-title { .task-title {
font-size: 1.3em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
color: #333; color: #1a252f;
text-transform: uppercase;
letter-spacing: 1px;
} }
.task-points { .task-points {
background: #ffd700; background: #34495e;
color: #333; color: #ecf0f1;
padding: 5px 15px; padding: 6px 15px;
border-radius: 20px; border-radius: 2px;
font-weight: bold; font-weight: bold;
font-size: 1.1em; font-size: 0.9em;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); border: 1px solid #2c3e50;
} }
.task-question { .task-question {
font-size: 1.5em; font-size: 1.15em;
text-align: center; margin: 25px 0;
margin: 20px 0; color: #2c3e50;
color: #333; line-height: 1.7;
font-weight: bold;
white-space: pre-line; white-space: pre-line;
font-weight: normal;
} }
.task-input-group { .task-input-group {
display: flex; display: flex;
gap: 10px; gap: 15px;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
margin-bottom: 15px; margin: 25px 0 15px 0;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
} }
.task-input { .task-input {
font-size: 1.5em; font-size: 1.2em;
padding: 10px 15px; padding: 12px 18px;
border: 3px solid #667eea; border: 2px solid #bdc3c7;
border-radius: 10px; border-radius: 2px;
width: 120px; width: 150px;
text-align: center; text-align: center;
font-family: 'Comic Sans MS', cursive; font-family: 'Arial', sans-serif;
font-weight: bold; font-weight: bold;
background: #ffffff;
color: #1a1a1a;
} }
.task-input:focus { .task-input:focus {
outline: none; outline: none;
border-color: #764ba2; border-color: #3498db;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.3); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
} }
.task-button { .task-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #3498db;
color: white; color: white;
border: none; border: none;
padding: 12px 25px; padding: 12px 30px;
font-size: 1.2em; font-size: 1em;
border-radius: 10px; border-radius: 2px;
cursor: pointer; cursor: pointer;
font-family: 'Comic Sans MS', cursive; font-family: 'Arial', sans-serif;
font-weight: bold; font-weight: bold;
transition: transform 0.2s, box-shadow 0.2s; text-transform: uppercase;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); letter-spacing: 1px;
transition: background-color 0.2s;
} }
.task-button:hover { .task-button:hover {
transform: translateY(-2px); background: #2980b9;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
} }
.task-button:active { .task-button:active {
transform: translateY(0); background: #21618c;
} }
.task-button:disabled { .task-button:disabled {
background: #ccc; background: #95a5a6;
cursor: not-allowed; cursor: not-allowed;
transform: none;
} }
.task-status { .task-status {
text-align: center; margin-top: 15px;
font-size: 1.1em; font-size: 1em;
font-weight: bold; font-weight: bold;
margin-top: 10px;
min-height: 25px; min-height: 25px;
} }
.task-status.success { .task-status.success {
color: #4caf50; color: #27ae60;
} }
.task-status.error { .task-status.error {
color: #f44336; color: #e74c3c;
} }
.task-status.completed { .task-status.completed {
color: #ff9800; color: #f39c12;
} }
.message { .message {
@@ -329,13 +365,14 @@ h1 {
top: 20px; top: 20px;
right: 20px; right: 20px;
padding: 15px 25px; padding: 15px 25px;
border-radius: 10px; border-radius: 2px;
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1em;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transform: translateX(400px); transform: translateX(400px);
transition: transform 0.3s ease; transition: transform 0.3s ease;
z-index: 1000; z-index: 1000;
border: 2px solid;
} }
.message.show { .message.show {
@@ -343,70 +380,81 @@ h1 {
} }
.message.success { .message.success {
background: #4caf50; background: #27ae60;
color: white; color: white;
border-color: #229954;
} }
.message.error { .message.error {
background: #f44336; background: #e74c3c;
color: white; color: white;
border-color: #c0392b;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.app-wrapper { .app-wrapper {
flex-direction: column; flex-direction: column;
padding: 10px;
} }
.sidebar { .sidebar {
width: 100%; width: 100%;
position: relative; position: relative;
top: 0; height: auto;
max-height: none; max-height: 300px;
display: flex; border-right: none;
gap: 10px; border-bottom: 3px solid #1a252f;
overflow-x: auto;
overflow-y: hidden;
padding: 15px;
} }
.sidebar-item { .sidebar-item {
min-width: 200px; border-bottom: 1px solid #2c3e50;
margin-bottom: 0; }
.header-content {
flex-direction: column;
gap: 20px;
align-items: flex-start;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.container { .container {
padding: 0;
}
header {
padding: 20px; padding: 20px;
} }
h1 { h1 {
font-size: 2em; font-size: 1.4em;
} }
.points-value { .points-value {
font-size: 2.5em; font-size: 1.5em;
}
.task-section {
padding: 20px;
} }
.task-input-group { .task-input-group {
flex-direction: column; flex-direction: column;
align-items: stretch;
}
.task-input {
width: 100%;
} }
.task-button { .task-button {
width: 100%; width: 100%;
} }
.sidebar {
padding: 10px;
}
.sidebar-item { .sidebar-item {
min-width: 180px; padding: 12px 15px;
padding: 12px;
} }
.sidebar-item-title { .sidebar-item-title {
font-size: 1em; font-size: 0.9em;
} }
} }