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

{% block title %}
Part 1: Instructions<hr>
{% endblock %}

{% block content %}

    <p>
    Please read these instructions carefully. There will be comprehension checks. If you fail these, you will be excluded from the study and only receive the reward of {{ fee }}.
    </p>
    <p>In this study, there are various lotteries, all of which pay different amounts of money with different probabilities. An example lottery is:

     <table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%; text-align: center"><tr><td>
    With probability <b>5%: Get $ 18 </b><br>
        With probability<b> 95%: Get $ 0</b>
</td></tr></table>
    This means that the lottery pays <b>either</b> $18 <b>or</b> $0 (with different probabilities), but a lottery always only pays out one of the dollar amounts.
The lotteries will actually be played out by the computer and determine your earnings in exactly the way we describe on the following pages.

    </p>

    <p>
    In total, we have created {{ num_questions }} lotteries. For each lottery, you will make decisions on two consecutive decision screens.
    <ul>
    <li>
        Decision screen 1: You will make various choices to indicate <u><b>how much</b></u> a lottery is worth to you.</li>
        <li>Decision screen 2: You will indicate <u><b>how certain</b></u> you are about how much <b>exactly</b> a lottery is worth to you.

    </li>
    </ul>
    </p>

    <p>
    <b>Throughout the experiment, there are no right or wrong answers, because how much you like a lottery depends on your personal taste. </b> We are only interested in learning about what you prefer.
</p><br>
    <h3>Decision screen 1</h3>

<p>
On decision screen 1, you will be asked to choose which of two payment options you prefer.
    You will see choice lists such as the one below,
    where each row is a separate choice.
    In every list, the left-hand side option (Option A) is one of the lotteries that we generated,
    which is identical in all rows. The right-hand side option (Option B) is a safe payment that you would receive <i>with certainty</i>, so there is no risk attached. This safe payment in Option B increases as you go down the list.
</p>

    <p>
    You should consider the choice in each row <b>independently</b> of all other rows, because in the end one row will be randomly selected for payout and you will receive the option that you selected in that row.
        In some choice lists that you complete, you will receive a budget. If so, this budget will be listed at the top of your screen and paid out to you along with the payouts from the lottery.

</p>

    <p>Usually, people start by preferring Option A for small certain amounts (at the top of the list).
    At some point they switch to Option B as they proceed down the list,
    because the certain amount associated with Option B increases,
    so that Option B becomes more attractive. <b>Thus, an effective way to complete these choice lists is to determine in which row you would like to switch from Option A to Option B.</b>
</p>

    <p>
        Based on your decisions in this choice list, we assess <b>how much the lottery is worth to you by using those certain payments where you switch from Option A to Option B.</b>
        For example, in the example choice list below, the lottery would be worth between $5 and $6 to you, because this is where switching occurs.
    </p>



    <div style="text-align: center">
<img src="{% static "within_subject_risk_lists/risky_choice.png" %}" width=80% >
</div>


    <p>
    Click "Next" to read about decision screen 2.
    </p>



 <div style="text-align: right;">
    {% next_button %}
</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() {
    var bar_values = [];
    for (var j = -20; j <= 20; ++j) {
             {#bar_values.push(50  / (Math.sqrt(2*Math.PI* (standardDeviation * standardDeviation)))*Math.pow(Math.E, -Math.pow(j - mean, 2) / (2 * (standardDeviation * standardDeviation))));#}
             bar_values.push({y: 0, color: 'lightgray'});
     }
     return bar_values;
};
cats = function() {
    var c = [];
    for (var q = -20; q <= 20; ++q)  {
      if (q === 0) {
                 c.push("V in $")
        }
        else {
            c.push("");
        }
    }
  return c;
};

var init_categories = cats();
var init_values = g_pdf()

</script>
<script>myChart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
    tooltip: { enabled: false },
  subtitle: {
    text: ''
  },
  xAxis: {
      categories: init_categories,
      title: {
          text: 'Your valuation V',
           style: {
        color: 'black',
        fontSize:'15px'
    },
          tickInterval: 1,

      },
      labels: {
      formatter: function () {
        return this.value.replace(/ /g, '<br />');
    },
          step: 1,
        style: {
        color: 'red',
        fontSize:'17px',
    }
}

  },
  yAxis: {
      min: 0,
      max: 100,
      visible: true,
      tickInterval: 10,
      title: {
          text: 'Number of points',
          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>
    get_category_names = function(c) {
        conf = parseInt(c);
        var c_inv = 20 - conf;
         var cat_names = [];
         for (var j = -20; j <= 20; ++j) {
             if (c_inv === 0 || c_inv === 20) {
                 if (j === 0) {
                     cat_names.push("V in $ ")
                 }
                 else {
                   cat_names.push("")
                 }
             }
             else {
             if (j === -c_inv) {
                 cat_names.push("V " + "- " + (-j * 0.5).toFixed(1).toString());
             }
             else if (j === 0) {
                 cat_names.push("V in $")
             }
             else if (j === c_inv) {
                  cat_names.push("V " + "+ " + (j * 0.5).toFixed(1).toString());
                {# if (j < 0) {#}
                {#     cat_names.push((-j * 0.5).toFixed(1).toString());#}
                {# }#}
                {# else if (j === 0) {#}
                {#     cat_names.push("$x");#}
                {# }#}
                {#else  {#}
                {#     cat_names.push((j * 0.5).toFixed(1).toString());#}
                {# }#}
             }
             else {
                 cat_names.push("");
             }
         }
             }
         return cat_names;
        };
    calc_bar_values = function(conf) {
        var bar_values = [];
        var c_inv = 20 - conf;
        var f = 1 - (conf * 0.03);
        {#var x = c_inv * 5 / 2;#}
        var x = (30 * Math.log(c_inv + 1)) / 2;
        if (conf === 0) {
            var uni = 100 / 41;
        for (var j = -20; j <= 20; ++j) {
            if (j !== 0) {
            bar_values.push({y: uni, color: 'gray'})
            }
            else {
            bar_values.push({y: uni, color: 'black'})
            }
        }
        } else {
            for (var j = -20; j <= 20; ++j) {
                if (j >= -c_inv && j <= c_inv) {
                    if (j !== 0) {
                        var j_abs = Math.abs(j);
                        var m = x * Math.pow(f, j_abs - 1) * (1 - f) / (1 - Math.pow(f, c_inv));
                        bar_values.push({y: m, color: 'gray'})
                    } else if (j === 0) {
                        var m = 100 - x * 2;
                        bar_values.push({y: m, color: 'black'})
                    }
                } else {
                    bar_values.push({y: 0, color: 'gray'})
                }
            }
        }

         return bar_values;
    };


     updateBars = function() {
         {#valuation = parseFloat(document.getElementById("own_valuation").value);#}
         slid_value = parseInt(document.getElementById("confidence").value); // change ("form")[1] if I want to have the slider without the guess on the same page
         myChart.series[0].setData(calc_bar_values(slid_value));
       myChart.xAxis[0].setCategories(get_category_names(slid_value));
     };

     $("#confidence").on("mouseup keyup", updateBars);
</script>
<script>

function displayRange() {
   {#var v = parseFloat(document.getElementById("own_valuation").value);#}
   var c = parseFloat(document.getElementById("confidence").value);
   range = ((20-c)*0.5).toFixed(2).toString();
   if (c==0) {
       document.getElementById("text_conf_intro").value = "I really don’t know what my valuation of this lottery is.";
       document.getElementById("text_conf_range").value = "";
   }
   else if (c === 20) {
       document.getElementById("text_conf_intro").value = "I know exactly what my valuation of this lottery is.";
       document.getElementById("text_conf_range").value = "";
   }
   else {
         document.getElementById("text_conf_intro").value = "I am certain that I can pin down my valuation of this lottery to a range of ";
       document.getElementById("text_conf_range").value = "+/- $" + range;
   }
}


</script>
<script>

$(document).ready(function () {


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


    });
</script>


{%  endblock %}