webseite/config/subjects/mathe/topics/bruchrechnung/tasks.json

@@ -8,7 +8,7 @@
         }
     },
     {
-        "text": "a + b = c",
+        "text": "$$\\frac{2}{6} + \\frac{3}{6} = ? $$",
         "vars": {
             "a": "1",
             "b": "2",

webseite/topic.php

@@ -60,6 +60,7 @@ if (!isset($topicData)) {
     <div class="max-w-7xl mx-auto mt-5">
         <div class="mt-16"></div>
 
+        <!-- Related Topics -->
         <div class="related-topics bg-gray-100 p-4 rounded-lg">
             <h4>Verwandte Themen:</h4>
             <ul class="flex flex-wrap gap-2">
@@ -83,6 +84,7 @@ if (!isset($topicData)) {
             </ul>
         </div>
 
+        <!-- Topic Content -->
         <div class="content-card mt-[8px]">
             <h1 class="content-title"><?php echo($topicData->displayName); ?></h1>
             <p class="content-text">
@@ -113,6 +115,49 @@ if (!isset($topicData)) {
             </div>
         </div>
 
+        <!-- Tasks -->
+        <?php
+        $tasks = $topicData->getTasks();
+        // nur anzeigen, wenn Aufgaben vorhanden sind
+        if ($tasks != null) {
+            ?>
+            <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;
+                        ?>
+                        <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'); ?>
+                            </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>
+                        </div>
+                        <hr>
+                        <?php
+                    }
+                    ?>
+                </div>
+            </div>
+            <?php
+        }
+        ?>
+
+
+        <!-- Related Topics -->
         <div class="related-topics bg-gray-100 p-4 rounded-lg">
             <h4>Verwandte Themen:</h4>
             <ul class="flex flex-wrap gap-2">