{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    ROUND {{ subsession.round_number }} - WHAT COLOR DO YOU THINK THE BALL IS?
{% endblock %}

{% block content %}
    <p>
        You have decided to consult a
        {% if player.expert_choice == 'BLUE Expert' %}
            <span style="color: blue;"><b>BLUE</b></span> Expert.<br/>
        {% endif %}
        {% if player.expert_choice == 'RED Expert' %}
            <span style="color: red;"><b>RED</b></span> Expert.<br/>
        {% endif %}
    </p>

    <br/><br/>

    <p>What would your guess about the ball color be if the expert said "The randomly drawn ball is <span style="color: blue;"><b>BLUE</b></span>"?</p>

    {% formfield player.ball_choice_b with label="" %}

    <p>On a scale from 0 to 100, how confident are you about this guess? For example, 0 means you are not
        confident at all about your guess and 100 means you are sure your guess is correct.</p>

    {% formfield player.confidence_b with label="" %}

    <p>What would your guess about the ball color be if the expert said "The randomly drawn ball is <span style="color: red;"><b>RED</b></span>"?</p>

    {% formfield player.ball_choice_r with label="" %}

    <p>On a scale from 0 to 100, how confident are you about this guess?</p>

    {% formfield player.confidence_r with label="" %}


    <br/><br/>

    {% next_button %}

{% endblock %}

{% block styles %}
    <style type="text/css">
        img {
            display: block;
            margin: auto;
            width: 200px;
            height: auto;
        }
        p {
            text-align: justify;
            font-size: 1.3vw;
        }
        ul {
            text-align: justify;
            font-size: 1.3vw;
        }
        li {
                padding-bottom: 0.35vw;
        }

        th, td {
            text-align: center;
            font-size: 1.3vw;
            font-weight: 400;
        }

    </style>
{% endblock %}