{% 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;">
                 Thank you for filling out the questionnaire. <br>

            <br> You are now ready to start the main part of the study. You will be paid for your performance in a 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> After you have selected your two numbers, you can press the "Next" button to continue.  <br>

            <br> Here is an example of a game. The two selected numbers (75 and 16) add up to the target number of 91. <br>

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

        <p style="font-size:18px;">
            <br> Before we explain how you can earn money in this part of the study, we will give you 3 practice games for you to familiarize
                 yourself with the game. <br>

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



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


{% endblock %}