{% block styles %}
<link href="{% static 'global/styles.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<h2><center>Sección {{if participant.app_order == 1 or participant.app_order == 3}}2 {{ else }} 3{{endif}} - Tarea 1</center></h2>
<br>

    <div class="instructions">
        <p>
En esta tarea, se le emparejará con otra persona. Nunca conocerá su identidad, ni usted la de la otra persona

        </p>
        <p>
En cada fila de la tabla, le pedimos que decida si prefiere la opción A o la opción B. Luego, si esta tarea 
 es seleccionada para el pago y se le asigna el papel del P1, sortearemos una fila al azar y pagaremos la 
decisión que haya tomado en esa fila. Por ejemplo, si en la fila 8 eligió A, recibirá 20 UME y P2 0 UME, 
mientras que, si eligió B, el computador lanzará un dado de diez caras. Si sale un número de 1 hasta 7, usted
 y P2 recibirán ambos 7; si sale un número de 8 hasta 10, usted recibirá 10 UME y P2 0 UME. P2 sólo conocerá 
  su pago y no sabrá si este es producto de la elección de usted en el rol de P1 o el resultado del lanzamiento del dado.
        </p>

        <p>
Si se le asigna el papel de P2, su pago estará determinado por la decisión de la persona en el rol de P1 emparejada 
con usted en la fila seleccionada al azar. Por supuesto, si el resultado depende del lanzamiento del dado, y usted 
es P2, sólo conocerá su pago y no sabrá si este es producto de la elección de la persona en el rol de P1 o el resultado del lanzamiento del dado.
        </p>
        <p>
            Supongamos que la  fila 1 del siguiente ejemplo fue  seleccionada aleatoriamente para el pago. Si P1 elige A, 
            P1 recibirá 20 UME y P2 recibirá 0 UME. Si P1 elige B y el número del dado de 10 caras esta entre 1 y 7, P1 y P2 recibirán 
            1 UME cada uno; si el número de la cara esta entre 8 y 10, P1 recibirá 10 UME y P2 recibirá 0 UME respectivamente. 
        </p>

    </div>

    <div class="div_table">

        <table class="table_selection">
            <tr>
                <td colspan="3" class="cell_header_table"><b>Opción A</b></td>
                <td colspan="5" class="cell_header_table"><b>Opción B</b></td>
            </tr>
            <tr>
                <td colspan="2" class="cell_subheader_table"><b>10/10</b></td>
                <td class="cell_subheader_table" colspan="2" rowspan="2"><b>Selección</b></td>
                <td colspan="2" class="cell_subheader_table"><b>7/10</b></td>
                <td colspan="2" class="cell_subheader_table"><b>3/10</b></td>
            </tr>
            <tr>
                <td class="cell_subheader_table"><b>Pago P1</b></td>
                <td class="cell_subheader_table"><b>Pago P2</b></td>
                
                <td class="cell_subheader_table"><b>Pago P1</b></td>
                <td class="cell_subheader_table"><b>Pago P2</b></td>
                <td class="cell_subheader_table"><b>Pago P1</b></td>
                <td class="cell_subheader_table"><b>Pago P2</b></td>
            </tr>
        
            <tr>
                <td class="cell_text_option">20</td>
                <td class="cell_text_option">0</td>
                <td class="cell_input_option_a"></td>
                <td class="cell_input_option_b"></td>
                <td class="cell_text_option">1</td>
                <td class="cell_text_option">1</td>
                <td class="cell_text_option">10</td>
                <td class="cell_text_option">0</td>
            </tr>
                
            <tr>
                <td class="cell_text_option">20</td>
                <td class="cell_text_option">0</td>
                <td class="cell_input_option_a"></td>
                <td class="cell_input_option_b"></td>
                <td class="cell_text_option">2</td>
                <td class="cell_text_option">2</td>
                <td class="cell_text_option">10</td>
                <td class="cell_text_option">0</td>
            </tr>
        </table>
        
        </div>

     {% next_button %}
{% endblock %}