{% 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 4 - 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 4</span>. <b>The charity is the payoff recipient of Option A</b> 
                and <b>you of Option B</b>. The outcome of the charity is uncertain and depends on the 
                proportion of green and red balls displayed at the top of the table. Your outcomes are certain.
            <ul>
              <li>In <span class="bold">Option A</span>, the <b>charity</b> receives 
                <span class="bold">£{{player.x1_norm_after_correction|floatformat:2}}</span> with some <span class="bold">probability</span> 
                and <span class="bold">zero otherwise</span> (you receive nothing either way). The probability to receive 
                £{{player.x1_norm_after_correction|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>, <b>you</b> receive a <span class="bold">certain amount</span> 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>

</div>

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

{% endblock %}