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

{% block title %}
    <h3>Introduction</h3>
{% endblock %}

{% block content %}

<style>
    h3, p {
       margin-bottom:50px;
    }
</style>

<p>
    The number of balls in each box have now changed.
    The first box has 1 <span style="color:red;font-weight:bold">red</span> ball and 1 <span style="color:blue;font-weight:bold">blue</span> ball.
    The second box has 1 <span style="color:red;font-weight:bold">red</span> ball and 1 <span style="color:blue;font-weight:bold">blue</span> ball.
</p>

<p>
    You flip a fair coin as before.
    When the coin comes up heads, you draw a ball from the first box. When it comes up tails, you draw a ball from the second box.
</p>

<p>
    The set-up is shown in the figure below.
</p>

    <img src="{% static 'MotivatedBeliefs/UQ_2.jpg' %}" width="100%" height="100%">

<p>
    Suppose that you flipped the coin. You don't know which side the coin comes up, but you know that the ball drawn (by someone) is <span style="color:red;font-weight:bold">red</span>.
</p>

    {% formfield player.U3 label="Based on this information, is it more likely that the coin came up heads or is it more likely that the coin came up tails?" %}

    {% next_button %}

{% endblock %}