{{ block title }}
<div align="center"> Stage II</div>
{{ endblock }}

{{ block content }}

<br/>
<p style="line-height:1.75"><strong>Task 1</strong></p>
<p style="line-height:1.75"><strong>Assignment X</strong></p>
<p>Image to be transcribed</p>
<p align="center"><img src="{{ static 'Example_1.jpg' }}" width="220px"/></p>
<br/>

<p style="line-height:1.75">Enter your transcription here</p>
<div style="padding-left:40%">
    <input name="StageII_easy1_answer" id="StageII_easy1_answer">
    </div>
<br/>
    <div style="padding-left:20%">
        <button type="button" id="dot"><img src="{{ static 'dot_letter.png' }}" width="30px"></button>
        <button type="button" id="alpha"><img src="{{ static 'alpha_letter.png' }}" width="30px"></button>
        <button type="button" id="eta"><img src="{{ static 'eta_letter.png' }}" width="30px"></button>
        <button type="button" id="gama"><img src="{{ static 'gama_letter.png' }}" width="30px"></button>
        <button type="button" id="iota"><img src="{{ static 'iota_letter.png' }}" width="30px"></button>
        <button type="button" id="beta"><img src="{{ static 'beta_letter.png' }}" width="30px"></button>
        <button type="button" id="delta"><img src="{{ static 'delta_letter.png' }}" width="30px"></button>
        <button type="button" id="fai"><img src="{{ static 'fai_letter.png' }}" width="30px"></button>
        <button type="button" id="chi"><img src="{{ static 'chi_letter.png' }}" width="30px"></button>
        <button type="button" id="epsilon"><img src="{{ static 'epsilon_letter.png' }}" width="30px"></button>
        <button type="button" id="back" onclick="setBack()"><img src="{{ static 'back.png' }}" width="30px"></button>
        </div>

<script>
   document.getElementById("alpha").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "α" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("beta").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "β" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("gama").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "γ" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("eta").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "η" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("delta").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "δ" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("fai").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "φ" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("chi").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "χ" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("epsilon").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "ε" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("iota").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "ι" + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

   document.getElementById("dot").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_easy1_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 6) {
        elem.value = elem.value.substring(0, pos) + "." + elem.value.substring(pos);
        elem.setSelectionRange(elem.value.length, pos+1);
        elem.focus();
    } else {
        //set warning, the user tried to add a number past the limit
    }
   });

    function focus() {
    var foo = document.getElementById('StageII_easy1_answer');
    foo.focus();
    foo.setSelectionRange(foo.value.length, foo.value.length);
    inputLen = document.getElementById('StageII_easy1_answer').value.length;
    }

   function setBack() {
   var elem = document.getElementById('StageII_easy1_answer');
   var pos = getInputSelection(elem).start;
   elem.value = elem.value.substring(0, pos-!!(elem.value.length-pos-1)) + elem.value.substring(pos)
   elem.setSelectionRange(elem.value.length, pos-!!(elem.value.length-pos));
   elem.focus();
   }

   function getInputSelection(el) {
    var start = 0,
    end = 0,
    normalizedValue, range,
    textInputRange, len, endRange;
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
    start = el.selectionStart;
    end = el.selectionEnd;
    } else {
    range = document.selection.createRange();
    if (range && range.parentElement() == el) {
      len = el.value.length;
      normalizedValue = el.value.replace(/\r\n/g, "\n");
      textInputRange = el.createTextRange();
      textInputRange.moveToBookmark(range.getBookmark());
      endRange = el.createTextRange();
      endRange.collapse(false);
      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
        start = end = len;
      } else {
        start = -textInputRange.moveStart("character", -len);
        start += normalizedValue.slice(0, start).split("\n").length - 1;
        if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
          end = len;
        } else {
          end = -textInputRange.moveEnd("character", -len);
          end += normalizedValue.slice(0, end).split("\n").length - 1;
        }
      }
    }
    }
    return {
    start: start,
    end: end
    };
    }
</script>

<br/>
<br/>


<p>Note that if you make a mistake, you can click on the backwards button to correct it</p>
<br/>

<p>To submit the transcription and continue with the next image, please click on the “Next” button</p>
<br/>

<input type="hidden" name="timeSpent_easy1" id="timeSpent_easy1"/>
<div align="center">    {{ next_button }} </div>

<script>
//This bit creates 2 variables, one will function as a timer, the other will hold the timer output. They are set to 0 and -1 here to initialise them, these will not be the final outputs.
var pageTimeElapsed = 0;
var pageTimerID = -1;

//This function captures the timer output. When the timer starts it will increase 'pageTimeElapsed' every second and send this value to the 'timeSpent' variable that will be saved
//When a person moves to the next page, or the page times out, the final value that the timer was on will be saved. The value resets each round/page.
function pageTick() {
  pageTimeElapsed++
  document.getElementById("timeSpent_easy1").value = pageTimeElapsed;
}

//This function automatically starts the timer when the page loads. In this case I want seconds so the interval is set to 1000, but I believe if you set it to 1 then it will count milliseconds - you will need to test this
window.onload = function() {
  if(pageTimerID == -1){
    pageTimerID = setInterval(pageTick, 1000);
  }
};
</script>


{{ endblock }}