---
layout: layouts/post.njk
structuredData: none
---
{{ content | safe }}
<section class="quiz">
	<form onsubmit="handleQuizSubmit(); return false">
		{% for question in questions %}
		{% set q = loop.index %}
		<div class="questionBox">
			<p class="quizQuestion">{{ q }}. {{ question.title }}</p>
			{% if question.image %}
			<figure>
				<a href="{{ question.image }}">
					<img src="{{ question.image }}" alt="{{ question.imageAlt }}">
				</a>
				{% if question.imageCaption %}
				<figcaption>{{ question.imageCaption }}</figcaption>
				{% endif %}
			</figure>
			{% endif %}
			<div class="answersBox">
				{% for answer in question.answers %}
				<div class="answerBox">
					<input class="answer" type="radio" value="{{ answer.points }}" id="q{{ q }}a{{ loop.index }}" name="{{ q }}" required>
					<label for="q{{ q }}a{{ loop.index }}">{{ answer.name }}</label>
				</div>
				{% endfor %}
			</div>
		</div>
		{% endfor %}
		<script src="/js/quiz.js"></script>
		<button>Submit</button>
	</form>
</section>

{% for consequence in consequences %}
<dialog class="consequence" data-points-threshold="{{ consequence.points }}">
	<h2>{{ consequence.title }}</h2>
  <p>{{ consequence.spiel }}</p>
  {% if consequence.image %}
  <img src="{{ consequence.image }}" alt="{{ consequence.imageAlt }}">
  {% endif %}
  <details>
		<summary>Score Details</summary>
		<p class="scoreDetails"></p>
	</details>
  <form method="dialog">
    <button>Thanks</button>
  </form>
</dialog>
{% endfor %}