erste funktionsfähige Prüfung der Eingaben

This commit is contained in:
2024-12-16 13:16:35 +01:00
committed by Eric Blommel
parent 496522b4b4
commit 5a4ec524da
4 changed files with 145 additions and 15 deletions

View File

@@ -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