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

{% block title %}
    PART 4 - Your decisions
{% endblock %}

{% block content %}
{#<p>You are a {{ player.participant.vars.player_type}} type of person </p>#}
{#<p>You are taking part in treatment: {{player.participant.vars.treatment}}</p>#}
{#<p>And your paradox index in this round is: {{player.participant.vars.paradox_index}} </p>#}
{##}
{#    <p>This is app1. You are type blue</p>#}
{##}
{#    <hr>#}



    <div class="row">
        <div class="col-sm-12">
            <div class="box box1 shadow1">
                In this page, you are facing one of the possible scenarios. You are asked to make a decision with financial consequences to your final payment and that of other participants taking part in this study.<br><br>
{#                if they happen to be randomly matched with you to form a group.#}
                Before submitting your choice, <strong>watch out</strong> for the
                <strong>color of the ball</strong> drawn for you (that determines the group decision associated to a payoff of £{{ Constants.higher_payoff_AP }} as opposed to £{{ Constants.lower_payoff_AP }})
                and your <strong>position</strong> in the decision queue. These vary between scenarios while all else is constant.
            </div>
        </div>
    </div>

    <p>
        You are 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/30_jar_6blue_blue.jpg' %}"/>
                {% elif player.participant.vars.treatment == 'b' or player.participant.vars.treatment == 'd'  %}
                    <img src="{% static 'jars/30_jar_9blue_blue.jpg' %}"/>
                {% endif %}
            </td>
            <td style="width: 700px;">
                <big><strong>A <em>blue</em> ball was drawn for you</strong></big> from the jar on the left, thus <strong>you are paid £{{ Constants.higher_payoff_AP }}</strong> if the group decision is BLUE and <strong>£{{ Constants.lower_payoff_AP }}</strong> if the group decision is ORANGE. <br>
                Similarly, one ball was drawn for each member of your group (at random and with replacement) and <strong>if the color of their ball <em>matches</em> the group decision they are paid £{{ Constants.higher_payoff_AP }}, and £{{ Constants.lower_payoff_AP }} otherwise.</strong>
                While you don't know what balls were randomly drawn for others, you do know that the odds of each getting a blue ball is {{ player.participant.vars.blue_balls }} out of 10.
            </td>
        </tr>
    </table>


    <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' %}
                    {% if player.participant.vars.position == '1st' %}
                        <img src="{% static 'positions/50_1st_size4.png' %}"/>
                    {% elif player.participant.vars.position == '2nd' %}
                        <img src="{% static 'positions/50_2nd_size4.png' %}"/>
                    {% elif player.participant.vars.position == '3rd' %}
                        <img src="{% static 'positions/50_3rd_size4.png' %}"/>
                    {% elif player.participant.vars.position == '4th' %}
                        <img src="{% static 'positions/50_4th_size4.png' %}"/>
                    {% endif %}
                {% elif player.participant.vars.treatment == 'c' or player.participant.vars.treatment == 'd' %}
                    {% if player.participant.vars.position == '1st' %}
                        <img src="{% static 'positions/50_1st_size8.png' %}"/>
                    {% elif player.participant.vars.position == '2nd' %}
                        <img src="{% static 'positions/50_2nd_size8.png' %}"/>
                    {% elif player.participant.vars.position == '3rd' %}
                        <img src="{% static 'positions/50_3rd_size8.png' %}"/>
                    {% elif player.participant.vars.position == '4th' %}
                        <img src="{% static 'positions/50_4th_size8.png' %}"/>
                    {% elif player.participant.vars.position == '5th' %}
                        <img src="{% static 'positions/50_5th_size8.png' %}"/>
                    {% elif player.participant.vars.position == '6th' %}
                        <img src="{% static 'positions/50_6th_size8.png' %}"/>
                    {% elif player.participant.vars.position == '7th' %}
                        <img src="{% static 'positions/50_7th_size8.png' %}"/>
                    {% elif player.participant.vars.position == '8th' %}
                        <img src="{% static 'positions/50_8th_size8.png' %}"/>
                    {% endif %}
                {% endif %}
            </td>
            <td style="width: 700px;">
                You are the <big><strong><em>{{ player.participant.vars.position }}</em> player</strong></big> in the decision queue. <br>
                Previous player(s), if any, chose blue thus you get the chance to choose between blue and orange and influence the group decision being BLUE or ORANGE. <br>
            </td>
        </tr>
    </table>


    {#    <table class="table-condensed" style="margin-top:40px; margin-bottom:40px;">#}
    {#        <tr>#}
    {#            <td style="width: 170px;">#}
    {#                <img src="{% static 'rsz_1decision_abilene.jpg' %}"/>#}
    {#            </td>#}
    {#            <td style="width: 700px;">#}
    {#                As represented in the sketch, if you choose orange, the game ends and the group decision is ORANGE;#}
    {#                if you choose blue, the next players, if any, will have the chance to determine the group decision being BLUE or ORANGE. <br>#}
    {#                Thus, group decision BLUE is possible if you choose blue and impossible if you choose orange. BLUE only happens if all players choose blue including you.#}
    {#            </td>#}
    {#        </tr>#}
    {#    </table>#}

    <p>
        Recall that:
        <ul>
            <li>if you choose orange, the game ends and the group decision is ORANGE;</li>
            <li>if you choose blue, the next players, if any, will have the chance to determine the group decision being BLUE or ORANGE.</li>
        </ul>
        Thus, group decision BLUE is possible if you choose blue and impossible if you choose orange. Moreover, group decision BLUE only happens if all players choose blue including you.
    </p>

    <p>
        {#        Below are the <strong>probabilities</strong> that no, some or all <strong>other members of your group have their payoffs negatively affected if the group decision ends up being ORANGE</strong> and respective earnings.#}
        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>


    {% formfield player.chose_orange label='In this scenario, what do you choose?' %}

    {% 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; }



</style>
{% endblock %}