{{ block title }}
    Worker Task 1 Information
{{ endblock }}

{{ block scripts }}
    <script>
        let task1_innate_text = document.getElementById('task1_innate_skill_text');
        function updateTask1InnateSkill(input) {
            let task1_innate_skill = parseInt(input.value);
            task1_innate_skill_text.innerHTML = `I agree <strong>${task1_innate_skill}%</strong> that innate talent for this skill is neccessary in Task 1.`
        }
    </script> 
{{ endblock }}

{{ block content }}

    <p>
        Below you will find a brief description of the worker's first task followed by some questions we would like your opinion on. <strong>Your answers to the questions below will not influence your payment or the payment of the worker.</strong>
    </p>

    {{ if matrix_first }}
        <p>
            In the first task, the worker was shown a {{ WIDTH }}x{{ HEIGHT }} matrix that contains the following arrow symbols: ←, →,  ↑, and ↓. The worker's job was to tell us how many times the {{ COUNTED_CHAR }} symbol is shown in the matrix. The worker was given {{ time_per_task }} seconds to submit as many puzzles as possible. For each correct submission, they were rewarded one point. In contrast, incorrect submissions or puzzles they failed to submit earned them 0 points. Below: you will find a screenshot of the worker's first task:
        </p>
        {{ if WIDTH == 4 }}
            <center><img src="{{ static 'task_examples/matrix_task4.png' }}"/></center>
        {{ elif WIDTH == 6 }}
            <center><img src="{{ static 'task_examples/matrix_task6.jpeg' }}"/></center>
        {{ endif }}
    {{ else }}
        <p>
            In the first task, the worker was shown a table with two rows and ten columns. The first row contained ten randomly selected letters. In contrast, the second row constained all numeric characters (0-9) in random order. Each column represented a pair/correspondence between the letter and the number. At the bottom of the table, the worker was given a {{ WORD_LENGTH }}-character string of numbers. The worker's job was to convert the {{ WORD_LENGTH }}-character numeric string into its corresponding alphabetical (letter) string. The workers answers were not case-sensitive, so they were welcome to submit their answers in upper or lower case. Below: you will find a screenshot of the worker's first task:
        </p>

        {{ if WORD_LENGTH == 5 }}
            <center><img src="{{ static 'task_examples/decoding_task5.jpeg' }}"/></center>
        {{ elif WORD_LENGTH == 4 }}
            <center><img src="{{ static 'task_examples/decoding_task4.png' }}"/></center>
        {{ elif WORD_LENGTH == 3 }}
            <center><img src="{{ static 'task_examples/decoding_task3.png' }}"/></center>
        {{ endif }}
    {{ endif }}

    {{ formfield 'task1_skill' }}

    {{ form.task1_skill_innate.label }}

        <br>
        <br>

        <div style="text-align: center">
            <label>Completely Learnable</label>
            <input type="range" name="task1_skill_innate" class="slider" id="reversedRange" min="0" max="100" oninput="updateTask1InnateSkill(this)">
            <label>Completely Innate Talent</label>
            <br>
            <br>
            <p id="task1_innate_skill_text"></p>
        </div>

    {{ next_button }}
{{ endblock }}


{{ block styles }}
    <style>
        .reversedRange {
            direction: rtl;
        }
        .slider {
            width: 50%;
            height: 12px;
            border-radius: 5px;  
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }      
    </style>
{{ endblock }}