{{ extends 'global/Page.html' }}
{{ block title }}Exit Survey{{ endblock }}

{{ block content }}

<style>
div.absolute1 {
  position: absolute;
  top: 150px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute1">   
  <p style="font-size:30px;">1) Please Answer the Following Three Questions on 7-Point Likert Scale (1: strongly disagree - 4: neutral - 7: strongly agree)</p>
    <br>
</div> 

<style>
datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 500px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 500px;
  margin: 0;
}

input[type=range] {
  -webkit-appearance: none;
  border-radius: 14px;
  height: 24px;
  border: 1px solid #bdc3c7;
  background-color: gray; 
 
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	background-color: #ecf0f1;
	border: 1px solid #bdc3c7;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	cursor: pointer;
}
	 
}
</style>





    
{{ if C.NUM_ROUNDS_DB2PLS1 > player.id_in_group }}                                          
<style>
div.absolute11 {
  position: absolute;
  top: 300px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute11">   
  <label for="q11"><p style="font-size:25px;">a. In section 2 it took more effort to search for the correct item from the list than in section 1.</p></label>
    <br>
    <input type="range" id="q11" class="slider" min="1" max="7" step="1" list="tickmarks">
    <datalist id="tickmarks">
      <option value="1" label="1: Strongly Disgree"></option>
      <option value="2" label="2: Disagree"></option>
      <option value="3" label="3:Somewhat Disagree"></option>
      <option value="4" label="4: Netural"></option>
      <option value="5" label="5: Somewhat Agree"></option>
      <option value="6" label="6: Agree"></option>
      <option value="7" label="7: Strongly Agree"></option>  
    </datalist><span id="demodd11"></span>
  <br>
</div>  

<style>
div.absolute12 {
  position: absolute;
  top: 600px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute12">   
  <label for="q12"><p style="font-size:25px;">b. Overall, section 2 was more complex than section 1.</p></label>
    <br>
    <input type="range" id="q12" class="slider" min="1" max="7" step="1" list="tickmarks">
    <datalist id="tickmarks">
      <option value="1" label="1: Strongly Disgree"></option>
      <option value="2" label="2: Disagree"></option>
      <option value="3" label="3:Somewhat Disagree"></option>
      <option value="4" label="4: Netural"></option>
      <option value="5" label="5: Somewhat Agree"></option>
      <option value="6" label="6: Agree"></option>
      <option value="7" label="7: Strongly Agree"></option>  
    </datalist><span id="demodd12"></span>
  <br>
</div>  

<style>
div.absolute13 {
  position: absolute;
  top: 900px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute13">   
  <label for="q13"><p style="font-size:25px;">c. Section 2 was less mentally demanding than section 1.</p></label>
    <br>
    <input type="range" id="q13" class="slider" min="1" max="7" step="1" list="tickmarks">
    <datalist id="tickmarks">
      <option value="1" label="1: Strongly Disgree"></option>
      <option value="2" label="2: Disagree"></option>
      <option value="3" label="3:Somewhat Disagree"></option>
      <option value="4" label="4: Netural"></option>
      <option value="5" label="5: Somewhat Agree"></option>
      <option value="6" label="6: Agree"></option>
      <option value="7" label="7: Strongly Agree"></option>  
    </datalist><span id="demodd13"></span>
  <br>
</div>
{{ endif }}



{{ if player.id_in_group >= C.NUM_ROUNDS_DB2PLS1 }} 
<style>
div.absolute11 {
  position: absolute;
  top: 300px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute11">   
  <label for="q11"><p style="font-size:25px;">a. In section 1 it took more effort to search for the correct item from the list than in section 2.</p></label>
    <br>
    <input type="range" id="q11" class="slider" min="1" max="7" step="1" list="tickmarks">
    <datalist id="tickmarks">
      <option value="1" label="1: Strongly Disgree"></option>
      <option value="2" label="2: Disagree"></option>
      <option value="3" label="3:Somewhat Disagree"></option>
      <option value="4" label="4: Netural"></option>
      <option value="5" label="5: Somewhat Agree"></option>
      <option value="6" label="6: Agree"></option>
      <option value="7" label="7: Strongly Agree"></option>  
    </datalist><span id="demodd11"></span>
  <br>
</div>  

<style>
div.absolute12 {
  position: absolute;
  top: 600px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute12">   
  <label for="q12"><p style="font-size:25px;">b. Overall, section 1 was more complex than section 2.</p></label>
    <br>
    <input type="range" id="q12" class="slider" min="1" max="7" step="1" list="tickmarks">
    <datalist id="tickmarks">
      <option value="1" label="1: Strongly Disgree"></option>
      <option value="2" label="2: Disagree"></option>
      <option value="3" label="3:Somewhat Disagree"></option>
      <option value="4" label="4: Netural"></option>
      <option value="5" label="5: Somewhat Agree"></option>
      <option value="6" label="6: Agree"></option>
      <option value="7" label="7: Strongly Agree"></option>  
    </datalist><span id="demodd12"></span>
  <br>
</div>  

<style>
div.absolute13 {
  position: absolute;
  top: 900px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute13">   
  <label for="q13"><p style="font-size:25px;">c. Section 1 was less mentally demanding than section 2.</p></label>
    <br>
    <input type="range" id="q13" class="slider" min="1" max="7" step="1" list="tickmarks">
    <datalist id="tickmarks">
      <option value="1" label="1: Strongly Disgree"></option>
      <option value="2" label="2: Disagree"></option>
      <option value="3" label="3:Somewhat Disagree"></option>
      <option value="4" label="4: Netural"></option>
      <option value="5" label="5: Somewhat Agree"></option>
      <option value="6" label="6: Agree"></option>
      <option value="7" label="7: Strongly Agree"></option>  
    </datalist><span id="demodd13"></span>
  <br>
</div>
{{ endif }}

    
    
    
    
    
<style>
div.absolute2 {
  position: absolute;
  top: 1200px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute2">   
  <p style="font-size:30px;">2) Your Age</p>
    <br>
</div> 

<style>
div.absolute21 {
  position: absolute;
  top: 1280px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute21">  
	<form action="/action_page.php">
  		<input type="number" id="q2" name="fage" style="font-size:20px" size="5">
	</form><span id="demodd2"></span>
    <br>
</div>




<style>
div.absolute3 {
  position: absolute;
  top: 1350px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute3">   
  <label for="q3"><p style="font-size:30px;">3) Your Gender</p></label>
    <br>
  <select id="q3" style="font-size:20px;">
    <option value="0"></option>
    <option value="1">Male</option>
    <option value="2">Female</option>
    <option value="3">Other</option>
    <option value="4">Prefer not to say</option>
  </select>
  <span id="demodd3"></span>
  <br>
</div>






<style>
div.absolute4 {
  position: absolute;
  top: 1500px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute4">   
  <label for="q4"><p style="font-size:30px;">4) Your Education</p></label>
    <br>
  <select id="q4" style="font-size:20px;">
    <option value="0"></option>
    <option value="1">Primary</option>
    <option value="2">Secondary</option>
    <option value="3">Bachelors/Associate</option>
    <option value="4">Masters</option>
    <option value="4">Doctor</option>
  </select>
  <span id="demodd4"></span>
  <br>
</div>



<style>
div.absolute5 {
  position: absolute;
  top: 1650px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolute5">   
  <label for="q5"><p style="font-size:30px;">5) Your Input Device</p></label>
    <br>
  <select id="q5" style="font-size:20px;">
    <option value="0"></option>
    <option value="1">Cell phone</option>
    <option value="2">Tablet</option>
    <option value="3">Laptop</option>
    <option value="4">Desktop</option>
    <option value="4">Other</option>
  </select>
  <span id="demodd5"></span>
  <br>
</div>

<style>
div.absolutesbmt {
  position: absolute;
  top: 1850px;
  left: 50px;
  height: 2000px;
}
</style>
<div class="absolutesbmt">
  <button onclick="valuesend()" style="font-size:30px;">Submit</button> 
  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>
</div>   
    
    
    
    
    
<script> 
// Required Effort q11
var dd = document.getElementById("q11");
var outputdd = document.getElementById("demodd11");
outputdd.innerHTML = dd.value;
document.getElementById("demodd11").style.display= 'none';
var strUser11 = "0";
    
dd.oninput = function() {
  outputdd.innerHTML = this.value;
  window.strUser11 = this.value;
}
// Required Effort q12
var dd = document.getElementById("q12");
var outputdd = document.getElementById("demodd12");
outputdd.innerHTML = dd.value;
document.getElementById("demodd12").style.display= 'none';
var strUser12 = "0";
    
dd.oninput = function() {
  outputdd.innerHTML = this.value;
  window.strUser12 = this.value;
}
// Required Effort q13
var dd = document.getElementById("q13");
var outputdd = document.getElementById("demodd13");
outputdd.innerHTML = dd.value;
document.getElementById("demodd13").style.display= 'none';
var strUser13 = "0";
    
dd.oninput = function() {
  outputdd.innerHTML = this.value;
  window.strUser13 = this.value;
}

// Your Age
var dd = document.getElementById("q2");
var outputdd = document.getElementById("demodd2");
outputdd.innerHTML = dd.value;
document.getElementById("demodd2").style.display= 'none';
var strUser2 = 0;
    
dd.oninput = function() {
  outputdd.innerHTML = this.value;
  window.strUser2 = this.value;
}    
    
// Your Gender
var dd = document.getElementById("q3");
var outputdd = document.getElementById("demodd3");
outputdd.innerHTML = dd.value;
document.getElementById("demodd3").style.display= 'none';
var strUser3 = "0";
    
dd.oninput = function() {
  outputdd.innerHTML = this.value;
  window.strUser3 = this.value;
}
    
// Your Education
var dd = document.getElementById("q4");
var outputdd = document.getElementById("demodd4");
outputdd.innerHTML = dd.value;
document.getElementById("demodd4").style.display= 'none';
var strUser4 = "0";
    
dd.oninput = function() {
  outputdd.innerHTML = this.value;
  window.strUser4 = this.value;
}    
    
    
// Your Input Device
var dd = document.getElementById("q5");
var outputdd = document.getElementById("demodd5");
outputdd.innerHTML = dd.value;
document.getElementById("demodd5").style.display= 'none';
var strUser5 = "0";
    
dd.oninput = function() {
  outputdd.innerHTML = this.value;
  window.strUser5 = this.value;
}    
    

    
function valuesend() {
liveSend({'esq11_var': strUser11, 'esq12_var': strUser12, 'esq13_var': strUser13, 'esq2_var': strUser2, 'esq3_var': strUser3, 'esq4_var': strUser4, 'esq5_var': strUser5});
}    
    
    
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

{{ endblock }}