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

{% block title %}
Phase 2: Comprehension Question 2
{% endblock %}
{% block content %}

<style>

.timer {
  font-size: 17px;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}	

.otree-body {
  min-width:1200px
}

</style>

<div>
	<div class="timer">Time left to complete this question: <span id="timeSpent"></span></div>
	<br><br>
    <p><b>2.</b> Answer the following questions about the earnings from answering the number counting tasks. Your answer must be an integer.</p>
    <p><b>(a).</b> How many pence do you earn if your team answers one question correctly?</p>
    <div>Answer:
    <input type="text" id="quest2a" name="quest2a"></div>
    <br><br>
    <p><b>(b).</b> How many pence does each of the other two members of your team earn if your team answers one question correctly?</p>
    <div>Answer:
    <input type="text" id="quest2b" name="quest2b"></div><br>
    <p><b>(c).</b> How many pence does each person in the other teams earn if your team answers one question correctly?</p>
    <div>Answer:
    <input type="text" id="quest2c" name="quest2c"></div>
    <br><br>
    <p><b>(d).</b> What is the sum of earnings (in pence) obtained by today’s participants if your team answers one question correctly?</p>
    <div>Answer:
    <input type="text" id="quest2d" name="quest2d"></div><br>


    <div>Attempt: <span id="attemptNum"></span></div>
    <br>
    <b><p id="correctText"></p></b>
    <button type="button" id="submitAnswer" onclick="check_answer()">Submit</button>   
</div>

    <input type="hidden" name="page2_incorrect" id="page2_incorrect"/>
    <input type="hidden" name="page2_correct" id="page2_correct"/> 

<button class="otree-btn-next btn btn-primary" id="visBtn" style="visibility: hidden;">Next</button>
<br><br>
<button type="button" id="toggle_instructions" onClick="toggle_instructions()" class="instructionsButton">Instructions</button>

<iframe id="instructions" class="instructions" src="https://docs.google.com/presentation/d/e/2PACX-1vS1hp9tZF4RQILwd3PR7i-8chIKHQf1pgahEczPJ8QVe39ujML02dZiGoguBi158AU02-b70gjIutzZ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>      

<script>	

//Page Timer
var pageTimeElapsed = 40;
var pageTimerID = -1;

function pageTick() {
  if(pageTimeElapsed > 0) {
    pageTimeElapsed--  	
  } else {
    pageTimeElapsed = 0; 	  	
  }
  document.getElementById("timeSpent").innerHTML = pageTimeElapsed;
};

window.onload = function() { 
  if(pageTimerID == -1){
    pageTimerID = setInterval(pageTick, 1000);
  } 
};  

//Variables
var quest2a = -1;
var quest2b = -1;
var quest2c = -1;
var quest2d = -1;
var correct = 0;
var correctText = "";
var correctAns = "";
var incorrectCount = 0;
var attemptNum = 0;

//Buttons
var submitAnswer = document.getElementById("submitAnswer");

//Submit
function check_answer() {
  var quest2a = document.getElementById("quest2a").value;
  var quest2b = document.getElementById("quest2b").value;  
  var quest2c = document.getElementById("quest2c").value;
  var quest2d = document.getElementById("quest2d").value;  
  if (quest2a == 20 && quest2b == 20 && quest2c == 20 && quest2d == 180) {
    correct = 1;
    correctText = "Correct. Please click the 'Next' button to continue.";
    submitAnswer.style.display = "none";
    visBtn.style.visibility = "visible";
    document.getElementById("quest2a").readOnly=true;
    document.getElementById("quest2b").readOnly=true;
    document.getElementById("quest2c").readOnly=true;
    document.getElementById("quest2d").readOnly=true;
    document.getElementById("correctText").innerHTML = correctText;
  } else {
    correct = 0;
    incorrectCount++
    correctText = "At least one of your answers is incorrect. Please try again.";
  }  
  attemptNum++
  document.getElementById("attemptNum").innerHTML = attemptNum;
  document.getElementById("correctText").innerHTML = correctText;
  document.getElementById("page2_correct").value = correct; 
  document.getElementById("page2_incorrect").value = incorrectCount; 
};

</script>

{% endblock %}