{{ 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>
   You will see 3 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>
    The pattern on the left is the starting pattern. The pattern on
    the right is the goal pattern. Your job is to change the starting
    pattern to the new one by shifting the balls around on the posts.
</p>
<p>However, there are some rules you need to follow to complete the task:</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 least number of moves possible.</li>
</ul>
{% 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 }}