{{ block title }}
SVO game: item {{ subsession.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}
{{ block content }}

<p>
    Choose a distribution between yourself
    and the other player by moving the slider.
</p>

<div class="input-group">
    <input type="range" name="choice" min="0" max="8" class="form-range" oninput="sliderMoved(this)">
</div>

<button class="btn btn-primary" style="display: none" id="next-button">Next</button>

<p>
    Please answer consciously. The Next button will appear after 5 seconds.
</p>

<script>
    setTimeout(function() {
    document.getElementById('next-button').style.display = 'block';
    }, 5 * 1000);
</script>

{{ include C.CHART_TEMPLATE }}

<script>
    function sliderMoved(input) {
        let idx = parseInt(input.value);

        let row = js_vars.rows[idx];
        let to_self = row.to_self;
        let to_other = row.to_other;
        redrawChart(to_self, to_other);
    }
</script>



{{ endblock }}