{{ extends 'global/Page.html' }}
{{ block title }}Giving and Keeping Choices{{ endblock }}

{{ block content }}

<p style="text-align: right;">Question {{player.round_number}} out of 30</p>
<p>
    Move the slider to decide how much to give
</p>
<p>
    Every token you give up means the charity gets {{ratio}} tokens.
</p>

<input type="range" id="myRange" name="keep" max="max" oninput="updateDescription(this)">
<p id="description"></p>

{{next_button}}

{{ endblock }}

{{ block scripts }}
<script>
	document.getElementById("myRange").setAttribute("max", js_vars.endowment);
	let description = document.getElementById('description');
    function updateDescription(input) {
        let give = parseInt(input.value);
        let keep = (js_vars.endowment - give) * (1 / js_vars.ratio);
      	let ratio = js_vars.ratio;
        let max = js_vars.endowment;
        description.innerText = `Keep ${keep} tokens for yourself and give ${give} tokens to charity.`
    }
</script>
{{ endblock }}