{{ block title }}{{ endblock }}

{{ block content }}

<link rel="stylesheet" href="{{ static 'css/css.css' }}">
<link rel="stylesheet" href="{{ static 'css/modal.css' }}">
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>

<div class="content-box box-info">
    <h2 class="section-title">Introductory instructions</h2>
    <hr class="section-divider">

    {{ include C.Instructions_general_path }}



 <div class="section-box box-warn">
    <div class="section-header">
      <div class="icon">🧪</div>
      <h3>First rounds and grouping</h3>
  </div>  


  <div class="section-box box-calm">
    <div class="section-header">
      <div class="icon">🧪</div>
      <h4>First two rounds</h4>
  </div>
           <ul>
          <li>On the next few pages, you will play two rounds of the Intelligence Test. </li>
          <li>In both of these rounds, each correct answer will earn you <strong>{{C.Practice_ECs}} ECs</strong>.</li>
          <ul>
            <!-- TODO: clarify the payment: do these also accumulate? -->
            <li>Remember that accumulated ECs will be exchanged into Euros at the end.</li>
          </ul>
      </ul>
  </div>

  <div class="section-box box-calm">
    <div class="section-header">
      <div class="icon">👥</div>
      <h4>Grouping</h4>
  </div>
       <ul>
    <li>After the first two rounds, you will be grouped with 2 other participants. </li>
    <li>Grouping is based on how you perform in these two rounds. </li>
    <li>At this point, we will not explain how the grouping works, but you should know that it is in your interest to perform your best.</li>
    <li>In other words, in addition to earning you ECs, <strong>your performance in the these rounds affect your earnings later in the experiment.</strong></li>
    <li>It is in your best interest to perform as well as you can.</li>
  </ul>
  </div>
  </div>













    {% for field in form %}
        {% if field.name not in hidden_fields %}
            {{ formfield field.name }}
        {% endif %}
    {% endfor %}

    <div style="display:none">
        {% for field in form %}
            {% if field.name in hidden_fields %}
                {{ formfield field.name }}
            {% endif %}
        {% endfor %}
    </div>
  </div>

    <div class="buttons-container">
        <a id="myBtn" onclick="open_modal(1)" class="btn btn-info">Introductory Instructions</a>
        <button id="NextButton" class="btn btn-primary">Start first round</button>
    </div>
</div>

<!-- Modal popup -->
<div id="myModal1" class="modal">
  <div class="modal-content">
      <div class="modal-header">
        <h2><span class="icon">📘</span>Instructions</h2>
        <span class="close" onclick="span_click(1)">&times;</span>
      </div>
      <div class="modal-body">
        <p>
          {{ include C.Instructions_general_path }}
        </p>
      </div>
  </div>
</div>

{{ endblock }}