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

{{ block content }}
<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>

<button type="button" class="ContractAccordion"> To read the contract information, click here </button>
<div class="ContractPanel">
    {{ if participant.contract_group == 1 }}
        <img src="{{ static 'Treatments/ScenarioSS.jpg' }}" width="800px"/>
    {{ endif }}

    {{ if participant.contract_group == 2 }}
        <img src="{{ static 'Treatments/ScenarioSC.jpg' }}" width="800px"/>
    {{ endif }}

    {{ if participant.contract_group == 3 }}
        <img src="{{ static 'Treatments/ScenarioCS.jpg' }}" width="800px"/>
    {{ endif }}

    {{ if participant.contract_group == 4 }}
        <img src="{{ static 'Treatments/ScenarioCC.jpg' }}" width="800px"/>
    {{ endif }}
</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/ContractAccordion.js' }}"></script>
    <script src ="{{static 'Task_App/grid_holder_2.js'}}"></script>

    <script>
        var gridTemplate = grid_11
    </script>

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

{{ endblock }}