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

{% block style %}
<style> 
input[type='checkbox'] {
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
</style>
{% endblock %}

{% block content %}
<h3>Task</h3>
<p>
    Below you see an exemplary screenshot of a task page as you will encounter it during the experiment.
</p>
<p>
    It entails: <br>
     <ul>
        <li>A 10x10 grid with letters.</li>
        <li>Two entry fields (bottom left).</li>
        <li>A "Next"-button to move to the next grid-page (bottom of the page).</li>
        <li>Task and payment instructions (top of the page).</li>
        <li>The remaining time (top of the page).</li>
    </ul>
    You have 5 minutes to solve as many grid-pages as you can. <br>
</p>

<img src="{{ static 'Intro_App/task_example.jpg' }}" width="600px" style = "border:1px solid lightgrey;">

<p>
    <br>
    Your task will be the following:
     <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>

<p>
    Please read the instructions carefully and take enough time to fully understand the task.<br>
    You can read the instructions at any time during the task by clicking on the drop-down menu on the top of the page. <br>
    Please mark the box below if you have understood the task. <br>
    Once you have indicated your understanding and clicked "Next", you will conduct one test-task. <br>
    Thereafter, your variable pay scheme will be explained.
</p>
<table> 
<tr>
    <td>
        <input name="task_understood" type="checkbox"/>
    </td>
    <td>
        <p>I hereby confirm that I have understood the task explained above. By clicking on "Next" one test-task will start.</p>
    </td>
</tr>
</table>


{{ formfield_errors 'task_understood' }}



{{ next_button }} 
{% endblock %}