erste funktionsfähige Prüfung der Eingaben

2024-12-16 13:16:35 +01:00
parent 496522b4b4
commit 5a4ec524da
4 changed files with 145 additions and 15 deletions
--- a/webseite/assets/js/tasks.js
+++ b/webseite/assets/js/tasks.js
@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', function () {
+    console.log('tasks.js wurde geladen.');
+
+    // 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) {
+        button.addEventListener('click', function () {
+            console.log('Antwort prüfen Button geklickt.');
+            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.';
+            }
+            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) {
+        button.addEventListener('click', function () {
+            console.log('Antwort anzeigen Button geklickt.');
+            const variableContainer = this.closest('.variable-container');
+            const input = variableContainer.querySelector('input');
+            const correctAnswer = input.getAttribute('data-correct-answer');
+            const correctAnswerDiv = variableContainer.querySelector('.correct-answer span');
+
+            correctAnswerDiv.textContent = correctAnswer;
+            correctAnswerDiv.parentElement.style.display = 'block';
+        });
+    });
+});