{{ block style }}
    <style>
        td {
            text-align: center;
            vertical-align: middle;
            }
        tr {
        text-align: center;
        vertical-align: middle;
        }

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0736f0;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0736f0;
  cursor: pointer;
}
</style>


{{ endblock }}

{{ block title }}
Example
{{ endblock }}

{{ block content }}

<p>
    On this page, you can experiment with different numbers to better understand the potential earnings for each participant in a round.
    Click 'Randomize' to generate three random numbers, or input your desired numbers in the boxes to calculate the potential earnings.

</p>

  <div class="card bg-light m-3">
<div class="card-body">

    <div class="panel-body">



<br>
    <table class="table table-hover table-striped table-bordered">
        <tr style="font-size:18px;background-color:#A9A9A9; " >  <td><strong>Project's contributions</strong> </td> <td></td></tr>
        <tr>
            <td><strong>{{player.participant.rol}}  </strong> contributed with:</td>
            <td style="width: 200px" align="center">   <input type="number" name="case1" id="case1" min="0"  max="20" value='' oninput="updateDescription(this)"> </td>

        </tr>
	    <tr>
            <td><strong>Group Member 2</strong> contributed with:</td>
            <td style="width: 200px" align="center">  <input type="number" name="case2" id="case2" min="0"  max="20" value='' oninput="updateDescription(this)"</td>
        </tr>
        <tr>
            <td><strong>Group Member 1</strong> contributed with:</td>
            <td style="width: 200px" align="center">  <input type="number" name="case3" id="case3" min="0"  max="20" value='' oninput="updateDescription(this)"</td>
</tr>

        <tr>
    </tr>
    </table>
<center><button type="button" onclick="myFunction()">Randomize</button></center>
     <div class="card bg-light m-3">
<div class="card-body">

    <div class="panel-body">



<br>
    <table class="table table-hover table-striped table-bordered">
        <tr style="font-size:18px;background-color:#A9A9A9; " >  <td><strong>Project's earnings in this round</strong> </td> <td></td></tr>
        <tr>
        <td><strong>{{player.participant.rol}}  </strong> earnings:</td>
         <td>     <center><p id="description1"> -  </p></center></td>
        </tr>
        <tr>
        <td><strong>Group Member 2</strong> earnings:</td>
               <td>     <center><p id="description2"> -  </p></center></td>
        <tr>
            <td><strong>Group Member 1</strong> earnings:</td>
           <td>     <center><p id="description3"> -  </p></center></td>
</tr>

        <tr>
    </tr>
    </table>



</div>
</div>
        </div>

<center>
            {{ next_button }}
    <p id="demo"></p>
</center>
                 </div>





           </div>

{{ endblock }}

            {{block script}}

<script>

let description1 = document.getElementById('description1');
let description2 = document.getElementById('description2');
let description3 = document.getElementById('description3');
let case1 = document.getElementById('case1');
let case2 = document.getElementById('case2');
let case3 = document.getElementById('case3');



function updateDescription(input) {
if (parseInt(case1.value)>'20'){
    case1.value='20'
    }
if (parseInt(case2.value)>'20'){
    case2.value='20'
}
if (parseInt(case3.value)>'20'){
    case3.value='20'
}
if (parseInt(case1.value)<'0'){
    case1.value='0'
    }
if (parseInt(case2.value)<'0'){
    case2.value='0'
}
if (parseInt(case3.value)<'0'){
    case3.value='0'
}

    description1.innerText = 0.5*(parseInt(case1.value)+ parseInt(case2.value) + parseInt(case3.value))+(20-parseInt(case1.value));
    description2.innerText = 0.5*(parseInt(case1.value)+ parseInt(case2.value) + parseInt(case3.value))+(20-parseInt(case2.value));
    description3.innerText = 0.5*(parseInt(case1.value)+ parseInt(case2.value) + parseInt(case3.value))+(20-parseInt(case3.value));
}

function myFunction() {

   case1.value = Math.floor(Math.random() * 21);
   case2.value = Math.floor(Math.random() * 21);
   case3.value= Math.floor(Math.random() * 21);
   updateDescription()
}

</script>
{{endblock}}