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

{% block title %}
Uitleg over de rondes
{% endblock %}

{% block content %}
<style>.otree-timer {
    display: none;
}</style>

Dit onderzoek bestaat uit {{ Constants.num_rounds }} rondes. Je krijgt in elke ronde de keuze om wel of niet aan een taak mee te doen. 
    Als je besluit om wel met de taak mee te doen, dan kun je daarmee punten verdienen die geld waard zijn. In elke ronde kun je maximaal 32 punten verdienen, en elk punt is 5 eurocent waard. Als je kiest om niet met de taak mee te doen, 
    dan ga je vanzelf verder naar de volgende ronde en verdien je geen punten.<br><br>
    Alle punten die je in de 10 rondes van de taak verdient, zullen bij elkaar worden opgeteld.  Als je aan het einde van de 10 rondes een positief saldo hebt (oftewel, in totaal meer dan 0 punten hebt verdiend), dan zullen deze punten 
    in echt geld aan je worden uitbetaald. Mocht je 0 punten of minder hebben verdiend in alle rondes bij elkaar, dan heb je geen geld verdiend in de taak. Je ontvangt dan alleen de vooraf beloofde vergoeding van 3 euro of 1 credit.
    <br><br>
    Net als in het echte leven, zul je elke ronde ook vaste lasten moeten betalen, namelijk {{ Constants.fixed_costs }} per ronde. Deze vaste lasten worden
    automatisch afgetrokken van de punten die je verdiend hebt in die ronde. Deze vaste lasten moet je altijd betalen, ook als je besluit om een ronde niet mee te doen aan de taak.
    <br><br> De taak gaat als volgt in zijn werk: <br>Tijdens de taak zul je een scherm zien met 32 grijze balkjes. Een voorbeeld van zo'n balkje zie je hieronder:<br>
    <br><p>
        <div class="slidercontainer">
            Zet het bolletje op {{ player.number25 }}:<br><br> &nbsp; <input name="tryout" type="range" min="0" max="100"  value="0" class="slider" id="myRange1">&nbsp; <span id="demo1"></span>
            <br><br>
            
            </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() {
            });
            
             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>

    </p>
    Deze balkjes lopen van 0 (= helemaal links) tot 100 (= helemaal rechts).
    Aan het begin van elk van de balkjes staat steeds een groen bolletje. Het is de bedoeling dat je dat bolletje <b>EXACT</b> op het cijfer zet dat boven het balkje vermeld staat. In het bovenstaande 
    voorbeeld moet je het bolletje dus precies op {{ player.number25 }} plaatsen.
    Dit kun je doen door op het balkje te klikken met je muis. je kunt meerdere malen op hetzelfde balkje klikken om zo het bolletje precies op het goede cijfer te zetten.
    Voor elk bolletje dat je EXACT op het goede cijfer zet, krijg je 1 punt.
    Je hebt in totaal 90 seconden per ronde om zoveel mogelijk balkjes af te maken.
    <br>

<br>Klik nu op "Volgende" om naar de volgende pagina te gaan. Vervolgens kun je met de eerste ronde beginnen en aangeven of je aan de taak mee wilt doen.
<br>
<br>

{% next_button %}

{% endblock %}