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

<script>
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider1.oninput = function() {
    output1.innerHTML = this.value;
}

var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider2.oninput = function() {
    output2.innerHTML = this.value;
}

</script>

{% block styles %}


<style>
        .button_help{
  background-color: whitesmoke;
  border: none;
  color: blue;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    border-radius: 8px;
}

button:hover {background-color: lightblue}



</style>

{% endblock %}

{% block title %}
Updated Belief
{% endblock %}

{% block content %}




Provide information about outcomes of candidates. Again, order might matter.
Do this on two slides (on one page) with possibility to go back? Or all on one page (one slide)?
<p>
Please use the slider below to indicate your belief about ranking in the top 50%.
</p>
    <table>
    <tr>
        <td align="center">    0%    </td>
        <td>

            <div class="input-group">
    <input type="range" name="belief_50_s" min="0" max="100" step="1" class="form-range" id="myRange1">


             </div>
 </td>
        <td align="center"> 100%   </td>
    </tr>
            <tr>
        <td>   </td>
        <td align="center">
            <span id="demo1" style="font-weight:bold;color:black"></span> % <br>



 </td>
        <td>  </td>
    </tr>

</table>

Please use the slider below to indicate your belief about being in group A.
</p>
    <table>
    <tr>
        <td align="center">    Certain to be in group B.    </td>
        <td>

            <div class="input-group">
    <input type="range" name="belief_A_s" min="0" max="100" step="1" class="form-range" id="myRange2">


             </div>
 </td>
        <td align="center"> Certain to be in group A.   </td>
    </tr>
            <tr>
        <td>   </td>
        <td align="center">
            <span id="demo2" style="font-weight:bold;color:black"></span> % <br>



 </td>
        <td>  </td>
    </tr>

</table>



    {% next_button %}

{% endblock %}