<!DOCTYPE html>
<html lang="en">
<head>
<title>MVG Learning Suite</title>
</head>
<body>
<h1>MVG Learning Suite</h1>
<section class="startblock">
<p>This is a learning suite.</p>
<label for="topic">Choose a topic and start learning.</label>
<select id="topic">
<option value="all topics">all topics</option>
{% for t in topics %}
<option value="{{ t }}">{{ t }}</option>
{% endfor %}
</select>
<button id="start">Start!</button>
</section>
<section class="questionblock" style="display:none;">
<p>Wow! You chose <span id="target_topic"></span>!</p>
<button id="dbg-rvrt">Revert!</button>
</section>
<section class="evalblock" style="display:none;">
<h3>Your results</h3>
<table id="results">
<tr>
<td>Questions</td>
<td id="all_questions"></td>
</tr>
<tr>
<td>Correct</td>
<td id="correct_answers"></td>
</tr>
<tr>
<td>Wrong</td>
<td id="wrong_answers"></td>
</tr>
<tr>
<td>Percentage</td>
<td id="percentage"></td>
</tr>
</table>
<p id="result_message"></p>
<button id="retry">Another one!</button>
</section>
<script type="application/javascript" src="{{ asset('js/index.js') }}"></script>
</body>
</html>