webseite/assets/css/topic.css

@@ -219,3 +219,51 @@ body {
     left: 0;
     font-weight: bold;
 }
+
+
+
+/* Einzelne Toast Styles */
+.toast-content {
+    display: flex;
+    align-items: center;
+    border-radius: 12px; /* Abgerundete Ecken */
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    min-width: 200px;
+    max-width: 80%;
+    transition: opacity 0.5s ease, transform 0.5s ease;
+    opacity: 0;
+    transform: translateY(-20px);
+}
+
+/* Spezifische Klassen für verschiedene Toast-Typen */
+.toast-success {
+    background-color: #38a169; /* Grüner Hintergrund */
+}
+
+.toast-error {
+    background-color: #e53e3e; /* Roter Hintergrund */
+}
+
+.toast-info {
+    background-color: #4299e1; /* Blauer Hintergrund */
+}
+
+/* Sichtbarkeit */
+.toast-content.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Icon Styling */
+.toast-icon {
+    font-size: 32px; /* Größeres Icon */
+    margin-right: 20px; /* Abstand zwischen Icon und Text */
+    color: white; /* Icons sollen immer weiß sein */
+}
+
+/* Nachrichten-Text Styling */
+.toast-message {
+    color: white;
+    font-size: 18px; /* Größere Schriftgröße */
+}

webseite/assets/js/tasks.js

@@ -1,44 +1,118 @@
 document.addEventListener('DOMContentLoaded', function () {
     console.log('tasks.js wurde geladen.');
 
-    // Event-Delegation für "Antwort prüfen" Buttons
+    // Funktion zum Anzeigen des Toasts
-    const checkButtons = document.querySelectorAll('.check-answer');
+    function showToast(message, type = 'success') {
-    console.log(`Found ${checkButtons.length} check-answer buttons.`);
+        const toastsContainer = document.getElementById('toasts');
 
-    checkButtons.forEach(function (button) {
+        // Erstellen eines neuen Toast-Elements
-        button.addEventListener('click', function () {
+        const toast = document.createElement('div');
-            console.log('Antwort prüfen Button geklickt.');
+        toast.classList.add('toast-content', `toast-${type}`);
-            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) {
+        // Erstellen des Icons
-                feedback.style.color = 'green';
+        const icon = document.createElement('i');
-                feedback.textContent = 'Richtig!';
+        icon.classList.add('fa-solid');
-            } else {
+        switch (type) {
-                feedback.style.color = 'red';
+            case 'success':
-                feedback.textContent = 'Falsch. Versuchen Sie es erneut.';
+                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
+    document.querySelectorAll('.check-answer').forEach(function (button, index) {
+        button.addEventListener('click', function () {
+            console.log(`Antwort prüfen 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 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');
+    document.querySelectorAll('.show-answer').forEach(function (button, index) {
-    console.log(`Found ${showButtons.length} show-answer buttons.`);
-
-    showButtons.forEach(function (button) {
         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;
+            console.log(`Richtige Antwort: "${correctAnswer}"`);
-            correctAnswerDiv.parentElement.style.display = 'block';
+            showToast(`Richtige Antwort: ${correctAnswer}`, 'info');
         });
     });
 });

webseite/topic.php

@@ -32,7 +32,7 @@ if (!isset($topicData)) {
     <script src="https://cdn.tailwindcss.com"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <script src="assets/js/sidebar.js"></script>
-    <script src="assets/js/tasks.js"></script>
+    <script src="assets/js/tasks.js" defer></script>
 </head>
 
 
@@ -144,16 +144,12 @@ if (!isset($topicData)) {
                                     <label for="answer<?php echo $taskId . '_' . $variableIndex; ?>"></label>
                                     <input id="answer<?php echo $taskId . '_' . $variableIndex; ?>" type="text"
                                            placeholder="Ihre Antwort" data-correct-answer="<?php echo $correctAnswer; ?>"/>
-                                    <button class="check-answer bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-40 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
+                                    <button class="check-answer bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
-                                        Antwort prüfen
+                                        <i class="fa-solid fa-check"></i>
                                     </button>
-                                    <button class="show-answer bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-40 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
+                                    <button class="show-answer bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
-                                        Antwort anzeigen
+                                        <i class="fa-solid fa-eye"></i>
                                     </button>
-                                    <div class="feedback" style="color: green; display: none;"></div>
-                                    <div class="correct-answer" style="color: blue; display: none; margin-top: 0.5rem;">
-                                        Richtige Antwort: <span></span>
-                                    </div>
                                 </div>
                                 <?php
                             }
@@ -166,6 +162,11 @@ if (!isset($topicData)) {
                     ?>
                 </div>
             </div>
+            <!-- Toasts Container -->
+            <div id="toasts" class="fixed top-5 right-5 flex flex-col items-end space-y-4 z-50">
+                <!-- Einzelne Toasts werden hier dynamisch hinzugefügt -->
+            </div>
+
             <?php
         }
         ?>