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

{% block styles %}

<style>

.blue {
    color: blue;
    font-weight: bold;
}

.red {
    color: red;
    font-weight: bold;
}

</style>

{% endblock %}

{% block title %}

General Instructions

{% endblock %}

{% block content %}

<p align="justify">
In the experiment, you <b> interact with another participant</b>.
All participants have been randomly assigned a color.
You have been assigned the color

{% if player.colors_reversed == 0 %} <span class="red"> red</span>. {% endif %}
{% if player.colors_reversed == 1 %} <span class="blue"> blue</span>. {% endif %}

Your interaction partner has been assigned the color

{% if player.colors_reversed == 0 %} <span class="blue"> blue</span>. {% endif %}
{% if player.colors_reversed == 1 %} <span class="red"> red</span>. {% endif %}

<p>

<p align="justify" style="border: 1px solid black; padding: 5px 10px 5px 10px">
<u> Important:</u> You and your

{% if player.colors_reversed == 0 %} blue {% endif %}
{% if player.colors_reversed == 1 %} red {% endif %}

interaction partner <b> remain <u> anonymous</u> </b> both throughout and after the experiment.
</p>

<p align="justify">
<i> Press "Next" to continue. </i>
</p>

<br />

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

{% endblock %}