{% extends "global/Page.html" %}
{% load static otree %}

{% block title %}
Instructions
{% endblock %}

{% block content %}

    <div class="card bg-light instructions">
        <div class="card-body">
            <p>
                Welcome to this task!
            </p>
            <p>
                Please read these instructions carefully. To ensure your understanding, you have to answer
                {% if player.treatment == "2" %}six{% endif %}{% if player.treatment == "1" %}five{% endif %}
                control questions. You have only two trials to answer all control questions correctly.
                If you fail to do so, you will neither be able to earn money on this HIT, nor will you be able to retake it.
            </p>
            <p>
                The task will take approximately 10 minutes to complete and consists of two parts.
                There is no time limit to complete the task.
            </p>
            <p>
                You can earn money in this task. All amounts stated are in USD and your earnings will be
                paid through Amazon Mechanical Turk (MTurk) at the end of the experiment.
                You are only paid for tasks that you completed according to the instructions given to you.
            </p>
            <p>
                Your decisions and the decisions of other participants will remain anonymous.
            </p>
            <p>
                <h4>Part 1: Slider task</h4>
            </p>

            <p>
                The slider task consists of a screen displaying 10 sliders.
            </p>
            <p>
                You can adjust each slider to any position between 0 and 100 by pressing the slider with
                your mouse and dragging it to the desired position. Each slider can be adjusted and readjusted an
                unlimited number of times and the current position of each slider is displayed to the right of the slider.
            </p>
            <p>
                When you start a slider task, all of the sliders are positioned at 0.
                Your task is to position each of the 10 sliders on the screen to the target position of 50.
                A schematic representation of a slider in both initial and target position is shown in Figure 1.
            </p>
            <p>
                <div class="row">
                    <div class="column">
                        <img id="fig1a" src="{% static "slider/fig1a.png" %}" style="width:100%"/>
                        <br>
                        <b>Fig 1 a)</b> Slider at initial position
                    </div>
                    <div class="column">
                        <img id="fig1b" src="{% static "slider/fig1b.png" %}" style="width:100%"/>
                        <br>
                        <b>Fig 1 b)</b> Slider at target position
                    </div>
                </div>
            </p>
            <p>
            </p>
            <p>
                If all 10 sliders are positioned at 50, you can proceed to the next round of the slider task by clicking
                the “Next round”-button at the bottom right of the screen.
            </p>

            <p>
                All rounds of the slider task are identical. A counter at the top right of the screen tells you the number of the
                current round. You can complete a maximum of 20 rounds.
                {% if player.treatment == "1" %}
                    A Screenshot of the slider task is shown in Fig 2.
                {% endif %}
            </p>
            {% if player.treatment == "2" %}
                <p>
                    By completing rounds, you will be rewarded with badges. There are three levels of badges: bronze, silver and gold.
                    To earn the bronze, silver and gold badge, you have to complete 7, 12 and 17 rounds correctly, respectively.

                    A panel above the sliders displays your progress towards the three badges. Once you have earned a badge,
                    it will be displayed in color in the panel. Fig 2 shows a Screenshot of the slider task, where the participant
                    completed 7 rounds correctly and has been rewarded with the bronze badge.
                </p>
            {% endif %}
            <p>
                <div class="column">
                    {% if player.treatment == "2" %}
                        <img id="fig2" src="{% static "slider/fig2_t1.png" %}" style="width:100%"/>
                    {% endif %}
                    {% if player.treatment == "1" %}
                    <img id="fig2" src="{% static "slider/fig2_t0.png" %}" style="width:100%"/>
                    {% endif %}
                    <br>
                    <b>Fig 2)</b> Screenshot of Slider Task
                </div>
            </p>
            <p>
                To earn 2 USD, you have to complete 10 rounds correctly. The amount of USD
                earned is also displayed at the top right of the screen.
            </p>

            <p>
                At any time, you can choose to exit the slider task by choosing "Yes" from the dropdown on the upper left
                of the page and pressing the "Next round"-button.
            </p>

            <p><h4>
                Part 2: Questionnaire
            </h4></p>

            <p>
                After having finished part 1 of the task, you will be automatically directed to part 2.
            </p>

            <p>
                Part 2 consists of a short questionnaire.
            </p>
            <p>
                You have to complete the whole questionnaire to finish the HIT.
            </p>
        </div>
    </div>

    <div class="card bg-light instructions">
        <div class="card-body">
            <p>
                If you have carefully read through the instructions of part 1 and 2, please fill out the following form and
                click the button below to proceed to the control questions.

                <hr>
                <p>
                    <b>What device are you using right now?</b><br>
                    <i>Please choose one of the following answers</i>.
                </p>
                {% formfield player.access_device %}
                {% if player.treatment == "0" %}
                    <hr>
                    <p>
                        <b>Please enter a player name:</b><br>
                        <i>You can only enter up to 10 characters</i>.
                        {% formfield player.participant_name %}
                    </p>
                {% endif %}
            </p>
        </div>
    </div>


    <button value="True" id="proceed" class="btn btn-primary btn-large">Proceed to control questions</button>
{% endblock %}

{% block styles %}

    <style type="text/css">
    #proceed {
        float: right;
    }

            .row {
            display: flex;
        }

    /* Create two equal columns that sits next to each other */
    .column {
        flex: 50%;
        padding: 17px;
    }

    </style>

{% endblock %}