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

{% block title %}

Comprehension Questions

{% endblock %}

{% block content %}

<p align="justify">
<i> Please answer the following comprehension questions. </i>
</p>

<p align="justify">
Consider the following slider choice.
</p>

<center>

{% if player.reciprocity == "Positive" and player.colors_reversed == 0 %}
<img src="{% static 'RECI/POI_POS_BLUE_A.png' %}" width="300px"/>
{% endif %}

{% if player.reciprocity == "Positive" and player.colors_reversed == 1 %}
<img src="{% static 'RECI/POI_POS_RED_A.png' %}" width="300px"/>
{% endif %}

{% if player.reciprocity == "Negative" and player.colors_reversed == 0 %}
<img src="{% static 'RECI/POI_NEG_BLUE_A.png' %}" width="300px"/>
{% endif %}

{% if player.reciprocity == "Negative" and player.colors_reversed == 1 %}
<img src="{% static 'RECI/POI_NEG_RED_A.png' %}" width="300px"/>
{% endif %}

</center>

<br />

<b> Question 1 </b> {% if player.q1_error %} &#10060; {% endif %}
{% formfield player.q1 label="Which option has been chosen by your interaction partner?" %}

<p align="justify">
Consider the following slider choice.
</p>

<center>

{% if player.reciprocity == "Positive" and player.colors_reversed == 0 %}
<img src="{% static 'RECI/POI_POS_BLUE_B.png' %}" width="300px"/>
{% endif %}

{% if player.reciprocity == "Positive" and player.colors_reversed == 1 %}
<img src="{% static 'RECI/POI_POS_RED_B.png' %}" width="300px"/>
{% endif %}

{% if player.reciprocity == "Negative" and player.colors_reversed == 0 %}
<img src="{% static 'RECI/POI_NEG_BLUE_B.png' %}" width="300px"/>
{% endif %}

{% if player.reciprocity == "Negative" and player.colors_reversed == 1 %}
<img src="{% static 'RECI/POI_NEG_RED_B.png' %}" width="300px"/>
{% endif %}

</center>

<br />

<b> Question 2 </b> {% if player.q2_error %} &#10060; {% endif %}
{% formfield player.q2 label="How many sliders do you have to complete at the end of the experiment?" %}

<b> Question 3 </b> {% if player.q3_error %} &#10060; {% endif %}
{% formfield player.q3 label="How many sliders does your interaction partner have to complete at the end of the experiment?" %}

<br />

<button class="btn btn-primary btn-large" style="float: right"> Next </button>

{% endblock %}