summaryrefslogtreecommitdiff
path: root/components/question.html
blob: ef4618b5270be3f24ad87c42dc6d757c24ba3e53 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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}}