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

{% block styles %}

<style>

.container_box {
    border: 1px solid white;
    height: 500px;
    margin: auto;
    position: relative;
    width: 900px;
}

.matrix_box {
    border: 1px solid white;
    height: 450px;
    position: absolute;
    top: 50px;
    width: 900px;
}

.answer_box {
    border: 1px solid black;
    height: 150px;
    margin: auto;
    position: relative;
    width: 900px;
}

</style>

{% endblock %}

{% block title %}

Practice Situation 1 of 2

{% endblock %}

{% block content %}

<!-- Container -->

<div class="container_box">

<!-- Matrix -->

<div class="matrix_box">

<center>

<img src="{% static 'MTSP/Test1.bmp' %}" height="400px" style="margin-top: 25px"/>

</center>

</div>

<!-- -->

</div>

<!-- -->

<br />

<!-- Answer -->

<div class="answer_box">

<p align="center" style="margin-top: 62px">
<i> The correct answer is 8. </i>
</p>

</div>

<!-- -->

<br />

<button class="btn btn-primary btn-large" style="float: right"> Next </button>

{% endblock %}