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

{% block title %}
    INSTRUCTIONS / 3: GUESS THE COLOR AND EARN MONEY!
{% endblock %}

{% block content %}
<p>
    After you choose what expert to consult, but before you are revealed his message, you will be asked to make your
    best guess about the color of the ball, <span style="color: red;"><u>depending on what you will hear from the expert</u></span>.
</p><br/>
    <p>
    Since you can receive two different messages, you will be asked two questions:<br/><br/>

    What is your guess about the color of the ball, <u>if the expert says "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>"?</u><br/><br/>
    What is your guess about the color of the ball, <u>if the expert says "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>"?</u><br/><br/>

    </p>

    <p>The answers you give to these questions cannot be revised. After you submit them, the computer will report you
        the expert’s message and will use as your guess for this round the answer to the corresponding question.
    </p>

    <p>
        For example, if the expert you consulted says "The ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span>",
        the computer will use as your guess the
        answer you gave to the first question above. If, instead, the expert says "The ball is <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>",
        the computer will use as your guess the answer you gave to the second question above.
    </p> <br/><br/>

    <p>
        Your guess will determine your <b>bonus payment</b> in the following way:<br/><br/>

        You will earn $1 if your guess matches the true color of the ball.<br/><br/>

        You will earn $0 if your guess does not match the true color of the ball.<br/><br/>
    </p>

    <p>In addition, you will be asked how confident you are of each of your guesses, on a scale between 0 and 100.
        For example, 0 indicates that you think it is just as likely that you are right or wrong (that is, you think
        that it is just as likely that the ball is <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> or
        <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>), while 100 indicates that you are sure you picked
        the right color (that is, you think you know for sure whether the ball is
        <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> or <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>).
    </p><br/><br/>

    <p>These assessments do not  affect your bonus payment but it is very important to us that you think about
        this carefully and that you <span style="color: red;"><u>report to us what you really believe</u></span>.</p>

    <p>Before proceeding to the next page, please answer the comprehension question below:</p>

    <p><b>Consider this example. Your guesses are that the ball is BLUE if the expert says BLUE; and that the ball is
        RED if the expert says RED. The expert says “The ball is BLUE” and the true color of the ball is BLUE.
        What is your bonus payment in this round?</b></p>

    <table class="table">
    <tr>
        <td><input type='radio' name='feedback3' value='answer1' required></td><th>$1 because your guess is BLUE and it coincides with the actual color of the ball.</th>
    </tr>
    <tr>

        <td><input type='radio' name='feedback3' value='answer2' required></td><th>$0.50 because only one of your two guesses coincides with the actual color of the ball.</span></th>

    </tr>
        <tr>
        <td><input type='radio' name='feedback3' value='answer3' required></td><th>$0 because your guess is RED and it does not coincides with the actual color of the ball.</th>
        </tr>
    </table>


    <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 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 %}