{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Decision screen 2 <hr>
{% endblock %}

{% block content %}
<p>
    You will receive a <b>bonus of {{ fixed_payment_per_question }} for a careful consideration</b> of the question below.
</p>
    <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" >
{% for prob, sum, abssum 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;
                  {% elif sum == 0 and player.lottery_amount > 0 %}
                     <b>&nbsp;&nbsp;Get</b>&nbsp;
                  {% elif sum == 0 and player.lottery_amount < 0 %}
                     <b>&nbsp;&nbsp;Lose</b>&nbsp;
                    {% endif %}
                  <b>$ {{ abssum }}</b> <br>
    {% endfor %}
    </td>

{%  elif type == 'rocl' %}
    <td style="vertical-align: middle; text-align: left" >
        <p>We randomly <b>draw an integer number between {{ roclrangestart }} and {{ roclrangeend }}</b>, with each number being equally likely to be drawn. Call this number X.</p>
 {% for prob, sum, abssum 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;
                  {% elif sum == 0 and player.lottery_amount > 0 %}
                     <b>&nbsp;&nbsp;Get</b>&nbsp;
                  {% elif sum == 0 and player.lottery_amount < 0 %}
                     <b>&nbsp;&nbsp;Lose</b>&nbsp;

                    {% endif %}
                  <b>$ {{ abssum }}</b> <br><br>
    {% endfor %}

         </td>




     {%  elif type == 'ellsberg' %}

        <td  style="vertical-align: middle; text-align: left">
<p>Imagine that the computer simulates an <b>urn that contains 90 balls</b>. Out of these 90 balls:
    <ul><li>30 balls are <b style="color: red">red</b></li>
        <li>60 balls are <b style="color: darkgoldenrod">yellow</b> or <b style="color: blue">blue</b>, but you <i>don't know how many</i> are yellow and how many are blue</li>
    </ul>

<p>
    The computer will <b>randomly select one</b> of these 90 balls, with equal probability. <br>
</p>
     <p>
       {% for sum, o1, o2 in player.current_lottery %}
                <b style="color: green">Get</b>&nbsp;$10 if the drawn ball is <b>{{ o1 }}</b><br>
           Get $0 if the drawn ball is <b>{{ o2 }}</b>

       {% endfor %}</p>
        </td>
{%  endif %}

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

    <p>On the previous decision screen you  indicated that this lottery is worth
    {% if player.indicator_never_always_switcher == 1 %}
      between
            {%  if val_low < 0 or val_low == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %}${{  absval_low }}
        and {%  if val_up < 0 or val_up == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %} ${{ absval_up }} to you.
    {%  elif player.indicator_never_always_switcher == 0 %}
     {%  if val_up < 0  or val_up == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %} ${{ absval_up }} to you.
    {%  elif player.indicator_never_always_switcher == 2 %}
 {%  if val_low < 0 or val_low == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %}${{  absval_low  }} to you.
    {%  endif %}
    </p>

<br>
    <div style="border: 3px solid red; padding: 8px; text-align: center">
    <b style="color: red;">How certain</b> are you that to you this lottery  <b>is worth <i style="color: red">exactly</i> the same as
    {% if player.indicator_never_always_switcher == 1 %}

            {%  if val_low < 0 or val_low == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %} between ${{  absval_low  }}
        and {%  if val_up < 0 or val_up == 0 and player.lottery_amount < 0 %}  {%  else  %}  {% endif %}  ${{ absval_up  }}
    {%  elif player.indicator_never_always_switcher == 0 %}
     {%  if val_up < 0  or val_up == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %} ${{ absval_up  }}
    {%  elif player.indicator_never_always_switcher == 2 %}
 {%  if val_low < 0 or val_low == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %}${{  absval_low  }}
    {%  endif %}</b> for sure?</div>

      <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <!--<col width="25%">-->
            <col width="100%">
        </colgroup>
<tr>
<td> <input type="range" class="myclassRed" name="confidence" id="confidence" value="20" style="width: 100%" min="0" max="20" step="1";/> </td>
</tr>
          <tr><td>
          <div class="sliderticks">
      <p>    </p>
        <p> </p>
      </td> </tr>
      <tr>
          <td style="padding: 0" >
              <div style="display: inline; float: left" ><b>very uncertain</b></div> <div style="display: inline; float: right"><b>completely certain</b></div>
          </td></tr>

          <br></table><br>


    I am certain that the lottery is worth <b style="color: darkgoldenrod"> <output id="text_conf_intro"><text>Use the slider! </text> </output></b>     to me.

{#    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>#}

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





        {{form.errors}}

{% 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;#}
{#    }#}
{##}
{#    .firefox input[type=range]::-moz-range-track {#}
{#  border-radius: 8px;#}
{#  height: 7px;#}
{#  border: 1px solid #bdc3c7;#}
{#  background-color: #fff;#}
{#}#}
{#.firefox input[type=range]::-moz-range-thumb {#}
{#  background: #ecf0f1;#}
{#    background-color: green;#}
{#  border: 1px solid #bdc3c7;#}
{#  width: 20px;#}
{#  height: 20px;#}
{#  border-radius: 10px;#}
{#  cursor: pointer;#}
{#}#}

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

function displayRange() {

    var sw = {{ player.indicator_never_always_switcher }};
    var val = {{ player.switching_point }};
    var step_size = 0.25;
    var lower_bound = {{ lowbound }};
    var upper_bound = {{ highbound }};
    var conf = parseFloat(document.getElementById("confidence").value);
    var lottery_amount = {{ player.lottery_amount }};

    var up = val + step_size * (20 - conf);
    var low = val - step_size * (20 - conf) - 1;


    if (sw == 0 && conf == 20) {
        if (lower_bound > 0 || lower_bound == 0 && lottery_amount > 0) {
            document.getElementById("text_conf_intro").value = "getting $" + (Math.abs(lower_bound)).toFixed(2).toString();
        } else {
            document.getElementById("text_conf_intro").value = "losing $" + (Math.abs(lower_bound)).toFixed(2).toString();
        }
    }
    else if (sw == 2 && conf == 20) {
        if (upper_bound > 0 || upper_bound == 0 && lottery_amount > 0) {
            document.getElementById("text_conf_intro").value = "getting $" + (Math.abs(upper_bound)).toFixed(2).toString();
        } else {
            document.getElementById("text_conf_intro").value = "losing $" + (Math.abs(upper_bound)).toFixed(2).toString();
        }
    }
    else {
        if (low < lower_bound && up <= upper_bound) {
            if (lower_bound > 0 || lower_bound == 0 && lottery_amount > 0) {
                document.getElementById("text_conf_intro").value = "between getting $" + (Math.abs(lower_bound)).toFixed(2).toString() + " and getting $" + (Math.abs(up)).toFixed(2).toString();
            } else {
                document.getElementById("text_conf_intro").value = "between losing $" + (Math.abs(lower_bound)).toFixed(2).toString() + " and losing $" + (Math.abs(up)).toFixed(2).toString();
            }
        } else if (low < lower_bound && up > upper_bound) {
            if (lower_bound >0 || lower_bound == 0 && lottery_amount > 0) {
                document.getElementById("text_conf_intro").value = "between getting $" + (Math.abs(lower_bound)).toFixed(2).toString() + " and getting $" + (Math.abs(upper_bound)).toFixed(2).toString();
            } else  {
                document.getElementById("text_conf_intro").value = "between losing $" + (Math.abs(lower_bound)).toFixed(2).toString() + " and losing $" + (Math.abs(upper_bound)).toFixed(2).toString();
            }
        } else if (low >= lower_bound && up <= upper_bound) {
            if (low > 0 || low == 0 & lottery_amount > 0) {
                document.getElementById("text_conf_intro").value = "between getting $" + (Math.abs(low)).toFixed(2).toString() +  " and getting $" + (Math.abs(up)).toFixed(2).toString();
            } else {
                document.getElementById("text_conf_intro").value = "between losing $" + (Math.abs(low)).toFixed(2).toString() + " and losing $" + (Math.abs(up)).toFixed(2).toString();
            }
        } else if (low >= lower_bound && up > upper_bound) {
            if (low > 0 || low == 0 & lottery_amount > 0) {
                document.getElementById("text_conf_intro").value = "between getting $" + (Math.abs(low)).toFixed(2).toString() + " and getting $" + (Math.abs(upper_bound)).toFixed(2).toString();
            } else {
                document.getElementById("text_conf_intro").value = "between losing $" + (Math.abs(low)).toFixed(2).toString() + " and losing $" + (Math.abs(upper_bound)).toFixed(2).toString();
            }
        }
    }
}

</script>
<script>

$(document).ready(function () {


$('#confidence').on('mouseup keyup', function () {
    $('#confidence').addClass('myclass');
    $('#confirm').prop('disabled', false);
    displayRange();
});


    });
</script>




{% endblock %}