{{ block title }}
    Candidate 2
{{ 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;
}

.table2 tr:last-child td:nth-child(3),
.table2 tr:last-child td:nth-child(4),
.table2 tr:last-child td:nth-child(5) {
  border-bottom-color: transparent;
}

.table2 tr:nth-child(3) td:last-child,
.table2 tr:nth-child(4) td:last-child,
.table2 tr:nth-child(5) td:last-child {
  border-right-color: transparent;
  border-right-width: 0;
}

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

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

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


<p style="font-size:18px">
    <b>Information</b>
<div class="table-container">

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

          <table class="table2" style="width:100%">
            <tr>
                <th>Math Skill</th>
                <th>{{num1}}</th>
            </tr>
            <tr>
                <th>Social Skill</th>
                <th>{{num2}}</th>
            </tr>
            <tr>
                <th>Combined Skill</th>
                <th>{{num3}}</th>
            </tr>
              <caption style="color:black"><b>An expert's evaluation on probability of High type for each skill</b> </caption>
        </table>
    </div>
    <div class="column">
        <table class="table2">
            <tr>
                <th>AP/IB classes</th>
                <th style="width: 100%;">{{tp1}}</th>
            </tr>
            <tr>
                <th> Extracurricular activities</th>
                <th style="width: 100%;">{{tp2}}</th>
            </tr>
            <caption style="color:black"><b> High school activities </b></caption>
        </table>
    </div>
</div>
</div>

        <i>Note that the expert <b>did not</b> know the information on High school activities</i>

<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="1">Math Skill</option>
        <option value="2">Social Skill</option>
        <option value="3">Combined Skill</option>
        <option value="4">AP/IB classes</option>
        <option value="5">Extracurricular activities</option>
        </select>
        </li>
    <li><label for="answerInput">Please type the candidate's information for the category you chose above</label>
        <input name="att8" type="text" size="12" id="answerInput" oninput="checkAnswer()"></li>
    </ul>

</p>

<p style="font-size:18px">
    <b>Please enter your belief.</b><br>
<table class="table1" id="table1">
  <tr>
    <th></th>
    <th>Math Skill</th>
    <th>Social Skill</th>
    <th>Combined Skill <br>(Math+Social)</th>
  </tr>
  <tr>
    <th>Prob High</th>
    <td> <input type="text" size="4" min="0" max="100" name="mh8" id="e1" oninput="testM('H'); checkM()" style="color:forestgreen; border-color:forestgreen" /></td>
    <td><input type="text" size="4" min="0" max="100" name="sh8" id="e4" oninput="testS('H'); checkS()" style="color:dodgerblue; border-color:dodgerblue"/></td>
    <td><input type="text" size="4" min="0" max="100" name="ch8" id="e7" oninput="testC('H'); checkC()" style="color:blueviolet; border-color:blueviolet"/></td>
  </tr>

  <tr>
    <th>Prob Low</th>
    <td><input type="text" size="4" min="0" max="100" id="e3" oninput="testM('L'); checkM()" style="color:forestgreen; border-color:forestgreen" /></td>
    <td><input type="text" size="4" min="0" max="100" id="e6" oninput="testS('L'); checkS()" style="color:dodgerblue; border-color:dodgerblue"/></td>
    <td><input type="text" size="4" min="0" max="100" id="e9" oninput="testC('L'); checkC()"  style="color:blueviolet; border-color:blueviolet"/></td>
  </tr>
</table>
<span id="errorM"></span> <span id="errorS"></span> <span id="errorC"></span>
</p>
<script>
function checkM1(field) {
    if (field.value < 0 || field.value > 100) {
        document.getElementById("errorM1").innerText = "Values should be between 0 and 100.";
        document.getElementById("errorM1").style.color = "red";
    } else{
        document.getElementById("errorM1").innerText = " ";
        document.getElementById("errorM1").style.color = "green";
    }
}

function checkM(){
    var t1 = document.getElementById("e1");
    var t3 = document.getElementById("e3");

    var minimumValue = Math.min(t1.value, t3.value);
    var maximumValue = Math.max(t1.value, t3.value);
    if (minimumValue < 0 || maximumValue >100){
    document.getElementById("errorM").innerText = "Values should be between 0 and 100 (Math Skill).";
     document.getElementById("errorM").style.color = "red";
    }
    else{
        document.getElementById("errorM").innerText = " ";
    }
}
function checkS(){
    var t1 = document.getElementById("e4");
    var t3 = document.getElementById("e6");

    var minimumValue = Math.min(t1.value, t3.value);
    var maximumValue = Math.max(t1.value, t3.value);
    if (minimumValue < 0 || maximumValue >100){
    document.getElementById("errorS").innerText = "Values should be between 0 and 100 (Social Skill).";
    document.getElementById("errorS").style.color = "red";
    }
    else{
        document.getElementById("errorS").innerText = " ";
    }
}
function checkC(){
    var t1 = document.getElementById("e7");
    var t3 = document.getElementById("e9");

    var minimumValue = Math.min(t1.value, t3.value);
    var maximumValue = Math.max(t1.value, t3.value);
    if (minimumValue < 0 || maximumValue >100){
    document.getElementById("errorC").innerText = "Values should be between 0 and 100 (Combined Skill).";
     document.getElementById("errorC").style.color = "red";
    }
    else{
        document.getElementById("errorC").innerText = " ";
    }
}

function testM(myfrom) {
   var t1 = document.getElementById("e1");
   var t3 = document.getElementById("e3");

   var v1 = Number(t1.value);
   var v3 = Number(t3.value);

   if(myfrom=="H") {
   t3.value = 100 - v1;
   } else if (myfrom=="L") {
    t1.value = 100 - v3
   }

<!--   if (t1.value !== "" && t2.value !== "") {-->
<!--      t3.value = 100- v1 - v2;-->
<!--   }-->
 }

function testS(myfrom) {
   var t1 = document.getElementById("e4");
   var t3 = document.getElementById("e6");

   var v1 = Number(t1.value);
   var v3 = Number(t3.value);

   if(myfrom=="H") {
   t3.value = 100 - v1;
   } else if (myfrom=="L") {
    t1.value = 100 - v3
   }
 }

function testC(myfrom) {
   var t1 = document.getElementById("e7");
   var t3 = document.getElementById("e9");

   var v1 = Number(t1.value);
   var v3 = Number(t3.value);

    if(myfrom=="H") {
   t3.value = 100 - v1;
   } else if (myfrom=="L") {
    t1.value = 100 - v3
   }
 }

function checkAnswer() {
      var answerInput = document.getElementById("answerInput").value.toLowerCase().replace(/\s/g, '');;
      var table1 = document.getElementById("table1");
      var criteria = document.getElementById("criteria").value

      var correctAnswer;
      if (criteria === '1'){
       correctAnswer = '{{num1}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '2'){
       correctAnswer = '{{num2}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '3'){
       correctAnswer = '{{num3}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '4'){
       correctAnswer = '{{tp1}}'.toLowerCase().replace(/\s/g, '');
      } else if (criteria === '5'){
       correctAnswer = '{{tp2}}'.toLowerCase().replace(/\s/g, '');
      }

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

</script>
{{ next_button }}
{{ endblock }}