{% extends "floodgame/ExtendedPage.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 'otreeutils/understanding.js' %}"></script>

{% endblock %}


{% block title %}
{% include 'snippets/Title.html' %}
{% endblock %}

{% block content %}

{% include 'snippets/Progressbar.html' %}


<br>
    <div class="alert alert-dark">
        To check your understanding of the game, we will now ask you some questions. Once you have submitted the right answers you can start with the investment game.
        <b>The instructions are always available throughout the game (in the top right corner of the screen under "open instructions"). </b>

    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" style="width:1000px;">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">          <h5 class="modal-title">Instructions </h5>

        <button type="button" class="close" id=instructionsButton data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
<div class="card-deck">
{% include 'snippets/Instr1.html' %}
{% include 'snippets/Instr2.html' %}
          {% if player.has_loan %}
             {% include 'snippets/Instr2a.html' %}
          {% endif %}
{% include 'snippets/Instr3.html' %}
      </div>
      </div>
    </div>
  </div>

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

<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>

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


{% include 'snippets/InstructionsCounter.html' %}

{% endblock %}