masks-personality-quiz/interface/templates/quiz.html

82 lines
3.9 KiB
HTML

{% extends "base.html" %}
{% block title %} Take the Quiz {% endblock %}
{% block content %}
<h1>Take the Quiz</h1>
<p>
Please answer the following {{ questions|length }} questions. None of the questions are mandatory, and you can skip questions you are unsure of or do not want to answer. But you cannot leave the quiz blank. The more questions you answer, the better results you will get.
</p>
<p>
You will also be able to select which source books you would like to see results from. You can exclude source books to narrow down the range of playbooks, or add all of them to have a full range of playboosk to choose from.
</p>
<form method="POST">
<div class="form-group">
{% for question in questions -%}
<fieldset class="question">
<legend>
<strong>Question {{ loop.index }}</strong>: {{ question['question']|safe }}
</legend>
<table>
<tbody>
{% set name = 'q'~loop.index %}
{% for answer in question['answers'] -%}
<tr class="wrapper-option{% if loop.index == question['answers']|length %} last-option{% endif %}">
<td class="wrapper-radio">
<input
class="form-check-input"
type="radio"
name="{{ name }}"
id="{{ name }}.{{ loop.index }}"
value="{{ loop.index }}"
{% if 'submission' in session %}
{{'checked' if session['submission'][name] == loop.index|lower else '' }}
{% endif%}
>
</td>
<td class="wrapper-answer">
<label
class="form-check-label"
for="{{ name }}.{{ loop.index }}"
>
{{ answer['text']|safe }}
</label>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</fieldset>
{% endfor %}
<fieldset class="source-filters">
<h5>
Please select which sourcebooks you would like to include results from.
</h5>
{% for source in sources -%}
<input
type="checkbox"
name="{{ source }}"
id="{{ source }}"
{% if 'submission' in session %}
{{'' if source not in session['submission'] else 'checked' }}
{% else %}
checked="true"
{% endif %}
class="form-check-input"
>
<label
for="{{ source }}"
class="form-check-label sourcebook-title"
>
{{ sources[source]['title'] }}
</label>
{% endfor %}
</fieldset>
<div class="centre-buttons">
<button type="submit" class="btn btn-success right-margin" href="/results">Submit</button>
<a class="btn btn-danger left-margin" href="/reset">Reset</a>
</div>
</div>
</form>
{% endblock %}