{{ block title }}
    Question 4
{{ 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;
}
</style>

<p style="font-size:18px">
    <ul>
    <li>There are three jars: <span style="color:forestgreen">Green Jar</span>,
        <span style="color:dodgerblue">Blue Jar</span>,
        <span style="color:blueviolet">Purple Jar</span>.
    </li>
    <ul>
    <li><span style="color:forestgreen">Green Jar</span> has {{num1}} black balls and {{num1_1}} white balls.</li>
    <li><span style="color:dodgerblue">Blue Jar</span> has {{num2}} black balls and {{num2_1}} white balls </li>
    <li><span style="color:blueviolet">Purple Jar</span> has {{num3}} black balls and {{num3_1}} white balls.</li>
    </ul>
    </ul>
</p>

<p style="font-size:18px">
    <b>Attention Check</b><br>
    <ul>
    <li>
    <label for="answerInput1">How many black balls in the <span style="color:forestgreen">Green Jar</span>?</label>
    <input type="text" size="12" id="answerInput1" oninput="checkAnswer()">
    </li>
    <li>
    <label for="answerInput2">How many black balls in the <span style="color:dodgerblue">Blue Jar</span>?</label>
    <input type="text" size="12" id="answerInput2" oninput="checkAnswer()">
    </li>
    <li>
    <label for="answerInput3">How many black balls in the <span style="color:blueviolet">Purple Jar</span>?</label>
    <input type="text" size="12" id="answerInput3" 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>Green Jar</th>
    <th>Blue Jar</th>
    <th>Purple Jar</th>
  </tr>
  <tr>
    <th>Prob Black Ball</th>
    <td> <input type="text" size="4" min="0" max="100" name="mh4" id="e1" oninput="testM('H'); checkM()" style="color:forestgreen; border-color:forestgreen" /></td>
    <td><input type="text" size="4" min="0" max="100" name="sh4" id="e4" oninput="testS('H'); checkS()" style="color:dodgerblue; border-color:dodgerblue"/></td>
    <td><input type="text" size="4" min="0" max="100" name="ch4" id="e7" oninput="testC('H'); checkC()" style="color:blueviolet; border-color:blueviolet"/></td>
  </tr>

  <tr>
    <th>Prob White Ball</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 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) {
      table1.style.display = "table";
    } else {
      table1.style.display = "none";
    }
  }
</script>
{{ next_button }}
{{ endblock }}