{% 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 3 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 3</span>.  <b>You are the payoff recipient 
                of Option A</b> and <b>the charity of Option B</b>. Your outcome is uncertain and depends on the proportion of 
                green and red balls displayed at the top of the table. The charity's outcomes are certain. 

            </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>, the <b>charity</b> receives a <b>certain amount</b> of 
                    money <b>with certainty</b> (you receive nothing), the amount increases gradually 
                    <b>from £0,00 to £{{player.x1_norm_after_correction|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 %}