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


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

{% block title %}
<center>
  PART 4 - INSTRUCTIONS 
</center>
{% endblock %}

{% block content %}

<div class="consigne_dotation">

  <div class="content-section">
    <p>In this part, you will be asked to make <span class="bold">3 binary decisions</span> 
      displayed in a table format. For each of the 3 tables, you will be presented with one
       of two situations shown below. The situation will be drawn randomly. In each situation,
        there are <span class="bold">2 options</span>. Note that each option gives <b>you</b> the 
        <b>same outcome</b> in both situations but gives <span class="bold">different outcomes </span>for 
          the <b>charity</b>. You will be asked to select the option you prefer the most.</p>
    
    <p>For the <span class="bold">first decision</span>, the <b>charity’s outcome information 
      is hidden</b> and thus you won’t know in which situation you will be. You can <b>
        freely choose</b>
       to reveal that information or keep it hidden before making your decision.</p>
    
    <p>For the <span class="bold">second and third decision</span>, you will 
      <span class="bold">know in which situation you are</span> before making 
      your decision.</p>
    
      <div id="tableau-placeholder"><img src="{% static 'EXLEY_DANA/danna_situation.png' %}" height=100% width=100% /></div>
    <br>
    <div class="content-section">
      <p><u>Outcome selection note:</u> Please note that these <b>3 tables</b> are <b>taken into 
        account in the random selection of decisions</b> at the
         end of the experiment.</p>
    </div>
  </div>
  

</div>

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

{% endblock %}