{% 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 %}
	<h5> En una escala del 0 al 100, ¿cuán cercana(o) te sientes a la <b>población indigena</b>? </h5>

	<style>
	.table1 {
	  border-collapse: collapse;
	  width: 90%;
	}

	.table1 td {
	  padding: 5px;
	  text-align: left;
	  border-bottom: 2px solid #DDD;
	}

	.table1 th {
	  padding: 5px;
	  text-align: right;
	  border-bottom: 2px solid #DDD;
	}

	.table1 tr:hover {background-color: #E0E9EA;}
	</style>
	</head>

	<table class="table1" >
	  <colgroup>
	    <col span="1" style="width: 5%;">
	    <col span="1" style="width: 8%;">
	    <col span="1" style="width: 87%;">
	  </colgroup>
	  <tr>
	    <th>  0 </td>
	    <td> significa: </td>
	    <td><em>Nada cercano.</em></td>
	  </tr>
	  <tr>
	    <th>  50  </th>
	    <td> significa: </td>
	    <td><em>Neutral.</em></td>
	  </tr>
	  <tr>
	    <th> 100 </th>
	    <td> significa: </td>
	    <td><em>Muy cercano.</em></td>
	  </tr>
	</table>

	<h7> Toca la barra negra para asignar un puntaje </h7>

	<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("warm_other_5").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="warm_other_5" name="warm_other_5" 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 %}