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

{%  block title %}
PART 4 - Comprehension Questions
{%  endblock %}

{% block content %}

    <div class="row">
        <div class="col-sm-12">
            <div class="box box1 shadow1">
                <p>
                    To ensure you understand the task that will follow,
                    please read the example below and answer the questions.
                </p>
                <p><b>NOTE:</b> You have {{ Constants.practice_max_attempts }} attempts to answer the questions correctly.</p>
                <p>If you fail to answer the questions correctly you will be excluded from the study.</p>

                {% if player.example_attempts == Constants.practice_max_attempts %}
                    <p style="color: red;"><b>This is your last attempt at answering the questions correctly.</b></p>
                {% elif player.example_attempts > 0 %}
                    <p><b>This is attempt {{player.example_attempts }} of {{ Constants.practice_max_attempts }}.</b></p>
                {% endif %}
            </div>
        </div>
    </div>

    <br>
    <hr>
    <br>
    <p>
        <h3><em>Example</em></h3>
    </p>


    <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' %}
                    <img src="{% static 'positions/50_2nd_size4.png' %}"/>
                {% elif player.participant.vars.treatment == 'c' or player.participant.vars.treatment == 'd' %}
                    <img src="{% static 'positions/50_2nd_size8.png' %}"/>
                {% endif %}
            </td>
            <td style="width: 700px;">
                You are the <big><strong><em>2nd</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>

    <br>
    <hr>
    <br>
    <p>
        <h3><em>Comprehension Questions: based on the example you read above...</em></h3>
    </p>

    <p>{% formfield player.attention_players %}</p>
    <p>{% formfield player.attention_position %}</p>
    <p>{% formfield player.attention_opportunity %}</p>
    <p>{% formfield player.attention_othersred %}</p>
    <p>{% formfield player.attention_othersblue %}</p>
    <p>{% formfield player.attention_majorityblue label='Among other players, what is the probability that half or more earn a payoff of £3 (instead of £4) from group decision ORANGE?' %}</p>
    <p>{% formfield player.attention_scenarios %}</p>


     <p>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>


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