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

{% block title %}
    Round {{ subsession.round_number }} of {{ Constants.num_rounds }}: Information Choice
{% endblock %}

{% block content %}


<div class="instructions well well-lg">
	<h5>Your position:
		<span style="color:red">4</span> in the sequence of
		<span style="color:red">4</span> people
	</h5>
	<h6>A group urn for this round was randomly selected at the beginning of the round</h6>
</div>
<strong>Which piece of information do you want to see before guessing the actual group urn?</strong>
<p></p>

{% formfield player.information_channel_4 label = "" %}

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

    var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
    var counter = 10;
    var newElement = document.createElement("p");
    newElement.innerHTML = "You can proceed to the Urn guess page in " + counter + " seconds.";
    var interval;

    showButton.parentNode.replaceChild(newElement, showButton);

    interval = setInterval(function() {
        counter--;
        if(counter < 0) {
            newElement.parentNode.replaceChild(showButton, newElement);
            clearInterval(interval);
        } else {
            newElement.innerHTML = "You can proceed to the Urn guess page in " + counter.toString() + " seconds.";
        }
    }, 1000);

    </script>
</strong>
<p></p>

{% include Constants.instructions_template %}

{% endblock %}