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

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

{% block content %}

<style>
    p{
        font-size: 22px;
    }
    .otree-form-errors {
        visibility: hidden;
        display: none;
    }
    .otree-body {
        max-width:1200px
    }
</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;
       /*transform: rotate(270deg);*/
      -moz-transform: rotate(270deg); /*do same for other browsers if required*/
    }
</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;
    }
</style>
<style>
    .center {
        margin: 0% 40% 0% 40%
    }
</style>
<script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>

<br>
<p>
    There were 50 participants (university students in UK) who completed the same task in Part 1 as you just did.
    Where do you think your performance, as measured by total ECU earned in Part 1, will be ranked against these participates?
</p>
<p>
    Please indicate the likelihood that your performance is in each of the five ranking intervals.
    A higher number means that your performance is more likely to be in that interval.
    The total likelihood assigned to each ranking interval should adds up to 100%
</p>
<p>
    You will be paid based on <b>how accurate is your guess compare to the true outcome</b>. The rule to determine your payment is
    designed such that the chances of receiving bonus payment (100 ECU) is highest if <b>you give us your most accurate prediction</b>.
</p>

<div class="row">
  <div class="column-1">
    <button type="button" style="margin-top: 10px" class="btn btn-success btn-block">Top 10 <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 in the top 10 is:</span>&nbsp&nbsp<span id="demo1" style="font-size: 18px;"> 0%</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 class="column-1">
    <button type="button" style="margin-top: 10px;" class="btn btn-success btn-block" >Rank 11-20 <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 11-20 is:</span>&nbsp&nbsp<span id="demo2" style="font-size: 18px;"> 0%</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;" class="btn btn-success">Rank 21-30 <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 21-30 is:</span>&nbsp&nbsp<span id="demo3" style="font-size: 18px;"> 0%</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;" class="btn btn-success">Rank 31-40  <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 31-40 is:</span>&nbsp&nbsp<span id="demo4" style="font-size: 18px;"> 0%</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;" class="btn btn-success">Rank 41-51 <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 41-50 is:</span>&nbsp&nbsp<span id="demo5" style="font-size: 18px;"> 0%</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>

<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';
      });
      $('input[name=bef_rel_2]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
      });
      $('input[name=bef_rel_3]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
      });
      $('input[name=bef_rel_4]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
      });
      $('input[name=bef_rel_5]').on('input', function() {
        sum();
        document.getElementById('Checked').style.display = 'none';
      });
      $("#Confirm").click(function() {
        checksum();
      });
    });
</script>
<br>
<div class="block">
    <div id="sum" style="display:none; 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:none;">
        <p>
            Please confirm your decision by clicking the "Confirm my decision" button.
        </p>
    </div>
</div>
<br>
<!--<div class="block">-->
<!--    <div id="CheckSum" style="display:none;">-->
<!--        <p>-->
<!--            The probabilities must add up to 100%!-->
<!--        </p>-->
<!--    </div>-->
<!--</div>-->

<div class="center">
    <button id="Confirm" type="button" class="btn btn-success" style="display:none;">Confirm my decision</button>
</div>
    <span id="CheckSum" style="margin: 0px 30% 0px 32%; display:none; color: red; margin-top: 10px; font-size: 20px;">The likelihood must add up to 100%!</span>
<div class="block">
    <div id="Checked" style="display:none;">
        <p>
            Please click "Next" to proceed.
        </p>
        <br>
        <br>
        <button id="Next" style="display:block;" class="btn btn-primary">Next</button>
    </div>
</div>




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

{{ endblock }}