app/static/script.js aktualisiert

app/static/script.js

@@ -8,25 +8,17 @@ let stats = { correct: 0, total: 0 };
 
 function selectMainMode(mode) {
     mainMode = mode;
-    subMode = null; // Reset submode
+    subMode = null; 
     
-    // UI Updates
     document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
     document.getElementById(`btn-main-${mode}`).classList.add('active');
 
-    // Hide all submodes first
     document.querySelectorAll('.submode-container').forEach(el => el.style.display = 'none');
-    
-    // Show correct submode
     document.getElementById(`submode-${mode}`).style.display = 'block';
 
-    // Hide Start & Pages until submode selected
     document.getElementById('page-section').style.display = 'none';
-    
-    // Reset Submode buttons
     document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active'));
 
-    // Fetch pages for this mode immediately
     fetchPages(mode);
 }
 
@@ -36,7 +28,6 @@ function selectSubMode(mode) {
     document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active'));
     document.getElementById(`btn-sub-${mode}`).classList.add('active');
 
-    // Now show page selection and start button
     document.getElementById('page-section').style.display = 'block';
     document.getElementById('btn-start').disabled = false;
     document.getElementById('btn-start').style.opacity = '1';
@@ -49,7 +40,7 @@ function fetchPages(type) {
             const list = document.getElementById('page-list');
             list.innerHTML = '';
             
-            // Auto-select logic: Select all by default
+            // Standard: Alle auswählen
             selectedPages = pages; 
             updatePageDisplay();
 
@@ -65,6 +56,15 @@ function fetchPages(type) {
         });
 }
 
+// --- NEU: FUNKTION FÜR "ALLE AN / ALLE AUS" ---
+function toggleAllPages(state) {
+    const checkboxes = document.querySelectorAll('#page-list input');
+    checkboxes.forEach(cb => {
+        cb.checked = state;
+    });
+    updatePageSelection();
+}
+
 function updatePageSelection() {
     const checkboxes = document.querySelectorAll('#page-list input:checked');
     selectedPages = Array.from(checkboxes).map(cb => parseInt(cb.value));
@@ -75,9 +75,11 @@ function updatePageDisplay() {
     const d = document.getElementById('selected-pages-display');
     if (selectedPages.length === 0) {
         d.innerText = "Keine Seiten gewählt!";
+        d.style.color = "red";
         document.getElementById('btn-start').disabled = true;
     } else {
         d.innerText = `Seiten: ${selectedPages.join(', ')}`;
+        d.style.color = "#555";
         if (subMode) document.getElementById('btn-start').disabled = false;
     }
 }
@@ -89,22 +91,22 @@ function startQuiz() {
     updateStats();
     document.getElementById('setup-screen').style.display = 'none';
     document.getElementById('quiz-screen').style.display = 'flex';
+    document.querySelector('.container').style.justifyContent = 'flex-start'; // Nach oben schieben
     nextQuestion();
 }
 
 function stopQuiz() {
     document.getElementById('quiz-screen').style.display = 'none';
     document.getElementById('setup-screen').style.display = 'block';
+    document.querySelector('.container').style.justifyContent = 'center'; // Wieder mittig
 }
 
 function nextQuestion() {
-    // UI Reset
     document.getElementById('btn-check').style.display = 'block';
     document.getElementById('btn-next').style.display = 'none';
     document.getElementById('feedback').innerText = '';
     document.getElementById('feedback').className = 'feedback';
     
-    // Clear Inputs
     document.querySelectorAll('input').forEach(i => i.value = '');
 
     fetch('/api/question', {
@@ -145,16 +147,16 @@ function renderCard(card) {
         
         inpStd.style.display = 'none';
         boxVerbs.style.display = 'flex';
-        inpInf.style.display = 'none'; // Infinitiv ist gegeben
+        inpInf.style.display = 'none'; 
         document.getElementById('inp-simple').focus();
     }
     else if (card.type === 'irregular_full') {
         lbl.innerText = 'Unregelmäßiges Verb (Alle Formen):';
-        txt.innerText = card.question; // Deutsch
+        txt.innerText = card.question;
         
         inpStd.style.display = 'none';
         boxVerbs.style.display = 'flex';
-        inpInf.style.display = 'block'; // Muss eingegeben werden
+        inpInf.style.display = 'block'; 
         inpInf.focus();
     }
 }
@@ -166,7 +168,6 @@ function checkAnswer() {
         payload.input = document.getElementById('inp-standard').value;
         payload.correct = currentCard.answer;
     } else {
-        // Verben
         payload.simple = document.getElementById('inp-simple').value;
         payload.participle = document.getElementById('inp-part').value;
         payload.correct_simple = currentCard.answer_simple;
@@ -194,7 +195,6 @@ function checkAnswer() {
             finishTurn();
         } else if (res.status === 'typo') {
             fb.classList.add('typo');
-            // Darf nochmal probieren
         } else {
             fb.classList.add('wrong');
             finishTurn();
@@ -217,7 +217,6 @@ function updateStats() {
     document.getElementById('stats-text').innerText = `${p}% Richtig (${stats.correct}/${stats.total})`;
 }
 
-// Enter Key Handler
 document.addEventListener('keypress', (e) => {
     if (e.key === 'Enter') {
         const nextBtn = document.getElementById('btn-next');
@@ -226,6 +225,5 @@ document.addEventListener('keypress', (e) => {
     }
 });
 
-// Overlay Logic
 function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
 function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }