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

{% block title %}
Easy questions
{% endblock %}

{% block content %}

<div class="content">
    <img src="{% static 'Scapegoating/goofy.jpg' %}" width="10%" height="10%"  border="10px" vspace="40px">
    <div class="text">
        <p>
            Now, there are three judges who observe a coin flip.
            One of the three judges would always tell you heads while another would always tell you tails.
            Only one of the three judges would tell you the truth about which side of the coin came up (the <u>good</u> judge)
        </p>

        <p>
            As before, you hear from one of the three judges and it is equally likely that you hear from any one of the three judges.
            When hearing from a judge, you cannot see whether which one of the three judges it is.
        </p>

        <p>
            So, after the coin is flipped you randomly speak with one of the two judges who tells you that it came up tails.
        </p>

        <p>
            {% formfield player.screening3 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?" %}
        </p>

        <p>
            {% next_button %}
        </p>
    </div>
    <img src="{% static 'Scapegoating/judge.jpg' %}" width="13%" height="13%"  border="0px" vspace="20px">
</div>

<style>
.content {
    display: flex;
}

.content img {
    margin-left: 15px;
    margin-right: 25px;
    display: block;
}

.content h3,
.content p {margin: 0;}

</style>


{% endblock %}