{% 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 = 2;   // 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: 60%; 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/choice.png' %}">What is your task in the experiment?</h4>
        <div class="alert">
            <ul>
                <li>You can <b>donate to different charity projects</b> which provide vitamin A supplements to children in need.</li>
                <li>The projects <b><u>differ in price and number of vitamin A supplements</u></b> financed.</li>
                <li>However, you do not perfectly know how many vitamin A doses your donation finances.</li>
                <li>Instead, you have to <b>estimate this number</b>.</li>
            </ul>
        </div>


        <div class="alert">
                <h5><i style="color: #B22222" class="bi bi-exclamation-triangle"></i> Your donation has real consequences! </h5>
                <p>
                    For each vitamin A dose you donate, we will provide the equivalent funding to a real
                    charity for buying and administering vitamin A doses.
                </p>
        </div>



        <h4><img style="width: 4%;margin-right: 0.5em" src="{% static 'global/img/donation.png' %}">Why vitamin A supplements?</h4>
        <div class="alert">
            <ul>
                <li>Over 200,000 children's deaths can be attributed to vitamin A deficiency each year.</li>
                <li>The <b>World Health Organization recommends</b> that all preschool-aged children in areas where vitamin A
                    deficiency is a public health problem receive vitamin A supplements two to three times per year.</li>
                <li>In this experiment, you can donate to children in need through Helen Keller International's Vitamin A
                    Supplementation Program.<a style="font-size: 10pt" href="#footnote1"><sup>[1]</sup></a></li>
            </ul>
        </div>


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

        <p style="font-size: 10pt; margin-top: 120px" id="footnote1"><sup>[1]</sup> You can read more about the charity and its scientific evaluation <a href="https://www.givewell.org/charities/helen-keller-international" target="_blank" rel="noopener noreferrer">here</a>.</p>

    </div>

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

        <h4><img style="width: 4%; margin-right: 12px" src="{% static 'img/coin.svg' %}">How can you donate?</h4>
        <div class="alert">
            In each round,
            <ul>
                <li>you receive &#36;{{ Constants.endowment }}, which you can spend on donations.</li>
                <li>you will see two projects.</li>
                <li>you can <b>donate to one, both, or neither</b> of the projects.</li>
                <li>your bonus payment may be determined by your donation(s).</li>
            </ul>
        </div>


        <div class="alert alert-warning alert-bonus" role="alert">
            If your donation decision <u>in a given round</u> is selected as the decision-that-counts, your bonus payment will determined as follows:
            <ul>
                <li>If you donated to at least one of the two projects,
                    <ul>
                        <li>you <b>receive <u>&#36;{{ Constants.endowment }} minus the sum of prices of the projects to which you donated</u></b>, and</li>
                        <li>we will <b>donate vitamin A doses</b> to each of the projects to which you donated.</li>
                    </ul>
                </li>
                <li>If you decided not to donate, you will keep the entire <b>&#36;{{ Constants.endowment }}</b>.</li>
            </ul>
        </div>

        <br><br>

        <h4><i style="font-weight: 100; font-size: 24pt; margin-right: 0.5em" class="bi bi-bag-heart"></i>How do donation projects differ?</h4>
        <div class="alert">
            <ul>
                <li>Each project is described by:
                    <ul>
                        <li>an image depicting the <b>number of vitamin A doses</b> this project finances (which you have to estimate),</li>
                        <li><b>the price</b> of donating to this project</li>
                    </ul>
                </li>
                <li>The price can be <b>either &#36;4 or &#36;16</b>.</li>
            </ul>
        </div>

        <div class="alert">
            <table>
                <tr>
                    <td>
                        <h3><i style="color: #B22222;margin-right: 1em" class="bi bi-exclamation-triangle"></i></h3>
                    </td>
                    <td>
                        How many vitamin A doses your donation finances <b>depends only on the true number of pills</b>
                        in the image and <b>not on your estimate</b>!
                    </td>
                </tr>
            </table>
        </div>



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



    <!-- Page 3 -->
    <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_3 %}
            {% formfield player.cq_4 %}


        <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</button>
        </p>
    </div>

    </div>
</div>

{% endblock %}