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

{%  block title %}
PART 4 - Instructions
{%  endblock %}

{% block content %}

    <p>
        In this task, you will be part of a <strong>group of {{ player.participant.vars.size }} players</strong>.
    </p>

    <table class="table-condensed" style="margin-top:20px;">
        <tr>
            <td style="width: 170px;">
                {% if player.participant.vars.treatment == 'a' or player.participant.vars.treatment == 'c' %}
                    <img src="{% static 'jars/jar_6blue_general.jpg' %}"/>
                {% elif player.participant.vars.treatment == 'b' or player.participant.vars.treatment == 'd'  %}
                    <img src="{% static 'jars/jar_9blue_general.jpg' %}"/>
                {% endif %}
            </td>
            <td style="width: 700px;">
                <p>
                    A ball is drawn for each player from the jar depicted on the left that has <strong>{{ player.participant.vars.blue_balls }} blue ball(s) and {{ player.participant.vars.red_balls }} orange ball(s)</strong>.<br>
                    After a ball is randomly drawn for one player, it is put back in the jar before another ball is drawn for the next player (draws are independent from each other).<br>
                    Note that the <strong>color of the ball drawn for you may be different from that of others</strong>.<br>
                    Moreover, you know what ball was drawn for you but not what balls were drawn for others.<br>
                </p>
            </td>
        </tr>
    </table>
    <p>
        Next, you are asked to make a choice: <strong>to choose between blue and orange.</strong><br>
         <ul>
             <li>If at least one player chooses orange, the group decision will be ORANGE;<br></li>
             <li>by contrast, for the group decision to be BLUE, all players must choose blue.<br></li>
         </ul>
    </p>


    <p>
        Your payoff depends on the <em>color of the ball drawn for you</em> and the <em>group decision</em>.<br>
        <strong>When the color of the ball that is drawn for you <em>matches</em> the group decision, you earn £{{ Constants.higher_payoff_AP }}; <br>
            Otherwise, you earn £{{ Constants.lower_payoff_AP }}.</strong><br>
    </p>

    <center>
        <table class="payoffTable" style="width: 500px; margin-top:20px; margin-bottom:40px">
            <tr>
                <th colspan="2">The player's payoffs</th>
                <td colspan="2">Group decision</td>
            </tr>
            <tr>
                <th colspan="2"></th>
                <td>ORANGE</td>
                <td>BLUE</td>
            </tr>
            <tr>
                <td rowspan="2">color of the ball drawn for the player</td>
                <td>orange</td>
                <td bgcolor="#d3d3d3">£{{ Constants.higher_payoff_AP }}</td>
                <td>£{{ Constants.lower_payoff_AP }}</td>
            </tr>
            <tr>
                <td>blue</td>
                <td>£{{ Constants.lower_payoff_AP }}</td>
                <td bgcolor="#d3d3d3">£{{ Constants.higher_payoff_AP }}</td>
            </tr>
        </table>
    </center>


        The same applies to other members of your group: they earn £{{ Constants.higher_payoff_AP }} when the group decision matches the color of the ball drawn for them, and £{{ Constants.lower_payoff_AP }} otherwise.
        Because the color of the ball drawn for each player may be different, <strong>the group decision you end up in may imply different payoffs for each player.</strong>


    <table class="table-condensed" style="margin-top:20px;">
        <tr>
            <td style="width: 170px;">
                {% if player.participant.vars.treatment == 'a' or player.participant.vars.treatment == 'b' %}
                    <img src="{% static 'positions/positions_4.png' %}"/>
                {% else %}
                    <img src="{% static 'positions/positions_8.png' %}"/>
                {% endif %}
            </td>
            <td style="width: 700px;">
                Players make decisions one by one in a queue.<br>
                You only have the chance to influence the group decision if people before you in the queue, if any, chose blue.
                Similarly, people after you in the queue, if any, only have the chance to influence the group decision if you choose blue.<br>
                <strong>You are asked to make a decision assuming that people before you in the queue, if any, chose blue</strong>.
            </td>
        </tr>
    </table>
    <br>
    <p>
        <strong>You will be making this decision in different scenarios.</strong><br>
        Scenarios vary in the <em>color of the ball drawn for you</em> and <em>your position in the decision queue (1st to choose, 2nd to choose, ...)</em>.<br>
        In some scenarios, the ball drawn for you will be blue and in others it will be orange.<br>
        Thus, the group decision associated to a payoff of £{{ Constants.higher_payoff_AP }} for you will vary between scenarios.<br>
    </p>
{#    <p>#}
{#        As mentioned, before making a decision, you are informed about the color of the ball drawn for you.<br>#}
{#        While you don't know what ball was drawn for other players in your group, you do know the probabilities associated to each color. <br>#}
{#        Below are the <strong>probabilities</strong> that no, some or all <strong>other members of your group#}
{#        earn a payoff of £{{ Constants.lower_payoff_AP }} instead of a payoff of £{{ Constants.higher_payoff_AP }}#}
{#        when the group decision ends up being ORANGE</strong>#}
{#        which happens when the ball drawn for them is blue.#}
{#    </p>#}
    <p>
        As mentioned, if you or any player in your group choose orange, the group decision will be ORANGE.<br>
        In that case, if the ball drawn for a player is blue, their payoff will be £{{ Constants.lower_payoff_AP }} instead of £{{ Constants.higher_payoff_AP }}.<br>
        While you don't know what ball was drawn for other players in your group when making a decision, you do know the odds associated to each color. <br>
        Below are the <strong>probabilities</strong> that no some or all <strong><em>other</em> members of your group
        earn a payoff of £{{ Constants.lower_payoff_AP }} instead of £{{ Constants.higher_payoff_AP }}
        when the group decision ends up being ORANGE</strong>, which happens when the ball drawn for them is blue.
    </p>



    <p>
        {% if player.participant.vars.treatment == 'a'  %}
            <center>
                <table class="myTable" style="width: 700px; margin-top:20px; margin-bottom:40px">
                    <tr>
                        <th colspan="2">Probability that among <em>other</em> members of your group...</th>
                    </tr>
                    <tr>
                        <td><strong>NO</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>6.4%</td>
                    </tr>
                    <tr>
                        <td><strong>AT LEAST 1</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>93.6%</td>
                    </tr>
                    <tr>
                        <td><strong>HALF OR MORE</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>64.8%</td>
                    <tr>
                        <td><strong>ALL</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>21.6%</td>
                    </tr>
                </table>
            </center>
        {% elif player.participant.vars.treatment == 'b'   %}
            <center>
                <table class="myTable" style="width: 700px; margin-top:20px; margin-bottom:40px">
                    <tr>
                        <th colspan="2">Probability that among <em>other</em> members of your group...</th>
                    </tr>
                    <tr>
                        <td><strong>NO</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>0.1%</td>
                    </tr>
                    <tr>
                        <td><strong>AT LEAST 1</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>99.9%</td>
                    </tr>
                    <tr>
                        <td><strong>HALF OR MORE</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>97.2%</td>
                    <tr>
                        <td><strong>ALL</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>72.9%</td>
                    </tr>
                </table>
            </center>
        {% elif player.participant.vars.treatment == 'c'  %}
            <center>
                <table class="myTable" style="width: 700px; margin-top:20px; margin-bottom:40px">
                    <tr>
                        <th colspan="2">Probability that among <em>other</em> members of your group...</th>
                    </tr>
                    <tr>
                        <td><strong>NO</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>0.2%</td>
                    </tr>
                    <tr>
                        <td><strong>AT LEAST 1</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>99.8%</td>
                    </tr>
                    <tr>
                        <td><strong>HALF OR MORE</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>71.0%</td>
                    <tr>
                        <td><strong>ALL</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>2.8%</td>
                    </tr>
                </table>
            </center>
        {% elif player.participant.vars.treatment == 'd' %}
            <center>
                <table class="myTable" style="width: 700px; margin-top:20px; margin-bottom:40px">
                    <tr>
                        <th colspan="2">Probability that among <em>other</em> members of your group...</th>
                    </tr>
                    <tr>
                        <td><strong>NO</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>0.0%</td>
                    </tr>
                    <tr>
                        <td><strong>AT LEAST 1</strong> player earns a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>100.0%</td>
                    </tr>
                    <tr>
                        <td><strong>HALF OR MORE</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>99.7%</td>
                    <tr>
                        <td><strong>ALL</strong> players earn a payoff of £{{ Constants.lower_payoff_AP }} from group decision ORANGE</td><td>47.8%</td>
                    </tr>
                </table>
            </center>
        {% endif %}
    </p>


    <p>
        <em>Your choices carry <strong>financial consequences</strong>:</em><br>
        At the end of the study, when all participants similarly recruited in Prolific have submitted their answers:
    <ul>
        <li>{{ player.participant.vars.size }} participants that made decisions in the same conditions as you will be selected at random to form a group</li>
        <li>each selected participant is randomly allocated to one of the positions in the decision queue (1st, 2nd, ..., or last)</li>
        <li>a ball will be drawn for each participant from the jar described (containing {{player.participant.vars.blue_balls}} blue ball(s) and {{player.participant.vars.red_balls}} orange ball(s)) determining which group decision is
            associated to a payoff of £{{ Constants.higher_payoff_AP }} for them</li>
        <li>if you are one of the selected participants, your decision and that of other members of your group are combined to define the group decision</li>
        <li>yours and others' payoffs are determined by comparing the color of the ball drawn for each person and that of the group decision: if the colors match, £{{ Constants.higher_payoff_AP }}; if not, £{{ Constants.lower_payoff_AP }}.</li>
    </ul>

        <strong>If you are one of the selected participants, this means that your decision in one of the scenarios will determine your earnings, </strong>
            together with decisions made by others.
        Thus, for each scenario consider your decision carefully.
    </p>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <p>
        <em>Have you understood the task? </em> <br>
        Next you will be presented with some comprehension questions regarding one possible scenario.<br>
        After answering all questions correctly, the task will start with one decision per scenario.<br>
        When you are ready, please press the "Next" button.</em>
    </p>
    <br>









    {% next_button %}


{%  endblock %}

{% block styles %}
<style>
    .box {
        width: 100%;
        /*height:200px;*/
        float: left;
        background-color: white;
        /*margin:0px 10px 25px 15px;*/
        margin-bottom: 30px;
        border-radius: 5px;
    }

    .box1 {
        background-color: #fcf8e3;
        padding: 20px;
    }

    .shadow1 {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    }

    .red {
        color: red;
    }

    .myTable { background-color:#FFFFE0;border-collapse:collapse; }
    .myTable th { background-color:#CCCC99;color:black;width:50%; }
    .myTable td, .myTable th { padding:5px;border:1px solid #BDB76B; }

    .payoffTable { background-color:#FFFFE0;border-collapse:collapse; }
    .payoffTable th { background-color:#CCCC99;color:black;width:50%; }
    .payoffTable td, .myTable th { padding:5px;border:1px solid #BDB76B; }




</style>
{% endblock %}