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

{{ block content }}

<br/>
<p style="line-height:1.75"><strong>Practice Round | Transcription Task-Hard</strong></p>
<p style="line-height:1.75"><strong>Assignment 2</strong></p>
<p>Image to be transcribed</p>
<p align="center"><img src="{{ static 'Transcription_H_Practice2.jpg' }}" width="300px"/></p>
<br/>

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

<script>
   document.getElementById("alpha").addEventListener("click", () =>{
      var elem = document.getElementById('StageII_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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_hard2_answer');
      var pos = getInputSelection(elem).start;
      if (elem.value.length < 8) {
        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 setBack() {
   var elem = document.getElementById('StageII_hard2_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/>

<div align="center">    {{ next_button }} </div>

{{ endblock }}