{{ block title }}
    Candidate 8
{{ endblock }}
{{ block content }}

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

.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>Information</b> <br>
    The worker is from Group <b>{{g}}</b>.


<table class="table1">
  <tr>
    <th></th>
    <th>Math Skill</th>
    <th>Social Skill</th>
    <th>Combined Skill</th>
  </tr>
  <tr>
    <th>Prob High Type</th>
    <td>{{num1}}</td>
    <td>{{num2}}</td>
    <td>{{num3}}</td>
  </tr>

  <tr>
    <th>Prob Low Type</th>
    <td>{{num1_1}}</td>
    <td>{{num2_1}}</td>
    <td>{{num3_1}}</td>
  </tr>
 <caption style="color:black"><b>The experts' average beliefs for each skill for Group {{g}}.</b> </caption>
</table>
<span style="font-size:17px"><i>Note that the this is the <span style="color:IndianRed">probability of each type, not the revenue.</span> </i></span>

</p>

<p style="font-size:18px">
    <b>Attention Check</b><br>
    <ul>
    <li>
    <label for="answerInput1">What is the experts' belief that Group {{g}}'s <span style="color:forestgreen">Math Skill</span> is High Type?</label>
    <input type="text" size="12" id="answerInput1" oninput="checkAnswer()">
    </li>
    <li>
    <label for="answerInput2">What is the experts' belief that Group {{g}}'s  <span style="color:dodgerblue">Social Skill</span> is High Type?</label>
    <input type="text" size="12" id="answerInput2" oninput="checkAnswer()">
    </li>
    <li>
    <label for="answerInput3">What is the experts' belief that Group {{g}}'s  <span style="color:blueviolet">Combined Skill</span> is High Type?</label>
    <input type="text" size="12" id="answerInput3" 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="wtpM14" 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="wtpS14" 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="wtpC14" id="combwtp" style="color:blueviolet;" />
    </div>
</p>
<script>
 function checkAnswer() {
    var answerInput1 = document.getElementById("answerInput1").value.toLowerCase().replace(/\s/g, '');
    var answerInput2 = document.getElementById("answerInput2").value.toLowerCase().replace(/\s/g, '');
    var answerInput3 = document.getElementById("answerInput3").value.toLowerCase().replace(/\s/g, '');
    var table1 = document.getElementById("table1");

    var num1 = '{{num1}}';
    var num2 = '{{num2}}';
    var num3 = '{{num3}}';

    if (answerInput1 === num1 && answerInput2 === num2 && answerInput3 === num3) {
      mathContainer.style.display = "block";
    } else {
      mathContainer.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 }}