{{ block title }}
<center>
    Section B1: Round {{ round }} out of {{ C.NUM_ROUNDS_PART_B }}
</center>
{{ endblock }}


{{ block style }}

<style>

    .not-visible{
        visibility: hidden;
    }

    table{
    width: 60%;
    margin: 0 auto;
    }

    .blue_box{
        width: 100px;
        height: 100px;
        background-color: blue;
        margin: 0 auto;
        color: white;
    }

    .red_box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 0 auto;
        color: white;
    }

    .slider_input {
        -webkit-appearance: none;
        margin-right: 15px;
        width: 100%;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 5px;
        background-image: linear-gradient(grey, gray);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .slider_input::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: grey;
        cursor: ew-resize;
        transition: background .3s ease-in-out;
    }

    .slider_input_thumb::-webkit-slider-thumb {
        border: 1px solid #FFFFFF;
        box-shadow: 0 0 0 1px #fff;
    }

    .slider_input::-webkit-slider-runnable-track  {
        -webkit-appearance: none;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    td{
        width: 50%;
        padding: 10px;
    }

    td button{
        width: 180px;
        height: 50px;
        margin: 0 auto;
        align-items: center;
    }

    .grow {
        padding: 5px 5px 5px 5px;
        border-radius: 10px;
        height: 35px;
        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: 1s;
        background-color: #fcf3cf;
    }


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

    .msg {
        display: none
    }

    .grow:hover .cover {
        display: none
    }

    .grow:hover .msg {
        display: inline
    }

</style>

{{ endblock }}


{{ block content }}

<br>
<p>Allocate points to the <font color="blue"><b>BLUE</b></font> or <font color="red"><b>RED</b></font> account. </p>

<p><b>Total budget</b>: {{ intercept_RED }} <br>
   <b>Price of  a <font color="blue">BLUE</font> point:</b> {{ intercept_RED }}/{{ intercept_BLUE }}
    {% if exact %}
    (equivalently {{ price }}).
    {% else %}
    (approximately {{ price }})
    {% endif %}
    <br>
    <b>Price of a <font color="red">RED</font> point:</b> 1
    <br>
    <i>That is, one point assigned
        to the <font color="blue">BLUE</font> account is exchanged for {{ intercept_RED }}/{{ intercept_BLUE }}
        {% if exact %}
    (equivalently {{ price }}).
    {% else %}
    (approximately {{ price }})
    {% endif %}  <font color="red">RED</font> points.
    </i><br><br>

    <b>Hypothetical payoff</b>: Once you commit 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 of 50%. Your payoff
    will be equal to the number of points allocated to the account that was selected.
</p>

<br>


<center>
      <table>
        <tr>
            <td>
                <div class="blue_box">
                    <center>
                        <h3>BLUE</h3>
                        <span id="calculatedVal">N/A</span>
                    </center>
                </div>
            </td>
            <td>
                <div class="red_box">
                    <center>
                        <h3>RED</h3>
                        <span id="field_val">N/A</span>
                    </center>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="range" min="0" max="100" value="50" class="slider_input"></td>
        </tr>
      </table>
</center>



<center>
<p>
    <script>
        var sliderMin = 0;
        var sliderMax = js_vars.intercept_2;
        var sliderValue = 0;
        var sliderStep = 0.01;
        var income = sliderMax;
        var price = js_vars.price;

        initSlider();



        let slider = document.querySelector('.slider_input');
        //on change of slider
        slider.addEventListener('change',function(){

            var slider = document.querySelector('.slider_input');
            var field_val = document.querySelector('#field_val');
            sliderValue = (1*slider.value).toFixed(2);
            field_val.innerHTML = sliderValue;
            var calculatedVal = document.querySelector('#calculatedVal');
            x = ((income - slider.value) / price);
            x = x.toFixed(2);
            calculatedVal.innerHTML = x;

            slider.oninput = function() {
              field_val.innerHTML = (1*this.value).toFixed(2);
              calculatedVal.innerHTML =  ((income - this.value) / price).toFixed(2);
              document.getElementById("msg").innerHTML = "";
              document.getElementById("nextbtn").style.visibility = "hidden";
            }

            //check slider has class
            if(!slider.classList.contains('slider_input_thumb')){
                slider.classList.add('slider_input_thumb');
                document.getElementById("nextbtn").style.visibility = "hidden";
            }
        });
        function initSlider() {
            let slider = document.querySelector('.slider_input');
            slider.min = sliderMin;
            slider.max = sliderMax;
            slider.value = sliderValue;
            slider.step = sliderStep;
        }


        function sendChoice() {
            liveSend({'value': slider.value});
            document.getElementById("msg").innerHTML = "You allocated " + ((income - (slider.value)) / price).toFixed(2)
                + " points to the BLUE account and " + (1 * slider.value).toFixed(2) + " to the RED.";
            document.getElementById("nextbtn").style.visibility = "visible"
        }

    </script>
</p>
    <p>
<button type = "button" onclick = "sendChoice()">Approve choice</button>
           </p>

<p id="msg"></p>
</center>


<br>

<div id = "nextbtn" class ="not-visible"><p>Press the <b>'Next'</b> button to commit to your choice and proceed to the next round.</p>
{{ next_button }}</div>

<br>

<div class="grow">
  <h5><i class="cover">Hover over with mouse to reveal instructions</i><text class="msg">Instructions</text></h5>

<br>

    <h6>Main task:</h6>

<p>
    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>
    is the number of points allocated to the <font color="blue"><b>BLUE</b></font> and <font color="red"><b>RED</b></font>
    accounts 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 prices.
</p>

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

<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>

    <h6>User interface:</h6>

<p>
    Allocate the points between the <font color="blue"><b>BLUE</b></font> and <font color="red"><b>RED</b></font>
    accounts by placing the slider along a bar representing all allocations that satisfy the budget constraint
    for given prices. You may place the slider anywhere along the bar by pointing with the mouse cursor
    and left-clicking or simply left-click 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>

    <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>


    <h6>Hypothetical payoffs:</h6>

<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>

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

<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>

</div>


{{ endblock }}