{{ extends 'global/Page.html' }}
{{ block title }}<center><strong>Post-experiment Survey</strong></center>{{ endblock }}

{{ block content }}

<label class="col-form-label">
    On a scale from 0 to 10, with <strong>0</strong> being the <strong>least</strong> amount of information and <strong>10</strong> being the <strong>most</strong> amount of information, how much information do you think Buyers have about the overall accuracy of each Owner’s prediction (based on all rounds) before making their bidding decisions? 
</label>

<div style="display: flex">
    <input type="range" name="Mani_Chk2" min="0" max="10" style="flex: 1" class="persist" oninput="updateDescription(this)">
    <p id="description"></p>
    <!-- by leaving the description blank initially, we prompt the user to move the slider, reducing the anchoring/default effect. -->

    <script>
        let description = document.getElementById('description');
        function updateDescription(input) {
            let give = parseInt(input.value);
            description.innerText = `You selected ${give}.`
        }
    </script>      
</div>

<p>
    Least Amount<font color = "white">---------------------------------------------------------------------------------------------------------------------</font>Most Amount
</p>
{% next_button %}

{{ endblock }}