Toast angepasst

webseite/assets/js/tasks.js

@@ -1,44 +1,118 @@
 document.addEventListener('DOMContentLoaded', function () {
     console.log('tasks.js wurde geladen.');
 
+    // Funktion zum Anzeigen des Toasts
+    function showToast(message, type = 'success') {
+        const toastsContainer = document.getElementById('toasts');
+
+        // Erstellen eines neuen Toast-Elements
+        const toast = document.createElement('div');
+        toast.classList.add('toast-content', `toast-${type}`);
+
+        // Erstellen des Icons
+        const icon = document.createElement('i');
+        icon.classList.add('fa-solid');
+        switch (type) {
+            case 'success':
+                icon.classList.add('fa-check');
+                break;
+            case 'error':
+                icon.classList.add('fa-times');
+                break;
+            case 'info':
+                icon.classList.add('fa-info-circle');
+                break;
+            default:
+                icon.classList.add('fa-check');
+        }
+        icon.classList.add('toast-icon'); // Hinzufügen der CSS-Klasse für das Icon
+
+        // Erstellen des Nachrichten-Elements
+        const toastMessage = document.createElement('span');
+        toastMessage.textContent = message;
+        toastMessage.classList.add('toast-message'); // Hinzufügen der CSS-Klasse für den Text
+
+        // Fügen Sie Icon und Nachricht zum Toast hinzu
+        toast.appendChild(icon);
+        toast.appendChild(toastMessage);
+
+        // Fügen Sie den Toast zum Container hinzu
+        toastsContainer.appendChild(toast);
+
+        // Anzeigen des Toasts mit Animation
+        requestAnimationFrame(() => {
+            toast.classList.add('show');
+        });
+
+        // Automatisches Ausblenden nach 3 Sekunden
+        setTimeout(() => {
+            toast.classList.remove('show');
+            // Entfernen des Toasts nach der Animation
+            setTimeout(() => {
+                toast.remove();
+            }, 500); // Muss mit der CSS-Transition übereinstimmen
+        }, 3000);
+    }
+
     // Event-Delegation für "Antwort prüfen" Buttons
-    const checkButtons = document.querySelectorAll('.check-answer');
-    console.log(`Found ${checkButtons.length} check-answer buttons.`);
-
-    checkButtons.forEach(function (button) {
+    document.querySelectorAll('.check-answer').forEach(function (button, index) {
         button.addEventListener('click', function () {
-            console.log('Antwort prüfen Button geklickt.');
+            console.log(`Antwort prüfen Button geklickt. Button Index: ${index}`);
             const variableContainer = this.closest('.variable-container');
-            const input = variableContainer.querySelector('input');
-            const userAnswer = input.value.trim();
-            const correctAnswer = input.getAttribute('data-correct-answer').trim().toLowerCase();
-            const feedback = variableContainer.querySelector('.feedback');
-
-            if (userAnswer.toLowerCase() === correctAnswer) {
-                feedback.style.color = 'green';
-                feedback.textContent = 'Richtig!';
-            } else {
-                feedback.style.color = 'red';
-                feedback.textContent = 'Falsch. Versuchen Sie es erneut.';
+            if (!variableContainer) {
+                console.error('Variable Container nicht gefunden für Button:', this);
+                showToast('Interner Fehler: Container nicht gefunden.', 'error');
+                return;
+            }
+            const input = variableContainer.querySelector('input');
+            if (!input) {
+                console.error('Input Feld nicht gefunden in Variable Container:', variableContainer);
+                showToast('Interner Fehler: Eingabefeld nicht gefunden.', 'error');
+                return;
+            }
+            const userAnswer = input.value.trim();
+            const correctAnswer = input.getAttribute('data-correct-answer');
+            if (!correctAnswer) {
+                console.error('Data-Correct-Answer Attribut fehlt im Input:', input);
+                showToast('Interner Fehler: Richtige Antwort nicht verfügbar.', 'error');
+                return;
+            }
+
+            console.log(`Benutzerantwort: "${userAnswer}", Richtige Antwort: "${correctAnswer}"`);
+
+            if (userAnswer.toLowerCase() === correctAnswer.trim().toLowerCase()) {
+                showToast('Richtig!', 'success');
+            } else {
+                showToast('Falsch.', 'error');
             }
-            feedback.style.display = 'block';
         });
     });
 
     // Event-Delegation für "Antwort anzeigen" Buttons
-    const showButtons = document.querySelectorAll('.show-answer');
-    console.log(`Found ${showButtons.length} show-answer buttons.`);
-
-    showButtons.forEach(function (button) {
+    document.querySelectorAll('.show-answer').forEach(function (button, index) {
         button.addEventListener('click', function () {
-            console.log('Antwort anzeigen Button geklickt.');
+            console.log(`Antwort anzeigen Button geklickt. Button Index: ${index}`);
             const variableContainer = this.closest('.variable-container');
+            if (!variableContainer) {
+                console.error('Variable Container nicht gefunden für Button:', this);
+                showToast('Interner Fehler: Container nicht gefunden.', 'error');
+                return;
+            }
             const input = variableContainer.querySelector('input');
+            if (!input) {
+                console.error('Input Feld nicht gefunden in Variable Container:', variableContainer);
+                showToast('Interner Fehler: Eingabefeld nicht gefunden.', 'error');
+                return;
+            }
             const correctAnswer = input.getAttribute('data-correct-answer');
-            const correctAnswerDiv = variableContainer.querySelector('.correct-answer span');
+            if (!correctAnswer) {
+                console.error('Data-Correct-Answer Attribut fehlt im Input:', input);
+                showToast('Interner Fehler: Richtige Antwort nicht verfügbar.', 'error');
+                return;
+            }
 
-            correctAnswerDiv.textContent = correctAnswer;
-            correctAnswerDiv.parentElement.style.display = 'block';
+            console.log(`Richtige Antwort: "${correctAnswer}"`);
+            showToast(`Richtige Antwort: ${correctAnswer}`, 'info');
         });
     });
 });