{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

{% endblock %}

{% block content %}
<b><P STYLE="font-size: 18pt;">Ronde {{player.round_number}}</P></b>

Zet de bolletjes <b>EXACT</b> op het juiste getal:
<br>
<br>
Als u voortijdig met de taak wilt stoppen, klik dan op de knop rechstboven.<br>
<button name="task_stopped" value="True" style="position:fixed; top:0px; right:0px;">
  <b>Ik wil nu stoppen met de taak</b>
</button>
<br>
  <br>

<div class="slidercontainer">
1. Zet het bolletje op {{ player.number1 }}: &nbsp; <input name="s1" type="range" min="0" max="100"  value="0" class="slider" id="myRange1">&nbsp; <span id="demo1"></span>
<br><br>
2. Zet het bolletje op {{ player.number2 }}: &nbsp; <input name="s2" type="range" min="0" max="100"  value="0" class="slider" id="myRange2">&nbsp; <span id="demo2"></span>
<br><br>
3. Zet het bolletje op {{ player.number3 }}: &nbsp; <input name="s3" type="range" min="0" max="100"  value="0" class="slider" id="myRange3">&nbsp; <span id="demo3"></span>
<br><br>
4. Zet het bolletje op {{ player.number4 }}: &nbsp; <input name="s4" type="range" min="0" max="100"  value="0" class="slider" id="myRange4">&nbsp; <span id="demo4"></span>
<br><br>
5. Zet het bolletje op {{ player.number5 }}: &nbsp; <input name="s5" type="range" min="0" max="100"  value="0" class="slider" id="myRange5">&nbsp; <span id="demo5"></span>
<br><br>
6. Zet het bolletje op {{ player.number6 }}: &nbsp; <input name="s6" type="range" min="0" max="100"  value="0" class="slider" id="myRange6">&nbsp; <span id="demo6"></span>
<br><br>
7. Zet het bolletje op {{ player.number7 }}: &nbsp; <input name="s7" type="range" min="0" max="100"  value="0" class="slider" id="myRange7">&nbsp; <span id="demo7"></span>
<br><br>
8. Zet het bolletje op {{ player.number8 }}: &nbsp; <input name="s8" type="range" min="0" max="100"  value="0" class="slider" id="myRange8">&nbsp; <span id="demo8"></span>
<br><br>
9. Zet het bolletje op {{ player.number9 }}: &nbsp; <input name="s9" type="range" min="0" max="100"  value="0" class="slider" id="myRange9">&nbsp; <span id="demo9"></span>
<br><br>
10. Zet het bolletje op {{ player.number10 }}: &nbsp; <input name="s10" type="range" min="0" max="100"  value="0" class="slider" id="myRange10">&nbsp; <span id="demo10"></span>
<br><br>
11. Zet het bolletje op {{ player.number11 }}: &nbsp; <input name="s11" type="range" min="0" max="100"  value="0" class="slider" id="myRange11">&nbsp; <span id="demo11"></span>
<br><br>
12. Zet het bolletje op {{ player.number12 }}: &nbsp; <input name="s12" type="range" min="0" max="100"  value="0" class="slider" id="myRange12">&nbsp; <span id="demo12"></span>
<br><br>
13. Zet het bolletje op {{ player.number13 }}: &nbsp; <input name="s13" type="range" min="0" max="100"  value="0" class="slider" id="myRange13">&nbsp; <span id="demo13"></span>
<br><br>
14. Zet het bolletje op {{ player.number14 }}: &nbsp; <input name="s14" type="range" min="0" max="100"  value="0" class="slider" id="myRange14">&nbsp; <span id="demo14"></span>
<br><br>
15. Zet het bolletje op {{ player.number15 }}: &nbsp; <input name="s15" type="range" min="0" max="100"  value="0" class="slider" id="myRange15">&nbsp; <span id="demo15"></span>
<br><br>
16. Zet het bolletje op {{ player.number16 }}: &nbsp;<input name="s16" type="range" min="0" max="100"  value="0" class="slider" id="myRange16">&nbsp; <span id="demo16"></span>
<br><br>
17. Zet het bolletje op {{ player.number17 }}: &nbsp; <input name="s17" type="range" min="0" max="100"  value="0" class="slider" id="myRange17">&nbsp; <span id="demo17"></span>
<br><br>
18. Zet het bolletje op {{ player.number18 }}: &nbsp; <input name="s18" type="range" min="0" max="100"  value="0" class="slider" id="myRange18">&nbsp; <span id="demo18"></span>
<br><br>
19. Zet het bolletje op {{ player.number19 }}: &nbsp; <input name="s19" type="range" min="0" max="100"  value="0" class="slider" id="myRange19">&nbsp; <span id="demo19"></span>
<br><br>
20. Zet het bolletje op {{ player.number20 }}: &nbsp; <input name="s20" type="range" min="0" max="100"  value="0" class="slider" id="myRange20">&nbsp; <span id="demo20"></span>
<br><br>
21. Zet het bolletje op {{ player.number21 }}: &nbsp; <input name="s21" type="range" min="0" max="100"  value="0" class="slider" id="myRange21">&nbsp; <span id="demo21"></span>
<br><br>
22. Zet het bolletje op {{ player.number22 }}: &nbsp; <input name="s22" type="range" min="0" max="100"  value="0" class="slider" id="myRange22">&nbsp; <span id="demo22"></span>
<br><br>
23. Zet het bolletje op {{ player.number23 }}: &nbsp; <input name="s23" type="range" min="0" max="100"  value="0" class="slider" id="myRange23">&nbsp; <span id="demo23"></span>
<br><br>
24. Zet het bolletje op {{ player.number24 }}: &nbsp; <input name="s24" type="range" min="0" max="100"  value="0" class="slider" id="myRange24">&nbsp; <span id="demo24"></span>
<br><br>
25. Zet het bolletje op {{ player.number25 }}: &nbsp; <input name="s25" type="range" min="0" max="100"  value="0" class="slider" id="myRange25">&nbsp; <span id="demo25"></span>
<br><br>
26. Zet het bolletje op {{ player.number26 }}: &nbsp; <input name="s26" type="range" min="0" max="100"  value="0" class="slider" id="myRange26">&nbsp; <span id="demo26"></span>
<br><br>
27. Zet het bolletje op {{ player.number27 }}: &nbsp; <input name="s27" type="range" min="0" max="100"  value="0" class="slider" id="myRange27">&nbsp; <span id="demo27"></span>
<br><br>
28. Zet het bolletje op {{ player.number28 }}: &nbsp; <input name="s28" type="range" min="0" max="100"  value="0" class="slider" id="myRange28">&nbsp; <span id="demo28"></span>
<br><br>
29. Zet het bolletje op {{ player.number29 }}: &nbsp; <input name="s29" type="range" min="0" max="100"  value="0" class="slider" id="myRange29">&nbsp; <span id="demo29"></span>
<br><br>
30. Zet het bolletje op {{ player.number30 }}: &nbsp; <input name="s30" type="range" min="0" max="100"  value="0" class="slider" id="myRange30">&nbsp; <span id="demo30"></span>
<br><br>
31. Zet het bolletje op {{ player.number31 }}: &nbsp; <input name="s31" type="range" min="0" max="100"  value="0" class="slider" id="myRange31">&nbsp; <span id="demo31"></span>
<br><br>
32. Zet het bolletje op {{ player.number32 }}: &nbsp; <input name="s32" type="range" min="0" max="100"  value="0" class="slider" id="myRange32">&nbsp; <span id="demo32"></span>

</div>
 <style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 85%;
  height: 10px;
  border-radius: 3px;
  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: 15px;
  height: 15px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

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

<script>

    $(document).ready(function() {
      $('.otree-btn-next').hide().delay(0).fadeIn(200);
});

 var slider1 = document.getElementById("myRange1");
 var slider2 = document.getElementById("myRange2");
 var slider3 = document.getElementById("myRange3");
 var slider4 = document.getElementById("myRange4");
 var slider5 = document.getElementById("myRange5");
 var slider6 = document.getElementById("myRange6");
 var slider7 = document.getElementById("myRange7");
 var slider8 = document.getElementById("myRange8");
 var slider9 = document.getElementById("myRange9");
 var slider10 = document.getElementById("myRange10");
 var slider11 = document.getElementById("myRange11");
 var slider12 = document.getElementById("myRange12");
 var slider13 = document.getElementById("myRange13");
 var slider14 = document.getElementById("myRange14");
 var slider15 = document.getElementById("myRange15");
 var slider16 = document.getElementById("myRange16");
 var slider17 = document.getElementById("myRange17");
 var slider18 = document.getElementById("myRange18");
 var slider19 = document.getElementById("myRange19");
 var slider20 = document.getElementById("myRange20");
 var slider21 = document.getElementById("myRange21");
 var slider22 = document.getElementById("myRange22");
 var slider23 = document.getElementById("myRange23");
 var slider24 = document.getElementById("myRange24");
 var slider25 = document.getElementById("myRange25");
 var slider26 = document.getElementById("myRange26");
 var slider27 = document.getElementById("myRange27");
 var slider28 = document.getElementById("myRange28");
 var slider29 = document.getElementById("myRange29");
 var slider30 = document.getElementById("myRange30");
 var slider31 = document.getElementById("myRange31");
 var slider32 = document.getElementById("myRange32");

 var output1 = document.getElementById("demo1");
 var output2 = document.getElementById("demo2");
 var output3 = document.getElementById("demo3");
 var output4 = document.getElementById("demo4");
 var output5 = document.getElementById("demo5");
 var output6 = document.getElementById("demo6");
 var output7 = document.getElementById("demo7");
 var output8 = document.getElementById("demo8");
 var output9 = document.getElementById("demo9");
 var output10 = document.getElementById("demo10");
 var output11 = document.getElementById("demo11");
 var output12 = document.getElementById("demo12");
 var output13 = document.getElementById("demo13");
 var output14 = document.getElementById("demo14");
 var output15 = document.getElementById("demo15");
 var output16 = document.getElementById("demo16");
 var output17 = document.getElementById("demo17");
 var output18 = document.getElementById("demo18");
 var output19 = document.getElementById("demo19");
 var output20 = document.getElementById("demo20");
 var output21 = document.getElementById("demo21");
 var output22 = document.getElementById("demo22");
 var output23 = document.getElementById("demo23");
 var output24 = document.getElementById("demo24");
 var output25 = document.getElementById("demo25");
 var output26 = document.getElementById("demo26");
 var output27 = document.getElementById("demo27");
 var output28 = document.getElementById("demo28");
 var output29 = document.getElementById("demo29");
 var output30 = document.getElementById("demo30");
 var output31 = document.getElementById("demo31");
 var output32 = document.getElementById("demo32");

 slider1.onchange = function() {
 output1.innerHTML = this.value;}
 slider2.onchange = function() {
 output2.innerHTML = this.value;}
 slider3.onchange = function() {
 output3.innerHTML = this.value;}
 slider4.onchange = function() {
 output4.innerHTML = this.value;}
 slider5.onchange = function() {
 output5.innerHTML = this.value;}
 slider6.onchange = function() {
 output6.innerHTML = this.value;}
 slider7.onchange = function() {
 output7.innerHTML = this.value;}
 slider8.onchange = function() {
 output8.innerHTML = this.value;}
 slider9.onchange = function() {
 output9.innerHTML = this.value;}
 slider10.onchange = function() {
 output10.innerHTML = this.value;}
 slider11.onchange = function() {
 output11.innerHTML = this.value;}
 slider12.onchange = function() {
 output12.innerHTML = this.value;}
 slider13.onchange = function() {
 output13.innerHTML = this.value;}
 slider14.onchange = function() {
 output14.innerHTML = this.value;}
 slider15.onchange = function() {
 output15.innerHTML = this.value;}
 slider16.onchange = function() {
 output16.innerHTML = this.value;}
slider17.onchange = function() {
 output17.innerHTML = this.value;}
 slider18.onchange = function() {
 output18.innerHTML = this.value;}
 slider19.onchange = function() {
 output19.innerHTML = this.value;}
 slider20.onchange = function() {
 output20.innerHTML = this.value;}
 slider21.onchange = function() {
 output21.innerHTML = this.value;}
 slider22.onchange = function() {
 output22.innerHTML = this.value;}
 slider23.onchange = function() {
 output23.innerHTML = this.value;}
 slider24.onchange = function() {
 output24.innerHTML = this.value;}
 slider25.onchange = function() {
 output25.innerHTML = this.value;}
 slider26.onchange = function() {
 output26.innerHTML = this.value;}
 slider27.onchange = function() {
 output27.innerHTML = this.value;}
 slider28.onchange = function() {
 output28.innerHTML = this.value;}
 slider29.onchange = function() {
 output29.innerHTML = this.value;}
 slider30.onchange = function() {
 output30.innerHTML = this.value;}
 slider31.onchange = function() {
 output31.innerHTML = this.value;}
 slider32.onchange = function() {
 output32.innerHTML = this.value;}


</script>

<style>
  .otree-timer {
    position: fixed;
    top: 0;
    left: center;
    width: 800px;
    border: 3px solid #73AD21;
    }
</style>




{% endblock %}