{{ block title }}Welcome to the Tower of London Task!{{ endblock }}
{{ block content }}

{% if number == 1%}
<style>
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
</style>
<hr>
<p>
    Please <b> DO NOT refresh </b> any page unless it's not responding. This will bias the results. <br><br>
   You will see three posts of different lengths and 3 colored balls on
   the screen. The balls can be arranged to make different patterns,
   just like the ones you see here:
</p>
<br/>
<img src="{{ static 'tower_of_london/images/demo_image.png' }}" class="center"/>
<br/>
<p>
    <li> The pattern on the left is the starting pattern. </li>
     <li> The pattern on the right is the goal pattern. </li>
     <li> Your job is to change the starting pattern to the new one by shifting the balls around on the posts.</li>
</p>
<p>These are the rules (they are reiterated on the following pages):</p>
<ul>
    <li>You can only move one ball at a time.</li>
    <li>You are not allowed to pick up more than one ball at any time.</li>
    <li>You cannot place balls anywhere else other than the three pegs.</li>
    <li>You can only place 3 balls on the left peg, 2 on the middle peg, and 1 on the right peg.</li>
    <li>Finally, you need to make the new pattern in the <b>least number of moves</b> possible.</li>
</ul> <br>
<p>While you don’t have a time limit for this task, your time will be recorded.</p> <br>

<p>Press the <b>Next</b> button for a single practice round.</p>

{% endif %}
{{ next_button }}
{% block scripts %}

<script>
  window.onload=function() {       $(".debug-info").hide();
    if( {{number}} != 1 ){
        $("#id_name").val('uhgUGYYT87gt8yuGUyGUYG*&Y');
        $(".otree-btn-next").click();
    }
  }
</script>   
{% endblock %}
{{ endblock }}