{{ extends 'global/Page.html' }}
{{ block title }}Task 2{{ endblock }}

{{ block content }}

<p>
    Now, you will choose which of the two types of analysts will make the one-month-ahead price predictions for all 20 stocks. <b>Note that you can only choose once and the analyst will make the predictions for all 20 stocks, and your payment depends on your choice of analyst.</b>
    The more the number of accurate predictions made by your chosen analyst, the higher your payment will be.
    <p>
    As a reminder, we define an accurate prediction as follows: <b>an analyst makes an accurate prediction if it is within $10 of the actual price in one month’s time; for example, let’s say the actual price ends up being $123, then any prediction in the range [$113, $133] is considered to be an accurate prediction. </b>
</p>

<p class="text-center">
    <button type="button" id="show-instructions" class="btn btn-primary">
        Click to see the reminder of the instruction
    </button>
</p>
<div id="instructions-reminder">
     {{ include C.INSTRUCTIONS_TEMPLATE }}
     <p class="text-end">
         <button type="button" id="close-instructions" class="btn btn-secondary">
             Close
         </button>
    </p>
</div>
<br>
<b>Which option do you choose?</b>
{{ formfields }}

<p class="text-center">
  <button class="btn btn-secondary">
                Confirm 
          </button>
</div> 

<p id='warning' style="font-size: 12px; text-align: center">
    <em>
        Once you press the confirm button, you cannot go back. Think carefully before you make a decision.<br>
        Please raise your hand if anything is unclear.
    </em>
</p>

{{ endblock }}

{{ block scripts }}
<script>
window.onload = () => {
  	const showIntructions = document.getElementById('show-instructions');
  	const instructions = document.getElementById('instructions-reminder');
  	let shown = false;
  	showIntructions.addEventListener('click', function (e) {
      	if (!shown) {
          	shown = true;
        	instructions.style.display = 'block';
          	showIntructions.classList.add("btn-secondary");
          	showIntructions.innerHTML = 'Hide Instructions';
        } else {
          	shown=false;
          	instructions.style.display = 'none';
          	showIntructions.classList.remove("btn-secondary");
          	showIntructions.innerHTML = 'Show Instructions';
        }
      	
      	showIntructions.blur();
    })
  
  	document.getElementById('close-instructions').addEventListener('click', function (e) {
      	shown=false;
      	instructions.style.display = 'none';
      	showIntructions.classList.remove("btn-secondary");
      	showIntructions.innerHTML = 'Show Instructions';
    })
  
  	const warning = document.getElementById('warning');	
  	$('input[name="choice"]').on('change', function() {
      	warning.style.display = 'block';
    })
}
</script>
{{ endblock }}