{{ block title }} Questionnaire {{ endblock }}
{{ block content }}
{{ load otree static }}



<p> Please take a moment to answer the questions below. </p>

<p> Your experimental earnings <b><u><span style="font-size: 125%; ">do not</span></u></b>
    depend on your answers to these questions.</p>

<br>

<p>Which of the following best describes your race?</p>

{{ form.race }}

<br><br>

<p>Which of the following best describes your ethnicity?</p>

{{ form.ethnicity }}

<br><br>

<p>Which of the following best describes your gender identity?</p>

{{ form.gender }}

<br><hr><br>

{% if randomIDNumbers == 1 and hideOwnAvatar == 0 %}

    <p>Please rate your agreement with the following statement:
        <br>
        <b><span style="font-size: 150%; "> I felt like my number represented me.</span></b>
    </p>
    {{ form.representedByAvatar }}

{% endif %}

{% if randomIDNumbers == 0 and photograph == 0 and hideOwnAvatar == 0 %}

    <p>Please rate your agreement with the following statement:
        <br>
        <b><span style="font-size: 150%; "> I felt like my avatar represented me.</span></b>
    </p>
    {{ form.representedByAvatar }}

{% endif %}

{% if photograph == 1 %}

<p>Please rate your agreement with the following statements about your group members.</p>
<p>Your group members <b><u><span style="font-size: 125%; ">will not</span></u></b> see your responses to these questions.</p>

<div style="
align-items: center;
justify-content: left;
display: flex;">

    {{ for p in other_players }}
        <img src={{ p.imgtag_Player }} width="25%"  style="border:0px solid black; padding:5px"/>
    {{ endfor }}

</div>

<div style="
align-items: center;
justify-content: left;
display: flex;"
>

    <p style="padding:25px; text-align: left"><font size="+2">Group Member 1</font></p>
    <p style="padding:30px; text-align: center"><font size="+2">Group Member 2</font></p>
    <p style="padding:30px; text-align: left"><font size="+2">Group Member 3</font></p>



</div>

    <p>

        <b><span style="font-size: 150%; "> I knew Group Member 1 well before today's experiment.</span></b>
        {{ form.knowGroupMember1 }}
        <br>

        <b><span style="font-size: 150%; "> I knew Group Member 2 well before today's experiment.</span></b>
        {{ form.knowGroupMember2 }}
        <br>

        <b><span style="font-size: 150%; "> I knew Group Member 3 well before today's experiment.</span></b>
        {{ form.knowGroupMember3 }}
        <br>
    </p>

{% endif %}

{% if hideOwnAvatar == 1 %}
{% endif %}

<br><br>

{{ next_button }}

{{ endblock }}