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

{% block title %}
    GET READY FOR THE GAME!
{% endblock %}

{% block content %}

    <p>
        You will play <span style="color: red;"><u>{{ Constants.num_rounds }}</u></span> rounds of this game.<br><br>

        The computer will randomly pick one round to determine your bonus payment but all rounds are equally
        likely to be selected so <span style="color: red;"><u>all choices matter</u></span>.<br><br>

        In each round, there are a new jar with 10 balls, 10 new BLUE Experts, and 10 new RED Experts.
        The chance the computer draws a RED ball or a BLUE ball from the jar, as well as the chance that
        the expert you consult is informed or uninformed <span style="color: red;"><u>are not affected in any way by
        what happened in the previous rounds</u></span>.<br><br>

        When you are ready to start with <b>Round 1</b>, please click the button below.
    </p>


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