{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block content %}

    <p>
        Before you do the activity, we are going to ask you a few questions to make sure you understand how it works. <br>
        <br>If you would like to review the instructions, please, click on “Instructions” below. <br>
    </p>
    <hr>

    {% for field in form %}
        {% formfield field %}
    {% endfor %}
    <div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button type = "button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Instructions
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">

       {% include Constants.intro %}
     </div>
    </div>
  </div>

</div>
<br>
    {% next_button %}

{% endblock %}

{% block scripts %}
    <script>
        {% if form.errors %}

            setTimeout(function () {
                $('.otree-btn-next').show();
            }, 5 * 1000);
        {% endif %}

    </script>
{% endblock %}


{% block styles %}
    <style>
        {% if form.errors %}
            .otree-btn-next {
                display: none;
            }
        {% endif %}
    </style>
{% endblock %}