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

{% block title %}
Instructions (1/2)
{% endblock %}

{% block styles %}
<style>
.content {
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    text-align: left;
}
.page-header {
    margin: 20px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-weight: normal;
    padding-top: 1%;
}


</style>
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-8">
      <p>The study is separated into 6 parts of 50 rounds each.</p>

      <p>In each round, you are randomly matched with another participant, who we call your <b><font color="red">opponent</font></b>.</p>

      <p>In each round, both you and your opponent will be asked to choose
            between <b><font color="red">two options</font></b>:</p>
            <p></p>
            <center>
            "Option A" or "Option B"
            </center>
            <p></p>
            <p>Here is how to earn points:</p>
        <ul>
        <li>If you choose Option A, the number of points you receive does not depend on whether
          your opponent chooses Option A or B. The amount of points you receive for choosing Option A can be different in different rounds and will be displayed on your screen.</li>
        <li>If you choose Option B, the number of points you receive depends on your
          opponent’s decision: if your opponent chooses Option A, you will receive {{Constants.downside}} points; if your
          opponent also chooses Option B you will receive {{Constants.upside}} points. </li>
          </ul>
          Importantly, your opponent is reading these same exact instructions. This means that:
          <ul>

        <li>If your opponent chooses Option A, his/her payoff does not depend on your decision and the
          number of points he/she earns are those given by Option A. </li>
          <li>If your opponent chooses
          Option B, the number of points he/she receives depends on your decision: if you choose Option A,
           your opponent will receive {{Constants.downside}} points; if you also choose Option B, your opponent will receive {{Constants.upside}} points.</li>
        </ul>

        <center>
          {% next_button %}

      </div>
  </div>

{% endblock %}