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

{% block title %}
Instructions (2/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>Below is an example screen from the study:</p>
      <p></p><br>

        <div class="row content">
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option A</b></div>
          <div class="col-5" style="text-align:center; margin-bottom: 0.7rem;"><b>Option B</b></div>
        </div>
        <div class="row content">
          <div class="col-4" style="text-align:center;">
                <div><b>53</b></div>
          </div>
       <!-- <div class="col-1" style="max-width: 120px;"></div> -->
        <div class="col-5" style="text-align:center;">
            <div><b>{{Constants.downside}}</b> if opponent chooses A</div>
            <div><b>{{Constants.upside}}</b> if opponent chooses B</div>
        </div>
        </div>
<p></p><br>

<p>In this example, Option A is on the LEFT side of the screen and Option B is on the RIGHT.</p>

<p>In each round, you will choose one of the two options by pressing either the "A" key on your 
  keyboard for the LEFT option or the  "L" key on your keyboard for the RIGHT option. On some rounds, Option A will be on the LEFT,
and in other rounds it will be on the RIGHT. </p>


   <p>In the example above:</p>
     <ul>
       <li>Since Option A pays 53 points, the rule says your opponent chooses Option B.</li>
       <li>Therefore, if you choose Option A, you get 53 points.</li>
       <li>If, instead, you choose Option B, you get 63 points.</li>
       <!--
       <li>Therefore, if you choose Option A, you get 53 points and your opponent gets 47 points.</li>
       <li>If, instead, you choose Option B, both you and your opponent get 63 points.</li>
       -->
</ul>
         <center>
           {% next_button %}

       </div>
   </div>

{% endblock %}