119 lines
4.9 KiB
JavaScript
119 lines
4.9 KiB
JavaScript
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
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Event-Delegation für "Antwort anzeigen" Buttons
|
|
document.querySelectorAll('.show-answer').forEach(function (button, index) {
|
|
button.addEventListener('click', function () {
|
|
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');
|
|
if (!correctAnswer) {
|
|
console.error('Data-Correct-Answer Attribut fehlt im Input:', input);
|
|
showToast('Interner Fehler: Richtige Antwort nicht verfügbar.', 'error');
|
|
return;
|
|
}
|
|
|
|
console.log(`Richtige Antwort: "${correctAnswer}"`);
|
|
showToast(`Richtige Antwort: ${correctAnswer}`, 'info');
|
|
});
|
|
});
|
|
});
|