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

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

{% block content %}

    {% if player.feedback3 == 'answer1' %}
        <p>
            <span style="color: green;"><b>Correct! </b></span><br><br>
            <span style="color: red;"><u>Only one guess matters</u></span> for your bonus payment.<br/><br/>

            The guess that matters depends on the message you receive from the expert.<br/><br/>

            Since you do not know what message you will receive, <span style="color: red;"><u>make both guesses carefully</u></span>.<br/><br/>


            If the expert says "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>",
            the guess that matters for your bonus payment is the answer to the
            question: What is your guess about the color of the ball, if the expert says
            "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>"? <br/><br/>

            If the expert says "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>", the guess
            that matters for your bonus payment is the answer
            to the question: What is your guess about the color of the ball, if the expert says
            "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>"?<br/><br/>

            In this example, the expert said BLUE and, thus, your guess was BLUE. <br/><br/>

            The ball randomly drawn by the computer was BLUE. This means that your guess in this round coincided
            with the ball drawn by the computer in this round and, thus, you earned $1. You earn $0 if your guess
            does not match the color of the ball. <br/><br/>
        </p>
    {% endif %}

    {% if player.feedback3 == 'answer2' %}
        <p>
            <span style="color: green;"><b>Incorrect! </b></span><br><br>
            <span style="color: red;"><u>Only one guess matters</u></span> for your bonus payment.<br/><br/>

            The guess that matters depends on the message you receive from the expert.<br/><br/>

            Since you do not know what message you will receive, <span style="color: red;"><u>make both guesses carefully</u></span>.<br/><br/>


            If the expert says "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>",
            the guess that matters for your bonus payment is the answer to the
            question: What is your guess about the color of the ball, if the expert says
            "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>"? <br/><br/>

            If the expert says "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>", the guess
            that matters for your bonus payment is the answer
            to the question: What is your guess about the color of the ball, if the expert says
            "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>"?<br/><br/>

            In this example, the expert said BLUE and, thus, your guess was BLUE. <br/><br/>

            The ball randomly drawn by the computer was BLUE. This means that your guess in this round coincided
            with the ball drawn by the computer in this round and, thus, you earned $1. You earn $0 if your guess
            does not match the color of the ball. <br/><br/>
        </p>
    {% endif %}

    {% if player.feedback3 == 'answer3' %}
        <p>
            <span style="color: red;"><b>Incorrect! </b></span><br><br>
            <span style="color: red;"><u>Only one guess matters</u></span> for your bonus payment.<br/><br/>

            The guess that matters depends on the message you receive from the expert.<br/><br/>

            Since you do not know what message you will receive, <span style="color: red;"><u>make both guesses carefully</u></span>.<br/><br/>


            If the expert says "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>",
            the guess that matters for your bonus payment is the answer to the
            question: What is your guess about the color of the ball, if the expert says
            "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>"? <br/><br/>

            If the expert says "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>", the guess
            that matters for your bonus payment is the answer
            to the question: What is your guess about the color of the ball, if the expert says
            "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>"?<br/><br/>

            In this example, the expert said BLUE and, thus, your guess was BLUE. <br/><br/>

            The ball randomly drawn by the computer was BLUE. This means that your guess in this round coincided
            with the ball drawn by the computer in this round and, thus, you earned $1. You earn $0 if your guess
            does not match the color of the ball. <br/><br/>
        </p>
    {% endif %}


    <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: 0.35vw;
        }

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

    </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 wait for " + counter + " seconds before moving to the next page. Read 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 %}