{% 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">3</span> in the sequence of <span style="color:red">4</span> people</h5>
		<h6>You have chosen to see the respective group urn guesses by players in position 1 and position 2</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 if, in position 3,
					you choose to observe the guess of the preceding players. 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 choose to observe the guesses of other players in the position
					you are assigned to (in Step 1), we will check the guesses of the players that precede you and
					then check your group urn guess conditional on those group urn guesses by preceding players.
					If your group urn guess, which you have selected in response to the relevant group urn guesses of
					the preceding players, matches the actual 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 was 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 = 20;
    			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 %}