{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block title %}
    Instruktionen Investitionsentscheidung
{% endblock %}
{% block content %}
<p>
In diesem Teil der Studie treffen Sie auf <b>4 Entscheidungssituationen</b>. Diese Entscheidungen haben nichts mit den vorherigen Entscheidungen zu tun.
	</p>
<p>
In jeder Entscheidungssituation starten Sie mit einem <b>sicheren Betrag von EUR 10</b> und entscheiden darüber <b>wie viel Sie davon in eine riskante Anlage investieren wollen</b>.
Sie entscheiden also, welchen Anteil des sicheren Betrages Sie behalten möchten und welchen Anteil Sie investieren möchten.
Die riskante Anlage kann sich <b>positiv (d.h. Sie bekommen mehr als Sie investiert haben)</b> oder <b>negativ (d.h. Sie bekommen weniger als Sie investiert haben)</b> entwickeln.
Die Wahrscheinlichkeit einer positiven Entwicklung der Anlage liegt bei <b>50%</b>.
</p>
<p>
Schauen Sie sich bitte die <b>Beispiel Entscheidungssituation</b> ganz unten auf dieser Seite an. Sie treffen Ihre Investitionsentscheidung, indem Sie den Regler verschieben. 
Diesen können Sie auch durch Klicks rechts oder Links des Schiebers neu positionieren. Sobald Sie unten auf dem Bildschirm auf "Weiter" klicken, kann Ihre Wahl nicht mehr angepasst werden.
Sie werden dann automatisch zur nächsten Entscheidungssituation geleitet, bis Sie alle Entscheidungen in diesem Teil der Studie getroffen haben.
</p>
<p>
Verschieben Sie nun den Regler in der unten abgebildeten Situation und achen Sie darauf, wie sich der sichere Betrag und die möglichen Auszahlungen aus der Anlage verändern.
<b>Wichtig: Die Auszahlung in dieser Situation berechnet sich aus dem nicht investierten, sicheren Betrag plus (+) dem Resultat aus Ihrer Investition</b>.
</p>
<p>
Beachten Sie, dass jede der 4 Entscheidungssituationen aus anderen Beträgen besteht. Es ist sinnvoll, erst den Regler etwas hin und her zu schieben
um ein Gespühr für die möglichen Auszahlungen zu bekommen.
</p>
<p>
Bitte bedenken Sie, dass dieses Spiel nicht dazu gedacht ist, Sie zu testen. Es gibt keine richtigen oder falschen Antworten. 
</p>
<p>
Eine Ihrer 4 Entscheidungen in diesem Teil der Studie wird zufällig ausgewählt werden und Sie erhalten den Betrag entsprechend Ihrer Auswahl ausbezahlt. Hierzu wird der
Computer zufällig bestimmen, ob sich der für Sie vorteilige oder nachteilige Fall realisiert.
</p>
<p>
Bitte beachten Sie, dass diese Entscheidung hier als Beispiel dient und nur die Entscheidungen, welche Sie auf den folgenden 4 Seiten tätigen werden für die Bezahlung berücksichtigt werden.
</p>
<p>
Das folgende Beispiel zeigt eine typische Entscheidungssituation wie sie auf Ihrem Bildschirm erscheinen wird:
</p>
<p>
</p>
<p>
</p>
<h6><b>Beispiel Entscheidungssituation</b></h6>
<p>
Bitte treffen Sie nun Ihre Entscheidung. Die riskante Anlage kann sich <b>positiv (d.h. Ihre Investition in die riskante Anlage*2.2)</b>
    oder <b>negativ (d.h. Ihre Investition in die riskante Anlage*0.95)</b> entwickeln.
    Die Wahrscheinlichkeit einer positiven Entwicklung Ihrer Anlage liegt bei <b>50%</b>.
</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 low_return = Math.round(((10-parseInt(input.value))+parseInt(input.value) * 0.95) * 100) / 100;
		let high_return = Math.round(((10-parseInt(input.value))+parseInt(input.value) * 2.2) * 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>
<button class="otree-btn-next btn btn-primary">Next</button>
{% endblock %}