{{ 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">Intelligence Test: Tutorial 🧠</h2>
    <hr class="section-divider">

    <!-- _templates/global/Instructions.html -->

  <!-- What to Expect -->
  <div class="section-box box-neutral">
    <div class="section-header">
  </div>

  <ul>
    <li>
      In this experiment, you will perform at an intelligence test in multiple rounds.
    </li>
    <li>
      Each round of the intelligence test will last 3 minutes and will consist of three blocks:
    </li>  

    <ol>
      <li><strong>Matrix reasoning:</strong> You will be shown a 3x3 matrix of shapes. Your task is to identify the missing shape in the bottom right corner.</li>
      <li><strong>Analogies:</strong> You will be shown a pair of words with a certain relationship (e.g., "cat : kitten"). Then, you will be given a new word and asked to find the word that has the same relationship with it (e.g., "dog : _____" where the missing word would be "puppy").</li>
      <li><strong>Mathematics:</strong> You will be given a series of mathematical problems to solve. </li>
    </li>
  </ol>
<br>
  <li>
    Each of these blocks will last 1 minute. 
    After 1 minute, you will automatically move on to the next block. You may answer as many questions as you can within the time limit.
  </li>
  
  
  
  <li>
    On the next few pages, you will play a tutorial of the intelligence test.
  </li>
  
  
</ul>
    




  </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">
      <div class="Instructions">
      </div>
        <button id="NextButton" class="btn btn-primary">Start Tutorial</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>

<div id="myModal2" class="modal">
  <div class="modal-content">
      <div class="modal-header">
        <h2><span class="icon">📘</span>Practice Instructions</h2>
        <span class="close" onclick="span_click(2)">&times;</span>
      </div>
      <div class="modal-body">
        <p>
          {{ include C.Instructions_practice_1 }}
        </p>
      </div>
  </div>
</div>
{{ endblock }}