{{ block title }}Your probability (before advisor){{ endblock }}
{{ block content }}

<div class="card m-3">
    <div class="card-body text-center">
        <h4>What is the probability that the majority color is <span style="color: #c00;">Red</span>?</h4>
        <div class="mb-2">
            <input type="range" name="initial_confidence" id="id_initial_confidence" min="0" max="100" value="50" class="form-range" style="max-width: 300px;">
            <span id="initial_confidence_value">50</span>%
        </div>
        <div id="initial_likely_label" class="mb-3 text-muted" style="min-height: 1.5em;">50% chance Red</div>
        {{ formfield_errors 'initial_confidence' }}
    </div>
</div>

<script>
    (function() {
        var slider = document.getElementById('id_initial_confidence');
        var valueSpan = document.getElementById('initial_confidence_value');
        var label = document.getElementById('initial_likely_label');

        function update() {
            var v = parseInt(slider.value, 10);
            valueSpan.textContent = v;
            label.textContent = v + '% chance Red';
        }
        slider.oninput = update;
        update();
    })();
</script>

{{ next_button }}

{{ endblock }}