{{ block title }}
<center>
    Section B1: Instructions
</center>
{{ endblock }}


{{ block style }}
<style>







    .grow {
        padding: 5px 5px 5px 5px;
        border-radius: 10px;
        height: 30px;
        width: 100%;
        margin: 0px 1% 20px 0%;
        float: left;
        position: relative;
        transition: height 0.5s;
        -webkit-transition: height 0.5s;
        text-align: left;
        overflow: hidden;
        transition: 0.5s;
        background-color: #fcf3cf;
    }


    .grow:hover {
        height: 145px;
        width: 100%
    }

    .msg {
        display: none
    }

    .grow:hover .cover {
        display: none
    }

    .grow:hover .msg {
        display: inline
    }

    .grow2 {
        padding: 5px 5px 5px 5px;
        border-radius: 10px;
        height: 30px;
        width: 100%;
        margin: 0px 1% 20px 0%;
        float: left;
        position: relative;
        transition: height 0.5s;
        -webkit-transition: height 0.5s;
        text-align: left;
        overflow: hidden;
        transition: 0.5s;
        background-color: #fcf3cf;
    }

    .grow2:hover {
        height: 120px;
        width: 100%
    }

    .grow2:hover .cover {
        display: none
    }

    .grow2:hover .msg {
        display: inline
    }

</style>

{{ endblock }}

{{ block content }}

<br>
<p>
    In this section you will participate in <b>{{ C.NUM_ROUNDS_PART_B }} independent decision-making
    problems</b> that share a common form.
</p>


<h5>Main task:</h5>

<p>
    In each round you will be asked to allocate points between two accounts: <font color="blue"><b>BLUE</b></font>
    and <font color="red"><b>RED</b></font>. At the start of each round the computer will randomly select your
    budget and prices of points that can be allocated to the <font color="blue"><b>BLUE</b></font> and
    <font color="red"><b>RED</b></font> accounts. You will be allowed to allocate any number of points to the
    <font color="blue"><b>BLUE</b></font> and <font color="red"><b>RED</b></font> accounts as long as the total expenditure
    is equal to the budget. That is, the total cost of points allocated to both accounts, given the prices, must
    be equal to your budget. Equivalenty,
    it must be that<br><center>
    <i>
        BUDGET = P<sub><font color="blue"><b>BLUE</b></font></sub> &middot X<sub><font color="blue"><b>BLUE</b></font></sub>
    +  P<sub><font color="red"><b>RED</b></font></sub> &middot X<sub><font color="red"><b>RED</b></font></sub>
    </i>
    </center>
    <br>
where <i>X<sub><font color="blue"><b>BLUE</b></font></sub></i>, <i>X<sub><font color="red"><b>RED</b></font></sub></i>
denote the number of points allocated to the <font color="blue"><b>BLUE</b></font> and <font color="red"><b>RED</b></font>
accounts, respectively, and <i>P<sub><font color="blue"><b>BLUE</b></font></sub></i>, <i>P<sub><font color="red"><b>RED</b></font></sub></i>
are the corresponding prices. <u>The user interface will make all the necessary calculations for you.</u>
</p>



 <h5>Budget and prices:</h5>

</p>

     Your budget will always
    be positive and less than {{ C.TOKENS_MAX }}. The price of points assigned to the  <font color="blue"><b>BLUE</b></font> account will take values between 0.01 and
    100. The price of points assigned to the <font color="red"><b>RED</b></font> account will always be equal to 1. Therefore,
    the price of <font color="blue"><b>BLUE</b></font> points determines how many <font color="red"><b>RED</b></font>
    points can be exchanged for one <font color="blue"><b>BLUE</b></font> point.
</p>


<div  class="grow">
    <h6><i class="cover">Hover over with mouse to reveal an example</i><text class="msg">Example</text></h6>
  <p><i>Suppose the computer randomly selects your budget to be 60. The price of points assigned to the
      <font color="blue">BLUE</font> account is 3/2 and the price of the points assigned to the
      <font color="red">RED</font> account is 1. Therefore, allocating 0 points to the <font color="blue">BLUE</font>
      account and 60 points to the <font color="red">RED</font> exhausts the budget, since 60 =  3/2 &middot 0 + 1 &middot 60.
      Similarly, allocating 40 points to the <font color="blue">BLUE</font> account and 0 points to the
      <font color="red">RED</font> exhausts the budget as well, since 60 = 3/2 &middot 40 + 1 &middot 0. So does the
      allocation of 20 points to the <font color="blue">BLUE</font> account and 30 points to the
      <font color="red">RED</font>, and so on.</i></p>
</div>

<h5>Price as the exchange rate:</h5>

<p>
    Since the price of the points allocated to the <font color="red"><b>RED</b></font> account is always
    equal to 1, the price of <font color="blue"><b>BLUE</b></font> points determines how many points you can add to the
    <font color="red"><b>RED</b></font> account if you subtract one point from the <font color="blue"><b>BLUE</b></font>
    account.
</p>


<div class="grow2">
     <h6><i class="cover">Hover over with mouse to reveal an example</i><text class="msg">Example</text></h6>
  <p><i>
    Suppose that the price of points assigned to the <font color="blue">BLUE</font>  account is 3/2 and the price of
    the points assigned to the <font color="red">RED</font> account is 1. Then, subtracting 1 point from the
    <font color="blue">BLUE</font> account allows you to add 3/2 points to the <font color="red">RED</font> account.
    Similarly, subtracting 2 points from the <font color="blue">BLUE</font> account allows you to add 3 points to the
    <font color="red">RED</font> account, and so on.
</i></p>
</div>






<!-- <p>
    <b>Number of points:</b><br>
    Each decision problem will start by having the computer randomly select the <b>maximal number of points</b> you can
    assign to the <font color="blue"><b>BLUE</b></font> account and the <font color="red"><b>RED</b></font> account. The
    maximal number of points you can assign to each account will be positive and no greater than {{ C.TOKENS_MAX }}. Moreover, for
    one of the accounts the minimal number of points will always be greater than {{ token_half }}.
</p>


<p>
    <b>Points exchange rate:</b><br>
    The exchange rate will determine the trade-off between points assigned to the <font color="blue"><b>BLUE</b></font>
    account relatively to the points assigned to the <font color="red"><b>RED</b></font> account. The number will determine
    how many <font color="red"><b>RED</b></font> points can be exchanged for one <font color="blue"><b>BLUE</b></font> point.
    The exchange rate will always be determined by the ratio of the maximal number of <font color="red"><b>RED</b></font>
    points to the maximal number of <font color="blue"><b>BLUE</b></font> points.
    </p>


   <p>
    <u>Example</u>:<i> <br>
    Suppose that the maximal number of points you can assign to the <font color="blue">BLUE</font>
    account is 40 and the maximal number of points you can assign to the <font color="red">RED</font> account is 60. The
    exchange rate is therefore 60/40 = 3/2 (approximately 0.33). This implies that removing 1 point from the <font color="blue">BLUE</font>
    account increases the number of points allocated to the <font color="red">RED</font> account by 3/2. Equivalenlty,
    removing 2 points from the <font color="blue">BLUE</font> account increases the number of points allocated to the
    <font color="red">RED</font> account by 3, and so on. </i> <br>
</p>

-->



<br>

<p>
   Press <b>'Next'</b> to continue with the instructions to Section B1.
</p>


 {{ next_button }}


{{ endblock }}