{% load otree static %}

<p>
	<strong>Lottery:</strong> At the end of the experiment, computer will roll a virtual six-sided dice for each group, separately. If the randomly determined number is 6, each member of the group will receive a bonus of $6. 
</p>

<style>
	td img {
		width: 100px;
		height: 100px;
	}
	table td {
		text-align: center;
	}
</style>
<table class="table table-bordered">
	{% if group == 1 %}
		<tr>
			<td class="align-middle">Yellow Group<br>Dice</td>
			<td><img src="{% static "dice/y1.png" %}" /></td>
			<td><img src="{% static "dice/y2.png" %}" /></td>
			<td><img src="{% static "dice/y3.png" %}" /></td>
			<td><img src="{% static "dice/y4.png" %}" /></td>
			<td><img src="{% static "dice/y5.png" %}" /></td>
			<td><img src="{% static "dice/y6.png" %}" /></td>
		</tr>
		<tr>
			<td>Bonus</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">S$6</td>
		</tr>
	{% else %}
		<tr>
			<td class="align-middle">Red Group<br>Dice</td>
			<td><img src="{% static "dice/r1.png" %}" /></td>
			<td><img src="{% static "dice/r2.png" %}" /></td>
			<td><img src="{% static "dice/r3.png" %}" /></td>
			<td><img src="{% static "dice/r4.png" %}" /></td>
			<td><img src="{% static "dice/r5.png" %}" /></td>
			<td><img src="{% static "dice/r6.png" %}" /></td>
		</tr>
		<tr>
			<td>Bonus</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">0</td>
			<td class="align-middle">S$6</td>
		</tr>
	{% endif %}
</table>

<p>
	<strong>Control Questionnaire 1:</strong> Before you proceed, we ask that you answer a brief questionnaire for the purpose of checking whether you have understood the instructions for the lottery. Please press “Next” to view the control questionnaire 1. 
</p>