{% 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 1 - 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 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 <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>, <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 %}