Files
TijdVoorDeTest/templates/quiz/question.twig
T
Marijn 20c97d9cb5 Improve quiz page layouts: WIDM-style answers and responsive centering
- 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)
2026-07-01 22:25:43 +02:00

44 lines
1.9 KiB
Twig

{% extends 'quiz/base.html.twig' %}
{% block body %}
<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-success"
type="submit"
>{{ 'Next'|trans }}</button>
</div>
{% endif %}
</form>
</div>
{% endblock body %}