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

{% block title %}
Part 2
{% endblock %}

{% block content %}
<hr>
<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1200px
    }
    .otree-title {
        text-align: center
    }
</style>
<style>
  .slidecontainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      top: 0;
      bottom: 0;
    }
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
    .slider:hover {
      opacity: 1;
    }
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }
    .vranger {
       margin-top: 5px;
       margin-bottom: 10px;
    }
</style>
<style>
    aside  {
      width: 600px;
      height: 500px;
      background: none;
      overflow:auto;
      min-height: 0;
      transition-property: width;
      transition-duration: 0.2s;
      transition-timing-function: linear;
    }
</style>
<style>
    * {
      box-sizing: border-box;
    }
    /* Create two unequal columns that floats next to each other */
    .column {
      float: left;
      padding: 10px;
    }
    .left {
      width: 40%;
    }
    .right {
      width: 60%;
    }
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
</style>
<style>
    /* Create two equal columns that floats next to each other */
    .row {
        row-gap: 0;
    }
    .column-1 {
      float: left;
      width: 25%;
      height: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .column-2 {
      float: left;
      width: 75%;
      height: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .column-1 button {
      text-align: left;
    }
</style>
<style>
    .center {
        margin: 0% 40% 0% 40%
    }
</style>
{% block styles %}
    <link href="{% static 'css/otreetimer.css' %}" rel="stylesheet">
{% endblock %}
<script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<p>
    As it is mentioned earlier, there were 100 participants (university students) who completed the same task in Part 1 as you just did.
    Where do you think your performance, as measured by the number of correctly solved puzzles, is ranked against these participants?
</p>
<p>
    Please indicate the likelihood that your performance is in each of the five intervals.
    A higher number means that your performance is more likely to be in that interval. The total likelihood assigned to all five intervals must add up to 100%.
</p>
<p>
    <b>You may receive {{Constants.ECU_BSR}} ECU based on how accurate your guess is compared to the true outcome.</b>
    The rule to determine your payment is designed such that your chance of receiving {{Constants.ECU_BSR}} ECU is highest <b>if you state your most accurate prediction</b>.
    If you wish to read more about how your payment will be determined, please click <a href="https://docs.google.com/document/d/17kew67eug6XTXT2po3HRsmyv9T1xZn3h/edit?usp=sharing&ouid=116673191910819015472&rtpof=true&sd=true" target="_blank" rel="noopener noreferrer" name = "bsr_click" id="bsr_click">here</a>.
</p>
<input type="hidden" name="bsr_clicked" id="bsr_clicked" />
<div>
    <div class="row">
  <div class="column-1">
    <button type="button" style="margin-top: 10px;cursor: not-allowed;pointer-events: none;" class="btn btn-success btn-block">Rank 1-20 <br> (top performance)</button>
  </div>
  <div class="column-2">
      <span style="font-size: 18px;">&nbsp&nbsp&nbsp&nbsp The likelihood that my performance will be ranked between 1-20 is:</span>&nbsp&nbsp<span id="demo5" style="font-size: 18px;"> <b>0%</b></span>
      <div class="slidecontainer vranger">
        <span style="transform: rotate(180deg);">&nbsp&nbsp<b>0</b>&nbsp&nbsp</span>
        <input type="range" id="bef_rel_5" name="bef_rel_5" value="0"  max="100" min="0" step="5" class="slider" onclick="document.getElementById('Confirm').style.display = 'block';document.getElementById('Confirm-text').style.display = 'block'">
        <span style="transform: rotate(0deg);">&nbsp&nbsp<b>100</b>&nbsp&nbsp</span>
      </div>
  </div>


  <div class="column-1">
    <button type="button" style="margin-top: 10px;cursor: not-allowed;pointer-events: none;" class="btn btn-success btn-block" >Rank 21-40 <br> (above average)</button>
  </div>
  <div class="column-2">
      <span style="font-size: 18px;">&nbsp&nbsp&nbsp&nbsp The likelihood that my performance will be ranked between 21-40 is:</span>&nbsp&nbsp<span id="demo4" style="font-size: 18px;"> <b>0%</b></span>
      <div class="slidecontainer vranger">
        <span style="transform: rotate(180deg);">&nbsp&nbsp<b>0</b>&nbsp&nbsp</span>
        <input type="range" id="bef_rel_4" name="bef_rel_4" value="0"  max="100" min="0" step="5" class="slider" onclick="document.getElementById('Confirm').style.display = 'block';document.getElementById('Confirm-text').style.display = 'block'">
        <span style="transform: rotate(0deg);">&nbsp&nbsp<b>100</b>&nbsp&nbsp</span>
      </div>
  </div>


  <div class="column-1">
    <button type="button" style="margin-top: 10px;cursor: not-allowed;pointer-events: none;" class="btn btn-success">Rank 41-60 <br> (average performance)</button>
  </div>
  <div class="column-2">
      <span style="font-size: 18px;">&nbsp&nbsp&nbsp&nbsp The likelihood that my performance will be ranked between 41-60 is:</span>&nbsp&nbsp<span id="demo3" style="font-size: 18px;"> <b>0%</b></span>
      <div class="slidecontainer vranger">
        <span style="transform: rotate(180deg);">&nbsp&nbsp<b>0</b>&nbsp&nbsp</span>
        <input type="range" id="bef_rel_3" name="bef_rel_3" value="0"  max="100" min="0" step="5" class="slider" onclick="document.getElementById('Confirm').style.display = 'block';document.getElementById('Confirm-text').style.display = 'block'">
        <span style="transform: rotate(0deg);">&nbsp&nbsp<b>100</b>&nbsp&nbsp</span>
      </div>
  </div>


  <div class="column-1">
    <button type="button" style="margin-top: 10px;cursor: not-allowed;pointer-events: none;" class="btn btn-success">Rank 61-80  <br> (below average)</button>
  </div>
  <div class="column-2">
      <span style="font-size: 18px;">&nbsp&nbsp&nbsp&nbsp The likelihood that my performance will be ranked between 61-80 is:</span>&nbsp&nbsp<span id="demo2" style="font-size: 18px;"> <b>0%</b></span>
      <div class="slidecontainer vranger">
        <span style="transform: rotate(180deg);">&nbsp&nbsp<b>0</b>&nbsp&nbsp</span>
        <input type="range" id="bef_rel_2" name="bef_rel_2" value="0"  max="100" min="0" step="5" class="slider" onclick="document.getElementById('Confirm').style.display = 'block';document.getElementById('Confirm-text').style.display = 'block'">
        <span style="transform: rotate(0deg);">&nbsp&nbsp<b>100</b>&nbsp&nbsp</span>
      </div>
  </div>


  <div class="column-1">
    <button type="button" style="margin-top: 10px;cursor: not-allowed;pointer-events: none;" class="btn btn-success">Rank 81-100 <br> (bottom performance)</button>
  </div>
  <div class="column-2">
      <span style="font-size: 18px;">&nbsp&nbsp&nbsp&nbsp The likelihood that my performance will be ranked between 81-100 is:</span>&nbsp&nbsp<span id="demo1" style="font-size: 18px;"> <b>0%</b></span>
      <div class="slidecontainer vranger">
        <span style="transform: rotate(180deg);">&nbsp&nbsp<b>0</b>&nbsp&nbsp</span>
        <input type="range" id="bef_rel_1" name="bef_rel_1" value="0"  max="100" min="0" step="5" class="slider" onclick="document.getElementById('Confirm').style.display = 'block';document.getElementById('Confirm-text').style.display = 'block'">
        <span style="transform: rotate(0deg);">&nbsp&nbsp<b>100</b>&nbsp&nbsp</span>
      </div>
  </div>
</div>
    <br>
    <div class="block">
        <div id="sum" style="display:block; text-align: center">
            <p>
               Total likelihood assigned: &nbsp<span id="totalpercentage" style="font-size: 22px;"></span>
            </p>
        </div>
    </div>
    <div class="block">
        <div id="Confirm-text" style="display:block;">
            <p>
                Please confirm your decision by clicking the "Confirm my decision" button.
            </p>
        </div>
    </div>
    <span id="CheckSum" style="margin: 0px 34% 0px 34%; display:none; color: red; margin-top: 10px; font-size: 20px;">The likelihood must add up to 100%!</span>
    <div class="center">
        <br>
        <button id="Confirm" type="button" class="btn btn-success" style="display:block;">Confirm my decision</button>
    </div>
    <div class="block">
        <div id="Checked" style="display:none;">
            <p>
                Please click "Next" to proceed.
            </p>
            <br>
            <button id="Next" style="display:block; float: right" class="btn btn-primary">Next</button>
        </div>
    </div>
</div>
<br><br>
<script>
    document.getElementById('bsr_clicked').value = 0;
    const element = document.getElementById('bsr_click')
    element.addEventListener("click", () => {
        document.getElementById('bsr_clicked').value = 1;
    });
</script>
<script>
	$(document).ready(function () {
    	$('input[name=bef_rel_1]').on('input', function() {
        	document.getElementById("demo1").innerHTML = $(this).val()+'%';
        	document.getElementById("demo1").style.fontWeight='bold';
    	});
    });
    	$(document).ready(function () {
    	$('input[name=bef_rel_2]').on('input', function() {
        	document.getElementById("demo2").innerHTML = $(this).val()+'%';
        	document.getElementById("demo2").style.fontWeight='bold';
        	$('#check_bef_rel_2').val(1);
    	});
    });
    	$(document).ready(function () {
    	$('input[name=bef_rel_3]').on('input', function() {
        	document.getElementById("demo3").innerHTML = $(this).val()+'%';
        	document.getElementById("demo3").style.fontWeight='bold';
        	$('#check_bef_rel_3').val(1);
    	});
    });
    	$(document).ready(function () {
    	$('input[name=bef_rel_4]').on('input', function() {
        	document.getElementById("demo4").innerHTML = $(this).val()+'%';
        	document.getElementById("demo4").style.fontWeight='bold';
        	$('#check_bef_rel_4').val(1);
    	});
    });
    	$(document).ready(function () {
    	$('input[name=bef_rel_5]').on('input', function() {
        	document.getElementById("demo5").innerHTML = $(this).val()+'%';
        	document.getElementById("demo5").style.fontWeight='bold';
        	$('#check_bef_rel_5').val(1);
    	});
    });
</script>
<script>
    function sum() {
          var value1 = parseInt($("#bef_rel_1").val(), 10);
          var value2 = parseInt($("#bef_rel_2").val(), 10);
          var value3 = parseInt($("#bef_rel_3").val(), 10);
          var value4 = parseInt($("#bef_rel_4").val(), 10);
          var value5 = parseInt($("#bef_rel_5").val(), 10);
          var sum = value1 + value2 + value3 + value4 + value5;
          document.getElementById('sum').style.display = 'block';
          document.getElementById("totalpercentage").innerHTML = sum +'%';
          document.getElementById("totalpercentage").style.fontWeight='bold';

    }
</script>
<script>
    function checksum() {
          var value1 = parseInt($("#bef_rel_1").val(), 10);
          var value2 = parseInt($("#bef_rel_2").val(), 10);
          var value3 = parseInt($("#bef_rel_3").val(), 10);
          var value4 = parseInt($("#bef_rel_4").val(), 10);
          var value5 = parseInt($("#bef_rel_5").val(), 10);
          var sumOfValues = value1 + value2 + value3 + value4 + value5;
          if (sumOfValues != 100) {
            document.getElementById('CheckSum').style.display = 'block';
          } else {
            document.getElementById('Checked').style.display = 'block';
            document.getElementById('CheckSum').style.display = 'none';
          }
    }
</script>
<script>
    $(document).ready(function(){
      $('input[name=bef_rel_1]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
        document.getElementById('CheckSum').style.display = 'none';
      });
      $('input[name=bef_rel_2]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
        document.getElementById('CheckSum').style.display = 'none';
      });
      $('input[name=bef_rel_3]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
        document.getElementById('CheckSum').style.display = 'none';
      });
      $('input[name=bef_rel_4]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
        document.getElementById('CheckSum').style.display = 'none';
      });
      $('input[name=bef_rel_5]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
        document.getElementById('CheckSum').style.display = 'none';
      });
      $("#Confirm").click(function() {
        checksum();
      });
    });
</script>

{{ formfield_errors 'bsr_clicked' }}

{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <p>Please fill the table with the slider.</p>
</div>
{% endif %}

{{ endblock }}