{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
Cuestionario.
{% endblock %}
{% 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;
        }
            .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }

    </style>
{% endblock %}

{% block content %}
<p align="justify"> Por favor responda las siguientes preguntas.</p>

<ol>
    <li><div class ="d-flex align-items-start wrap"></div>
        <p class ="inner" align="justify"> En sus palabras, cuéntenos cómo interpreta el mensaje <img  style="max-width:10%;" src="{% static "third_party_two/Frog.PNG" %}"/> que el participante A le mandó al participante C? </p>

        <div class="center">
            {%formfield player.q16 label=""%}
        </div>
    </li>
        <li><div class ="d-flex align-items-start wrap"></div>
        <p class ="inner" align="justify"> En sus palabras, cuéntenos cómo interpreta el siguiente mensaje: <img   style="max-width:10%;" src="{% static "third_party_two/Monkey.PNG" %}"/></p>

        <div class="center">
            {%formfield player.q17 label=""%}
        </div>
    </li>

    <li><div class="d-flex align-items-start wrap">

        <p class="inner" align="Left">Edad:   &nbsp;&nbsp;  </p>
        <div class="inner">
        {%formfield player.q1 label="" %}
        </div>
    </div>
    </li>
    <li><p align="justify">Género</p>
                {%formfield player.q2 label="" %}
    </li>
    <li>
        <div class="d-flex align-items-start wrap">

        <p class="inner"  align="justify">¿Cuántos hermanos tiene?  &nbsp;&nbsp;  </p>
            <div class="inner">
                {%formfield player.q3 label="" %}
            </div>
        </div>
    </li>
    <li><p align="justify">Carrera que cursa actualmente:</p>
                {%formfield player.q4 label="" %}
    </li>
    <li><p align="justify">Es estudiante de:</p>
                {%formfield player.q5 label="" %}
    </li>
    <li><div class="d-flex align-items-start wrap">
        <p  class="inner" align="justify">Semestre cursado actualmente:  &nbsp;&nbsp; </p>
        <div class="inner">
                {%formfield player.q6 label=""%}
        </div>
    </div>
    </li>

</ol>





<div class="text-center py-2">
{% next_button %}
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


{% endblock %}