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

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



{% block styles %}

    <style type="text/css">
        .container img {
            width: 50%;
            height: auto;
        }

        .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;">

                 The second type of game is called adding numbers game.
                 Every game consists of a board with nine different numbers. Your task is to find the two
                 numbers (out of the nine) that jointly add up to a "target number". You can select a number by
                 clicking it. Once clicked, the number will turn green. To deselect a number, you can simply click
                 it again. <br>

            <br> You have 60 seconds for each game. You will move on after you have selected the correct two numbers or the time runs out. <br>

            <br> Here is an example of a game. The two selected numbers (52 and 27) add up to the target number of 79. There is only one unique solution to each game. <br>

                    <div class="container">
                        <img src="{% static 'multitasking/practice_adding.png' %}" style="margin-left: 200px;"/>
                    </div>
        </p>

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

            <br> We will give you three practice games for you to familiarize yourself with this game. <br>

            <br> Please press the "Next" button to proceed to the practice games.
        </p>
    </div>
    </div>
    </div>



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


{% endblock %}