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

{% block styles %}
    <link href="{% static 'global/css/ecomb.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        /* Alignment of buttons */
        .next {float: right; margin-top: 40px;}
        .back {float: left; margin-top: 40px;}
        li{margin: 10px 0;}
        .controls ul li{margin: 0;}
        .tab{margin: 10px;}
    </style>
{% endblock %}

{% block scripts %}
    <script src="{% static 'global/js/browser_info.js' %}"></script>
    <script src="{% static 'global/js/backbutton.js' %}"></script>
    <script> // display last tab when error message is shown
        $( document ).ready(function() {
            classCheck = $('div').hasClass("otree-form-errors alert alert-danger");
            console.log("classCheck", classCheck);

            let tabIndex = 0;

            if ($('div').hasClass("otree-form-errors alert alert-danger")) {
                activeTab = 1;   // show last tab

            for (let tab of document.getElementsByClassName('tab')) {
                tab.style.display = tabIndex === activeTab ? 'block' : 'none';
                tabIndex++;
            }
            }
        });
    </script>
{% endblock %}


{% block title %}
    Instructions - The Donation Task
{% endblock %}



{% block content %}

    <!-- 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 class="progress" style="margin-bottom: 12pt; margin-top: 12pt">
        <div class="progress-bar" role="progressbar" style="width: 100%; background-color: powderblue" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

<div class="card">
    <div class="card-body">

        <!-- Page 1 -->
        <div class="tab">
            <h4><img style="width: 5%;" src="{% static 'global/img/vitamins.png' %}">How do you estimate the number of vitamin A doses?</h4>
            <div class="alert">
                <ul>
                    <li>For each project, you will see an image like the one below.</li>
                    <li>You will see each image for <b>{{ Constants.sec_per_matrix }} seconds</b>.</li>
                    <li>Then, we ask for <b>your estimate</b> for the number of pills and how certain you are about your estimate.</li>
                    <li>There are <b>between 0 and 400 pills</b> in an image. <br></li>
                    <li>The number of pills <img style="width: 3%;" src="{% static 'global/img/pill.png' %}"> indicates
                        the number of vitamin A doses: <br>
                        <b>for each 10 pills</b> depicted on an image, your donation finances <b>1 vitamin A dose</b>.</li>
                </ul>
            </div>

            <div class="alert alert-warning alert-bonus" role="alert">
                If one of your estimates is selected as a decision-that-counts,
                    <ul>
                        <li>
                            you receive <span style="color:darkred"><b><u>&#36;{{ player.accuracy_bonus }}</u></b></span>
                            if your estimate is <b>at most 10 pills away from the true number</b> of pills.
                        </li>
                        <li>
                            you receive <b>no bonus</b> if your estimate is <b>more than 10 pills away</b> from the true number.
                        </li>
                    </ul>

                <table>
                    <tr>
                        <td>
                            <h3><i style="color: #B22222;margin-right: 1em" class="bi bi-exclamation-triangle"></i></h3>
                        </td>
                        <td>
                            We will never give feedback on how close your estimate was to the true number of pills.
                        </td>
                    </tr>
                </table>
            </div>

            <div class="alert">
                <p>
                    Below you see an example of an image which contains 200 <img style="width: 3%;" src="{% static 'global/img/pill.png' %}">.
                    In this project, your donation would then finance 20 vitamin A doses.
                </p>
                <img style="width: 90%; margin-left:auto; margin-right:auto; display: block;" src="{% static 'global/img/example.png' %}">
            </div>

            <p>
                <button type="button" class="btn btn-primary btn-tab next" data-offset="1">Next</button>
            </p>

        </div>



        <!-- Page 2 -->
        <div class="tab">

            <div class="alert alert-primary">
                Before we start, we need to ensure that you understand the instructions.
                <br>
                Remember, if you answer <b>more than two questions wrongly</b>, you will be excluded from the experiment.
                You may view the instructions again by going back to the previous page (click 'back' below).
                <br>
            </div>


                {% formfield player.cq_5 %}
                {% formfield player.attention_check %}
                {% formfield player.cq_6 %}



            <p>
                <button type="button" class="btn btn-primary btn-tab back" data-offset="-1">Back</button>
                <button class="btn btn-primary next">Check my answers and continue with a trial round</button>
            </p>
        </div>

    </div>
</div>

{% endblock %}