{{block of scripts}}
<script>
    let slider2 = document.getElementById("slider2")
    let selectValue2 = document.getElementById("select_value2")

 

    selectValue2.innerHTML = slider2.value

 

    slider2.oninput = function (){
        selectValue2.innerHTML = slider2.value

 


        liveSend({'t':'final2','final_value2': slider2.value });
            this.blur();

 

        }

 


    $("button.otree-btn-next").on("click",function (){
            liveSend({'t':'final2', 'final_value2': slider2.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">We would like to ask you not only about your investment, but also about what <b>investment you expect from your opponent</b>. You can earn a bonus of £0.5 if your prediction differs from the actual amount your opponent invests by 10 or fewer tokens. If your prediction is off by more than 10 tokens, you will receive no bonus.</div>
<br>
<div class="text">How much do you think your opponent will invest? </div>
<div class="text" id="select_value2">0</div>

 

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

 

 

{{ next_button }}

 

{{ endblock }}