{% extends "global/Page.html" %}
{% load otree static %}

{% block content %}

	<p>
		In this part you form a team with the teammate you selected.
	</p>
	
	
	<p>
		Each teammate has €{{ Constants.endowment }} available.
		Your task is to decide how to use the €{{ Constants.endowment }}.
		You have to decide how much of the €{{ Constants.endowment }} you want to pay into a project and how much you want to keep for yourself. 
		
		Each euro which is contributed to the project is multiplied by 1.2 and paid out to both teammates (also to teammates who have kept all their money for themselves).
		Hence, the team benefits most when both teammates contribute all their money to the project. 
		However, each individual teammate maximizes his/her individual income if only the other teammate contributes to the project.

	</p>
	
	<p> Your <b>total income</b> therefore consists of two parts:</p>
	<ul>
		<li>the income from the <b>project</b> and</li>
		<li>the amount you have <b>retained</b>.</li>
	</ul>
	<br>
	
	<p>
		<div id="box">
			<b>Income from the project</b> = <div class="frac"> <span>sum of all contributions to the project x 1.2</span><span class="symbol">/</span><span class="bottom">2 teammates</span>
		</div>
		</div>

	<p>
		<div id="box">
			<b>Total income</b> = Income from the project + Amount you have retained <br>			
		</div>
	</p>	
	
	
		<br>

	<br>
	<p>
		Examples:
		<ul>
			<li> Example 1: If the sum of all contributions to the project is €4, then you and your teammate each earn (€4 x 1.2)/2 = €2.4 out of the project.</li>
			<li> Example 2: If the sum of all contributions to the project is €0, then you and your teammate each earn (€0 x 1.2)/2 = €0.</li>
		</ul>
	</p>

{% endblock %}

{% block scripts %}
    <style>
                             .frac {
                                           display: inline-block;
                                           position: relative;
                                           vertical-align: middle;
                                           letter-spacing: 0.001em;
                                           text-align: center;
                             }
              
                             .frac > span {
                                           display: block;
                                           padding: 0.1em;
                             }
                             
                             .frac span.bottom {
                                           border-top: thin solid black;
                             }
                             
                             .frac span.symbol {
                                           display: none;
                             }


        #box {
            border-style: solid;
            border-color: black;
            border-width: 1px;
            padding: 20px;
        }

    </style>
{% endblock %}