{{block of scripts}}
<script>
    let slider = document.getElementById("slider");
    let selectValue = document.getElementById("select_value")

 

    selectValue.innerHTML = slider.value

 


    slider.oninput = function (){
        selectValue.innerHTML = slider.value

 


        liveSend({'t':'final','final_value': slider.value });
            this.blur();

 

        }

 


    $("button.otree-btn-next").on("click",function (){
            liveSend({'t':'final','final_value': slider.value });
            this.blur();

 

        });

 

</script>
{{endblock}}

 

{{block of styles}}
<style>
.text {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;

 

}
.title {
    font-size: xx-large;
    font-weight: bold;
    font-family: Serif;
}
.text_b {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;
}

 

.positioning{
    width: 30%;
    position: relative;
}
table, th, td {
  border: 1px solid black;
    text-align:center
}
.positioningava{
    position: absolute;
    top: 5%;
    left: 80%;
}
#slider{
        width: 70%;
        height: 70px;
        outline: none;
        border-radius: 3px;
}
#slider2{
        width: 70%;
        height: 70px;
        outline: none;
        border-radius: 3px;
}
</style>
{{endblock}}
{{ block content }}
<div class="title">
    Part 3
</div>
<br>
<div class="text_b">Course of the experiment </div>
<br>
<div class="text">In part 3 of the experiment you will interact with <b>the same opponent as in parts 1 and 2. The outcome of this part will be paid out in cash.</b> Please read the instructions carefully.</div>
<br>
<div class="text">
    We will give you an endowment of 100 tokens (1 token is equal to 1 pence, so 100 tokens are worth £1). You can decide how many tokens you want to invest in a contest for a prize of 200 tokens (equivalent to £2). The prize will be split proportionally to your investment and your opponent's investment. Your share of the prize is calculated as follows:
</div>
<br>
<img src="/static/vzorec.png">
<br>
<div class="text">The more you invest, the higher the share of the prize you will get. If both of you invest 0, you both receive 100 tokens. Let’s illustrate how the prize is calculated on a few examples:
</div>
<br>
<ul>
<li><div class="text">If both of you invest the same, you and your opponent will each receive 100 tokens.</div> </li>
<li><div class="text">If you invest 0 and your opponent invests any positive amount, you will receive nothing and your opponent will receive the whole prize.</div> </li>
<li><div class="text">If you invest one third of your opponent's investment, you will receive 50 tokens and your opponent will receive 150 tokens.</div> </li>
<li><div class="text">If you invest half of what your opponent invests, you will receive 67 tokens and your opponent 133 tokens.</div> </li>
</ul>
<br>
<div class="text">Your earnings equal to the number of tokens you did not invest and your prize:
</div>
<br>
<img src="/static/vzorec2.png">
<br>
<p> </p>
<p> </p>
<div class="text">How much do you want to invest? </div>
<br>
<div class="text" id="select_value">0</div>

 

<input type="range" min="0" max="100" value="0" id="slider">
<br>
 

 

{{ next_button }}

 

{{ endblock }}