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

{% block title %}
    Round {{ subsession.round_number }} of {{ Constants.num_rounds }}: Urn Guess
{% endblock %}

{% block content %}
	<div class="instructions well well-lg">
		<h5>Your position: <span style="color:red">1</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>

	<div class="panel-group" id="accordion">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent="#accordion" href="#collapse10">
						<h6>Why multiple scenarios are presented below?</h6>
					</a>
				</h4>
			</div>
			<div id="collapse10" class="panel-collapse collapse in">
				<div class="instructions well well-lg">
					<strong>Why multiple scenarios are presented below?</strong><p>
    				Here we look at your guess for every potential scenario that might happen in position 1.
    				All players eligible for the bonus payment are determined once all guesses of all the players are
					collected:<p>
					<strong>Step 1:</strong> You and three other random players are randomly ordered into the sequence
					starting from position 1 to position 4, one position for each player.<br>
					<strong>Step 2:</strong> A group urn is then randomly selected, each urn with an equal
					probability.<br>
					<strong>Step 3:</strong> If you are assigned to position 1 (in Step 1), a ball from the group urn
					is randomly drawn by the computer. We then check the colour of the ball and your corresponding
					group urn guess for that scenario. If your group urn guess matches the selected group urn, you will
					be <strong>paid the bonus</strong>.
				</div>
			</div>
		</div>
	</div>

	<strong>Which urn, <span style="color:deepskyblue">Blue</span> or <span style="color:red">Red</span>,
		do you think is the actual group urn selected for this round if...</strong><p>

	{% formfields %}

	<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 = 15;
    		var newElement = document.createElement("p");
    		newElement.innerHTML = "You can proceed to the subsequent 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 subsequent page in " + counter.toString() + " seconds.";
        		}
    		}, 1000);
		</script></strong><p>

	{% include Constants.instructions_template %}
	{% endblock %}