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

{% block title %}
    
{% endblock %}


{% block content %}

    <p>
        Please select the statement that correctly compares candidate 1 to candidate 2. <br><br>
    </p>

    <!-- Here is the table that contains the candidates for the first subquestion of the control question and the formfield with the choices//-->
    <p>
     <table 
        width="400px" border>
        <tr bgcolor="lightgrey">
            <th style="text-align:center"></th>
            <th style="text-align:center">Candidate 1</th>
            <th style="text-align:center">Candidate 2</th>
        </tr>
        <tr>
            <td>Sum Skill Scores</td>
            <td style="text-align:center">70</td>
            <td style="text-align:center">80</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">65</td>
            <td style="text-align:center">65</td>
        </tr>
    </table>
    </p>

    {% formfield player.control1 %}
    
    <br><hr><br>
    <!-- Here is the table that contains the candidates for the second subquestion of the control question and the formfield with the choices//-->
    <p>
     <table 
        width="400px" border>
        <tr bgcolor="lightgrey">
            <th style="text-align:center"></th>
            <th style="text-align:center">Candidate 1</th>
            <th style="text-align:center">Candidate 2</th>
        </tr>
        <tr>
            <td>Sum Skill Scores</td>
            <td style="text-align:center">100</td>
            <td style="text-align:center">50</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">50</td>
            <td style="text-align:center">100</td>
        </tr>
    </table>
    </p>

    {% formfield player.control2 %}

 	<br><hr><br>
    <!-- Here is the table that contains the candidates for the third subquestion of the control question and the formfield with the choices//-->
    <p>
     <table 
        width="400px" border>
        <tr bgcolor="lightgrey">
            <th style="text-align:center"></th>
            <th style="text-align:center">Candidate 1</th>
            <th style="text-align:center">Candidate 2</th>
        </tr>
        <tr>
            <td>Sum Skill Scores</td>
            <td style="text-align:center">150</td>
            <td style="text-align:center">100</td>
        </tr>
        <tr>
            <td>Team Compatibility</td>
            <td style="text-align:center">50</td>
            <td style="text-align:center">80</td>
        </tr>
    </table>
    </p>

    {% formfield player.control3 %}

	{% 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>

 



{% endblock %}