add chapters and deploy script
This commit is contained in:
Lukas Cremer
144
public/app.js
144
public/app.js
@@ -4,11 +4,15 @@ const API_BASE = '';
|
||||
// Globale Variablen
|
||||
let totalPoints = 0;
|
||||
let tasks = [];
|
||||
let chapters = [];
|
||||
let activeChapter = null;
|
||||
|
||||
// Initialisiere die App
|
||||
async function init() {
|
||||
await loadTasks();
|
||||
extractChapters();
|
||||
calculateTotalPoints();
|
||||
renderTabs();
|
||||
renderTasks();
|
||||
updateProgress();
|
||||
}
|
||||
@@ -33,17 +37,79 @@ async function loadTasks() {
|
||||
}
|
||||
}
|
||||
|
||||
// Extrahiere alle Chapters aus den Tasks
|
||||
function extractChapters() {
|
||||
const chapterSet = new Set();
|
||||
tasks.forEach(task => {
|
||||
if (task.chapter) {
|
||||
chapterSet.add(task.chapter);
|
||||
}
|
||||
});
|
||||
chapters = Array.from(chapterSet).sort();
|
||||
|
||||
// Setze ersten Chapter als aktiv, falls vorhanden
|
||||
if (chapters.length > 0 && !activeChapter) {
|
||||
activeChapter = chapters[0];
|
||||
} else if (chapters.length === 0) {
|
||||
// Wenn keine Chapters vorhanden, zeige alle Tasks
|
||||
activeChapter = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Rendere Tabs für alle Chapters
|
||||
function renderTabs() {
|
||||
const tabsContainer = document.getElementById('tabsContainer');
|
||||
tabsContainer.innerHTML = '';
|
||||
|
||||
// Zeige Tabs nur an, wenn es Chapters gibt
|
||||
if (chapters.length === 0) {
|
||||
tabsContainer.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
tabsContainer.style.display = 'flex';
|
||||
|
||||
chapters.forEach(chapter => {
|
||||
const tabButton = document.createElement('button');
|
||||
tabButton.className = `tab-button ${activeChapter === chapter ? 'active' : ''}`;
|
||||
tabButton.textContent = chapter;
|
||||
tabButton.onclick = () => switchChapter(chapter);
|
||||
tabsContainer.appendChild(tabButton);
|
||||
});
|
||||
}
|
||||
|
||||
// Wechsle zu einem anderen Chapter
|
||||
function switchChapter(chapter) {
|
||||
activeChapter = chapter;
|
||||
renderTabs();
|
||||
renderTasks();
|
||||
}
|
||||
|
||||
// Hole Tasks für das aktive Chapter
|
||||
function getTasksForActiveChapter() {
|
||||
if (!activeChapter) {
|
||||
return tasks;
|
||||
}
|
||||
return tasks.filter(task => task.chapter === activeChapter);
|
||||
}
|
||||
|
||||
// Rendere Aufgaben
|
||||
function renderTasks() {
|
||||
const container = document.getElementById('taskContainer');
|
||||
container.innerHTML = '';
|
||||
|
||||
tasks.forEach(task => {
|
||||
const tasksToShow = getTasksForActiveChapter();
|
||||
|
||||
tasksToShow.forEach(task => {
|
||||
// Überspringe bereits richtig beantwortete Aufgaben (werden nicht mehr angezeigt)
|
||||
if (task.isCorrect === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
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 = `
|
||||
@@ -59,25 +125,20 @@ function renderTasks() {
|
||||
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!' : ''}
|
||||
${hasAnswer && !task.isCorrect ? '❌ Falsch - versuche es nochmal!' : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (isCompleted) {
|
||||
const statusEl = taskCard.querySelector('.task-status');
|
||||
statusEl.className = 'task-status success';
|
||||
} else if (hasAnswer && !isCompleted) {
|
||||
if (hasAnswer && !task.isCorrect) {
|
||||
const statusEl = taskCard.querySelector('.task-status');
|
||||
statusEl.className = 'task-status error';
|
||||
}
|
||||
@@ -124,27 +185,41 @@ async function checkAnswer(taskId) {
|
||||
|
||||
// Lade Tasks neu, um die gespeicherte Antwort zu erhalten
|
||||
await loadTasks();
|
||||
extractChapters();
|
||||
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');
|
||||
|
||||
// Konfetti-Animation und Aufgabe verschwinden lassen
|
||||
const taskCard = document.getElementById(`task-${taskId}`);
|
||||
if (taskCard) {
|
||||
createConfetti(taskCard);
|
||||
taskCard.classList.add('confetti-animation');
|
||||
|
||||
// Nach Animation die Aufgabe entfernen
|
||||
setTimeout(() => {
|
||||
renderTabs();
|
||||
renderTasks();
|
||||
updateProgress();
|
||||
}, 1500);
|
||||
}
|
||||
} 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();
|
||||
// Rendere Tabs und Tasks neu, um den aktuellen Status anzuzeigen (nur wenn nicht korrekt)
|
||||
if (!data.correct) {
|
||||
renderTabs();
|
||||
renderTasks();
|
||||
updateProgress();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Prüfen der Antwort:', error);
|
||||
status.textContent = 'Fehler beim Prüfen. Bitte versuche es erneut.';
|
||||
@@ -174,6 +249,43 @@ function updateProgress() {
|
||||
progressText.textContent = `${totalPoints} / ${maxPoints}`;
|
||||
}
|
||||
|
||||
// Erstelle Konfetti-Animation
|
||||
function createConfetti(element) {
|
||||
const colors = ['#ffd700', '#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6c5ce7'];
|
||||
const confettiCount = 50;
|
||||
|
||||
// Hole Position des Elements
|
||||
const rect = element.getBoundingClientRect();
|
||||
const container = element.closest('.container') || document.body;
|
||||
|
||||
for (let i = 0; i < confettiCount; i++) {
|
||||
const confetti = document.createElement('div');
|
||||
confetti.className = 'confetti';
|
||||
|
||||
// Zufällige Position relativ zum Element
|
||||
const randomX = (Math.random() - 0.5) * 2; // -1 bis 1
|
||||
confetti.style.left = (rect.left + rect.width / 2 + (Math.random() - 0.5) * rect.width) + 'px';
|
||||
confetti.style.top = (rect.top - 10) + 'px';
|
||||
confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
|
||||
confetti.style.width = (Math.random() * 8 + 6) + 'px';
|
||||
confetti.style.height = (Math.random() * 8 + 6) + 'px';
|
||||
confetti.style.animationDuration = (Math.random() * 0.8 + 0.7) + 's';
|
||||
confetti.style.animationDelay = Math.random() * 0.3 + 's';
|
||||
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0%';
|
||||
confetti.style.setProperty('--random-x', randomX);
|
||||
confetti.style.position = 'fixed';
|
||||
|
||||
document.body.appendChild(confetti);
|
||||
|
||||
// Entferne Konfetti nach Animation
|
||||
setTimeout(() => {
|
||||
if (confetti.parentNode) {
|
||||
confetti.remove();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
// Zeige Nachricht
|
||||
function showMessage(text, type) {
|
||||
const message = document.getElementById('message');
|
||||
|
||||
@@ -26,6 +26,9 @@
|
||||
|
||||
<div class="task-section">
|
||||
<h2>Mathe-Aufgaben</h2>
|
||||
<div class="tabs-container" id="tabsContainer">
|
||||
<!-- Tabs werden hier dynamisch eingefügt -->
|
||||
</div>
|
||||
<div id="taskContainer" class="task-container">
|
||||
<!-- Aufgaben werden hier dynamisch eingefügt -->
|
||||
</div>
|
||||
|
||||
@@ -100,6 +100,45 @@ h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||||
color: #333;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
font-size: 1.1em;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-family: 'Comic Sans MS', cursive;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.tab-button.active:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.task-container {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
@@ -110,7 +149,9 @@ h1 {
|
||||
padding: 25px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
transition: transform 0.2s, box-shadow 0.2s, opacity 0.5s ease, transform 0.5s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-card:hover {
|
||||
@@ -118,6 +159,46 @@ h1 {
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.task-card.confetti-animation {
|
||||
animation: confettiFadeOut 1.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes confettiFadeOut {
|
||||
0% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0) rotate(10deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.confetti {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffd700;
|
||||
animation: confettiFall linear forwards;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes confettiFall {
|
||||
0% {
|
||||
transform: translateY(0) translateX(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(400px) translateX(calc(var(--random-x, 0) * 100px)) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.task-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Reference in New Issue
Block a user