diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/feedback.html | 33 | ||||
| -rw-r--r-- | components/index.html | 70 | ||||
| -rw-r--r-- | components/question.html | 75 |
3 files changed, 88 insertions, 90 deletions
diff --git a/components/feedback.html b/components/feedback.html deleted file mode 100644 index 0eda969..0000000 --- a/components/feedback.html +++ /dev/null @@ -1,33 +0,0 @@ -{{define "feedback"}} -{{if .Correct}} -<div class="correct-feedback"> - <div class="correct-answer">Correct!</div> - <div class="explanation">{{.Explanation}}</div> - {{if .ShowNext}} - <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> -{{else}} -<div class="error-feedback"> - <div class="wrong-answer">Try Again</div> - <div class="explanation">{{.Explanation}}</div> - {{if .ShowNext}} - <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> -{{end}} -{{end}} diff --git a/components/index.html b/components/index.html index 9c43a50..816fd21 100644 --- a/components/index.html +++ b/components/index.html @@ -9,66 +9,22 @@ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> </head> <body> - <div id="ancestor"> - <div class="question-text" data-testid="question"> - {{.Text}} - </div> - <div id="feedback" data-testid="feedback"> - {{template "feedback" .}} - {{if .ShowNext}} - <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> - {{template "feedback" .}} - <div id="options"> - <button - data-testid="option1" - hx-post="/answer" - hx-vals='{"selected": "0", "question_id": "{{.ID}}"}' - hx-target="#feedback" - hx-swap="innerHTML" - class="option-button" - > - {{.Option1}} - </button> - <button - data-testid="option2" - hx-post="/answer" - hx-vals='{"selected": "1", "question_id": "{{.ID}}"}' - hx-target="#feedback" - hx-swap="innerHTML" - class="option-button" - > - {{.Option2}} - </button> - <button - data-testid="option3" - hx-post="/answer" - hx-vals='{"selected": "2", "question_id": "{{.ID}}"}' - hx-target="#feedback" - hx-swap="innerHTML" - class="option-button" - > - {{.Option3}} - </button> + <div class="container"> + <h1>Mixed Übungen</h1> + <div class="ubung-list"> + {{range .}} + <p> <button - data-testid="option4" - hx-post="/answer" - hx-vals='{"selected": "3", "question_id": "{{.ID}}"}' - hx-target="#feedback" - hx-swap="innerHTML" - class="option-button" - > - {{.Option4}} + class="ubung-button" + hx-get="/mixed?id={{.ID}}" + hx-target="#ancestor" + hx-swap="outerHTML"> + {{.Name}} (Level {{.LevelID}}) </button> + </p> + {{end}} </div> + <div id="ancestor"></div> </div> </body> </html> 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}} |