{% 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;">
                <!--Thank you for taking part in this study. It will take approximately 15 minutes. You will be paid
                &pound;2  for completing the study with the chance to earn additional money during the study. <br> -->

                    Thank you for filling out the questionnaire. In the remainder of this study, you are invited to play
                    a simple game. The game consists of re-arranging a board of shapes (shown on the left side of your
                    screen) until it reaches the solution (shown on the right side of your screen). <br>

                <br> An example of the game looks like this:

                <div class="row">

                    <div class="column">
                        <p style="margin-Left:200px">Game: </p>
                        <img src="{% static 'shapes/example.png' %}" style="margin-Left:65px"/>
                    </div>

                    <div class="column">
                        <p style="margin-Left:160px">  Solution: </p>
                        <img src="{% static 'shapes/final.png' %}" style="margin-Left:30px"/>
                    </div>
                </div>
        </p>

        <p style="font-size:18px;">
            <br> You can make a move by clicking on a shape next to the empty square.
                 The shape will then move into the empty square. <br>

            <br> Your earnings will be determined based on the amount of moves made and time spent in the game.
            <span style=" font-weight: bold; "> To maximise your earnings, it is therefore best to work out the solution before making
                your first move</span>. <br>

            <!--
            <br> You will not be asked for any personal information. The data we collect is fully anonymous
                 and will only be available to other researchers upon request. <br>

            <br> This study complies with General Data Protection Regulation (GDPR). <br>

            <br> Please click Next if you consent to proceed with the study. -->
        </p>
    </div>
    </div>
    </div>



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


{% endblock %}