{% extends "global/Page.html" %}	
{% load staticfiles otree %}
{% block title %}
    Investitionsentscheidung
{% endblock %}
{% block content %}
<p>
Bitte treffen Sie nun Ihre Entscheidung. Die riskante Anlage kann sich <b>positiv (d.h. Ihre Investition in die riskante Anlage*{{return}})</b>
    oder <b>negativ (d.h. Ihre Investition in die riskante Anlage*{{return2}})</b> entwickeln.
    Die Wahrscheinlichkeit einer positiven Entwicklung Ihrer Anlage liegt bei <b>50%</b>.
</p>
<p>
	<style>

		.input-group-text {
			padding: 10px;
		}
	</style>
	
	

	<table id="dec1" border="0">
		<tr>
			<td style="vertical-align:top"><span class="input-group-text" id="slidermin">0</span></td>
			<td width="90%">
				<input type="range" name="give" min="0" max="10" value="{{ slider_initial }}" style="width:100%" oninput="updateDescription(this)">
				<p id="description"></p>
			</td>
			<td style="vertical-align:top"><span class="input-group-text" id="slidermax">10</span></td>
		</tr>
	</table>
<!-- by leaving the description blank initially, we prompt the user to move the slider,
reducing the anchoring/default effect. -->

 <!-- <script> -->
    <!-- $(document).ready(function() { -->
        <!-- document.getElementsByName('give')[0].value = Math.round(20*Math.random()); -->
    <!-- } -->
<!-- </script> -->
<script>
      let description = document.getElementById('description');
    function updateDescription(input) {
		let give = parseInt(input.value);
		let return2 = js_vars.return2;
		let return1 = js_vars.return;
		let low_return = Math.round(((10-parseInt(input.value))+parseInt(input.value) * return2) * 100) / 100;
		let high_return = Math.round(((10-parseInt(input.value))+parseInt(input.value) * return1) * 100) / 100;
        description.innerHTML = `Ich investiere EUR ${give}.` + "<br>" + `Dies ergibt insgesamt im schlechtesten Fall ${low_return} (in 50 Prozent der Fälle)` + "<br>" + `Dies ergibt insgesamt bestenfalls ${high_return} (in 50 Prozent der Fälle).`;
    }
</script>

Können Sie den Betrag, den sie investieren möchten bestätigen:

{% formfield 'investment' %}

<button class="otree-btn-next btn btn-primary">Next</button>
{% endblock %}