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

{% block title %}
Part 1 - Practice Round
{% endblock %}

{% block styles %}

<link href="{% static 'css/PracticePages.css' %}" rel="stylesheet">

{% endblock %}

{% block content %}
<hr>
<br>
<p> <b>Puzzle 3 </b></p>

<img src="{% static "Practice/Practice3_q.jpg" %}" style="width:50%" />
<img src="{% static "Practice/Practice3_s.jpg" %}" style="width:46.3%" />

<p><b>Your answer</b>: {{ player.practice3 }} </p>
<p><b>Solution</b>: a </p>
<p><b>Explanation</b>: In this puzzle, all the images have the same marker
    inside the square and grey circles in the four corners. Hence, the correct answer must be either "a" or "d".
</p>

<p>Between options "a" and "d", option "a" is the correct answer because the missing image must be small-sized.
    One way to see this is that in each row, there is a small, medium, and large image.
    Hence, in the last row, the missing image must be small-sized. </p>



<br>

<button class="otree-btn-next btn btn-primary" style="float: right;">Next</button>
<br><br>

{% endblock %}