diff --git a/webseite/assets/css/topic.css b/webseite/assets/css/topic.css
index 1f21a4a..01d9929 100644
--- a/webseite/assets/css/topic.css
+++ b/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 */
+}
diff --git a/webseite/assets/js/tasks.js b/webseite/assets/js/tasks.js
index 2827f2e..4359c9d 100644
--- a/webseite/assets/js/tasks.js
+++ b/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');
});
});
});
diff --git a/webseite/topic.php b/webseite/topic.php
index 5c01dfa..9efc592 100644
--- a/webseite/topic.php
+++ b/webseite/topic.php
@@ -32,7 +32,7 @@ if (!isset($topicData)) {
-
+
@@ -144,16 +144,12 @@ if (!isset($topicData)) {
-