erste funktionsfähige Prüfung der Eingaben
This commit is contained in:
44
webseite/assets/js/tasks.js
Normal file
44
webseite/assets/js/tasks.js
Normal file
@@ -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';
|
||||
});
|
||||
});
|
||||
});
|
||||
39
webseite/check_answer.php
Normal file
39
webseite/check_answer.php
Normal file
@@ -0,0 +1,39 @@
|
||||
<?php
|
||||
require_once "classes/task.php";
|
||||
header('Content-Type: application/json');
|
||||
|
||||
// Sicherheitsüberprüfungen hier (z.B. Authentifizierung)
|
||||
|
||||
// Eingaben validieren
|
||||
$taskId = isset($_POST['task_id']) ? intval($_POST['task_id']) : null;
|
||||
$variableIndex = isset($_POST['variable_index']) ? intval($_POST['variable_index']) : null;
|
||||
$userAnswer = isset($_POST['user_answer']) ? trim($_POST['user_answer']) : '';
|
||||
|
||||
if ($taskId === null || $variableIndex === null || $userAnswer === '') {
|
||||
echo json_encode(['success' => false, 'message' => 'Ungültige Eingaben.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Laden Sie die Aufgaben und Variablen entsprechend Ihrer Datenstruktur
|
||||
$tasks = $topicData->getTasks();
|
||||
|
||||
if (!isset($tasks[$taskId])) {
|
||||
echo json_encode(['success' => false, 'message' => 'Aufgabe nicht gefunden.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$variables = $tasks[$taskId]->getVariables();
|
||||
|
||||
if (!isset($variables[$variableIndex])) {
|
||||
echo json_encode(['success' => false, 'message' => 'Variable nicht gefunden.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$correctAnswer = strtolower(trim($variables[$variableIndex]->getCorrectAnswer()));
|
||||
$userAnswerLower = strtolower($userAnswer);
|
||||
|
||||
if ($userAnswerLower === $correctAnswer) {
|
||||
echo json_encode(['success' => true, 'message' => 'Richtig!']);
|
||||
} else {
|
||||
echo json_encode(['success' => false, 'message' => 'Falsch.']);
|
||||
}
|
||||
33
webseite/show_answer.php
Normal file
33
webseite/show_answer.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
require_once "classes/task.php";
|
||||
header('Content-Type: application/json');
|
||||
|
||||
// Sicherheitsüberprüfungen hier (z.B. Authentifizierung)
|
||||
|
||||
// Eingaben validieren
|
||||
$taskId = isset($_POST['task_id']) ? intval($_POST['task_id']) : null;
|
||||
$variableIndex = isset($_POST['variable_index']) ? intval($_POST['variable_index']) : null;
|
||||
|
||||
if ($taskId === null || $variableIndex === null) {
|
||||
echo json_encode(['success' => false, 'message' => 'Ungültige Eingaben.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Laden Sie die Aufgaben und Variablen entsprechend Ihrer Datenstruktur
|
||||
$tasks = $topicData->getTasks();
|
||||
|
||||
if (!isset($tasks[$taskId])) {
|
||||
echo json_encode(['success' => false, 'message' => 'Aufgabe nicht gefunden.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$variables = $tasks[$taskId]->getVariables();
|
||||
|
||||
if (!isset($variables[$variableIndex])) {
|
||||
echo json_encode(['success' => false, 'message' => 'Variable nicht gefunden.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$correctAnswer = $variables[$variableIndex]->getCorrectAnswer();
|
||||
|
||||
echo json_encode(['success' => true, 'correct_answer' => $correctAnswer]);
|
||||
@@ -32,6 +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>
|
||||
</head>
|
||||
|
||||
|
||||
@@ -124,27 +125,40 @@ if (!isset($topicData)) {
|
||||
<div class="content-card mt-[8px]">
|
||||
<h1 class="content-title">Aufgaben</h1>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
|
||||
|
||||
<?php
|
||||
foreach ($tasks as $index => $task) {
|
||||
$taskId = $index;
|
||||
foreach ($tasks as $taskIndex => $task) {
|
||||
$taskId = $taskIndex;
|
||||
?>
|
||||
<div class="task-container"
|
||||
data-task-id="<?php echo htmlspecialchars($taskId, ENT_QUOTES, 'UTF-8'); ?>">
|
||||
<p>
|
||||
<?php echo ($index + 1) . '. ' . htmlspecialchars($task->getText(), ENT_QUOTES, 'UTF-8'); ?>
|
||||
<?php echo '<b>Aufgabe ' . ($taskIndex + 1) . ':</b> ' . htmlspecialchars($task->getText(), ENT_QUOTES, 'UTF-8'); ?>
|
||||
</p>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; ">
|
||||
<input type="text" placeholder="Deine Antwort"/>
|
||||
<button class="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>
|
||||
<button class="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>
|
||||
<div style="margin-top: 0.5rem;"></div>
|
||||
</div>
|
||||
<!-- Diesen Bereich für jeden Eintrag in Variables anzeigen lassen, z.B. x = [Textfeld] ... -->
|
||||
<?php
|
||||
$variables = $task->getVariables();
|
||||
foreach ($variables as $variableIndex => $variable) {
|
||||
$correctAnswer = $variable;
|
||||
?>
|
||||
<div class="variable-container" style="display: flex; flex-wrap: wrap; gap: 0.5rem; ">
|
||||
<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>
|
||||
<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>
|
||||
<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
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
<hr>
|
||||
<?php
|
||||
|
||||
Reference in New Issue
Block a user