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

{% block styles %}
    <style>
        li{
            margin: 10px 0;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script src="{% static 'global/js/browser_info.js' %}"></script>
    <script src="{% static 'js/timer.js' %}"></script>

{% endblock %}


{% block title %}
    Instructions
{% endblock %}

{% block content %}

<div class="card">
    <div class="card-body">
        <p>
           In this experiment, we ask you to estimate <b>the number of Xs</b> in several matrices.
                <ul>
                    <li>There can be between 0 and 400 Xs.</li>
                    <li>You will see each matrix for {{ Constants.sec_per_matrix }} seconds.</li>
                    <li>We will then ask you to fill in your best guess for the number of Xs you saw.</li>
                    <li>We ask you to enter a lower and upper bound for your estimate.</li>
                    <li>You have {{ Constants.sec_to_answer }} seconds to enter your estimates after a matrix has disappeared.</li>
                    <li>After this, a new matrix will automatically appear.</li>
                    <li>You will not receive feedback about the accuracy of your guess.</li>
                    <li>You will receive a bonus payment of &pound;{{ Constants.accuracy_bonus }} if your best estimates
                        are the most accurate out of a group of 10 participants.</li>
                </ul>
        </p>


        <div style="margin: 30px 0">
            <img src = "{% static 'img/matrix_200.png' %}" id="matrix" style="  display: block;margin-left:auto; margin-right:auto; width:50%;"/>
            <figcaption style="font-style:italic; margin-left:auto; margin-right:auto; width:70%;text-align: center">An example image of a matrix.</figcaption>
        </div>

        {% formfield player.attention_check %}

        <div class="alert alert-warning">
            Before you click next, please make sure you have understood the instructions.
        </div>

        <!-- Hidden Tracking Fields -->
        <input type="hidden" name="window_width" id="id_window_width" value="0"/>
        <input type="hidden" name="window_height" id="id_window_height" value="0"/>


        <div style="text-align: right">
            {% next_button %}
        </div>

    </div>
</div>


{% endblock %}