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

{% block title %}
Uitleg over dit onderzoek: een taak met {{ Constants.num_rounds }} rondes
{% endblock %}

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

Dit onderzoek bestaat uit {{ Constants.num_rounds }} rondes. U doet in elke ronde aan een taak mee. 
    In deze taak kunt u punten verdienen die geld waard zijn. In elke ronde kunt u maximaal 32 punten verdienen, en elk punt is 5 eurocent waard.<br><br>
    Alle punten die u in de {{ Constants.num_rounds }} rondes van de taak verdient, zullen bij elkaar worden opgeteld. U kunt echter niet alleen punten verdienen in de rondes. Net als in het echte leven, 
    zult u elke ronde ook vaste lasten moeten betalen, namelijk {{ Constants.fixed_costs }} per ronde. Deze vaste lasten worden
    automatisch afgetrokken van het aantal punten dat u verdiend heeft in een ronde, ook als u in die ronde minder dan {{ Constants.fixed_costs }} heeft verdiend. Als u aan het einde van de 10 rondes een positief 
    saldo heeft (oftewel, 
    in totaal meer dan 0 punten overhoudt), dan zullen deze punten in echt geld aan u worden uitbetaald. Mocht u echter een saldo van 0 punten of minder hebben aan het einde van de {{Constants.num_rounds }} rondes, 
    dan ontvangt u alleen de vooraf beloofde vergoeding van 3 euro.
    
    <br><br> De taak gaat als volgt in zijn werk: <br>Tijdens de taak zult u een scherm zien met 32 grijze balkjes. Een voorbeeld van zo'n balkje ziet u hieronder:
    <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 u dat bolletje <b>EXACT</b> op het cijfer zet dat boven het balkje vermeld staat. In het bovenstaande 
    voorbeeld moet u het bolletje dus precies op {{ player.number25 }} plaatsen.
    Dit kunt u doen door op het balkje te klikken met uw muis. U kunt meerdere malen op hetzelfde balkje klikken om zo het bolletje precies op het goede cijfer te zetten.
    Voor elk bolletje dat u EXACT op het goede cijfer zet, krijgt u 1 punt.
    <br><br>
    U heeft in totaal 60 seconden per ronde om zoveel mogelijk balkjes af te maken. Als u wilt, kunt u ook eerder stoppen met de taak door op een stop-knop te klikken. Deze stop-knop staat elke ronde 
    in de rechter bovenhoek boven de taak. Als u op de stop-knop drukt, kunt u echter geen extra punten meer verdienen in die ronde.
    <br>

<br>Klik nu op "Volgende" om naar de volgende pagina te gaan. Vervolgens kunt u met de eerste ronde beginnen.
<br>
<br>

{% next_button %}

{% endblock %}