{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
   Situación

{% endblock title %}


{% block styles %}
<style>
        .form-group {
            margin-bottom: 1rem !important;
            margin-top: 1rem !important;
        }

        .wrap {
            display: flex;
        }

        .inner {
            align-self: center;
        }

        p {
            margin-top: 1rem !important;
        }
    </style>
{% endblock %}

{% block content %}

<p align="justify">
<img src="{% static "programador2.png" %}" width="200" height="200" align="right"> Suponga que usted está ayudando a la oficina de oportunidades laborales de la universidad. De los siguientes perfiles organice en orden de preferencia a los candidatos que usted considera que están mejor capacitados para una pasantía como analista en una firma consultora. <b>Se busca un perfil con conocimientos técnicos estadísticos y de programación</b>. Su decisión es un criterio muy importante para recomendar a estos candidatos.</p>
<p> Toda la información recogida es anónima. </p>

<table>
    <tr>
        <td> <p align="center"> <b>Categorías</b></p> <img height="45%" src="{% static "columna.png" %}"/></td>
        <td> <p align="center"> <b>Tarjeta A</b> </p> <img height="45%" src="{% static carda5 %}"/> </td>
        <td> <p align="center"> <b>Tarjeta B</b> </p> <img height="45%" src="{% static carda6 %}"/> </td>
        <td> <p align="center"> <b>Tarjeta C</b> </p> <img height="45%" src="{% static carda7 %}"/> </td>
        <td> <p align="center"> <b>Tarjeta D</b> </p> <img height="45%" src="{% static carda8 %}"/> </td>
    </tr>
</table>

<br>
<p align="justify"> Con la información presentada, defina el orden que le daría a los perfiles:</p>
<p align="justify"> Para ello decida el puesto que le otorga a cada tarjeta.
<ol type="A">
    <li><div class="d-flex align-items-center wrap">
        <p class="inner" align="justify"> <b> Tarjeta A </b>:  </p>
        <div class="inner"
             {% formfield player.S1G2TA label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="center"> <b> Tarjeta B </b>: </p>
        <div class="inner"
             {% formfield player.S1G2TB label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="center"> <b> Tarjeta C </b>: </p>
        <div class="inner"
             {% formfield player.S1G2TC label="" %}
    </div>
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p class="inner" align="center"> <b>Tarjeta D </b>: </p>
        <div class="inner"
             {% formfield player.S1G2TD label="" %}
    </div>
    </li>
</ol>

<br>
<p align="center" {% next_button %} </p>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
{% endblock %}