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

{% block title %}
    
{% endblock %}

{% block scripts %}

    <!-- Here comes the javascript for tracking the changes in decision making  //-->
    <script>

        var current_C1;
        var all_C1 = "seq_C1";
        
        // Here we call the formfield for the selection of the first candidate and add a keyup event to it
        document.getElementById("id_choice1").addEventListener('keyup', function getChangesC1 (){

            /* Whenever a key is released while in the formield, the entered value is retrieved and added to the decision sequence */
            current_C1 = document.getElementById("id_choice1").value;
            all_C1 = all_C1 + ", " + String(current_C1);

            // The changes from above are saved into the hidden input fields
            document.getElementById("outputC1").innerHTML = current_C1;
            document.getElementById("id_current_C1").value = current_C1;
            document.getElementById("id_all_C1").value = all_C1;

            });


        // The process from above is repeated to track the changes in the formfields for the second and third candidate
        var current_C2;
        var all_C2 = "seq_C2";

        document.getElementById("id_choice2").addEventListener('keyup', function getChangesC2 (){

            current_C2 = document.getElementById("id_choice2").value;
            all_C2 = all_C2 + ", " + String(current_C2);

            document.getElementById("id_all_C2").value = all_C2;

            });

        var current_C3;
        var all_C3 = "seq_C3";

        document.getElementById("id_choice3").addEventListener('keyup', function getChangesC3 (){

            current_C3 = document.getElementById("id_choice3").value;
            all_C3 = all_C3 + ", " + String(current_C3);

            document.getElementById("id_all_C3").value = all_C3;

            });



    </script>



{% endblock %}



{% block content %}

    <p>
        The HR department not only rated the candidates' position-fit and team-fit but also pre-allocated three candidates to each position. This way, you only have to choose between three candidates for each position. Please take a look at all the candidates presented to you before making your final decision.<br><br>
    </p>

    <!-- Here is the table that presents the possible candidates for the first position to the player //-->
    <p>
        <caption>Position 1:</caption>
    <table 
        width="400px" border>
        <tr bgcolor="lightgrey">
            <th style="text-align:center">Skill</th>
            <th style="text-align:center">Person 1</th>
            <th style="text-align:center">Person 2</th>
            <th style="text-align:center">Person 3</th>
        </tr>
        <tr>
            <td>Analytics</td>
            <td style="text-align:center">95</td>
            <td style="text-align:center">65</td>
            <td style="text-align:center">70</td>
        </tr>
        <tr>
            <td>IT</td>
            <td style="text-align:center">70</td>
            <td style="text-align:center">10</td>
            <td style="text-align:center">30</td>
        </tr>
        <tr>
            <td>Languages</td>
            <td style="text-align:center">75</td>
            <td style="text-align:center">90</td>
            <td style="text-align:center">65</td>
        </tr>
        <tr>
            <td>Negotiation</td>
            <td style="text-align:center">60</td>
            <td style="text-align:center">15</td>
            <td style="text-align:center">75</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">35</td>
            <td style="text-align:center">45</td>
            <td style="text-align:center">25</td>
        </tr>
    </table>
    </p>

    <!-- Here we call the formfield that saves the player's choice for the first position //-->
    {% formfield player.choice1 %}

    <!-- Here is the table that presents the possible candidates for the second position to the player //-->
    <p><br>
        <caption>Position 2:</caption>
    <table 
        width="400px" border>
        <tr bgcolor="lightgrey">   
            <th style="text-align:center">Skill</th>
            <th style="text-align:center">Person 4</th>
            <th style="text-align:center">Person 5</th>
            <th style="text-align:center">Person 6</th>
        </tr>
        <tr>
            <td>Analytics</td>
            <td style="text-align:center">100</td>
            <td style="text-align:center">85</td>
            <td style="text-align:center">10</td>
        </tr>
        <tr>
            <td>IT</td>
            <td style="text-align:center">55</td>
            <td style="text-align:center">50</td>
            <td style="text-align:center">80</td>
        </tr>
        <tr>
            <td>Languages</td>
            <td style="text-align:center">20</td>
            <td style="text-align:center">10</td>
            <td style="text-align:center">30</td>
        </tr>
        <tr>
            <td>Negotiation</td>
            <td style="text-align:center">45</td>
            <td style="text-align:center">55</td>
            <td style="text-align:center">40</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">45</td>
            <td style="text-align:center">35</td>
            <td style="text-align:center">75</td>
        </tr>
    </table>
    </p>

    <!-- Here we call the formfield that saves the player's choice for the second position //-->
    {% formfield player.choice2 %}

    <!-- Here is the table that presents the possible candidates for the third position to the player //-->
    <p><br>
        <caption>Position 3:</caption>
    <table 
        width="400px" border>
        <tr bgcolor="lightgrey">
            <th style="text-align:center">Skill</th>
            <th style="text-align:center">Person 7</th>
            <th style="text-align:center">Person 8</th>
            <th style="text-align:center">Person 9</th>
        </tr>
        <tr>
            <td>Analytics</td>
            <td style="text-align:center">20</td>
            <td style="text-align:center">45</td>
            <td style="text-align:center">40</td>
        </tr>
        <tr>
            <td>IT</td>
            <td style="text-align:center">90</td>
            <td style="text-align:center">55</td>
            <td style="text-align:center">70</td>
        </tr>
        <tr>
            <td>Languages</td>
            <td style="text-align:center">40</td>
            <td style="text-align:center">50</td>
            <td style="text-align:center">85</td>
        </tr>
        <tr>
            <td>Negotiation</td>
            <td style="text-align:center">50</td>
            <td style="text-align:center">40</td>
            <td style="text-align:center">55</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">40</td>
            <td style="text-align:center">60</td>
            <td style="text-align:center">20</td>
        </tr>
    </table>
    </p>

    <!-- Here we call the formfield that saves the player's choice for the third position and his perceived complexity //-->
    {% formfield player.choice3 %}
    <br>
    {% formfield player.complex_buildPortfolio%}
    <br>
    {% next_button %}

    <!-- Here we repeat the instructions so that the player may read them again //-->
    <br><hr>
    <p><font color="#DF7401">
        Assume the following situation for the next two tasks:<br><br>
        Your department is allowed to create three new positions. All three positions have the same requirements.
        <br>
        The HR department already sorted all applications and presents you with the final nine candidates. Because all positions have the same requirements, each candidate could be hired for each position.<br><br>
        To help with your decision, the HR department rated the candidates on the four most important skills and their team compatibility factor (TC) based on CVs, cover letters and interviews. The skill items are ranked on a scale from 0% to 100% (0% - low ability, 100% - high ability). This gives the <b>position-fit</b> (PF) of a candidate. <br><br>
        The team compatibility (TC) is also rated on a scale of 0% to 100% and represents how well a candidate works in a team. This gives the <b>team-fit</b> (TF) of a candidate.
        <br><br>
        The <b>overall-fit</b> (OF) of a candidate is the team-fit multiplied with the position-fit.<br><br>
        OF = PF * TF
    </font>
    </p>

    <!-- Here we define the hidden fields for tracking the changes of the player's choices //-->
    <div id = "outputC1"></div>
    <input type = "hidden" name = "current_C1" id = "id_current_C1"/>
    <input type = "hidden" name = "all_C1" id = "id_all_C1"/>

    <input type = "hidden" name = "all_C2" id = "id_all_C2"/>

    <input type = "hidden" name = "all_C3" id = "id_all_C3"/>


    </p>

    <!-- Here we include the formfields that are not presented to the player but used for the hidden input //-->
    {{ form.current_C1.errors }}
    {{ form.all_C1.errors }}
    {{ form.all_C2.errors }}
    {{ form.all_C3.errors }}
   

{% endblock %}