{{ block title }}
{{ endblock }}

{{ block content }}
<p style="line-height:1.75; margin-top:20px;"><strong>Stage 4 - Round 1 | Task 1</strong></p>
<p style="line-height:1.75; margin-bottom:25px;">Piece rate: 1 ECU per letter &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Bonus: 10 ECU for a fully correct transcription</p>

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

<p style="line-height:1.75">Enter your transcription here</p>
<div style="padding-left:40%">
    <input name="StageIV_easy9_answer" id="StageIV_easy9_answer" maxlength = "6">
    </div>
<br/>
    <div style="padding-left:20%">
        <button type="button" id="delta"><img src="{{ static 'delta_letter.png' }}" width="30px"></button>
        <button type="button" id="eta"><img src="{{ static 'eta_letter.png' }}" width="30px"></button>
        <button type="button" id="chi"><img src="{{ static 'chi_letter.png' }}" width="30px"></button>
        <button type="button" id="dot"><img src="{{ static 'dot_letter.png' }}" width="30px"></button>
        <button type="button" id="beta"><img src="{{ static 'beta_letter.png' }}" width="30px"></button>
        <button type="button" id="alpha"><img src="{{ static 'alpha_letter.png' }}" width="30px"></button>
        <button type="button" id="epsilon"><img src="{{ static 'epsilon_letter.png' }}" width="30px"></button>
        <button type="button" id="iota"><img src="{{ static 'iota_letter.png' }}" width="30px"></button>
        <button type="button" id="gama"><img src="{{ static 'gama_letter.png' }}" width="30px"></button>
        <button type="button" id="fai"><img src="{{ static 'fai_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_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('StageIV_easy9_answer');
    foo.focus();
    foo.setSelectionRange(foo.value.length, foo.value.length);
    inputLen = document.getElementById('StageIV_easy9_answer').value.length;
    }

    function setBack() {
        var elem = document.getElementById('StageIV_easy9_answer');
        var pos = getInputSelection(elem).start;

        if (pos > 0) {
            elem.value = elem.value.substring(0, pos - 1) + elem.value.substring(pos);
            elem.setSelectionRange(pos - 1, pos - 1);
            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/>

<p>Note that if you make a mistake, you can click on the
    <button type="button"><img src="{{ static 'back.png' }}" width="20px"></button> button to correct it</p>
<br/>

<p style="margin-bottom:25px;">To submit the transcription and continue with the next image, please click on the “Next” button</p>

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

{{ endblock }}