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

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

    <p>
        <strong>Example</strong>
    </p>
    <p>
        Consider that you are the <strong>2nd</strong> player of a group of <strong>4</strong> and previous player(s) chose blue.
    </p>
    <p>
        Consider that for each player payoffs are determined by a random draw from a jar with <strong>6</strong> blue balls
        and <strong>4</strong> red balls as represented in the Figure below. After a ball is drawn for a player, it is put back in the jar - thus, draws are independent.
        You don't know what ball was drawn for each player - you just know the probabilities associated to each colour.
    </p>

    <img src="{% static 'jar_6blue.jpg' %}"/>

    <p>
        Consider that a ball is drawn for you out of the same jar and its colour is <strong>red</strong>:
        this means that if the outcome is RED you are paid $\$Y$; if the outcome is BLUE, you are paid $\$y$.
        The first player has chosen blue and it is now your chance to choose as the second player.
        As represented in the sketch below, recall that if you choose red,
        the game ends and the outcome is RED; if you choose blue, the next player(s)
        will have the chance to determine the outcome being BLUE or RED unless you are the last player already.
    </p>

    <img src="{% static 'decision_abilene.jpg' %}"/>

    <p>
        Below are the probabilities that no, some or all other members of your group are negatively affected
        (they earn £y instead of £Y) if the outcome happens to be RED and respective earnings.
        This table will always be presented to you. The outcome is determined by everyone's choices, including yours.
    </p>

    <img src="{% static 'probability_tables/table_prior6_n4.png' %}"/>
    <h3>
    <p>
        <em>Based on the text you read above...</em>
    </p>


<h3>Question 1</h3>
<p>{% formfield player.attention_players %}

<h3>Question 2</h3>
<p>{% formfield player.attention_position %}

<h3>Question 3</h3>
<p>{% formfield player.attention_opportunity %}

<h3>Question 4</h3>
<p>{% formfield player.attention_othersred %}

<h3>Question 5</h3>
<p>{% formfield player.attention_othersblue %}

<h3>Question 6</h3>
<p>{% formfield player.attention_majorityblue %}



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