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

{% block title %}
    FEEDBACK / 1
{% endblock %}

{% block content %}

    {% if player.feedback1 == 'answer1' %}
        <p>
            <span style="color: green;"><b>Correct! </b></span><br><br>

            The urn contains {{ Constants.total }} balls in total: {{ n1_balls }} <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>
            balls and {{ n2_balls }} <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> balls. <br/><br/>

            The computer draws one ball completely at random: each of the {{ Constants.total }} balls is equally likely to be drawn.<br><br>

            This means that there are {{ n1_balls }} chances out of {{ Constants.total }} that the computer draws a {{ Constants.colour1 }} ball
            and {{ n2_balls }} chances out of {{ Constants.total }} that the
            computer draws a {{ Constants.colour2 }} ball. <br><br>

            Thus, without any additional information, you know that the ball is more likely to be {{ Constants.colour1 }}.
        </p>

    {% endif %}

    {% if player.feedback1 == 'answer2' %}
        <p>
            <span style="color: red;"><b>Incorrect! </b></span><br><br>

            The urn contains {{ Constants.total }} balls in total: {{ n1_balls }} <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>
            balls and {{ n2_balls }} <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> balls. <br/><br/>

            The computer draws one ball completely at random: each of the {{ Constants.total }} balls is equally likely to be drawn.<br><br>

            This means that there are {{ n1_balls }} chances out of {{ Constants.total }} that the computer draws a {{ Constants.colour1 }} ball
            and {{ n2_balls }} chances out of {{ Constants.total }} that the
            computer draws a {{ Constants.colour2 }} ball. <br><br>

            Thus, without any additional information, you know that the ball is more likely to be {{ Constants.colour1 }}.
        </p>
    {% endif %}

    {% if player.feedback1 == 'answer3' %}
        <p>
            <span style="color: red;"><b>Incorrect! </b></span><br><br>

            The urn contains {{ Constants.total }} balls in total: {{ n1_balls }} <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>
            balls and {{ n2_balls }} <span style="color: red;"><b>{{ Constants.colour2 }}</b></span> balls. <br/><br/>

            The computer draws one ball completely at random: each of the {{ Constants.total }} balls is equally likely to be drawn.<br><br>

            This means that there are {{ n1_balls }} chances out of {{ Constants.total }} that the computer draws a {{ Constants.colour1 }} ball
            and {{ n2_balls }} chances out of {{ Constants.total }} that the
            computer draws a {{ Constants.colour2 }} ball. <br><br>

            Thus, without any additional information, you know that the ball is more likely to be {{ Constants.colour1 }}.
        </p>
    {% endif %}


    <br/><br/>

    <p>
        <input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Next"/>
    </p>


{% 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: 5px;
        }
        th, td {
            text-align: center;
            font-size: 1.3vw;
        }


    </style>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">

    var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
    var counter = 5;
    var newElement = document.createElement("p");
    newElement.innerHTML = "Please spend <u>at least</u> " + counter + " seconds on this page. Read the instructions carefully! :-) ";
    var interval;

    showButton.parentNode.replaceChild(newElement, showButton);

    interval = setInterval(function() {
        counter--;
        if(counter < 0) {
            newElement.parentNode.replaceChild(showButton, newElement);
            clearInterval(interval);
        } else {
            newElement.innerHTML = "Please spend <u>at least</u> " + counter + " seconds on this page. Read the instructions carefully! :-) ";
        }
    }, 1000);

    </script>

{% endblock %}