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

{% block title %}
    Practice
{% endblock %}

{% block content %}
The distribution of returns for this stage has been set. Using the chart and slider below, you can see the the probability, conditional on your having drawn
    any particular return between -0.5 and 1.5, of the other player drawing a higher or lower return. When you are ready choose Next.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Conditional on your receiving return x (chosen using the sliding bar), this chart shows the probability that the other player
        faces higher or lower return.
    </p>
</figure>



<div class="slidecontainer">
  <input type="range" min="-1" max="2" value="0.5" step="0.1" class="slider" id="myRange">
    <p>Return: <span id="demo"></span></p>
    <p>Profit from Investing = return - 1{if the other player does Not Invest}</p>
</div>

<div id="container1"></div>

<style>

    .slider {

  width: 100%; /* Full-width */
  height: 50px; /* Specified height */

}
</style>

<script>

 slider = document.getElementById("myRange");
 output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value
 N = 2;
// Update the current slider value (each time you drag the slider handle)
dps = ks(0.5,N);

function ks(k,limit) {
   dps = [], yVal = k;
  for( i = 0; i< limit; i++) {
    dps.push({x:i,y:yVal });
  }
  return dps
}

slider.oninput = function() {
  output.innerHTML = this.value
  //chart.series[0].setData(dps2)
  //console.log(result)
  let dps2 = []
  let dps2m = []
  test = $.getJSON(
    js_vars.treatment,
    function (result) {
      $.each(result, function (i, field) {
        dps2m.push(field[slider.value * 10 + 15])
      })
      for (let i = 1; i <= N; i++) {
        dps2.push({ x: i - 1, y: dps2m[i - 1] })
      }
      chart1.series[0].setData(dps2)
    }
  )
}

chart1 = Highcharts.chart('container', {
    chart: {
        type: 'column',
    },
    yAxis: {
        allowDecimals: true,
        title: {
            text: 'Probability (decimal, not percent)'
        },
        min: 0,
        max: 1,
    },
    xAxis: {
        categories: ['Other player draws a higher return','Other player draws a lower return']
        },
    title: {
        text: null
    },
    series: [{
        showInLegend: false,
        data: dps
    }]
});



</script>

    {% next_button %}

{% endblock %}