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

{% block title %}
    {# Instructions - best to leave empty #}
{% 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()">Instructions - General Information</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()">Instructions - Evaluation of Payoff Combinations</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()">Instructions - Calculation of final Payoff</a>
        </li>

        <li class="nav-item tab_header">
                <a class="nav-link tab_element" id="part4-tab" data-toggle="tab" href="#part4" role="tab"
                   aria-controls="part4"
               onclick="topFunction()">Ranking</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">
            <div class="card-header bg-transparent mainheader">
                <h3>General Information</h3>
            </div>
            &nbsp
            &nbsp
            <div >
                <h4>General Information</h4>
            </div>
            <p>
                Welcome to this experiment and thank you very much for your participation! Please make sure
                to read the instructions very carefully as understanding these will be important
                both for our research and your reward from this experiment. While going through the different
                screens and tasks please do not speak with anyone else or get distracted
                by anything else (in particular, please close other applications and open tabs
                in your browser).
            </p>
            <p>
                Your participation in this research study is voluntary.
                You may choose not to participate. If you decide to
                participate in this research survey, you may withdraw at
                any time. You will need to fill an online survey and answer some questions.
                It will take approximately 15 minutes.
            </p>
            <p>
                It is important that you make your decisions on your own.
                All your decisions and choices will remain completely anonymous.
            </p>
           <p>
                In this experiment, you can earn a substantial amount of money.
                The amount you will finally earn depends on your own decisions, the decisions of
                other participants and on chance. You will receive your payment within a couple of days
                after completing the study.
            </p>
            <p>
                All payoffs will be expressed in terms of experimental currency units (ECU).
                At the end, all experimental currency units will be exchanged into Euros with a
                conversion rate of 2:1. That means, for each 2 ECU you earned you will receive
                1 Euro.
            </p>
        <p>
                I understand that all the data collected from my responses will only be used for research and my identity will be kept anonymous.
        </p>
            <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">I consent</button>
        </div>


    <!-- Tab 2 content -->
            <div class="tab-pane" id="part2" role="tabpane2" aria-labelledby="part2-tab">
                <div class="card-header bg-transparent mainheader">
                    <h3>Evaluation of Payoff Combinations</h3>
                </div>
                    <p>
                        This experiment consists of one task, which is identical for all participants.
                        You will be shown a list of sixteenpayoff-combinations similarly to the screen below
                        (The list on the screen
                        just serves as an example, the values of the actual combinations will be different).
                    </p>
                <center>
                    <img src="{{ static 'images/Screen1.jpg' }}" width="400px"/>
                </center>

                <p>
                    Each of these combinations consists of two numbers (x, y). The first number x corresponds to
                    the number of ECUS you would receive and the second number y corresponds to the
                    number of ECUs another participant would receive.
                    Your task is to rank all these payoff-combinations according to how much you like them.
                    That is,
                    you indicate which of these combinations you like best, which one second-best, and so on.
                </p>

                <p>
                    The payoff combinations will initially be ordered randomly. You can move individual pairs
                    to your preferred position by drag-and-drop. The combination you place on the top
                    corresponds to your most preferred one, the combination you place second corresponds
                    to your second-best option and so
                    on until at the bottom you will place your least preferred combination from the options.
                </p>

                <p>
                    For example, if you like the payoff combination
                    (6, 15) (currently on rank 6) the most, you can should move it
                    to rank 1 (see screenshot below).
                </p>
                <center>
                    <img src="{{ static 'images/Screen2.jpg' }}" width="400px"/>
                </center>

                <p>
                    Once you have re-arranged the list according to your preference,
                    you will be asked to confirm that this list reflects how you rank the
                    16 payoff combinations.
                </p>

                <p>
                    Before you are asked to decide about your ranking of the different combinations,
                    you will be asked some questions to help with your understanding of the experiment.
                    At the end of the experiment, there will be a short general demographics questionnaire.
                </p>
                <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
            </div>
        <!-- Tab 3 content -->
        <div class="tab-pane" id="part3" role="tabpane3" aria-labelledby="part3-tab">
            <div class="card-header bg-transparent mainheader">
                <h3>Calculation of final Payoff</h3>
            </div>

            <p>
                <b>
                    Your final payoff consists of a payoff value (x)
                    from your own decision and a payoff value (y) from the decision of another participant.
                </b>
            </p>
            <p>
                To determine those two values, two of the sixteen payoff combinations will be
                chosen randomly and the one you ranked higher will be selected
                for payment (this corresponds to the one with the lower rank number).
                From this combination, you will receive the first value for yourself,
                and the second value will be paid to another participant. In addition,
                you will receive a payoff value from the decision of another participant
                (which will determined exactly as the payoff from your own decision is determined).
            </p>

            <p>
                This procedure guarantees that it is optimal for you to submit your true ranking
                of payoff combinations.
            </p>

            <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
            </div>
        <!-- Tab 4 content -->
        <div class="tab-pane" id="part4" role="tabpane4" aria-labelledby="part4-tab">
            <div class="card-header bg-transparent mainheader">
                <h3>Your Ranking</h3>
            </div>

            <p>
                Please rank order the following 16 payment pairs by moving the pairs
            to your desired position (lower ranks correspond to better positions: rank 1 = best rank, rank 16 = worst rank).
            </p>
            <p>
                If a pair is selected for payment, the first value of the pair corresponds to the payoff
                you  will receive and the second value is paid out to another participant.
            </p>
          <style>

        .overallContainer {
            width: 55%;
            height:820px;
           padding: 10px;
            background-color: lightgray;
            border: 2px solid black;
        }



        .itemContainer {
          width: 370px;
          height: 700px;
            display: inline-block;
            font-size: 20px;
        }

        .itemContainer h3 {
          background-color: #abd5ea;
          color: #333;
          font-size: 20px;
          line-height: 30px;
          margin: 0;
          padding-left: 10px;
        }

        .rankContainer {
            width: 120px;
            float: left;
            display: inline-block;
            font-size: 20px;
        }

        .rankContainer h3 {
          background-color: #abd5ea;
          color: #333;
          font-size: 20px;
          line-height: 30px;
          margin: 0;
          padding-left: 10px;
        }
        </style>

        <center>
        <div class="overallContainer">

                <div class="rankContainer">
                <h3>Rank</h3>
            {{ for r in Constants.ranks }}
            <li data-id="{{ r}}" class="list-group-item">{{ r }}</li>
            {{ endfor }}
                        </ul>
                </div>

          <div class="itemContainer">
              <h3>Pair</h3>
            <ul id="items" class="list-group" style="cursor: move">
            {{ for choice in Constants.choices }}
            <li data-id="{{ choice }}" class="list-group-item">{{ choice }}</li>
            {{ endfor }}
            </ul>
          </div>
        </div>
        </center>

        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script>
            let el = document.getElementById('items');
            let sortable = Sortable.create(el);

        </script>
            <input type="hidden" name="ranking" id="ranking">

            <script>
               //function showInput() {
                //document.getElementById("display").innerHTML = document.getElementById('ranking').value;
                /}
            </script>

        {{ formfield_errors 'ranking' }}
            </p>

            <button onclick="topFunction()"; type="button" class="prevtab btn-primary btn back">Previous</button>
            <button onclick="return confirm('Are you sure about your ranking?')"; type="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 %}