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

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



{% block styles %}

    <style type="text/css">


        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. In total, you will play the game in nine different rounds. All games
            can be solved in 8 moves.  <br>

            <br> Your earnings will be determined as follows: in each round, <span style=" font-weight: bold; "> you start with
             a budget between &pound; 4 and &pound; 7.</span> In some rounds, <span style=" font-weight: bold; "> your budget will be
            reduced by a certain amount of money for every 10 seconds you spend on the game. </span> By how much exactly
            will be shown on the page before every game. <br>

            <br> Your earnings for a given round will be equal to the amount left when you solve the game. However,
            in order to receive payment, <span style=" font-weight: bold; "> you have to solve the game in at most 14 moves. </span>
            If you are able to solve the game in the minimum number of moves (8), you will also receive
            <span style=" font-weight: bold; "> a bonus of &pound; 1. </span> If your budget runs out during a round or if you use more
            than 14 moves, you will automatically move on to the next round. <br>

            <br> Because the number of moves is
            limited, it is  best to <span style=" font-weight: bold; "> work out the solution
            before making your first move </span> if you want to maximise your earnings. <br>


            <br> At the end of the study, <span style=" font-weight: bold; ">  1 of the 9 rounds will be randomly selected
            for payment. </span>  You will not receive any payment for the 8 rounds that are not selected. <br>







                <!--
                <br> To make sure that you fully understand how the payoff works, please answer the following question. You will be automatically redirected to the next page if your answer is correct. <br>
                <br> Suppose a person started a round with 15 Euro. 10 pence are deducted per 10 seconds and 50 pence are deducted per move. He spent 52 seconds on the game and solved the game in 9 moves. How much should he earn? <br>

                <br> <input id="numb">
                <button type="button" onclick="myFunction()">Check Answer</button>
                <p id="check" style="font-size:15px; color: dimgray"></p>
                -->
        </p>
    </div>
    </div>
    </div>

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


{% endblock %}


{% block scripts %}
    <script type="text/javascript">
        function myFunction() {
            var x, text;

            x = document.getElementById("numb").value;

            if (x == 10) {
            text = "Your answer is correct";
            //$('.otree-btn-next').show();
            document.querySelector("form").submit();
            }
            else {
            text = "Please think again";
            }
            document.getElementById("check").innerHTML = text;
        }
    </script>
{% endblock %}