Toast angepasst
This commit is contained in:
Eric Blommel
@@ -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 */
|
||||
}
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user