From 1e5faf9b609fa230d763bccdd8520441c5498a15 Mon Sep 17 00:00:00 2001
From: Grail Finder <wohilas@gmail.com>
Date: Sun, 6 Apr 2025 10:04:22 +0300
Subject: Feat: add mixed exercsises

---
 components/index.html    |  4 ++-
 components/question.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 components/question.html

(limited to 'components')

diff --git a/components/index.html b/components/index.html
index b8b126d..816fd21 100644
--- a/components/index.html
+++ b/components/index.html
@@ -13,13 +13,15 @@
             <h1>Mixed Übungen</h1>
             <div class="ubung-list">
                 {{range .}}
+                <p>
                 <button 
                     class="ubung-button"
-                    hx-get="/question?mixed_id={{.ID}}"
+                    hx-get="/mixed?id={{.ID}}"
                     hx-target="#ancestor"
                     hx-swap="outerHTML">
                     {{.Name}} (Level {{.LevelID}})
                 </button>
+                </p>
                 {{end}}
             </div>
             <div id="ancestor"></div>
diff --git a/components/question.html b/components/question.html
new file mode 100644
index 0000000..ef4618b
--- /dev/null
+++ b/components/question.html
@@ -0,0 +1,75 @@
+{{define "question"}}
+<div id="question">
+      {{if .Requirement}}
+      <p>{{.Requirement}}</p>
+      {{end}}
+    <div class="question-text" data-testid="question">
+        {{.Text}}
+    </div>
+    <div id="reaction">
+        {{if eq .Status 1}}
+        Correct!
+        {{end}}
+        {{if eq .Status 2}}
+        Wrong.
+        {{end}}
+    </div>
+    <div id="feedback" data-testid="feedback">
+      {{if ne .Status 0}}
+      <div>
+        {{.Explanation}}
+      </div>
+      <button 
+          hx-get="/next-question?current_id={{.ID}}" 
+          hx-target="#ancestor"
+          hx-swap="outerHTML"
+          class="next-button"
+          data-testid="next-button">
+        Next Question →
+      </button>
+      {{end}}
+    </div>
+    <div id="options">
+        <button 
+            data-testid="option1"
+            hx-post="/answer" 
+            hx-vals='{"selected": "0", "question_id": "{{.ID}}"}'
+            hx-target="#ancestor"
+            hx-swap="innerHTML"
+            class="option-button"
+        >
+            {{.Option1}}
+        </button>
+        <button 
+            data-testid="option2"
+            hx-post="/answer" 
+            hx-vals='{"selected": "1", "question_id": "{{.ID}}"}'
+            hx-target="#ancestor"
+            hx-swap="innerHTML"
+            class="option-button"
+        >
+            {{.Option2}}
+        </button>
+        <button 
+            data-testid="option3"
+            hx-post="/answer" 
+            hx-vals='{"selected": "2", "question_id": "{{.ID}}"}'
+            hx-target="#ancestor"
+            hx-swap="innerHTML"
+            class="option-button"
+        >
+            {{.Option3}}
+        </button>
+        <button 
+            data-testid="option4"
+            hx-post="/answer" 
+            hx-vals='{"selected": "3", "question_id": "{{.ID}}"}'
+            hx-target="#ancestor"
+            hx-swap="innerHTML"
+            class="option-button"
+        >
+            {{.Option4}}
+        </button>
+    </div>
+</div>
+{{end}}
-- 
cgit v1.2.3