<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link href="{% static 'images/favicon.ico' %}" rel="shortcut icon">
<script type="text/javascript" src="{% static 'js/elearning.js' %}"></script>
<title>{{ settings.title }}</title>
</head>
<body>
<div class="container">
<h1>{{ settings.title }}</h1>
<p>{{ settings.message }}</p>
<hr/>
<div class="margin50" />
{% for question, options in questions_options.items %}
<h2>{{ question.id }}: {{ question.title }}</h2>
<p>{{ question.text }}</p>
<form action="#">
{% for option in options %}
<label>
<input name="checkbox_{{ question.id }}" type="checkbox" value="{{ option.id }}">
{{ option.text }}
</label>
{% endfor %}
<button class="margin10" type="button" id="showSolution" onmousedown="get_answer({{ question.id }})" onmouseup="toggle_solution({{ question.id }})">{{ settings.button_solution }}</button>
</form>
<p id="explanation_{{ question.id }}" class="hide">{{ question.explanation }}</p>
<div class="margin25" />
{% endfor %}
<div class="margin50" />
<hr/>
{{ settings.footer }}
</div>
</body>
</html>