{{ block title }}
ヒューリスティックス
{{ endblock }}
{{ block content }}

<p></p>
<p>国連加盟国に所属している国の中で、アフリカ大陸にある国家の占める割合は、いくつですか？予測してください。</p>
<p>	</p>
<p></p>

 

<p> </p>

{{ for eachfield in form }}
<div class="row align-items-center justify-content-center">
    <div class="col">
        <p class="text-end">
            あなたの予測%
            <br>
            <span id="selection_anchoring">&nbsp;</span>
        </p>
    </div>
    <div class="col-6">
        <input class="form-range" type="range" id="myslider" name = {{ eachfield.name }} min="1" max="100" value="0" style="width: 100%">
    </div>
</div>
{{ endfor }}
<p> </p>
<button class="otree-btn-next btn btn-primary" >次へ</button>

{{ endblock }}

{{block scripts}}
<script>
    function update_disp(){
        const el = document.getElementById("myslider");
        const maxval = parseFloat(el.max);
        const selection_anchoring = parseFloat(el.value)

        document.getElementById("selection_anchoring").innerText = selection_anchoring;
    }

    window.onload = function(){
        document.getElementById("myslider").addEventListener('input', update_disp);
    }
</script>
{{endblock}}