{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Decision {{round    }} of {{num_questions}}  <hr>
{% endblock %}

{% block content %}


    <div id="lottery_div" style="text-align: center; width: 100%;">
 <table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;">
<tr>
{% if type == 'list' %}

    <td style="vertical-align: middle; text-align: center" rowspan="{{table_length1}}">
{% for prob, sum in player.current_lottery %}
                   With probability <b>{{ prob }}% : </b>
                    {% if sum  >= 0 %}
                     <b style="color: green">&nbsp;&nbsp;Get</b>&nbsp;
                   {% elif sum < 0 %}
                     <b style="color: red;">&nbsp;&nbsp;Lose</b>&nbsp;
                    {% endif %}
                  <b>$ {{ sum | abs }}</b> <br>
    {% endfor %}
    </td>

{%  elif type == 'rocl' %}
   <td  style="vertical-align: middle; text-align: left" rowspan="{{table_length1}}">
   <p>We roll a fair four-sided dice with numbers 20, 40, 60, 80</p>
    {% for roll, prob1, sum1, prob2, sum2 in player.current_lottery %}
        If dice comes up {{ roll }}:
        <ul>
        <li>
          With probability <b>{{ prob1 }}% : </b>   <b style="color: green;">&nbsp;&nbsp;Get</b>&nbsp;  <b>$ {{ sum1 | abs }}</b>
        </li>
        <li>
         With probability <b>{{ prob2 }}% : </b>    <b style="color: green;">&nbsp;&nbsp;   Get</b>&nbsp;  <b>$ {{ sum2 | abs }}</b>
        </li>
        </ul>
    {%  endfor %}
         </td>

{%  endif %}

</tr></table>
    </div>



    <div id="confidence_div" style="width: 100%">
<br>

        <p>
            Please use the slider below to guess the <b>average confidence</b> stated by <b>all other study participants</b>  in Part 2 for <b>this specific</b> lottery.

{#            {%if round == 1 %}<p>#}
{#        You can allocate 100 points to one or more dollar amounts to indicate how likely you think it is that this dollar amount corresponds to your valuation of the lottery.</p>{%endif%}#}

    </p>
      <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <!--<col width="25%">-->
            <col width="100%">
        </colgroup>
          <tr> <td style="text-align: center;"><b><output id="text_conf"> </output></b></td></tr>
<tr>
<td> <input type="range" class="myclassRed" name="others_confidence" id="others_confidence" value="100" style="width: 100%" min="0" max="100" step="1"
        oninput="text_conf.value = 'Your confidence: ' + others_confidence.value.toString();" /> </td>
</tr>
          <tr><td>
          <div class="sliderticks">
      <p> </p>
        <p> </p>
  </div>
      </td> </tr>
      <tr>
          <td style="padding: 0" >
              <div style="display: inline; float: left" ><b>not confident at all</b></div> <div style="display: inline; float: right"><b>fully confident</b></div>
          </td></tr>

          <br></table><br>
    <div id="containerA" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

   <div style="text-align: right;">
       <button type="submit" class="btn btn-primary" id="confirm" disabled >Next</button>
   </div>

        {{form.errors}}
    </div>

{% endblock %}


{% block styles %}
<style>
  .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px !important;
        width: 4px !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -14px !important;
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 0 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    .myclassBlue::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: white;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }
       .myclassRed::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: gray;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0px 0px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: black ;
  height: 12px;
  line-height: 45px;
  margin: 0 0 0 0;
}

</style>

{% endblock %}


{% block scripts %}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>

g_pdf = function(mean, standardDeviation) {
    var bar_values = [];
    for (var j = 0; j <= 100; ++j) {
             bar_values.push(50  / (Math.sqrt(2*Math.PI* (standardDeviation * standardDeviation)))*Math.pow(Math.E, -Math.pow(j - mean, 2) / (2 * (standardDeviation * standardDeviation))));
     }
     return bar_values;
};
cats = function() {
     var cat_names = [];
     for (var j = -50; j <= 50; ++j) {
        if (j == 0) {
                cat_names.push("Stated valuation (v)")
            }
        else if (j % 20 == 0 && j < 0) {
            cat_names.push("v - $ " + (Math.abs((j/20)).toFixed(1)));
        }
        else if (j % 20 == 0 && j > 0) {
            cat_names.push("v + $ " + ((j/20)).toFixed(1).toString());
        }
        else {
            cat_names.push("");
        }
     }
     return cat_names;
};

var init_categories = cats();
var init_values = g_pdf(50, 0.1)

</script>
<script>myChart = Highcharts.chart('containerA', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
    tooltip: { enabled: false },
  subtitle: {
    text: ''
  },
  xAxis: {
      categories: init_categories,
      title: {
          text: 'Valuation stated by other participants',
           style: {
        color: 'black',
        fontSize:'15px'
    },
          minorTickInterval: 1,
          minorTickLength: 10,
          tickInterval: 10,
          tickLength: 20,
      },
      labels: {
          step: 10,
        style: {
        color: 'red',
        fontSize:'15px',
    }
}

  },
  yAxis: {
      min: 0,
      max: 100,
      visible: true,
      tickInterval: 10,
      title: {
          text: 'Strength of confidence',
          style: {
              color: 'black',
              fontSize: '15px'
          }
      },
      labels: {
          style: {
              color: 'black',
              fontSize: '15px'
          }
      },
  },
  plotOptions: {
    column: {
      pointPadding: 0,
      groupPadding: 0,
      shadow: false
    }
  },
  series: [{
    name: '',
    data: init_values,
    showInLegend: false
    }],
     credits: {
       enabled: false
            },
      exporting: {enabled: false}
});</script>
<script src="{% static 'global/risk_uncertainty_list_functions.js' %}"></script>
<script>

   gaussian_pdf = function(mean, standardDeviation) {
        var bar_values = [];
        var lowest_bucket = 0;
        var first_nonzero_bucket = 0;
        for (var j = 0; j <= 100; ++j) {
            if (standardDeviation === 0) {
                if (j === 50) {
                    bar_values.push({y: 100, color: 'gray'})
                } else {
                    bar_values.push({y: 0, color: '#C0C0C0'})
                }
            } else {
                val = 800 / (Math.sqrt(2 * Math.PI * (standardDeviation * standardDeviation))) * Math.pow(Math.E, -Math.pow(j - 50, 2) / (2 * (standardDeviation * standardDeviation)));
                if (mean + (j - 50)/10 < 0) {
                    bar_values.push(0);
                    lowest_bucket += val;
                    continue;
                } else if (first_nonzero_bucket == 0) {
                    new_val = val + lowest_bucket;
                    first_nonzero_bucket = 1;
                } else {
                    new_val = val;
                }
                if (j === 50) {
                    bar_values.push({
                        y: new_val,
                        color: 'gray'
                    });
                } else {
                    bar_values.push({y: new_val, color: '#C0C0C0'});
                }
            }
        }
         return bar_values;
  };

    get_category_names = function(i) {
        i = parseFloat(i);
         var cat_names = [];
         for (var j = -50; j <= 50; ++j) {
            if (i+(j/20) < 0 || isNaN(i)) {
                    cat_names.push("")
                }
            else if (j % 10 == 0) {
                cat_names.push("$ " + (i+(j/20)).toFixed(1).toString());
            }
           else if (Math.abs(j % 10) == 5) {
                cat_names.push("$ " + (i+(j/20)).toFixed(1).toString());
            }
            else {
                cat_names.push("");
            }
         }
         return cat_names;
        };

     updateBars = function() {
         mu = 50;
         conf = 5-parseFloat(document.getElementById("others_confidence").value)/100*5;
         if (conf == 0) {
             sigma = conf
         }
         else {
             sigma = Math.pow(conf + 2, 1.6)
         }
         {#myChart.xAxis[0].setCategories(get_category_names(mu));#}
         myChart.series[0].setData(gaussian_pdf(mu, sigma));
     };

     $("#others_confidence").on("mouseup keyup", updateBars);
     {#$("#own_valuation").on("input change", updateBars);#}
</script>
<script>

    function postFunction() {
  {#var x = document.getElementById("submit_posterior");#}
  {#var z = document.getElementById("qn_post");#}
  {#var z = document.getElementById("posterior_div");#}
  var z = document.getElementById("qn_pre");
  var x = document.getElementById("submit_valuation");
  var y = document.getElementById("confidence_div");
  {#var q = document.getElementById("own_valuation");#}
   {#var p = document.getElementById("lottery_div");#}
        y.style.display = "inline-block";
      x.style.display = "none";
      z.style.display = "none";
      {#x.value = q.value.toString();#}
      {#v.value = q.value.toString();#}
            updateBars()

}


</script>
<script>

$(document).ready(function () {


$('#others_confidence').on('input change', function () {
    $('#others_confidence').addClass('myclass');
    $('#confirm').prop('disabled', false);
});




    });
</script>




{% endblock %}