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

{% block title %}
    Instructions (Page 2/2)
{% endblock %}

{% block content %}

<h6>Please take your time reading and understanding these instructions</h6>
<h5>
	<span style="color:orangered">Before guessing the group urn</span>
</h5>
<div class="instructions well well-lg">
	<strong>
		<span style="color:indigo">Position 1</span>
	</strong>
	<p></p>
    If in a particular round you are randomly assigned to
						<strong>position 1</strong> in your
        4-member group...

						<p></p>
    ...you will make only a
						<strong>single</strong> guess decision (“Urn Guess”) as described below.

						<p></p>
						<strong>
							<span style="color:indigo">Urn guess decision</span>
						</strong>
						<p></p>
    The computer will randomly select for you one ball among the 3 balls in the actual group urn in that round.
    After observing the colour of the ball
    (
						<strong>
							<span style="color:deepskyblue">blue</span>
						</strong> or

						<strong>
							<span style="color:red">red</span>
						</strong>), you will
    have to guess which group urn was selected in that specific round
						<strong>(the colour of the
    randomly drawn ball is revealed to you only)</strong>.
    The ball that is drawn is always
    "returned" to the group urn.

					</div>
					<div class="instructions well well-lg">
						<strong>
							<span style="color:indigo">Position 2, 3, or 4</span>
						</strong>
						<p></p>
    If in a particular round you are instead randomly assigned to
						<strong>a position 2,
    3, or 4</strong> in your 4-member group...

						<p></p>
    ...you will be asked
						<strong>first</strong> to select
						<strong>one</strong>
    of the two pieces of information as described below (“Information Choice”), and
						<strong>then</strong> to guess which
    group urn was selected in that specific round (“Urn Guess”) as described above in

						<strong>
							<span style="color:indigo">Urn Guess decision</span>
						</strong>.

						<p></p>
						<strong>
							<span style="color:indigo">First, Information Choice decision</span>
						</strong>
						<p></p>
						<ul type="circle">
							<li>you can either
								<strong>select an option where the computer randomly draws a ball</strong> for you
            from the actual group urn selected for that round. You then observe its
            colour and the ball is "replaced" into the group urn.

							</li>
							<p></p>
							<strong>or</strong>
							<p></p>
							<li>you can
								<strong>select an option where you can see respective urn guesses of your group members
									preceding
            you in the sequence</strong>.
            For example, if you are in position 4, you will see respective group urn
            guesses by players in position 1, position 2, and position 3.

							</li>
						</ul>
						<p></p>
    None of your group members including you can see which Information Choice option was selected by other players nor
		can you observe what they have seen after choosing a particular strategy.

	<p></p>
	<strong>
		<span style="color:indigo">Then, Urn Guess decision</span>
	</strong>
	<p></p>
    After making your Information Choice decision, you will make your Urn Guess decision as described above in

						<strong>
							<span style="color:indigo">Urn guess decision</span>
						</strong>.

</div>
<h5>
	<span style="color:orangered">Bonus payment</span>
</h5>
<div class="instructions well well-lg">
	One of the four rounds you have played will be randomly
    chosen</strong> and your sequence position will be the same as in that chosen round. Thus, each
    round has an equal 25% chance of being chosen and you are equally likely to be in each of the four positions.

							<p></p>
    Receiving the bonus depends solely on whether your urn guess matches the selected group urn in that
    randomly chosen round. You will
							<strong>be paid the bonus if your guess matches the actual group urn
    in that round</strong>.

							<p></p>
	<strong>Since you do not know which round will be randomly selected, you will want to do your best in each and
        every round.</strong>
</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="#collapse1">
        Instructions (Page 1/2)</a>
			</h4>
		</div>
		<div id="collapse1" class="panel-collapse collapse in">
			<div class="panel-body">
				<h6>Please take your time reading and understanding these instructions</h6>
				<h5>
	<span style="color:orangered">Introduction</span>
</h5>
				<div class="instructions well well-lg">
    A computer will randomly assign you to a
	<strong>4-member group</strong>. You will not know who your group members and neither will they learn your identity.
    You will remain in this same group, with the same 3 other participants, for the duration of the experiment.
	<p></p>
    All of you will participate in <strong>4 independent rounds</strong> of decision-making within the group.
    At the start of the first three rounds, a computer will randomly assign you to a new position
    within your 4-member group: “position 1”, “position 2”, “position 3”, or “position 4”. You will
    be in each position only once, so will each member of your group.

				</div>
				<h5>
					<span style="color:orangered">Two urns</span>
				</h5>
				<div class="instructions well well-lg">

    There are two “urns” (containers) which are labelled as the “Blue” urn
    and the “Red” urn.

						<p></p>
    The “Red” urn contains
						<strong>2
							<span style="color:red">red</span>
						</strong>
    balls and
						<strong>1
							<span style="color:deepskyblue">blue</span>
						</strong> ball:

						<p></p>
						<center>
							<strong>
								<span style="color:red">“Red”</span> urn:
							</strong>
							<img src="{% static 'bullet_red.png' %}"/>
							<img src="{% static 'bullet_red.png' %}"/>
							<img src="{% static 'bullet_blue.png' %}"/>
						</center>
						<p></p>
    The “Blue” urn contains
						<strong>2
							<span style="color:deepskyblue">blue</span>
						</strong>
    balls and
						<strong>1
							<span style="color:red">red</span>
						</strong> ball:

						<p></p>
						<center>
							<strong>
								<span style="color:deepskyblue">“Blue”</span> urn:
							</strong>
							<img src="{% static 'bullet_blue.png' %}"/>
							<img src="{% static 'bullet_blue.png' %}"/>
							<img src="{% static 'bullet_red.png' %}"/>
						</center>
						<p></p>
    At the beginning of <strong>each round</strong>, a computer will <strong>randomly select</strong> one of these urns
    with an equal <strong>50% probability</strong>. Neither you nor other members of your group are
    informed as to which urn is selected for the round. The selected urn will be the
	<strong>same urn for
    all members</strong> of your 4-member group
	<strong>for that particular round</strong>.

	<p></p>
    We will call this selected urn the <strong>“group urn”</strong>.

				</div>
				<h5>
					<span style="color:orangered">Your task</span>
				</h5>
				<div class="instructions well well-lg">
					<strong>In each round, each participant’s ultimate task is to correctly guess which of the two
							urns has actually been selected by the computer as the group urn for that round.</strong>
	<p></p>
        Each of your group members, including you, will make her/his group urn guess one after the other, according
	to her/his position <strong>in sequence</strong> within the group in each round.

	<p></p>
    For example, if you are in position 2, you are
        the second person guessing the group urn in that round. Two other members of your group,
        assigned to position 3 and position 4, will guess after you. The member in position 1 will guess before you.
	<p></p>
        Whether you will receive the bonus will be determined exclusively by whether you correctly guess
        the randomly selected group urn (see
	<strong>
		<span style="color:orangered">Bonus payment
</span>
	</strong> for further explanation).

			</div>
		</div>
	</div>
</div></div><p></p>

<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 = 90;
    var newElement = document.createElement("p");
    newElement.innerHTML = "You can proceed to Comprehension quiz 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 Comprehension quiz in " + counter.toString() + " seconds.";
        }
    }, 1000);

    </script>
</strong>
{% endblock %}