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

{{ block title }}

<style>
img {
  width: 100%;
}
</style>

<img src={{static 'logos.png' }} alt="HTML5 Icon">

{{ endblock }}





{% block content %}
    <h7> Toca la barra negra para asignar un puntaje </h7>
	<h6> En una escala del 0 al 100, ¿Cuán comodo te sientes teniendo vecinos <b>que apoyan un partido político distinto al tuyo</b>? </h6>

	<script>
		var slider_min = 0; // Adjust this
		var slider_max = 100; // Adjust this
		var slider_step = 1; // Adjust this

		var oldval = "";

		function showVal1(what) {
			showFloat(document.getElementById("cval1"), what, 2);
			document.getElementById("confort_2").value = what;

			oldval = what;
		}

		function show_slider(event) {
			max = parseInt(getComputedStyle(document.getElementById("before")).width.replace("px", ""));
			cur = event.offsetX;

			now = (cur/max)*(slider_max-slider_min) + slider_min;
			now = Math.round(now/slider_step)*slider_step;

			document.getElementById("before").style.display = "none";
			document.getElementById("price_slider").style.display = "block";
			document.getElementById("show_price").style.color = "#000";

			showVal1(now);
			document.getElementById("price_slider").value = now;
		}

		function showFloat(el, val, dec = 2) {
			if (isNaN(val)) {
				el.innerHTML = "???";
			}
			else {
				// el.innerHTML = parseFloat(val).toFixed(dec).replace('.', ','); // enable this if the language of your experiment is German
				el.innerHTML = parseFloat(val).toFixed(dec);
			}
		}
	</script>
	
	<style>
		#dec1 input {
			min-height: 50px;
		}
		#dec1 {
			margin-top: 40px;
			margin-bottom: 40px;
		}
		#price_slider {
			display: none;
		}
		.input-group-text {
			padding: 20px;
		}
		.slidertd {
			width: 100%;
		}
		#show_price {
			color: #fff;
		}
		#before {
			display: block;
			height: 16px;
			width: 100%;
			background: #000000;
		}
	</style>
	

		
	<table id="dec1" border="0">
		<tr>
			<td><span class="input-group-text" id="slidermin"></span></td>
			<td width="90%">
				<div id="before" onclick="show_slider(event)"></div>
				<input type="range" name="price_slider" id="price_slider" value="0" class="slidertd" class="form-range" oninput="showVal1(this.value)" onchange="showVal1(this.value)">
			</td>
			<td><span class="input-group-text" id="slidermax"></span></td>
		</tr>
		<tr>
			<td id="show_price" colspan="3" style="text-align: center"><i>El puntaje elejido es</i>: <b><span id="cval1"></span></b></td>
		</tr>
	</table>

	<input type="hidden" id="confort_2" name="confort_2" value="" />
	
	<script>
		$(document).ready(function (event) {
			document.getElementById("price_slider").min = slider_min;
			document.getElementById("price_slider").max = slider_max;
			document.getElementById("price_slider").step = slider_step;
			
			showFloat(document.getElementById("slidermin"), slider_min);
			showFloat(document.getElementById("slidermax"), slider_max);
		});
	</script>


	{% next_button %}

{% endblock %}