{{ extends "global/GamePage.html" }} 

{{ block scripts }}

<script>
    var textArea, inputAns;
    const sResetText = js_vars.sResetText
    document.addEventListener("DOMContentLoaded",()=>{
        textArea = document.getElementById("text-area");
        inputAns = document.getElementById("sAns");
    })
    function confirmAnswer() {
        inputAns.value = textArea.value;
        endTrial();
    }

    function resetText() {
        textArea.value = sResetText;
    }

</script>
{{ endblock }}

{{ block styles }}
<style>
    /* Verbal Game Settings */
    #text-area{
        resize: none;
        overflow-y: scroll;
        overflow-x: hidden;
        overflow-wrap: break-word;
    }
</style>
{{ endblock }}

{{ block game }}
<div class="flex-center math-inst">
    <p class="flex-center"> Please correct any typos and double spacing in the text: </p>
</div>

<!-- <textarea name="text-area" id="text-area" cols="70" rows="20" spellcheck="false"> -->
<textarea name="text-area" id="text-area" cols="70" rows="20">
{{ text }}
</textarea>

<div class="flex-center math-row"> 
    <button type="button" class="continue-btn" onclick="resetText()"> Reset </button>
    <button type="button" class="continue-btn" onclick="confirmAnswer()"> Confirm </button>
</div>

 <input type="hidden" name="sAns" id="sAns"> 

{{ endblock }}