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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'EXLEY_ASSO/EXLEY_ASSO_STYLE.css' %}" rel="stylesheet">
{% endblock %}



{% block title %}
<center>
    <h2 class="underline">New sub-part: CASE 1 training</h2>
</center>
{% endblock %}

{% block content %}

<div class="cadre_new_step" style="border : 4px solid black; font-size:15px">

    <div class="welcome_new_step" style="font-size:20px; font-weight:normal; text-align:justify;">

            
            <p>You will now train on one table of <span class="bold">Case 1</span>. <span class="bold">You are the 
                sole payoff recipient of Option A and B</span>.
            </p>
            <ul>
              <li>In <span class="bold">Option A</span>, <b>you</b> receive <b>£{{player.x1_me|floatformat:2}}</b> with some 
                <b>probability</b> and <b>zero otherwise</b> (the charity receives nothing either way). 
                The probability to receive £10,00 is displayed as the proportion of green balls in 
                the urn above the table (you can reveal the urn's composition by placing the cursor over the mask).</li>
              
                <li>In <span class="bold">Option B</span>, <b>you</b> receive a <b>certain amount</b> of 
                    money <b>with certainty</b> (the charity receives nothing), the amount increases gradually 
                    <b>from £0,00 to £{{player.x1_me|floatformat:2}}</b> along the rows.</li>
            </ul>
            <p>For each row, please select the corresponding button of the option you prefer the most. 
                Most people start by choosing Option A, then switch to Option B at some point. One way 
                to complete the table is to determine the <span class="bold">line from which you start 
                    to prefer Option B more than Option A</span>. Please fill in the table accordingly.</p>
            
          
       
    </div>

</div>

<center>
                    
    <button class="blue-button">NEXT</button>
    
</center>

{% endblock %}