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

{% block head_title %}
    Study
{% endblock %}



{% block styles %}

    <style type="text/css">

        .column {
          float: none;
          width: 50%;
          padding: 20px;
        }

        .row::after {
          content: "";
          clear: both;
          display: table;
        }

        h1 {text-align: center; font-size: 35px;}

        .justify {
          text-align: justify;
          text-justify: inter-word;
        }

        h1 {text-align: center; font-size: 35px;}
    </style>

{% endblock %}



{% block content %}
        <h1>Instructions</h1>

    <div class="card bg-light m-3">
    <div class="card-body">
    <div class="justify">


        <p style="font-size:18px;">

                 You are now almost ready to start playing the main game. You have 10 minutes to complete the game. <br>

            <br> Note that the main game will be 10 by 10 and will be harder than the 5 by 5 practice game. <br>

            <br> You will earn 1 point for each correctly colored cell. <br>

            <br> Same as in the practice game, if you color a cell wrongly, the cell will blink red
                 and then change to the correct color. In addition to this, 5 points will be deducted. <br>

            <br> After you complete the game or the time runs out, the final total point will be converted to money
                 with a rate of 20 points to &pound;1.
                 If the final total point is negative, you will only receive the &pound;1 participation fee. <br>

            <br> Please note that you will be paid only based on the final total point. Whether you complete the game or
                 not will not affect your payoff. <br>

            <br> Please also note that your submission will be rejected if you do not try to solve the game and choose answers randomly. <br>

            <br> Please press the "Next" button to continue. <br>


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



<center>
    <br>
    {% next_button %}
</center>


{% endblock %}