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

{% block title %}
    INSTRUCTIONS / 1: YOUR TASK
{% endblock %}

{% block content %}
<p>
    In each round, there will be a jar, like the one you see below,
    containing {{ 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/>

    {% if player.treatment == 'T1' or player.treatment ==  'T2' %}
        <img src="{% static "information_acquisition/urn1.png" %}"/>
    {% else %}
        <img src="{% static "information_acquisition/urn2.png" %}"/>
    {% endif %}
    <br>

    The computer will randomly draw <b>ONE</b> ball out of this jar. All balls are equally likely to be drawn. <br/><br/>

    In each round, your task will be to guess whether the ball drawn by the computer in that round is
    <span style="color: blue;"><b>{{ Constants.colour1 }}</b></span> or  <span style="color: red;"><b>{{ Constants.colour2 }}</b></span>. <br><br>

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

    <p><b>Without any additional information, what do you know about the ball drawn by the computer?</b></p>

    <table class="table">
    <tr>
        <td><input type='radio' name='feedback1' value='answer1' required></td><th>It is more likely that it is <span style="color: blue;"><b>BLUE</b></span></th>
    </tr>
    <tr>

        <td><input type='radio' name='feedback1' value='answer2' required></td><th>It is more likely that it is <span style="color: red;"><b>RED</b></span></th>

    </tr>
        <tr>
        <td><input type='radio' name='feedback1' value='answer3' required></td><th>It is just as likely that it is <span style="color: blue;"><b>BLUE</b></span> as that it is <span style="color: red;"><b>RED</b></span></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;
        }

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