{% extends "global/Page.html" %}
{% load otree %}

{% block styles %}

<style>

.bordered_medium {
    width: 100px;
    height: 38px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    padding: 5px;
}

</style>

{% endblock %}

{% block title %}

Additional Information

{% endblock %}

{% block content %}

<p align="justify">
In Part 1, you were presented with the following statement:
</p>

<p align="center">
<b> "{{ player.recorded_statement }}" </b>
</p>

<p align="justify">
When asked whether you agree or disagree with this statement, you indicated:
</p>

<center>
<div class="bordered_medium">
<center>

{% if player.answer_used == 1 %} Agree {% endif %}
{% if player.answer_used == 2 %} Disagree {% endif %}

</center>
</div>
</center>

<br />

<p align="justify">
<i> CHOICE-other </i> and <i> ESTIMATE-other </i> were presented with the exact same statement.
When asked whether they agree or disagree with this statement, <b> <u> both</u> </b> <i> CHOICE-other </i> and <i> ESTIMATE-other </i> indicated:
</p>

<center>
<div class="bordered_medium">
<center>

{% if player.answer_used == 1 and player.similarity == 1 %} Agree {% endif %}
{% if player.answer_used == 1 and player.similarity == 2 %} Disagree {% endif %}
{% if player.answer_used == 2 and player.similarity == 1 %} Disagree {% endif %}
{% if player.answer_used == 2 and player.similarity == 2 %} Agree {% endif %}

</center>
</div>
</center>

<br />

<p align="justify">
Now, consider the following pairs of circles:
</p>

<center>
<img src="{% static 'GMTA1/IOS_Scale.jpg' %}" width="600" height="150" />
</center>

<br />

<p align="justify">
Which of these pairs of circles best represents <b> how similar you feel </b> to <i> CHOICE-other </i> and <i> ESTIMATE-other</i>?
Note that your chosen pair of circles will be displayed at the top of the computer screen during Part 2.
</p>

<center>
<table class="w3-table">
    {% for field in form %}
    <tr>
        <td style="width: 50px; text-align: center"> A. </td>
        <td style="width: 50px; text-align: center"> B. </td>
        <td style="width: 50px; text-align: center"> C. </td>
        <td style="width: 50px; text-align: center"> D. </td>
        <td style="width: 50px; text-align: center"> E. </td>
        <td style="width: 50px; text-align: center"> F. </td>
        <td style="width: 50px; text-align: center"> G. </td>
    </tr>
    <tr>
        {% for choice in field %}
        <td style="text-align: center"> &emsp; &nbsp; {{ choice.tag }} </td>
        {% endfor %}
    </tr>
    {% endfor %}
</table>
</center>

<br />

<p align="justify">
<i> Press "Next" to start a practice period for Part 2. </i>
</p>

<br />

<center> {% next_button %} </center>

{% endblock %}