{{ extends "global/Slider.html" }}


{{ block Slides }}
<!-- <input type="hidden" id="no-checks"> -->

    <!-- Slide 1a -->
    <div class="slide"> 
        <div class="text-container">
            <h2> The experiment - in short: </h2>
            <p> This experiment simulates a recruitment task. <div class="green">You</div> will be playing the role of a recruiter. The main idea of the task is the following: </p>
            <ol>
                <li> <div class="green">You</div> will receive the application information of two <div class="maroon">job candidates</div>. </li>

            </ol>
            <i>Press → to continue reading </i>
        </div>
        <div class="img-container"> <img src="{{ static C.pathTaskImg1 }}" class="img-instructions" alt="example of decision screen"> </div>
    </div>
    <!-- Slide 1b -->
    <div class="slide"> 
        <div class="text-container">
            <h2> The experiment - in short: </h2>
            <p> This experiment simulates a recruitment task. <div class="green">You</div> will be playing the role of a recruiter. The main idea of the task is the following: </p>
            <ol>
                <li> <div class="green">You</div> will receive the application information of two <div class="maroon">job candidates</div>. </li>
                <li> <div class="green">You</div> must choose one of the <div class="maroon">candidates</div> to pass forward. </li>
            </ol>
            <i>Press → to continue reading </i>
        </div>
        <div class="img-container"> <img src="{{ static C.pathTaskImg2 }}" class="img-instructions" alt="example of decision screen"> </div>
    </div>

        <!-- Slide 3 -->
        <div class="slide"> 
            <div class="text-container">
                <h2> The experiment - in short: </h2>
                <p> This experiment simulates a recruitment task. <div class="green">You</div> will be playing the role of a recruiter. The main idea of the task is the following: </p>
                <ol>
                    <li> <div class="green">You</div> will receive the application information of two <div class="maroon">job candidates</div>. </li>
                    <li> <div class="green">You</div> must choose one of the <div class="maroon">candidates</div> to pass forward. </li>
                    <li> An <div class="blue">employer</div> (a previous participant) rates your <div class="maroon">chosen candidate</div> and <div class="maroon">another candidate</div> with similar skills. They hire the <div class="maroon">candidate</div> with higher rating. </li>
                </ol>
                <i>Press → to continue reading </i>
            </div>
            <div class="img-container"> <img src="{{ static C.pathTaskImg3 }}" class="img-instructions" alt="example of decision screen"> </div>
        </div>
    
    <!-- Slide 1 -->
    <div class="slide"> 
        <div class="text-container">
            <h2> The experiment - in short: </h2>
            <p> This experiment simulates a recruitment task. <div class="green">You</div> will be playing the role of a recruiter. The main idea of the task is the following: </p>
            <ol>
                <li> <div class="green">You</div> will receive the application information of two <div class="maroon">job candidates</div>. </li>
                <li> <div class="green">You</div> must choose one of the <div class="maroon">candidates</div> to pass forward. </li>
                <li> An <div class="blue">employer</div> (a previous participant) rates your <div class="maroon">chosen candidate</div> and <div class="maroon">another candidate</div> with similar skills. They hire the <div class="maroon">candidate</div> with higher rating. </li>
                <li> If the <div class="blue">employer</div> hires your chosen <div class="maroon">candidate</div>, then <div class="green">you</div> get a bonus of {{ C.iBonus }} </li>
            </ol>
            <i>Press → to continue reading </i>
        </div>
        <div class="img-container"> <img src="{{ static C.pathTaskImg }}" class="img-instructions" alt="example of decision screen"> </div>
    </div>



    <!-- Slide 2 -->
    <div class="slide"> 
        <div class="text-container">
            <h2> The candidates: </h2>
            <ul>
                <li> <div class="green">You</div> will see information about <div class="redbold">real candidates</div>. The information comes from a company who needed to hire a large amount of workers to do the same job.  </li>
                <li> Three months after they were hired, <div class="redbold">the candidates'</div> performance was evaluated.</li>
                <li> The application of the <div class="redbold">the candidates</div> has the following information:</li>
                <ul>
                    <li> <b>General Mental Ability (GMA)</b>: measures the ability to process verbal information, numbers and graphs.  </li>
                    <li> 
                        <b>Personality (Conscientiousness)</b>:
                        measures the tendency to be responsible, organized, hard-working, goal-directed, and to adhere to norms and rules.  
                    </li>
                    <li> <b>Unstructured Interview</b>: An interview without prespecified questions, held by a manager.  </li>
                    <li> <b>Gender</b>: Stated gender. </li>
                    <li> <b> Random Number </b>: A random number from 1 to 5. We created this number and has nothing to do with the <div class="redbold">the candidates'</div> performance
                    </li>
                </ul>
                <li> All these items (except gender) have a score from 1 (low) to 5 (high). </li>
            </ul>

        </div>
    </div> 
    <!-- Slide 3 -->
    <div class="slide"> 
        <div class="text-container">
            <h2> The task: </h2>
            <ul>
                <li> In this experiment, <div class="green">you</div> will make multiple decisions ({{ C.iNumTrials }}) between two <div class="redbold">candidates</div>. </li>
                <li> In every round, <div class="green">you</div> will see the applications of two <div class="redbold">candidates</div> (See image on the right). </li>
                <li> The order of the attributes might be different for <div class="green">you</div>, but will stay the same throughout the whole experiment. </li>
                <li> We gathered all <div class="bluebold">employers'</div> predictions and calculated the average predicted performance for each <div class="maroon">candidate</div>. We then separated them in three groups: low, middle and high evaluations. In every round, both <div class="maroon">candidates</div> will belong to the same performance group. </li>
                <i> (explanation continues in next page) </i>
            </ul>
        </div>
        <div class="img-container"> <img src="{{ static C.path1 }}" class="img-instructions" alt="example of decision screen"> </div>
    </div>
    <!-- Slide 3b -->
    <div class="slide"> 
        <div class="text-container">
            <h2> The task - continued: </h2>
            <ul>
                <li> During the task, you will not be able to see all information at once. </li>
                <li> In the beginning, the information will be hidden. </li>
                <li> Hover your mouse over the attribute you want to see. The attribute information will be revealed for both candidates at the same time.  </li>
                <li> You can see this information as many times and as long as you want. </li>
                <li> When you are ready, click on your chosen option below. </li>
                <li> After choosing, we will ask you how confident you are on your choice.</li>
            </ul>
        </div>
        <div class="img-container"> <img src="{{ static C.pathDemoMouseCrop }}" class="img-instructions" alt="example of decision screen"> </div>
    </div>

    <!-- Slide 4 -->
    <div class="slide"> 
        <div class="text-container">
            <h2> The employer (and your bonus payment): </h2>
            <ul>
                <li>In a previous experiment, participants (they will be the <div class="blue">employers</div>) had to predict the true performance of the <div class="redbold">candidates</div> based on the application. </li>
                <li>If their predictions were accurate, they received a bonus.</li>
                <li><div class="green">You</div> will be assigned to one specific <div class="bluebold">employer</div>.  </li>
                <li>At the end of the experiment, we will randomly choose one of <div class="green">your decisions</div>. We will then compare the <div class="bluebold">employer's</div> rating for your <div class="redbold">chosen candidate</div> and another <div class="redbold">similar candidate <span class="question">?</span>
                    <span class="tooltiptext" id="tooltip-1">
                        We select the <div class="maroon">similar candidate</div> by looking at the average rating based on all <div class="blue">employers</div>. We separate candidates in three groups (low, mid, high) based on their average rating. Your <div class="maroon">chosen candidate</div> and the <div class="maroon">similar candidate</div> belong to the same group.
                    </span>
                </div>. </li>
                <li>If the <div class="bluebold">employer</div>, that was assigned to <div class="green">you</div>, selected your <div class="redbold">chosen candidate</div>, then you will obtain a bonus of {{ C.iBonus }}. If the <div class="bluebold">employer</div> gave the same rating to both <div class="maroon">candidates</div>, then you also get the bonus. </li>
            </ul>
        </div>
    </div>
    <!-- Slide 5 -->
    <div class="slide"> 
        <div class="text-container">
            <h2> Your employer: </h2>
            <div>The <div class="bluebold">employer</div> you have been assigned to has the following characteristics:</div>
            <ul>
                {{ for item in lAttr }}
                    <li> {{ item }} </li>
                {{ endfor }}
            </ul>
            Remember, the <div class="maroon">candidates</div> you choose will be evaluated by this <div class="bluebold">employer</div>. Try thinking, which <div class="maroon">candidates</div> would this <div class="bluebold">employer</div> select. 
        </div>
    </div>
    <!-- Slide 6 -->
    <div class="slide"> 
        <div class="text-container">
            <h2> Summary: </h2>
            <ul>
                <li> The experiment consists of {{ C.iNumTrials }} rounds (including {{ C.iPracticeRounds }} practice rounds). </li>
                <li> In every round, you will evaluate the applications of two <div class="maroon">real job candidates</div>. </li>
                <li> Your assigned <div class="blue">employer</div> (a previous participant) rated the <div class="maroon">candidates</div>. </li>
                <li> The <div class="maroon">candidate</div> you choose, will be compared to another <div class="maroon">candidate</div>. If the <div class="blue">employer</div> selects your <div class="maroon">candidate</div>, you get a bonus. </li>
                <li> The characteristics of your assigned <div class="blue">employer</div> are on the previous page. </li>
                <li> You can only look at the information of the candidates one by one. To look at the <div class="maroon">candidates'</div> information, hover your mouse over the information.  </li>
            </ul>
        </div>
        <div class="img-container"> <img src="{{ static C.pathTaskImg }}" class="img-instructions" alt="example of decision screen"> </div>
    </div>
    
    <!-- Slide 7 -->
    <div class="slide"> 
        <div class="text-container questions-container">
            <ul>
                <!--Question 1-->
                <li>
                    <div class="inst-question">
                        <!-- Question-->
                        <label for="Q1"> Are the candidates' information and the employers' decisions real? </label>
                    </div>
                    <div class="answer-field">
                        <select name="Q1" id="Q1" class="dropdown ControlQuestions">
                            <option value="nothing">--Select--</option>
                            <option value="a">Yes, for both</option>
                            <option value="b">Only the candidates' information</option>
                            <option value="c">Only the employer's decisions </option>
                            <option value="d">No </option>
                        </select>
                    </div>
                </li>

                <!-- Hint -->
                <div class="hint" id="hint1">
                    Incorrect: Go back to the previous slide
                </div>

                <!--Question 2-->
                <li>
                    <div class="inst-question">
                        <label for="Q2"> Which candidates get selected by the employer?  </label>
                    </div>
                    <div class="answer-field">
                        <select name="Q2" id="Q2" class="dropdown ControlQuestions">
                            <option value="nothing">--Select--</option>
                            <option value="a"> The ones with better performance </option>
                            <option value="b"> The ones better rated by the employer </option>
                            <option value="c"> They get randomly selected  </option>
                        </select>
                    </div>
                </li>

                <div class="hint" id="hint2">
                    Incorrect: Go back to the slide "The Task"
                </div>


                <!-- Question 4
                <li>
                    <div class="inst-question">
                        <label for="Q4"> What is the gender of the <div class="blue">employer</div>?  </label>
                    </div>
                    <select name="Q4" id="Q4" class="dropdown ControlQuestions">
                        <option value="nothing">--Select--</option>
                        <option value="a"> Male </option>
                        <option value="b"> Female </option>
                        <option value="c"> Other  </option>
                    </select>
                </li>
                <div class="hint" id="hint4">
                    Incorrect: see slide "Your employer"
                </div> -->

                <!-- Question 5 -->
                <li>
                    <div class="inst-question">
                        <label for="Q5"> What is the age range of the <div class="blue">employer</div>?  </label>
                    </div>
                    <select name="Q5" id="Q5" class="dropdown ControlQuestions">
                        <option value="nothing">--Select--</option>
                        <option value="a"> 20-30 </option>
                        <option value="b"> 31-40 </option>
                        <option value="c"> Other  </option>
                    </select>
                </li>
                <div class="hint" id="hint5">
                    Incorrect: see slide "Your employer"
                </div>

                <!-- Question 6
                <li>
                    <div class="inst-question">
                        <label for="Q6"> What is the math level of the <div class="blue">employer</div>?  </label>
                    </div>
                    <select name="Q6" id="Q6" class="dropdown ControlQuestions">
                        <option value="nothing">--Select--</option>
                        <option value="a"> Low </option>
                        <option value="b"> Mid </option>
                        <option value="c"> High  </option>
                    </select>
                </li>
                <div class="hint" id="hint5">
                    Incorrect: see slide "Your employer"
                </div> -->

                <!--Question 7-->
                <li>
                    <div class="inst-question">
                        <label for="Q4"> How many rounds will you do (including practice rounds)?</label>
                    </div>
                    <div class="answer-field">
                        <!-- Input field -->
                        <input type="text" name="Q7" id="Q7" class="ControlQuestions">
                    </div>
                </li>
                <div class="hint" id="hint7">
                    Incorrect: see the previous slide
                </div>
                <li>
            <!-- Submit answers and Next button (next button appears when user answers all questions correctly)-->
                <button type="button" id="submitAnswer" class="button" onclick="ValidateSaveSubmit()"> Submit </button>
        </div>
        
    </div>
    
{{ endblock }}

{{ block app_styles }}
<link href="{% static 'global/css/global.css' %}" rel="stylesheet">

<style>
    #img-example {
        width: 75vw;
        height: auto;
    }

    #img-example2 {
        width: 50vw;
        height: auto;
    }

    .text-container {
        font-size: larger;
    }
</style>
{{ endblock }}

{{ block app_scripts }}
<script>

  const lSolutions    =  js_vars.lSolutions;     // Solutions for Check-up questions in the last slide

  function ValidateSaveSubmit() {
    validateAnswers();
  }

  window.addEventListener("DOMContentLoaded", ()=>{
    // Get divs to add tooltips
    let lGreen = document.getElementsByClassName("greenbold");
    let lBlue = document.getElementsByClassName("bluebold");
    let lRed = document.getElementsByClassName("redbold");
    // Green tooltip
    for (let i=0;i<lGreen.length;i++) {
        let span = document.createElement('span')
        span.innerHTML = "You";
        span.classList.add("tooltiptext")
        lGreen[i].appendChild(span);
    }

    // Blue tooltip
    for (let i=0;i<lBlue.length;i++) {
        let span = document.createElement('span')
        span.innerHTML = "Previous participants";
        span.classList.add("tooltiptext")
        lBlue[i].appendChild(span);
    }
  })
</script>

{{ endblock }}