{% 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>
CASE 3 - REAL PAYOFF
</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">
        <div class="content-section">
           
            <p>You will now go through <span class="bold">7 tables of 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
            <ul>
              <li>In <span class="bold">Option A</span>, <b>you</b> receive <span class="bold">£{{player.x1_me|floatformat:2}}</span> 
                with some <span class="bold">probability</span> 
                and <span class="bold">zero otherwise</span> (the charity receives nothing either way). The probability to receive £{{player.x1_me|floatformat:2}}
                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 <span class="bold">certain amount</span> 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>

</div>

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

{% endblock %}