{{ extends 'global/Page.html' }}
{{ block title }}Part 2.3{{ endblock }}

{{ block content }}

{{ if player.firefox }}
    {{ include C.MOZSTYLE_TEMPLATE }}
{{ else }}
  {{ include C.WEBKITSTYLE_TEMPLATE }}
{{ endif }}

{{ include C.SLIDERSTYLE_TEMPLATE }}


<div style="float: left; width: 50%">

 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 1.0: </td>
			
			<td>
	
                <input 
       type="number" 
       name="slider_one" 
       value="None"
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_one" 
       vertical-align="middle"
                     >
	
		</tr>

     
     <tr>   
         
    
       
</tr>
     
     
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_one"><br></span></td>
		</tr>
	</table>


<input type="hidden" id="one" name="one" value="0" />
    


 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 1.3: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_onethree" 
       value="None" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_onethree" >
                
	
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_onethree"><br></span> </td>
		</tr>
	</table>


<input type="hidden" id="onethree" name="onethree" value="0" />
    
    
    

    
    
    
  
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 1.7: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_oneseven" 
       value="None" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_oneseven" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"> <span id="feedback_oneseven"><br></span> </td>
		</tr>
	</table>




<input type="hidden" id="oneseven" name="oneseven" value="0" />


    
    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 2.0: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_two" 
       value="None"
       style="width:300px"
       min="0" max="100" 
       id="id_slider_two" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_two"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="two" name="two" value="0" />

    
    
    
    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 2.3: </td>
			
			<td>
	
                <input 
       type="number" 
       name="slider_twothree" 
       value="None"  
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_twothree" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_twothree"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="twothree" name="twothree" value="0" />

    
    
    
    
    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 2.7: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_twoseven" 
       value="None" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_twoseven" 
       >
                
		
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_twoseven"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="twoseven" name="twoseven" value="0" />
    
    
    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 3.0: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_three" 
       value="None" 

       style="width:300px" 
       min="0" max="100" 
       id="id_slider_three" 
       >
                
	
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_three"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="three" name="three" value="0" />
    
    
    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 3.3: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_threethree" 
       value="None" 

       style="width:300px" 
       min="0" max="100" 
       id="id_slider_threethree" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_threethree"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="threethree" name="threethree" value="0" />   
    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 3.7: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_threeseven" 
       value="None" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_threeseven" 
       >
                
		
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_threeseven"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="threeseven" name="threeseven" value="0" />    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 4.0: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_four" 
       value="None" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_four" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_four"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="four" name="four" value="0" />    
    
   
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 4.3: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_fourthree" 
       value="None" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_fourthree" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_fourthree"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="fourthree" name="fourthree" value="0" />    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 4.7: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_fourseven" 
       value="None" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_fourseven" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_fourseven"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="fourseven" name="fourseven" value="0" />     
    
    
    
    
    
    
    
    
 <table class="dec1" border="0">
		<tr>
            <td class="grade"> 5.0: </td>
			
			<td width=10px>
	
                <input 
       type="number" 
       name="slider_five" 
       value="None" 
       step="1" 
       style="width:300px" 
       min="0" max="100" 
       id="id_slider_five" 
       >
                
			
		</tr>
		<tr>
			<td class="feedback" colspan="4"><span id="feedback_five"><br></span> </td>
		</tr>
	</table>


    
<input type="hidden" id="five" name="five" value="0" />    
 


</div>
    
{% formfield_errors 'one' %}
{% formfield_errors 'onethree' %}
{% formfield_errors 'oneseven' %}
{% formfield_errors 'two' %}
{% formfield_errors 'twothree' %}
{% formfield_errors 'twoseven' %}
{% formfield_errors 'three' %}
{% formfield_errors 'threethree' %}
{% formfield_errors 'threeseven' %}
{% formfield_errors 'four' %}
{% formfield_errors 'fourthree' %}
{% formfield_errors 'fourseven' %}
{% formfield_errors 'five' %}
{% formfield_errors 'Sum' %}
{% formfield_errors 'rest' %}




<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div style="float: right; width: 50%">
    
  
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>    
    
    
    <table>
    <tr>
    <td >
        Percentage points already distributed:
    </td>
    <td > 
        <input  class= "Sum" id="Sum" name="Sum" value="0" type="number" />   
       
        
      
        
    </td>
    <tr><td>
       
            Percentage points you still need to distribute:</td>
            <td>
                <input  class= "Sum" id="rest" name="rest" value="100" />
                
        </td>
         </tr>
    
    <tr>
    <td>
       
            Your expected grade based on your guesses is:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
                
                <input  class= "Sum" id="grade" name="grade" value="" />
                
                
               
  
        </td></tr>
   
    </table>

<br>

    
    
    
    
    

{{formfield 'Confirmation'}}
{{ next_button }}
</div>

<script> 

    
    
    
    
    
</script>






<style>
.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 1000px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

    .plus{
        color: #555;
    }

    
</style>

{{ endblock }}

{{ block scripts }}
<script>
var new_data=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];


    
$(document).ready(function () {
     
       $('input[name=slider_one]').on('input change', function () {
           $('input[name=slider_one]').addClass('myclass');
       });
    $('input[name=slider_one]').on('input', function() {
        document.getElementById("feedback_one").innerHTML = $(this).val();
        $('#check_slider_one').val(1);
      document.getElementById("one").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[0]=parseInt(new_var);

          createBarchart(new_data);
      	  sum(new_data);
    });
   }); 



$(document).ready(function () {
       $('input[name=slider_onethree]').on('input change', function () {
           $('input[name=slider_onethree]').addClass('myclass');
       });
    $('input[name=slider_onethree]').on('input', function() {
        document.getElementById("feedback_onethree").innerHTML = $(this).val();
        $('#check_slider_onethree').val(1);
      document.getElementById("onethree").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[1]=parseInt(new_var);
          
          
          createBarchart(new_data);
      	  sum(new_data);


    });
   });   


$(document).ready(function () {
       $('input[name=slider_oneseven]').on('input change', function () {
           $('input[name=slider_oneseven]').addClass('myclass');
       });
    $('input[name=slider_oneseven]').on('input', function() {
        document.getElementById("feedback_oneseven").innerHTML = $(this).val();
        $('#check_slider_oneseven').val(1);
      document.getElementById("oneseven").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[2]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);


    });
   });  


$(document).ready(function () {
        $('input[name=slider_two]').on('input change', function () {
            $('input[name=slider_two]').addClass('myclass');
        });
    	$('input[name=slider_two]').on('input', function() {
        	document.getElementById("feedback_two").innerHTML = $(this).val();
        	$('#check_slider_two').val(1);
          document.getElementById("two").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[3]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    });  


$(document).ready(function () {
        $('input[name=slider_twothree]').on('input change', function () {
            $('input[name=slider_twothree]').addClass('myclass');
        });
    	$('input[name=slider_twothree]').on('input', function() {
        	document.getElementById("feedback_twothree").innerHTML = $(this).val();
        	$('#check_slider_twothree').val(1);
          document.getElementById("twothree").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[4]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    }); 
        
        
        
$(document).ready(function () {
        $('input[name=slider_twoseven]').on('input change', function () {
            $('input[name=slider_twoseven]').addClass('myclass');
        });
    	$('input[name=slider_twoseven]').on('input', function() {
        	document.getElementById("feedback_twoseven").innerHTML = $(this).val();
        	$('#check_slider_twoseven').val(1);
          document.getElementById("twoseven").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[5]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    }); 
        
        
        
$(document).ready(function () {
        $('input[name=slider_three]').on('input change', function () {
            $('input[name=slider_three]').addClass('myclass');
        });
    	$('input[name=slider_three]').on('input', function() {
        	document.getElementById("feedback_three").innerHTML = $(this).val();
        	$('#check_slider_three').val(1);
          document.getElementById("three").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[6]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    }); 
 
        
$(document).ready(function () {
        $('input[name=slider_threethree]').on('input change', function () {
            $('input[name=slider_threethree]').addClass('myclass');
        });
    	$('input[name=slider_threethree]').on('input', function() {
        	document.getElementById("feedback_threethree").innerHTML = $(this).val();
        	$('#check_slider_threethree').val(1);
          document.getElementById("threethree").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[7]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    });         
        
        
$(document).ready(function () {
        $('input[name=slider_threeseven]').on('input change', function () {
            $('input[name=slider_threeseven]').addClass('myclass');
        });
    	$('input[name=slider_threeseven]').on('input', function() {
        	document.getElementById("feedback_threeseven").innerHTML = $(this).val();
        	$('#check_slider_threeseven').val(1);
          document.getElementById("threeseven").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[8]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    }); 
        
        
$(document).ready(function () {
        $('input[name=slider_four]').on('input change', function () {
            $('input[name=slider_four]').addClass('myclass');
        });
    	$('input[name=slider_four]').on('input', function() {
        	document.getElementById("feedback_four").innerHTML = $(this).val();
        	$('#check_slider_four').val(1);
          document.getElementById("four").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[9]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    });  

$(document).ready(function () {
        $('input[name=slider_fourthree]').on('input change', function () {
            $('input[name=slider_fourthree]').addClass('myclass');
        });
    	$('input[name=slider_fourthree]').on('input', function() {
        	document.getElementById("feedback_fourthree").innerHTML = $(this).val();
        	$('#check_slider_fourthree').val(1);
          document.getElementById("fourthree").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[10]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    });  


$(document).ready(function () {
        $('input[name=slider_fourseven]').on('input change', function () {
            $('input[name=slider_fourseven]').addClass('myclass');
        });
    	$('input[name=slider_fourseven]').on('input', function() {
        	document.getElementById("feedback_fourseven").innerHTML = $(this).val();
        	$('#check_slider_fourseven').val(1);
          document.getElementById("fourseven").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[11]=parseInt(new_var);
          
          
          createBarchart(new_data);
          sum(new_data);

    	});
    });  

        
        
$(document).ready(function () {
        $('input[name=slider_five]').on('input change', function () {
            $('input[name=slider_five]').addClass('myclass');
        });
    	$('input[name=slider_five]').on('input', function() {
        	document.getElementById("feedback_five").innerHTML = $(this).val();
        	$('#check_slider_five').val(1);
          document.getElementById("five").value=$(this).val();
          var new_var = $(this).val();
          
          new_data[12]=parseInt(new_var);
          
          console.log('new_data '+new_data.length);
          createBarchart(new_data);
		  sum(new_data);
    	});
    });  
        






    function sum(params){
      var summe=0
      for (let i = 0; i < params.length; i++) {
  		summe += params[i]
		}
	  console.log('params '+params.length);
      if (Number.isNaN(summe)) {
        summe = 0;
  		console.log('Summe is NaN');
		}
      document.getElementById("Sum").value=summe;
      document.getElementById("rest").value=100-summe;
      var grade = (params[0]/100)*1+(params[1]/100)*1.3+(params[2]/100)*1.7+(params[3]/100)*2+(params[4]/100)*2.3+(params[5]/100)*2.7+(params[6]/100)*3+(params[7]/100)*3.3+(params[8]/100)*3.7+(params[9]/100)*4.0+(params[10]/100)*4.3+(params[11]/100)*4.7+(params[12]/100)*5 ;
   	  console.log('grade '+grade);
      grade = Math.round((grade + Number.EPSILON) * 100) / 100;
      if (Number.isNaN(grade)) {
        grade = null;
  		console.log('Number is NaN');
		}
      document.getElementById("grade").value=grade;
    }  
        
    function createBarchart(params){
        console.log('input' + params[0]);
        Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Your guesses about the probabilities of each grade'
    },
    subtitle: {
       
    },
    xAxis: {
        categories: [
            '1.0',
            '1.3',
            '1.7',
            '2.0',
            '2.3',
            '2.7',
            '3.0',
            '3.3',
            '3.7',
            '4.0',
            '4.3',
            '4.7',
            '5.0'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Probability in %'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Your guesses about the probabilities of each grade',
        data: params
    }]
   
});
        console.log('input2 ' + params[0]);  
    }    
</script>
{{ endblock }}