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

{% block styles %}
    <link href="{% static 'global/css/ecomb.css' %}" rel="stylesheet">
    <style>
        /* Alignment of buttons */
        .next {float: right; margin: 40px auto;}
        .back {float: left; margin: 40px auto;}
        li{margin: 10px 0;}
        .controls ul li{margin: 0;}
        .tab{margin-top: 30px;}
        .center_img {width: 40%; display: block; margin-left: auto; margin-right: auto;}
    </style>
{% endblock %}

{% block scripts %}
    <script src="{% static 'global/js/browser_info.js' %}"></script>
    <script src="{% static 'global/js/backbutton.js' %}"></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"/>



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

        <h4><img style="width: 5%;" src="{% static 'global/img/choice.png' %}">What is your task in the experiment?</h4>
        <ul>
            <li>You can <b>donate to different charity projects</b> which provide vitamin A supplements.</li>
            <li>The projects <b><u>differ in costs 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 class="alert alert-warning alert-bonus" role="alert">
            We randomly select 1 out of 20 respondents. If you are among them, we <b>randomly select one of your decisions
            to be the decision-that-counts for your bonus payment</b>. <br>
            We use yellow boxes to explain how your decisions affect your bonus payment.
        </div>


        <h4><img style="width: 4%;margin-right: 6px" src="{% static 'global/img/donation.png' %}">Why vitamin A supplements?</h4>
        <ul>
            <li>Over 200,000 children's deaths can be attributed to vitamin A deficiency each year.</li>
            <li>The World Health Organization recommends that all preschool-aged children in areas where vitamin A
                deficiency is a public health problem receive <b>vitamin A supplements two to three times per year</b>.</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>
            <li>Specifically, for each vitamin A dose that you donate, we will provide the equivalent funding
                to Helen Keller International for buying and administering vitamin A doses.</li>
        </ul>


        <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: 5%;" src="{% static 'global/img/vitamins.png' %}">How do you estimate the number of vitamin A doses?</h4>
        <ul>
            <li>For each project, you will see a picture like the one below: <br>
                <img class="center_img" src="{% static 'global/img/matrices/matrix_200.png' %}">
            </li>
            <li>The number of pills <img style="width: 3%;" src="{% static 'global/img/pill.png' %}"> in the image indicates the number of vitamin A doses: <br>
                <b>for each 10 pills</b> in an image your donation finances <b>1 dose vitamin A</b>.</li>
            <li>For example, if an image contains 200 pills, your donation to this project would finance 20 doses of vitamin A.</li>
            <li>You will see each image for <b>{{ Constants.sec_per_matrix }} seconds</b>.</li>
            <li>Then, we ask for <b>your best 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>
        </ul>

        <div class="alert alert-warning alert-bonus" role="alert">
            <li>If one of your estimates is selected as a decision-that-counts,
                <ul>
                    <li>you <b>receive <u>&#36;{{ player.belief_bonus }}</u></b> 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>
            </li>
        </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">

        <h4><img style="width: 4%; margin-right: 12px" src="{% static 'img/coin.svg' %}">How can you donate?</h4>

        <ul>
            <li>On each screen, you will see one project.</li>
            <li>Each project is described by:
                <ul>
                    <li>an image depicting the <b>number of vitamin A doses</b> this project finances (as described before), and</li>
                    <li><b>how much it costs</b> you to donate to this project</li>
                </ul>
            </li>
            <li>After estimating the number of vitamin A doses, you <b>decide whether to donate to the project</b>.</li>
            <li>How many vitamin A doses your donation finances <b>depends only on the true number of pills</b> in an image
                and <b>not on your estimate</b>.
            </li>
        </ul>

        <div class="alert alert-warning alert-bonus" role="alert">
            If a donation decision is selected as a decision-that-counts:
            <ul>
                <li>If you donated to the project in a decision-that-counts,
                    <ul>
                        <li>you <b>receive <u>&#36;{{ Constants.endowment }} minus the costs of the project</u></b>, and</li>
                        <li>we will <b>donate the true number of vitamin A doses</b> your donation finances.</li>
                    </ul>
                </li>
                <li>If you decided not to donate, you will <b>receive &#36;{{ Constants.endowment }}</b>.</li>
            </ul>
        </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 4 -->
    <div class="tab">

        <div class="alert alert-primary">
            Before we start, we need to ensure that you understand the instructions. We ask you to answer 4 simple questions.
            <br>
            You may view the instructions again by going back to the previous page (click 'back' below).
        </div>

            {% formfield player.cq_1 %}
            {% formfield player.cq_2 %}
            {% formfield player.cq_3 %}
            {% formfield player.attention_check %}


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



{% endblock %}