{{ extends "global/Page.html" }}
{{ block title }}Part 1: Box opening task{{ endblock }}

{{ block content }}

<p>
    Round {{ player.round_number }}
</p>
<p>
    On each round of the task, you will be presented with {{ boxes }} boxes that each have different values. The values range from 0 to {{ C.HIVALUE }} with increments of 0.1. Any value in that range is equally likely. See below for an example of four boxes with different values.
</p>

<div id="boxrow_instr1"></div>
<br><br><br>

<p>
    Initially you do not know the values of the boxes. Your task consists of going through the boxes one by one.
    You maximise your bonus payments by finding the most valuable box on each round.
</p>

{{ if fullinfo }}
{{ else }}
    <p>
        The example below shows how the first three boxes are ranked using the values from the four boxes above. Here the box #4 is not yet opened. The numbers are ranks: 1 = the most valuable box and 3 = (so far) the least valuable box.
    </p>

    <div id="boxrow_instr2"></div>
    <br><br><br>

    <p>
        If you then open the fourth box, their ranks will be updated as follows:
    </p>

    <div id="boxrow_instr3"></div>
    <br><br><br>
{{ endif }}

<p>
    You move through the boxes by swiping them left and right. If you think that you should <b>reject</b> the current box and continue to the next one, <b>swipe left</b>. If you are satisfied with the current box, you <b>accept</b> it by <b>swiping right</b>. The box that you accept determines your points for that round. If you reach the end without accepting any of the boxes, then the last box determines your points.
</p>

{{ if recommendation }}
<h3>
    Algorithmic recommendation
</h3>
<p>
    Each box now shows a <b>recommendation by an algorithm</b>. This is determined by the computer automatically and it is based on dynamically calculating the optimal strategy. The recommendation determines whether accepting the current box is more valuable than the expected value of rejecting it and continuing to the next one.</p>
<p>Importantly, the algorithm does not know the true values of the unopened boxes. It does not necessarily give you the box that has the highest value of all boxes in a round. You are free to decide by yourself whether or not you wish to follow its recommendation.
</p>

<p>
    <a href="javascript:void(0)" onclick="details()">Click here to show more info</a>
</p>

<div id="details">
    <p>Here's details on how the algorithmic recommendation is calculated. The method is based on research published in 1962 by Samuel Karlin at Stanford University, titled "Stochastic models and optimal policy for selling an asset". The algorithm loops over boxes in reverse and at each step calculates a conditional density (expected cost-to-go) and uses this to update the threshold value for each step. In Python programming language the algorithm is written as follows:</p>

    <pre><code>
    N = 20
    V = [0] * (N+1)
    V[N] = 0

    for i in range(N-1, -1, -1):
        cumul_prob = V[i+1] / 30
        cond_density = (30*30 - (V[i+1])*(V[i+1])) / (2*30)
        V[i] = cond_density + V[i+1] * cumul_prob
    </code></pre>
    
    <p>As a result, the thresholds are given in a reverse order for each box. The App compares each box value to the respective threshold value to give the recommendation.
    </p>
</div> 

{{ endif }}

<br>

<h3>
    Rounds and points
</h3>
<p>
    There are {{ rounds }} rounds and you will face the same decision task on each round. The box values are randomly generated on each new round. Your bonus payments will be determined as stated below. 
    {{ if recommendation }}
        The following {{ C.PRACTICEROUNDS }} rounds are again practice rounds
    {{ else }}
        The first {{ C.PRACTICEROUNDS }} rounds are practice rounds 
    {{ endif }}
        and points from these rounds do not count towards your final reward.
</p>

{{ if discount }}
<p>
    Determination of points: the value of each box is discounted by {{ discountpercent|to0 }}%. This means that instead of the "future value" of the box you receive its discounted present value. For example, if you choose box #3 and it has value 15, you will receive discounted points 1/(1+0.1)<sup>3</sup> × 15 = 11.3. The computer will do this calculation for you, but you should know that the more boxes you swipe left, the more discounting there will be. During the practice rounds you can see how discounting affects your points.
</p>
{{ endif }}

<p>
    Determination of bonus payments: At the end of the study, the computer will randomly choose two rounds and the points from these rounds will determine your bonus payments. 
    {{ if discount }}
        Practice rounds are not used for bonus payments.
    {{ else }}
        One round will be randomly chosen from the first half of the rounds and another from the second half, excluding the practice rounds. 
    {{ endif }}
    Your points from these rounds will be summed and divided by 10 to determine your bonus. If, for example, you earn 26.7 and 23.6 points from these rounds, your bonus payments will be £5.03.
</p>

{{ if practiceround }}
    <p>
        The next round is a practice round.
    </p>
{{ endif }}

{{ if realround }}
    <p>
        The next round is not a practice round anymore.    
    </p>
{{ endif }}

<br><br>
<center>
    <button class="otree-btn-next btn btn-primary">
        Start
    </button>
</center>
<br><br><br>


{{ endblock }}

{{ block scripts }}
<script>
const element = document.getElementById("boxrow_instr1"); // attach to the div that displays the opened boxes in a row
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

let vals = [3.2, 12.3, 29.2, 14.7];
for (let i = 0; i < 4; i++) {
    const para = document.createElement("span");
    para.className = "valuebox";
    var node;
    node = document.createTextNode(vals[i].toFixed(1));
    para.appendChild(node);
    element.appendChild(para);
}

const element2 = document.getElementById("boxrow_instr2"); // attach to the div that displays the opened boxes in a row
while (element2.firstChild) {
    element2.removeChild(element2.firstChild);
}

let ranks = [3,2,1];
for (let i = 0; i < 4; i++) {
    const para2 = document.createElement("span");
    para2.className = "box";
    var node;
    node = document.createTextNode(ranks[i]);
  	if (i==3) {
		node = document.createTextNode('?');
    }
    para2.appendChild(node);
    element2.appendChild(para2);
}

const element3 = document.getElementById("boxrow_instr3"); // attach to the div that displays the opened boxes in a row
while (element3.firstChild) {
    element3.removeChild(element3.firstChild);
}

let ranks2 = [4,3,1,2];
for (let i = 0; i < 4; i++) {
    const para3 = document.createElement("span");
    para3.className = "box";
    var node;
    node = document.createTextNode(ranks2[i]);
    para3.appendChild(node);
    element3.appendChild(para3);
}

function details() {
	var x = document.getElementById("details");
    x.style.display = "block";
} 
</script>
{{ endblock }}