{{ block title }}Welcome to the Travelling Salesperson task! {{ endblock }}
{{ block content }}
{% if boardNumber == 1 %}
<p>
    You are a post office worker in France. You are given the task to visit multiple cities to deliver packages.
    But as petrol prices have risen, you really want to take the <u>shortest route possible</u> to minimise the cost of
    your travels. For each week, you will get a fixed number of cities to visit.
    <br> <br>
    <b>Aim:</b> <u>Plan</u> your route to minimise the distance covered.
    <br> <br>
    The rules are simple:
</p>
<ul>
    <li>You can start anywhere </li>
    <li>You must visit ALL cities with a red marker on the map </li>
    <li>Leave each city </li>
    <li>Never repeat a city (except for the starting city) </li>
    <li>Only go back to your starting city at the end of your trip  </li>
</ul>
<br>Example of how to play:
<p> <br>
This is an example of a week of work
<br>
<img src="{{ static 'travelling_salesman_problem/Before.png' }}" class="center"/>
<br>
<li> Start by clicking on the <b>first city of <u>your</u> choice</b>. It can be anywhere. You will notice a red pin appearing on the starting city (as seen below). </li>
<br>
<img src="{{ static 'travelling_salesman_problem/City.png' }}" class="center"/>
<br>
<li> Click on the next one to start your route. </li>
<li> Keep clicking on cities until the only one left is your starting city. </li>
<li> End your trip by clicking on the starting city. </li>
<br>
<img src="{{ static 'travelling_salesman_problem/After.png' }}" class="center"/>
<br>
<li> Once you reach the end of your trip (back to the starting city), click on the ‘submit’ button at the bottom of the screen </li>
<li> Make sure that you've clicked on every city before you reach the end, else you will get an error on your path.</li>
</p> <br>

<p>While you don’t have a time limit for this task, your time will be recorded.</p> <br>

<p>Click on the 'Next' button for a single practice round. The testing phase will start afterwards. </p>
{% endif %}
    {{ next_button }}
    {% block scripts %}
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
  <script>
  window.onload=function() {       $(".debug-info").hide();
    if( {{boardNumber}} !=1 ){
        $(".otree-btn-next").click();
    }
  }
</script>   
{% endblock %}
{{ endblock }}