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

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

{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'instruction_tabs/carousel.css' %}">
{% endblock %}

{% block content %}

<!-- Tabs on top of page -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">
    <li class="nav-item tab_header">
        <a class="nav-link active tab_element" id="part1-tab" data-toggle="tab" href="#part1" role="tab"
           aria-controls="part1"
           onclick="topFunction()">1. Roles</a>
    </li>

    <li class="nav-item tab_header">
        <a class="nav-link tab_element" id="part2-tab" data-toggle="tab" href="#part2" role="tab"
           aria-controls="part2"
           onclick="topFunction()">2. Player B chooses a project</a>
    </li>

    <li class="nav-item tab_header">
        <a class="nav-link tab_element" id="part3-tab" data-toggle="tab" href="#part3" role="tab"
           aria-controls="part3"
           onclick="topFunction()">3. Comprehension</a>
    </li>
</ul>


<div class="tab-content" id="myTabContent">

    <!-- Tab 1 content -->
    <div class="customInstructions tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">

        {% if Constants.base_pilot %}
        <p>
            You are asked to read the instructions for the "Choose-a-Project" task completed by other participants on
            Prolific. After you finish reading the instructions, we would like to ask you a few questions about
            the choices made by the other participants.
        </p>
        {% endif %}

        <div class="card-header bg-transparent mainheader">
            <h5>The Roles</h5>
        </div>


        <div class="card bg-light instructions">
            <div class="card-body">

                <p>
                    In this task <b>three participants</b>, also recruited on Prolific, are randomly matched in a group.
                    Their identity will remain anonymous to one another.
                    The three participants are randomly assigned one of three possible roles:
                    Player A, Player B or Player C.
                </p>

                <p>
                    <b>Player B</b> is asked to make a choice that will affect the earnings of all three
                    participants in the group. <b>Player A and C</b> have no choice to make.
                </p>

                <p>
                    {% if player.id_in_group == 1 and not Constants.base_pilot %}
                    You are assigned to the role of <b><span class="text-primary">Player A</b></span>.
                    You will be matched with two real Prolific participants. You may send a message to the experimenter via
            Prolific if you wish to verify the results.
                    {% elif player.id_in_group == 2 and not Constants.base_pilot %}
                    You are assigned to the role of <b><span class="text-primary">Player B</b></span>.
                    You will be matched with two real Prolific participants. You may send a message to the experimenter via
            Prolific if you wish to verify the results.
                    {% endif %}
                </p>

                <p>
                    <b>Click on the tabs at the top of the screen to navigate between the Instructions and the
                        Comprehension questions.</b>
                </p>
            </div>
        </div>

        <!--        <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>-->
    </div>


    <!-- Tab 2 content -->
    <div class="tab-pane" id="part2" role="tabpane2" aria-labelledby="part2-tab">
        <div class="card-header bg-transparent mainheader">
            <h5>The "Choose-a-Project" Task</h5>
        </div>

        <div class="card bg-light instructions">
            <div class="card-body">

                <p>
                    In this task there are <b>two types of projects</b> that <b>Player B</b>
                    has to choose from:
                </p>

                <ul>
                    <li>A <b>Communal Project</b> that pays £8 to each of the three players</li>
                    <li>An <b>Exclusive Project</b> between
                        {% if group.random_game == 1 %}
                        <b>Player B and C</b> that pays £12 to Player B and Player C and
                        £6 to Player A.
                        {% else %}
                        <b>Player A and B</b> that pays £12 to Player A and Player B and
                        {% endif %}
                    </li>
                </ul>

                <center>
                    <img src="{% static image_path %}" width="500px"/>
                </center>

            </div>
        </div>

        <!--        <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Previous</button>-->
        <!--        <button type="button" class="nexttab btn-primary btn next">Next</button>-->
    </div>


    <!-- Tab content 3 -->
    <div class="tab-pane show active" id="part3" role="tabpane3" aria-labelledby="part3-tab">
        <div class="card-header bg-transparent mainheader">

            <p>
                <b>One or more answers that you provided were incorrect.</b>
            </p>

            {% if player.q1 == 'b' %}
            <p class="text-success">
                Your answer 'The Exclusive Project' to Q1 was correct.
            </p>
            {% else %}
            <p class="text-danger">
                Your answer to Q1 was incorrect. Please try again.
            </p>
            {% endif %}

            {% if player.q2_base == 'b' %}
            <p class="text-success">
                Your answer 'Player B' to Q2 was correct.
            </p>
            {% else %}
            <p class="text-danger">
                Your answer to Q2 was incorrect. Please try again.
            </p>
            {% endif %}

            {% if player.q3 == 'a' %}
            <p class="text-success">
                Your answer 'True' to Q3 was correct.
            </p>
            {% else %}
            <p class="text-danger">
                Your answer to Q3 was incorrect. Please try again.
            </p>
            {% endif %}

            <div class="card bg-light instructions">
                <div class="card-body">

                    {% if group.random_game == 1 %}
                    <b>Q1) Which project gives the following earnings:
                        Player A: £6, Player B: £12, and Player C: £12?</b>
                    {% else %}
                    <b>Q1) Which project gives the following earnings:
                        Player A: £12, Player B: £12, and Player C: £6?</b>
                    {% endif %}
                    {% formfield player.q1a %}

                    <b>Q2) Which player chooses the project? </b>
                    {% formfield player.q2_base_a %}

                    <b>Q3) The Communal Project gives all players the same earnings of £8. </b>
                    {% formfield player.q3a %}
                </div>
            </div>

            <!--        <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>-->
            <button onclick="submit()" class="nexttab btn-primary btn next">Next</button>
        </div>

    </div>

    {% endblock %}


    {% block scripts %}
    <script src="{% static 'instruction_tabs/carousel.js' %}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            if (location.hash) {
                $("a[href='" + location.hash + "']").tab("show");
            }
            $(document.body).on("click", "a[data-toggle='tab']", function(event) {
                location.hash = this.getAttribute("href");
            });
        });
        $(window).on("popstate", function() {
            var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
            $("a[href='" + anchor + "']").tab("show");
        });



    </script>
    {% endblock %}