update tasks and sidebar

public/app.js

@@ -5,6 +5,7 @@ const API_BASE = '';
 let totalPoints = 0;
 let tasks = [];
 let chapters = [];
+let chapterDescriptions = {}; // Map von chapter name zu description
 let activeChapter = null;
 
 // Initialisiere die App
@@ -12,7 +13,7 @@ async function init() {
     await loadTasks();
     extractChapters();
     calculateTotalPoints();
-    renderTabs();
+    renderSidebar();
     renderTasks();
     updateProgress();
 }
@@ -40,9 +41,15 @@ async function loadTasks() {
 // Extrahiere alle Chapters aus den Tasks
 function extractChapters() {
     const chapterSet = new Set();
+    chapterDescriptions = {};
+    
     tasks.forEach(task => {
         if (task.chapter) {
             chapterSet.add(task.chapter);
+            // Speichere die erste gefundene Beschreibung für jedes Kapitel
+            if (task.chapterDescription && !chapterDescriptions[task.chapter]) {
+                chapterDescriptions[task.chapter] = task.chapterDescription;
+            }
         }
     });
     chapters = Array.from(chapterSet).sort();
@@ -56,32 +63,37 @@ function extractChapters() {
     }
 }
 
-// Rendere Tabs für alle Chapters
-function renderTabs() {
-    const tabsContainer = document.getElementById('tabsContainer');
-    tabsContainer.innerHTML = '';
+// Rendere Sidebar für alle Chapters
+function renderSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    sidebar.innerHTML = '';
 
-    // Zeige Tabs nur an, wenn es Chapters gibt
+    // Zeige Sidebar nur an, wenn es Chapters gibt
     if (chapters.length === 0) {
-        tabsContainer.style.display = 'none';
+        sidebar.style.display = 'none';
         return;
     }
 
-    tabsContainer.style.display = 'flex';
+    sidebar.style.display = 'block';
 
     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);
+        const sidebarItem = document.createElement('div');
+        sidebarItem.className = `sidebar-item ${activeChapter === chapter ? 'active' : ''}`;
+        sidebarItem.onclick = () => switchChapter(chapter);
+        
+        const title = document.createElement('div');
+        title.className = 'sidebar-item-title';
+        title.textContent = chapter;
+        sidebarItem.appendChild(title);
+        
+        sidebar.appendChild(sidebarItem);
     });
 }
 
 // Wechsle zu einem anderen Chapter
 function switchChapter(chapter) {
     activeChapter = chapter;
-    renderTabs();
+    renderSidebar();
     renderTasks();
 }
 
@@ -96,7 +108,17 @@ function getTasksForActiveChapter() {
 // Rendere Aufgaben
 function renderTasks() {
     const container = document.getElementById('taskContainer');
+    const descriptionEl = document.getElementById('chapterDescription');
+    
     container.innerHTML = '';
+    
+    // Zeige Kapitel-Beschreibung an
+    if (activeChapter && chapterDescriptions[activeChapter]) {
+        descriptionEl.textContent = chapterDescriptions[activeChapter];
+        descriptionEl.style.display = 'block';
+    } else {
+        descriptionEl.style.display = 'none';
+    }
 
     const tasksToShow = getTasksForActiveChapter();
 
@@ -203,7 +225,7 @@ async function checkAnswer(taskId) {
                 
                 // Nach Animation die Aufgabe entfernen
                 setTimeout(() => {
-                    renderTabs();
+                    renderSidebar();
                     renderTasks();
                     updateProgress();
                 }, 1500);
@@ -214,9 +236,9 @@ async function checkAnswer(taskId) {
             input.focus();
         }
 
-        // Rendere Tabs und Tasks neu, um den aktuellen Status anzuzeigen (nur wenn nicht korrekt)
+        // Rendere Sidebar und Tasks neu, um den aktuellen Status anzuzeigen (nur wenn nicht korrekt)
         if (!data.correct) {
-            renderTabs();
+            renderSidebar();
             renderTasks();
             updateProgress();
         }