{{ block title }}
<center>
    Section B1: Instructions (continued)
</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: 120px;
        width: 100%
    }

    .msg {
        display: none
    }

    .grow:hover .cover {
        display: none
    }

    .grow:hover .msg {
        display: inline
    }

</style>

{{ endblock }}


{{ block content }}

<br>

<h5>User interface:</h5>

<p>
    Allocating the points between the <font color="blue"><b>BLUE</b></font> and <font color="red"><b>RED</b></font>
    accounts will involve placing a slider along a bar representing all allocations that satisfy the budget constraint
    for given prices. In each round you may place the slider anywhere along the bar by pointing with the mouse cursor
    and left-clicking, or simply left-clicking and dragging the slider. You may also adjust your choice using the arrow keys on your keyboard. Once your choice is
    made, press the <b>'Approve choice'</b> button.
</p>

<center> <img src="{{ static gif }}" width="852" height="327" /></center>
<br>

<!--
gif size 1278 by 49
-->

<p>You may adjust and approve your choices as many times as you wish. To commit to your choice press the <b>'Next'</b> button.
</p>

<h5>Hypothetical payoffs:</h5>

<p>
    After approving and committing to your choice the computer will randomly select one of the accounts
    (<font color="blue"><b>BLUE</b></font>  or <font color="red"><b>RED</b></font>) with equal probability.
    Your hypothetical payoff in that round will be equal to the number of points assigned to the account randomly
    selected by the computer. <u>You will not be informed about your payoffs until the end of the experiment</u>.
</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 that you allocated 23 points to the <font color="blue">BLUE</font> account and 37 points to the
    <font color="red">RED</font> account. After committing to your choice, the computer randomly selects between the
    <font color="blue">BLUE</font> and <font color="red">RED</font> account with equal probability.
    Suppose that the computer selected the <font color="blue">BLUE</font> account. As a result, your payoff for this
    round is equal to 23 points.
</i></p>
</div>

<h5>Actual earnings from Part B:</h5>

<p>
    At the end of Part B the computer will randomly select one round from this part (either from Section B1 or B2) with
    equal probability. Your actual earnings from Part B will be equal to the hypothetical payoff from the selected round.
</p>

<p><center><b>THE TASKS IN PART B ARE DESIGNED SO THAT IT IS IN YOUR BEST INTEREST <br> TO STATE YOUR <u>TRUE PREFERENCE</u> IN
    EACH ROUND.</b></p></center>

<br>

<p>
    Press <b>'Next'</b> to proceed to the first task.
</p>


 {{ next_button }}

{{ endblock }}