{% extends "global/Page.html" %}

{% block title %}Part {{ player.subsession.part_roman }} - Guessing Task{% endblock %}
{% block content %}
<hr>
&nbsp;
<p>What is the chance that the person you were matched with in the most recent round chose action 2? </p>
<p>Move the slider to choose a number from 0 to 100, where 0 indicates a 0-out-of-100 chance, and 100 is a 100-out-of-100 chance.</p>
<p>You will maximize your payment if you report your true belief.</p>

<div class="input-group">
    <input type="range"
           name="guess"
           id="guess_slider"
           min="0" max="100" step="1"
           value="0"
           class="form-range">
</div>

<p id="guess_choice"></p>

<button id="next_button" class="otree-btn-next btn btn-primary">Submit</button>

<input type="hidden" name="guess_slider_default" id="slider_default" />
&nbsp;

<script>

    // Message that the user will see based on their choice
    function messageToSender(v) {
        document.getElementById("guess_choice").innerHTML = "Your choice: " + v.toString() + " out of 100 chance.";
    }

    // Set the default value for the slider and the default message
    const slider = document.getElementById("guess_slider");
    slider.value = 0;

    // Hide next button until slider is moved
    document.getElementById("next_button").style.display = "none";

    // Behavior of the slider
    slider.oninput = function() {
        messageToSender(this.value)
        document.getElementById("next_button").style.display = "";
    }
</script>
{% endblock %}