{% 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>
            There are two judges who observe a coin flip.
            One of the two judges is a <u>good</u> judge and the other is a <u>crazy</u> judge.
            The <u>good</u> judge would tell you the truth about which side of the coin came up.
            The <u>crazy</u> judge flips another coin and tells you which side came up.
        </p>

        <p>
            You hear from one of the two judges and it is equally likely that you hear from the <u>good</u> or from the <u>crazy</u> judge.
            When hearing from a judge, you cannot see whether it is the <u>good</u> or the <u>crazy</u> judge.
        </p>

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

        <p>
            {% formfield player.screening2 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 %}