{{ block scripts }}
    <!-- custom style sheet-->
    <link href="{{ static 'global/styles.css' }}" rel="stylesheet">
    
    <script src="{{ static 'global/js/functions.js' }}"></script>
{{ endblock }}

{{ block title }}
    Bienvenidos
{{ endblock }}

{{ block content }}

<style type="text/css">
  thead tr {
      position: sticky;
      top: 0;
      z-index: 10;
      background-color: whitesmoke;
  }
  .center {
  margin-left: auto;
  margin-right: auto;
}
</style>

  
  <br>
  <p align="justify">Para este estudio, se le pedirá que responda a un tipo especial de preguntas. Para cada tarea, se le pedirá que haga muchas elecciones 
      similares, como en la tabla siguiente. En cada fila se le pedirá que elija entre una opción A y una opción B. </p>
  <p align="justify" >Se seleccionará una fila para el pago y se le pagará según su decisión. Asegúrese de responder cuidadosamente a cualquier pregunta para 
      que se le pague lo que realmente prefiere.</p>
  

  <p align="justify"> Observe que la opción A es siempre la misma mientras que la opción B cambia. Observe también que la opción B es mejor en cada fila </b></p> 

<div class = "table_div">
  <table class = "table_selection">
    <thead>
    <tr>
      <td colspan="1">A</td>
      <td colspan="2"> Selección</td>
      <td colspan = "1">B</td>
    </tr>
    </thead>
   <tbody>
      {{ for row in vals_table }}
    <tr>
      <td class="cell_text_option">${{row.vals.0}}</td>
      <td class="cell_input_option_a"><input type = "radio" class = "radio_input" value = "1" name = "{{row.name}}" id = "{{row.vals.0}}_a"></td>
      <td class="cell_input_option_b"><input type = "radio" class = "radio_input" value = "2" name = "{{ row.name}}" id = "{{row.vals.1}}_b"></td>
      <td class="cell_text_option">${{row.vals.1}}</td>
    </tr>
      {{ endfor }}
    </tbody>
  </table>
</div>
   <br><br>

  <p> En este caso la elección es sencilla, si prefiere más dinero a menos, seleccione A hasta que la opción B sea menor de 10.000, 
    seleccione B cuando B sea mayor que 10.000. </p>

  <p>  Esto es lo que le aconsejamos para contestar de manera rápida y fiel a sus preferencias:</p>

    <ul>
      <li>Fíjese en la decisión de la fila superior, por la que preferirá A o B. Si prefiere B, seleccione esta opción. El programa seleccionará automáticamente B en todas las filas por debajo</li>
      <li>Si no prefiere B en la primera fila, identifique la fila a partir de las cuales empieza a preferir B. Seleccione la opción B en esa fila. El programa seleccionará automáticamente B en todas las filas por debajo y A en todas las filas superiores a esa. </li>
      <li>Si siempre prefiere A, seleccione A en correspondencia de la última fila. El programa seleccionará automáticamente A en todas las filas por arriba</li>
      <li>Esto significa que sus respuestas cruzarán de izquierda a derecha como máximo una vez.</li>
    </ul>
    El experimento comenzará con tres preguntas de práctica para familiarizarse con la interfaz. Recuerda que estas preguntas no serán
     seleccionadas para el pago. 
   
    Una vez que haya completado las preguntas de comprensión, pasará a las tareas principales de la actividad, empezando por la sección 1.
    <br>
  {% next_button %} 

{% endblock %}