{% block title %}
Introduction
{% endblock %}

{{ block style }}
    <link rel="stylesheet" type="text/css" href="{{ static 'global/gridpage.css' }}">
{{ endblock }}

{{ block content }}
<h3>Test Task</h3>

<button type="button" class="accordion"> To read the task instructions, click here </button>
<div class="panel">
  <p>
      <ol>
        <li>Mark all letters "K" in the grid by clicking on them.</li>
        <li>Mark all letters "I" that appear <strong>directly</strong> to the left of a letter "K" in the grid ("I before K") by clicking on them.</li>
        <li>Indicate the numbers of "K"s that you have marked in the grid in the respective entry field on the bottom left.</li>
        <li>Indicate the numbers of "I before K"s that you have marked in the grid in the respective entry field on the bottom left.</li>
        <li>Click on the "Next"-button on the bottom to continue with the next grid.</li>
    </ol>
  </p>
</div>

<br>
<div id="gridlocation"> </div>
<br>

    {{ formfields }}
    {{ next_button }}
{{ endblock }}


{{ block script}}
    <script src="{{ static 'Task_App/accordion.js'}}"></script>
    <script src = "{{static 'Task_App/grid_holder.js'}}"></script>

    <script>
        var gridTemplate = grid_test_1
    </script>

    <script src ="{{static 'Task_App/grid_generation.js'}}"></script>
{{ endblock }}