{% load otree static %}

{% block content %}
<style>
    .question-container {
        text-align: center;
        position: relative;
        margin-bottom: 30px; /* Space below each question */
    }

    .question-container::after {
        content: "";
        display: block;
        height: 30px; /* Height of the black separation */
        background-color: black;
    }
</style>
<ol>
    <li>
        <div class="question-container">
            <img src="{% static 'images/1.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_1 label="Please select the element that completes the pattern:" %}
        </div>
    </li>

    <li>
        <div class="question-container">
            <img src="{% static 'images/2.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_2 label="Please select the element that completes the pattern:" %}
        </div>
    </li>

       <li>
        <div class="question-container">
            <img src="{% static 'images/3.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_3 label="Please select the element that completes the pattern:" %}
        </div>
    </li>

    <li>
        <div class="question-container">
            <img src="{% static 'images/4.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_4 label="Please select the element that completes the pattern:" %}
        </div>
    </li>

        <li>
        <div class="question-container">
            {% load static %}
            <img src="{% static 'images/5.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_5 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>


      <li>
       <div class="question-container">
            {% load static %}
            <img src="{% static 'images/6.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_6 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>


      <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/7.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_7 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

      <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/8.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_8 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

      <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/9.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_9 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

      <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/10.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_10 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
         <div class="question-container">
            {% load static %}
            <img src="{% static 'images/11.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_11 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/12.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_12 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
         <div class="question-container">
            {% load static %}
            <img src="{% static 'images/13.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_13 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/14.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_14 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/15.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_15 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/16.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_16 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
         <div class="question-container">
            {% load static %}
            <img src="{% static 'images/17.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_17 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

     <li>
         <div class="question-container">
            {% load static %}
            <img src="{% static 'images/18.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_18 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
         <div class="question-container">
            {% load static %}
            <img src="{% static 'images/19.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_19 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
         <div class="question-container">
            {% load static %}
            <img src="{% static 'images/20.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_20 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/21.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_21 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/22.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_22 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/23.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_23 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/24.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_24 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/25.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_25 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/26.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_26 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/27.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_27 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
          <div class="question-container">
            {% load static %}
            <img src="{% static 'images/28.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_28 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

    <li>
        <div class="question-container">
            {% load static %}
            <img src="{% static 'images/29.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_29 label="Please select the element that completes the pattern:"%}
        </div>
        <br>
    </li>

      <li>
        <div class="question-container">
            <img src="{% static 'images/30.png' %}" alt="" width="400" height="380"/>
            {% formfield player.answer_IQ_30 label="Please select the element that completes the pattern:" %}
        </div>
    </li>
</ol>



</ol>

{% next_button %}
<br>
<br>
{% endblock %}