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

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



{% block styles %}

    <style type="text/css">
        .container img {
            width: 400px;
            height: 300px;
        }

        .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. We will now explain the instructions of the games.
                     You will be paid for your performance. <br>

                <br> You will play two types of games. We will explain the instructions of the first game and give
                     you a practice game followed by the second game. <br>

                <br> The first type of game is called Nonogram. The game consists of a 10 by 10 grid and each square
                     in the grid must be colored either green or gray. <br>

                <br> The number of consecutively colored green squares in any given row or column must be in the order of
                     the numbers at the side and on the top. <br>

                <br> There has to be at least one gray square in between two sets of green squares. <br>

                <br> To color a square, you need to first click on your preferred color for this square on the right. If you
                     color a square wrongly, the square will flash red and then change to the correct color. <br>

                <br> Below is an example of a game. A clue of "5 2" means that there are sets of five and two green squares,
                     in this order, with at least one gray square between the two sets. In total there should be three gray
                     squares in this row or column. There is only one unique solution to each game. <br>

            <div class="row">
                <div class="column">
                    <div class="container">
                            <img src="{% static 'multitasking/empty1.png' %}" style="margin-left: -10px; height: auto;"/>
                    </div>
                </div>

                <div class="column">
                    <div class="container">
                            <img src="{% static 'multitasking/full1.png' %}" style="margin-left: -15px; height: auto;"/>
                    </div>
                </div>
            </div>
        </p>

        <p style="font-size:18px;">
            <br> You have 10 minutes for the practice game. You will proceed to the next page after you complete the game or the time runs out. <br>

            <br> Before we explain how you can earn money in this study, we will give you a practice game
                 for you to familiarize yourself with this game.  <br>

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



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


{% endblock %}