{% extends 'otreeutils/UnderstandingQuestionsPage.html' %}

{% load staticfiles otree_tags %}
{% block app_styles %}
<link href="{% static 'otreeutils/understanding.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block app_scripts %}
<script src="{% static 'attention/understanding.js' %}"></script>
{% endblock %}

{% block title %}
Quiz <br/>
The instructions are reported again below the questions.
{% endblock %}


{% block content %}

<ul class="questions">
    {{ questions_form.as_ul }}
</ul>

<div id="error_msg" class="alert alert-danger alert-dismissible fade">
        <strong>Error!</strong> Some of your answers are incorrect.
    
</div>

<div style="display: none">
    {% next_button %}
</div>

<div class="fake-next">
    <input class="btn btn-primary btn-large btn-primary" type="button" value="Next"
           onclick="checkUnderstandingQuestionsForm()">
</div>  
<br/>
{% include Constants.template_instructions %}


<script>
    $(function() {
        setupUnderstandingQuestionsForm({{ n_questions }}, "{{ hint_empty }}", "{{ form_field_n_wrong_attempts }}", {{ set_correct_answers }});
    });
    </script>
{% endblock %}