Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Teil 2 #94

Merged
mg8220s merged 121 commits from dev into main 2025-01-08 10:16:03 +01:00
Conversation 1 Commits 121 Files Changed 92 +157 -34
3 changed files with 157 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 337e5360e4 - Show all commits

48
webseite/assets/css/topic.css
View File

@@ -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 */
}

124
webseite/assets/js/tasks.js
View File

@@ -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');
});
});
});

19
webseite/topic.php
View File

@@ -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">
Antwort prüfen
<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">
<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">
Antwort anzeigen
<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">
<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
}
?>