Marijn/TijdVoorDeTest
1
0
Fork 0
mirror of https://github.com/MarijnDoeve/TijdVoorDeTest.git synced 2026-07-05 15:10:16 +02:00
Code Issues Packages Projects Releases Activity

Improve quiz page layouts: WIDM-style answers and responsive centering

Browse Source 
- Add green square answer buttons styled after the TV show
- Two-column answer grid for 6+ answers, single column on mobile
- fit-content centering for question pages so block matches question width
- Narrow fixed-width centering for form pages (enter name, select season)
This commit is contained in:
Marijn Doeve
2026-07-01 22:23:47 +02:00
parent e5198507ae
commit 20c97d9cb5
5 changed files with 112 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/quiz/question.twig
+36 -29
View File
@@ -1,36 +1,43 @@
{% extends 'quiz/base.html.twig' %}
{% block body %}
<h4>
{% if season.settings.showNumbers %}
({{ question.ordering }}/{{ question.quiz.questions.count }})
{% endif %}{{ question.question }}<br/>
</h4>
<form method="post">
<input type="hidden" name="token" value="{{ csrf_token('question') }}">
{% if season.settings.confirmAnswers == false %}
{% for answer in question.answers %}
<div class="quiz-content">
<h4>
{% if season.settings.showNumbers %}
({{ question.ordering }}/{{ question.quiz.questions.count }})
{% endif %}{{ question.question }}<br/>
</h4>
<form method="post">
<input type="hidden" name="token" value="{{ csrf_token('question') }}">
{% set twoCol = question.answers|length >= 6 %}
{% if season.settings.confirmAnswers == false %}
<div class="{{ twoCol ? 'quiz-answers-grid' : '' }}">
{% for answer in question.answers %}
<div class="py-2">
<button class="answer-btn"
type="submit"
name="answer"
value="{{ answer.id }}">{{ answer.text }}</button>
</div>
{% endfor %}
</div>
{% else %}
<div class="{{ twoCol ? 'quiz-answers-grid' : '' }}">
{% for answer in question.answers %}
<div class="py-1">
<input required="required" type="radio" class="btn-check" name="answer"
id="answer-{{ loop.index0 }}" autocomplete="off"
value="{{ answer.id }}">
<label class="answer-btn" for="answer-{{ loop.index0 }}">{{ answer.text }}</label>
</div>
{% endfor %}
</div>
<div class="py-2">
<button class="btn btn-outline-success"
<button class="btn btn-success"
type="submit"
name="answer"
value="{{ answer.id }}">{{ answer.text }}</button>
>{{ 'Next'|trans }}</button>
</div>
{% endfor %}
{% else %}
{% for answer in question.answers %}
<div class="py-1">
<input required="required" type="radio" class="btn-check" name="answer"
id="answer-{{ loop.index0 }}" autocomplete="off"
value="{{ answer.id }}">
<label class="btn btn-outline-secondary" for="answer-{{ loop.index0 }}">{{ answer.text }}</label>
</div>
{% endfor %}
<div class="py-2">
<button class="btn btn-success"
type="submit"
>{{ 'Next'|trans }}</button>
</div>
{% endif %}
</form>
{% endif %}
</form>
</div>
{% endblock body %}