{{ block title }}Welcome to the Maze game!{{ endblock }} {{ block content }}

{% if boardNumber == 1 %}
<p>
    On the next screen, you will see a triangular maze. <br> <br>
    <b>Aim of the game: </b> Select the path with the highest cumulative score <br>

    To play, you will have to trace a path from the bottom in an upward direction and passing through red dots. You will notice that the paths have different values (found on the right of each path).
    <br>
    Try to get the highest score by selecting the right path.
    <br><br>
<p><b>How to play:</b>
<br>
<ul>
<li>Start by clicking on the bottom vertex (lowest dot).</li>
<li>You can select a path on the left or right by clicking on the connecting dot.</li>
<li>Once selected, a dot cannot be unselected.</li>
<li>The aim is to have the highest cumulative score for your path.</li></p>
</ul>
    Here's an example: <br>
<img src="{{ static 'elithorns_maze/MazeEg.png' }}" class="center"/>

</p>
<p>
    <b>IMPORTANT: </b> <br>
    <li>Once you have selected a dot, you cannot unselect it. </li>
    <li>You can only go upwards, not backwards.</li>
    <li>You may <b>NOT</b> reset your maze if you’re unhappy with the path selection. </li><br>
    <li>The timer starts as soon as the maze appears on the screen and stops when you click on the last dot for each maze</li>
  <br>  <font size="+2">Please <b> DO NOT refresh </b> the page. </font> This will bias the results.
</p>
<p>
    While you don’t have a time limit for this task, your time will be recorded. It is estimated that each maze will take up to 2 minutes to complete.
</p> <br>
<p>
    <font size="+1"> <b> Important notice: </b> </font> You will have a total of <b>6 sets of mazes</b> to complete with 30 mazes in each. You are <b>recommended to take a break </b> of a few hours or even a day between sets. You will receive a score per set and will be reminded to take a break after each set. </p>
<br>
<p> Click Next when you’re ready.  </p>
{% endif %}

{{ next_button }}
{% block scripts %}
<script>
    window.onload = function() {
        $(".debug-info").hide();
        if ({{boardNumber}} != 1) {
            $(".otree-btn-next").click();
        }
    }
</script>
{% endblock %} {{ endblock }}