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

{{ block scripts }}

<script>
    var dPrevNumber=99;
    var iSelectedNums =-1;
    var lSelected = ['NA','NA'];
    var lBtns,Ans1,Ans2;
    const dOutcome  = js_vars.dOutcome;
    const sOp       = js_vars.sOp

    document.addEventListener("DOMContentLoaded", ()=> { 
        lBtns = document.getElementsByClassName('math-btn');
        Ans1 = document.getElementById('dAns1');
        Ans2 = document.getElementById('dAns2');
        DifAns = document.getElementById('op-dif');
    })

    function reviewAnswer(elem) {
        iSelectedNums +=1;
        if (iSelectedNums>=2) { 
            iSelectedNums=0
            document.getElementById('op-1').innerHTML = ' '
            lSelected[1] = 'NA'
            for (let i=0;i<lBtns.length;i++) {
                lBtns[i].style.backgroundColor = 'rgb(190,190,190)';
            }
        }
        lSelected[iSelectedNums] = parseFloat(elem.value);
        sID = 'op-'+iSelectedNums;
        document.getElementById(sID).innerHTML = elem.value
        elem.style.backgroundColor = 'rgb(105,105,105)';
    }
    function checkAnswer() {
        if (lSelected[1]!='NA') {
            if (sOp=='+') {
                val =  (lSelected[0] + lSelected[1]);
            } else if (sOp=='-') {
                val =  (lSelected[0] - lSelected[1]);
            } else if (sOp=='div') {
                val =  (lSelected[0] / lSelected[1]);
            } else if (sOp=='tim') {
                val =  (lSelected[0] * lSelected[1]);
            } 
            DifAns.innerHTML = '('+Math.round(val*10)/10+')'
        }
    }

    function confirmAnswer() {
        if (lSelected[1]!='NA') {
            Ans1.value = lSelected[0];
            Ans2.value = lSelected[1];
            endTrial();
        }
    }

</script>
{{ endblock }}

{{ block styles }}
<style>
    /* Math Game Settings */
    .math-inst {
        flex-direction: column;
        padding: 5vh;
    }

    .math-op {
        flex-direction: row;
    }

    .op-box {
        width: 10vh;
        height: 10vh;
        font-size: 2em;
    }

    .op-number {
        background-color: rgb(190,190,190);
    }

    .math-table {
        flex-direction: column;        
    }
    .math-row {
        flex-direction: row;
    }

    .math-btn {
        width: 10vh;
        height: 10vh;
        background-color: rgb(190,190,190);
    }

    #op-dif {
        color: red;
    }

</style>
{{ endblock }}


{{ block game }}
<div class="flex-center math-inst">
    <p class="flex-center math-txt"> Find the closest numbers that: </p>
    <div class="flex-center math-op"> 
        <div class="flex-center op-box op-number" id="op-0">   </div>
        <div class="flex-center op-box"> {{ sOperator }} </div> 
        <div class="flex-center op-box op-number" id="op-1">   </div>
        <div class="flex-center op-box"> &thickapprox; </div>
        <div class="flex-center op-box"> {{ dOutcome }} </div> 
        <div class="flex-center op-box" id="op-dif">   </div> 
    </div>
</div>
<div class="flex-center math-table" > 
    {{ for row in lContent }}
        <div class="flex-center math-row"> 
            {{ for cell in row }}
                <button type="button" class="flex-center math-btn" onclick="reviewAnswer(this)" value="{{ cell }}">
                    {{ cell }}
                </button>
            {{ endfor }}
        </div>
    {{ endfor }}
</div>
<div class="flex-center math-row"> 
    <button type="button" class="continue-btn" onclick="checkAnswer()"> Check </button>
    <button type="button" class="continue-btn" onclick="confirmAnswer()"> Confirm </button>
</div>

<input type="hidden" id="dAns1" name="dAns1">
<input type="hidden" id="dAns2" name="dAns2">

{{ endblock }}