{{ block title }}
Runde {{subsession.round_number}} von {{ C.NUM_ROUNDS }}
{{ endblock }}
{{ block content }}
<style>
/* Red border */
hr.new1 {
  border: 3px solid black;
}
</style>
<br>
<p>Bitte entscheiden Sie mithilfe des Reglers, wie Sie den Betrag zwischen sich selbst und der anderen Person aufteilen.</p>
<br>
<div class="input-group">
    <input type="range" name="choice" min="0" max="8" class="form-range" oninput="sliderMoved(this)">
</div>
<br>
<br>

{{ include_sibling 'chart.html' }}

<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>
<hr class="new1">
<br>
<p>Wenn Sie eine Entscheidung getroffen haben, klicken Sie bitte auf “Weiter”.</p>
<br>
{{ next_button }}
{{ endblock }}