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

{% block title %}
Part 4
{% endblock %}

{% block content %}
<style>
    * {
      box-sizing: border-box;
    }
    p {
      font-size: 22px;
    }
    .otree-title {
      text-align:center
    }
    .otree-body {
      max-width:1100px
    }
    .img-container {
      float: left;
      width: 50%;
      padding: 5px;
    }
    .clearfix::after {
      content: "";
      clear: both;
      display: table;
    }
    .otree-timer {
        display: block;
    }
</style>
<br>
<p> Please select an image that fits the pattern. </p>


<img src="{% static image_path_1 %}" style="width:50%" />
<img src="{% static image_path_2 %}" style="width:46.3%" />

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

{% endblock %}