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

{% block styles %}

<style>

ul li.extra {
    margin-bottom: 8px;
    margin-left: -8px;
}

.answer_box {
    border: 1px solid black;
    height: 150px;
    margin: auto;
    position: relative;
    width: 600px;
}

</style>

{% endblock %}

{% block title %}

Slider Choice

{% endblock %}

{% block content %}

<p align="justify">
Before you complete the decision situations, you have to <b> make a choice regarding the number of sliders both you and your

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

interaction partner have to complete </b> at the end of the experiment.
You have to choose between the following two options:
</p>

{% if player.reciprocity == "Positive" %}

<ul>

<li class="extra">
<b> <u> Option A:</u> </b> <b> You have to complete <u> 150 sliders</u> </b> and <b> your

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

interaction partner has to complete <u> 25 sliders</u> </b> at the end of the experiment.

</li>

<li class="extra">
<b> <u> Option B:</u> </b> <b> Both you and your

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

interaction partner have to complete <u> 100 sliders</u> </b> at the end of the experiment.

</li>

</ul>

{% endif %}

{% if player.reciprocity == "Negative" %}

<ul>

<li class="extra">
<b> <u> Option A:</u> </b> <b> You have to complete <u> 50 sliders</u> </b> and <b> your

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

interaction partner has to complete <u> 175 sliders</u> </b> at the end of the experiment.

</li>

<li class="extra">
<b> <u> Option B:</u> </b> <b> Both you and your

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

interaction partner have to complete <u> 100 sliders</u> </b> at the end of the experiment.

</li>

</ul>

{% endif %}

<p align="justify" style="border: 1px solid black; padding: 5px 10px 5px 10px">
<u> Important:</u> Your slider choice is <b> presented to your

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

interaction partner <u> before</u> he or she chooses between

{% if player.roles_reversed == 0 %} row UP and row DOWN. {% endif %}
{% if player.roles_reversed == 1 %} column LEFT and column RIGHT. {% endif %}

</b>
As a result, your slider choice may affect the

{% if player.roles_reversed == 0 %} row {% endif %}
{% if player.roles_reversed == 1 %} column {% endif %}

your

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

interaction partner chooses, and therefore also your earnings.
</p>

<br />

<!-- Answer -->

<div class="answer_box">

<p align="center" style="margin-top: 15px">
<b> Which option do you choose? </b> <br />
<i> Select the corresponding button and press "Next". </i>
</p>

<center>

{% formfield player.choice label="" %}

</center>

</div>

<!-- -->

<br />

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

{% endblock %}