{{ block title }}
    Candidate 12
{{ endblock }}
{{ block content }}

<style>
.table1  {
  border-collapse: collapse;
  display: none;
}

.table1 , th, td {
  border: 1px solid black;
}

.table1, .table1 th, .table1 td {
  padding: 8px;
  text-align: center;
}

.table1 th {
  border-top: 1.5px solid black;
}

.table1 th:first-child {
  background-color: transparent;
  border-right: 1.5px solid black;
}

.table1 th:nth-child(2) {
  border-right: 2px solid black;
  background-color: forestgreen;
}

.table1 th:nth-child(3) {
  border-right: 2px solid black;
  background-color: dodgerblue;
}

.table1 th:nth-child(4) {
  background-color: blueviolet;
}

.table1 tr:nth-child(2) {
  border-top: 2px solid black;
}

.table1 td:nth-child(2), td:nth-child(3) {
  border-right: 2px solid black;
}

.table2  {
  border-collapse: collapse;
}

.table2 , th, td {
  border: 1px solid black;
}

.table2, .table2 th, .table2 td {
  padding: 8px;
  text-align: center;
}

.table2 th:first-child {
  border-right: 2px solid black;
  background-color: lightsteelblue;
}

.table2 th:nth-child(4) {
  border-right: 2px solid black;
  background-color: lightsteelblue;
}

.table2 tr th:nth-child(3),
.table2 tr td:nth-child(3) {
  border-top-color: transparent;
  border-bottom-color: transparent;
}


.row {
  display: flex;
  margin-left: -5px;
  margin-right: -5px;
}

.column {
  flex: 1;
  padding: 10px;
}

.table-container {
  display: flex;
}
.table-container .table {
  margin-right: 10px;
}
</style>


<p style="font-size:18px">
<b>Candidate's Resume</b>
<div class="table-container">

    <div class="row">
    <div class="column">

                <table class="table2">
            <tr>
                <th>Race</th>
                <th>{{info2}}</th>

            </tr>
            <tr>
                <th>Gender</th>
                <th>{{info1}}</th>


            </tr>
            <tr>
                <th>Hometown</th>
                <th>{{info3}}</th>

            </tr>
            <tr>
                <th>MS Word </th>
                <th>{{info4}}</th>
            </tr>
            <tr>
                <th>Adobe Illustrator</th>
                <th>{{info5}}</th>
            </tr>
        </table>
    </div>
    <div class="column">
        <table class="table2">
            <tr>
                <th>AP/IB classes</th>
                <th style="width: 65%;">{{info6}}</th>
            </tr>
            <tr>
                <th> Extracurricular activities</th>
                <th>{{info7}}</th>
            </tr>
        </table>
    </div>
</div>
</div>
<br>
</p>

<p style="font-size:18px">
    <b>Attention Check</b><br>
    <ul>
    <li><label for="criteria">Choose which information criteria you want to type:</label>
        <select name="level" id="criteria"  onchange="checkAnswer()">
        <option value="">--Please choose an option--</option>
        <option value="2">Race</option>
        <option value="1">Gender</option>
        <option value="3">Hometown</option>
        <option value="4">MS Word</option>
        <option value="5">Adobe Illustrator</option>
        <option value="6">AP/IB classes</option>
        <option value="7">Extracurricular activities</option>
        </select>
        </li>
    <li><label for="answerInput">Please type the candidate's information for the criteria you chose above:</label>
        <input name="att12" type="text" size="12" id="answerInput" oninput="checkAnswer()"></li>
    </ul>

</p>

<p style="font-size:18px">
    <b>Please enter the maximum wage you're willing to pay.</b><br>
    <span style="font-size:17px"><i>Recall that the revenue from High is 20, and the revenue from Low is 10. </i></span>
    <div id="mathContainer" style="display: none;">
    <label for="mathwtp">What is the maximum wage you're willing to pay to this candidate for the <b><span style="color:forestgreen;">math</span></b> task? </label>
    <input type="text" size="4" min="0" name="wtpM12" id="mathwtp" style="color:forestgreen;" oninput="toggleMathField()"/>
    </div>

    <div id="socContainer" style="display: none;">
    <label for="socwtp">What is the maximum wage you're willing to pay to this candidate for the <b><span style="color:dodgerblue;">social</span></b> task? </label>
    <input type="text" size="4" min="0" name="wtpS12" id="socwtp" oninput="toggleSocField()" style="color:dodgerblue;" />
    </div>

    <div id="combContainer" style="display: none;">
    <label for="combwtp">What is the maximum wage you're willing to pay to this candidate for the <b><span style="color:blueviolet;">combined</span></b> task? </label>
    <input type="text" size="4" min="0" name="wtpC12" id="combwtp" style="color:blueviolet;" />
    </div>
</p>
<script>
function checkAnswer() {
      var answerInput = document.getElementById("answerInput").value.toLowerCase().replace(/\s/g, '');;
      var mathC = document.getElementById("mathContainer");
      var criteria = document.getElementById("criteria").value

      var correctAnswer;
      if (criteria === '1'){
       correctAnswer = '{{info1}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '2'){
       correctAnswer = '{{info2}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '3'){
       correctAnswer = '{{info3}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '4'){
       correctAnswer = '{{info4}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '5'){
       correctAnswer = '{{info5}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '6'){
       correctAnswer = '{{info6}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '7'){
       correctAnswer = '{{info7}}'.toLowerCase().replace(/\s/g, '');
      }

      if (answerInput === correctAnswer.toLowerCase()) {
        mathC.style.display = "block";
      } else {
        mathC.style.display = "none";
      }
    }


   function toggleMathField() {
    var mathInput = document.getElementById("mathwtp").value.trim();
    var socContainer = document.getElementById("socContainer");

    if (mathInput !== "") {
      socContainer.style.display = "block";
    } else {
      socContainer.style.display = "none";
    }
  }

  function toggleSocField() {
    var socInput = document.getElementById("socwtp").value.trim();
    var combContainer = document.getElementById("combContainer");

    if (socInput !== "") {
      combContainer.style.display = "block";
    } else {
      combContainer.style.display = "none";
    }
  }
</script>

{{ next_button }}
{{ endblock }}