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

{% block scripts %}

<script src="{% static 'js/Instruction1.js' %}"></script>

{% endblock %}

{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<style>
    .next {
        float: right;
    }
    .back{
        float: left;
        margin: 40px auto;
        }
    p {
        font-size: 22px;
    }
    .otree-body {
        max-width:1100px
    }
    .otree-title {
        display: none
    }
</style>

<div class="tab">
    <br>
    <br>
    <h2 style="text-align: center">Part 1 - Instructions (Page 1 of 3)</h2>
    <hr>
    <br>
    <p>
        In Part 1, you will be given 10 minutes to solve up to 30 puzzles.
    </p>
    <p>
        A high level of effort, concentration,
        and attention to detail are likely to improve your performance in the task.
    </p>
    <p>
        Numerous studies have shown that performance in solving similar types of
        puzzles is related to outcomes such as higher salaries, better job positions, and higher life satisfaction
        (Gottfretson, 2003; Niesser et al., 1996; Strenze, 2007; Bergman, 2015).
    </p>
    <p>
        On the next page, you will see an example.
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="1" style="float: right">Next</button>
    </p>
</div>

<div class="tab">
    <br>
    <br>
    <h2 style="text-align: center">Part 1 - Instructions (Page 2 of 3)</h2>
    <hr>
    <br>
    <p>
        Consider the images below (on the left), which are arranged in a pattern.
    </p>
    <p>
        You will need to identify the image from the solution set (on the right)
        that best fits the rest of the puzzle.
    </p>
    <br>
    <img src="{% static "Practice/Example_q.jpg" %}" style="width:50%" />
    <img src="{% static "Practice/Example_s.jpg" %}" style="width:46.3%" />
    <br>
    <p>
        In the example above, the correct answer would be "a".
    </p>
    <p>
        In the puzzle, the marker inside the square changes across the rows. Hence, options "d" and "e" are
        wrong because their markers do not fit with the rest of the puzzle.
        The marker in "d" has the wrong colour, while the marker in "e" has the wrong orientation.
    </p>
    <p>
        All the images in the puzzle have the same size, grey solid lines as borders, and black triangles pointing downwards in the four corners.
        Hence, options "b", "c", and "f" are wrong.
    </p>
    <br><br>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1" style="float: left;">Previous</button>
        <button type="button" class="btn btn-primary btn-tab" data-offset="1" style="float: right;">Next</button>
    </p>
    <br><br><br><br>
</div>

<div class="tab">
    <br>
    <br>
    <h2 style="text-align: center">Part 1 - Instructions (Page 3 of 3)</h2>
    <hr>
    <br>
    <p>
        To submit your answer to each puzzle, you will need to type the letter corresponding to the option you have chosen
        in the box provided on the screen.
        Then, click the button to submit your answer.
    </p>
    <p>Once you submit your answer, you will not be permitted to change it.</p>

    <p>Your earnings in this part of the experiment will depend on your performance in the task.
        Specifically, you will receive <b>{{Constants.ECUpercorrect}} ECU</b> for every puzzle you solve
        correctly. Wrong answers will not affect your score.</p>

    <p>Before we begin the task, you will participate in a practice round
        where you will be given three puzzles to solve.
        There is no time limit in the practice round,
        and your performance in the practice round will not affect your
        earnings in this experiment.</p>

    <p>
        Please click the "Next" button to start the practice round.
    </p>
    <br><br>
    <div>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1" style="float: left;">Previous</button>
        <button class="btn btn-primary" style="float: right;">Next</button>
    </div>
</div>


<script>
    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

{% endblock %}