{% 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>

<button type="button" class="ContractAccordion"> To read the contract information, click here </button>
<div class="ContractPanel">
    {{ if participant.contract_group < 3 }}
    <p>
        For each grid that you work on, you can earn 50 points for each of the following:
         <ol>
            <li>If you mark the correct number of “K”s in the grid</li>
            <li>If you mark the correct number of "I before K"s in the grid</li>
            <li>If you enter the correct number of “K”s into the entry field</li>
            <li>If you enter the correct number of “I before K”s into the entry field</li><br>
        </ol>
    </p>
    {{endif}}

    {{ if participant.contract_group > 2 }}
        <p>
            For each grid that you work on, you can earn points according to the following rules: <br>
            The contract consists of two components, component A and B.<br><br>

            Your <strong>component A</strong> will be determined by:
             <ol>
                <li>Every correctly solved “K” marked in the grid earns you 5 points. </li>
                <li>Every correctly solved “I before K” marked in the grid earns you 7 points. </li>
                <li>Every correct "number of K" entered into the entry field earns you 23 points. </li>
                <li>Every correct "number of I before K" entered into the entry field earns you 17 points. </li>
            </ol>

            Your <strong>component B</strong> will be determined by:
            <ol>
                <li>0,25 times component A-1, but only if the number of marked "K" is correct.</li>
                <li>0,25 times component A-1, but only if the number of marked "I before K" is correct.</li>
                <li>0,25 times component A-2, but only if the number of marked "K" is correct.</li>
                <li>0,25 times component A-2, but only if the number of marked "I before K" is correct.</li>
                <li>Your component B will be multiplied with the factor 1.2 if the number of marked "K" and the number of marked "I before K" are both correct.</li>
            </ol>
        </p>
    {{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.js'}}"></script>

    <script>
        var gridTemplate = grid_test_2
    </script>

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

{{ endblock }}