{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
Task {{displayed_round}} of {{num_questions}}  <hr>

<!--{% if round > 1 %}-->
<!--<text style="font-size: medium"> Answer this question <i>independenlty</i> of all previous questions! This question is about a <i>different</i> situation than before.</text>-->
<!--{% endif %}-->
{% endblock %}

{% block content %}
{% if previous_dr.0 > 0 %}
<text style="color: red;">
    <p>!!! Below you will see additional information about the <b>same selected bag</b>
        as on the <b>previous {% if previous_dr.0 == 1 %}page{% else  %}{{previous_dr.0}} pages{% endif %} </b>!!!</p>
</text>{% endif %}

<div style="display: inline-block; float: right; width: 25%">
    <img src="{% static "balls_urns/pictogram.png" %}" style="width: 100%">
</div>

<!--<p>Imagine there are two bookbags, bag A and bag B, both filled with balls.</p>-->
<p>

    <b>In this {% if displayed_round > 1 and previous_dr.0  == 0 %} new {%endif %} task:</b>
<p>    Number of <b>"more Red"</b> cards: <b>{{specification.a_chips}}</b><br>
   Number of  <b>"more Blue"</b> cards: <b>{{specification.b_chips}}</b></p>


<p>The <b>"more Red" bag</b>  contains <text style="color: red;"><b>{{specification.red_chips_a}} red</b> </text> balls and <b><text style="color: blue;">{{player.specification.blue_chips_a}} blue </text></b>
    {% if player.specification.blue_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
The <b>"more Blue" bag</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{player.specification.red_chips_a}} blue</text></b>
        {% if player.specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.</p>

{% if previous_dr.0 < 1 %}
Next:
<ol>
<li><p>The computer <b>randomly selected one bag</b> by drawing a card from the deck.</p></li>


<li> {% if player.specification.n_sample > 1 %}
<p>Then, the computer randomly drew {{player.specification.n_sample}} balls from the secretly selected bag, replacing each ball with a ball of the same color after it was drawn:<br>
    <b>In total, the computer drew <text style="color: red;">{{player.specification.red_sample}} red
        {% if player.specification.red_sample == 1%}ball{%else%}balls{%endif%}
    </text> and <text style="color: blue;">{{player.specification.blue_sample}} blue
        {% if player.specification.blue_sample == 1%}ball{%else%}balls{%endif%}
    </text></b>.</p>
        {% else %}
<p>Then, the computer randomly drew {{player.specification.n_sample}} ball from the secretly selected bag:<br>
    <b>{% if player.specification.red_sample > 0 %}<text style="color: red;">1 red ball{% else %}<text style="color: blue;">1 blue ball{% endif %}</text>  was drawn.</b></p>
    {% endif %}</li>
</ol>


    {% else %}
<b><u>In addition to the preceding {% if previous_dr.0 == 1 %}draw{%else %} {{previous_dr.0}} draws{% endif%}</u></b>, the computer <b>again</b> randomly drew {{player.specification.n_sample}} ball from the <b>previously selected</b>  bag:
    <br><b>{% if player.specification.red_sample > 0 %}<text style="color: red;">1 additional red ball{% else %}<text style="color: blue;">1 additional blue ball{% endif %}</text></b>  was drawn.</p>


<b>Reminder:</b> Your previous guess <b>for this task</b> (on the preceding page) was:<br>
  Probability of the <b>"more Red" bag</b>:
    <div style="width: 200px; display: inline-block; text-align: right">
        <b>{{previous_guess_a}} %</b>
    </div><br>

Probability of the <b>"more Blue" bag</b>:
    <div style="width: 200px; display: inline-block; text-align: right">
        <b>{{previous_guess_b}} %</b>
    </div><br><br>

{% endif %}

<div id="wtp_div">
Your task is to guess which bag was selected in this task.<br><br><br>
    <h4>Please first answer these questions:</h4>

   <br>
        <p><b>How difficult</b> do you find <b>this specific</b> guessing task{% if previous_dr.0 > 0 %}, following {{previous_dr.0 | add:1}} rounds of draws{%endif%}?</p>

 <table class="w3-table w3-white" style="width: 100%; border-spacing: 0; text-align: center; table-layout: fixed">
        <colgroup>
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
            <col width="10%">
                  <col width="10%">
            <col width="10%">
            <col width="10%">
  </colgroup><tr>
    <td>1 = not difficult at all</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10 = extremely difficult</td>
</tr>
     <tr>
         <td><input type="radio" name="difficulty" value="1" required ></td>
         <td><input type="radio" name="difficulty" value="2" required ></td>
         <td><input type="radio" name="difficulty" value="3" required ></td>
         <td><input type="radio" name="difficulty" value="4" required ></td>
         <td><input type="radio" name="difficulty" value="5" required ></td>
         <td><input type="radio" name="difficulty" value="6" required ></td>
         <td><input type="radio" name="difficulty" value="7" required ></td>
         <td><input type="radio" name="difficulty" value="8" required ></td>
         <td><input type="radio" name="difficulty" value="9" required ></td>
         <td><input type="radio" name="difficulty" value="10" required ></td>
     </tr></table>
<p></p>


    <br>
    <!--<p>The <b>guessing machine produces the optimal guess</b> given this information about which bag was actually drawn. </p>-->
    <p>        What is the highest amount that you are <b>willing to pay</b> to <b>replace your guess</b> with the <b><u>optimal guess</u> in this task?</b></p>

    <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <col width="100%">

        </colgroup>


   <td style="text-align: center;">
    <output id="text_wtp">Use the slider:</output><br>
            <br>
          <!--<td style="text-align: right  "><text style="text-align: right"> 0% von Option A <br> 100% von Option B</text> </td> </tr>-->
 <input type="range" class="myclassBlue" name="wtp" id="wtp" style="width: 100%" min="0" value="0" max="{{endowment}}" step="0.01"
        oninput="text_wtp.value = 'Your willingness to pay for the optimal guess: ' + wtp.value.toString() + '$';" required/>
    <div class="sliderticks">
      <p> $0</p>
        <p> $1.00</p>
        <p>$2.00</p>
                <p>$3.00&nbsp;&nbsp;&nbsp;&nbsp;</p>

  </div> <p> <br></p>
   </td>
       </tr>

    </table>


        <div style="text-align: right;">
       <button type="button" onclick="wtpFunction()" class="btn btn-primary" id="submit_wtp" disabled >Proceed to guess</button>
   </div>

    </div>




<div id="posterior_div" style="display: none;">
    <h4>Your guess:</h4>


    <p id="qn_post">
             Select a probability (between 0 and 100) that expresses <b>how confident</b> you are that the "more Red" bag or the "more Blue" bag have been selected{% if previous_dr.0 > 0 %}, following {{previous_dr.0 | add:1}} rounds of draws{%endif%}:
    </p>

Probability of the <b>"more Red" bag</b>:
    <div style="width: 200px; display: inline-block; text-align: right"> <b><input type="number" min="0" step="0.01" max="100" name="answer" id="answer" required
                                         style="font-weight: bold; border-radius: 4px; width: 60px; text-align: right; border-width: 1px"> %</b>
        </div>
    <br>
Probability of the <b>"more Blue" bag</b>:
    <div style="width: 200px; display: inline-block; text-align: right">
        <b><output id="text_post"><text style="color: red">Enter number above!</text></output></b>
    </div>
<br>
 <div style="text-align: right;">
       <button type="button" onclick="postFunction()" class="btn btn-primary" id="submit_posterior" disabled >Submit your guess</button>
   </div>


</div>


    <div id="confidence_div" style="display: none;">
<br>   <br>        <p>
               How <b>certain</b> are you <b>about your guess above</b>?
               {%if round == 1 %}<br>Use the slider to indicate how strongly you believe in your estimate. In the figure below, the dark bar
               represents your estimate, the lighter bars represent nearby values. The size of a bar represents your confidence for a given value.{%endif%}

    </p>
      <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="100" style="width: 100%" min="0" max="100" step="1"/> </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>very uncertain</b></div> <div style="display: inline; float: right"><b>completely certain</b></div>
          </td></tr>

          <br></table><br>
    <div id="container" 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 task</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>

  gaussian_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;
  };

var N = 101;
var cat = Array.apply(null, {length: N}).map(Number.call, Number);
  var init_values = gaussian_pdf(50, 0.1)

</script>
<script>myChart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
    tooltip: { enabled: false },
  subtitle: {
    text: ''
  },
  xAxis: {
      categories: cat,
      //categories: ["s-5", "s-4", "s-3", "s-2", "s-1", "s", "s+1", "s+2", "s+3", "s+4", "s+5"],
      title: {
          text: 'Probability of <b>"more Red" bag</b> (in %)',
           style: {
        color: 'black',
        fontSize:'15px'
    },
          minorTickInterval: 1,
          tickInterval: 5,
      },
      labels: {
          step: 5,
        style: {
        color: 'black',
        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>

   gaussian_pdf = function(mean, standardDeviation) {
        var bar_values = [];
        for (var j = 0; j <= 100; ++j) {
            if (standardDeviation === 0) {
                if (j === mean) {
                    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 - mean, 2) / (2 * (standardDeviation * standardDeviation)));
                if (j === mean) {
                    bar_values.push({
                        y: val,
                        color: 'gray'
                    });
                } else {
                    bar_values.push({y: val, color: '#C0C0C0'});
                }
            }
        }
         return bar_values;
  };

     updateBars = function() {
         mu = Math.round(parseFloat(document.getElementById("answer").value));
         conf = 5-parseInt(document.getElementById("confidence").value)/100*5;
         if (conf == 0) {
             sigma = conf
         }
         else {
             sigma = Math.pow(conf + 2, 1.6)
         }
         myChart.series[0].setData(gaussian_pdf(mu, sigma));
     };

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

<script>

    function wtpFunction() {
  var x = document.getElementById("wtp_div");
  var y = document.getElementById("posterior_div");
    x.style.display = "none";
      y.style.display = "inline-block";
}
    function postFunction() {
  var x = document.getElementById("submit_posterior");
  var z = document.getElementById("qn_post");
  var y = document.getElementById("confidence_div");
  $('#answer').prop('readonly', true);
    x.style.display = "none";
    z.style.display = "none";
      y.style.display = "inline-block";
}


</script>

<!--<script>-->

    <!--function diffFunction() {-->
  <!--var x = document.getElementById("difficulty_div");-->
  <!--var y = document.getElementById("posterior_div");-->
    <!--x.style.display = "none";-->
      <!--y.style.display = "inline-block";-->
<!--}-->
<!--</script>-->

<script>

    $(document).ready(function () {
        var diff_touched = false;
        var wtp_touched = false;
        $('#wtp').on('input change', function () {
            $('#wtp').addClass('myclass');
            wtp_touched = true;
            if (diff_touched === true) {
                $('#submit_wtp').prop('disabled', false);
            }
        });

        $('input[type=radio]').click(function(){
            diff_touched = true;
            if (wtp_touched === true) {
             $('#submit_wtp').prop('disabled', false);
            }
        });

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

$('#answer').on('keyup mouseup', function () {
   var x = parseFloat(document.getElementById("answer").value);
        if (x >= 0 && x <= 100) {
                document.getElementById('text_post').style.color = "black";
            document.getElementById('text_post').value = (Math.round((100-x)*100)/100).toString() + ' %';
                                      document.getElementById('text_post').style.fontSize = "100%";
          $('#submit_posterior').prop('disabled', false);
        }
        else {
        document.getElementById('text_post').value = 'Enter number between 0 and 100';
                          document.getElementById('text_post').style.fontSize = "70%";
  document.getElementById('text_post').style.color = "red";
          $('#submit_posterior').prop('disabled', true);

        }
        });

    //         $('input[type=radio]').click(function(){
    // $('#submit_difficulty').prop('disabled', false);
    // });

    });
</script>



{% endblock %}