{{ block title }}
    任務
{{ endblock }}
{{ block content }}

<style>
.hidden-area{
    display: none;
}

    .box{
        width: 100%;
        height: 3rem;
        margin-bottom: 1rem;
        border: 1px solid black;
    }
    
    .press{
        margin-bottom: 1rem;
    }
    
    .button{
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
        font-style: italic;
        min-width: 3%;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    .input{
        font-size: 2rem;
        font-style: italic;
        text-align: center;
        line-height: 100%;
        flex-basis: 5%;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    .img{
        /* display: flex;
        align-items: center;
        flex-basis: 5%;
        margin: 0; */

        font-size: 2rem;
        font-style: italic;
        text-align: center;
        line-height: 100%;
        flex-basis: 5%;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    img{
        width: 100%;
        height: auto;
        
    }
    
    .complete{
        color: red;
        margin: 2rem 0 1rem 0;
        display: none;
    }
.error{
    display: none;
}

    </style>
    

    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
      </script>
      <script type="text/javascript"
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
      </script>
      
        <p>
            您需要在以下的畫面中，辨識並輸入希臘字母。<br>
            注意：您需要有 80% 以上的正確率，該題才算完成。
        </p>
    
        <p>
            目前已完成的題數：<em id="number"></em>
        </p>
    
        <div class="box d-flex justify-content-around">
            <div class="img" id="img1"></div>
            <div class="img" id="img2"></div>
            <div class="img" id="img3"></div>
            <div class="img" id="img4"></div>
            <div class="img" id="img5" style="border-right: 1px black dashed;"></div>
            <div class="img" id="img6"></div>
            <div class="img" id="img7"></div>
            <div class="img" id="img8"></div>
            <div class="img" id="img9"></div>
            <div class="img" id="img10" style="border-right: 1px black dashed;"></div>
            <div class="img" id="img11"></div>
            <div class="img" id="img12"></div>
            <div class="img" id="img13"></div>
            <div class="img" id="img14"></div>
            <div class="img" id="img15" style="border-right: 1px black dashed;"></div>
            <div class="img" id="img16"></div>
            <div class="img" id="img17"></div>
            <div class="img" id="img18"></div>
            <div class="img" id="img19"></div>
            <div class="img" id="img20" style="border-right: 1px black dashed;"></div>
            <div class="img" id="img21"></div>
            <div class="img" id="img22"></div>
            <div class="img" id="img23"></div>
            <div class="img" id="img24"></div>
            <div class="img" id="img25" style="border-right: 1px black dashed;"></div>
            <div class="img" id="img26"></div>
            <div class="img" id="img27"></div>
            <div class="img" id="img28"></div>
            <div class="img" id="img29"></div>
            <div class="img" id="img30" style="border-right: 1px black dashed;"></div>
    
            <div class="img" id="img31"></div>
            <div class="img" id="img32"></div>
            <div class="img" id="img33"></div>
            <div class="img" id="img34"></div>
            <div class="img" id="img35"></div>
        </div>
    
        <div class="box d-flex justify-content-between">
            <div class="input" id="input1"></div>
            <div class="input" id="input2"></div>
            <div class="input" id="input3"></div>
            <div class="input" id="input4"></div>
            <div class="input" id="input5" style="border-right: 1px black dashed;"></div>
            <div class="input" id="input6"></div>
            <div class="input" id="input7"></div>
            <div class="input" id="input8"></div>
            <div class="input" id="input9"></div>
            <div class="input" id="input10" style="border-right: 1px black dashed;"></div>
            <div class="input" id="input11"></div>
            <div class="input" id="input12"></div>
            <div class="input" id="input13"></div>
            <div class="input" id="input14"></div>
            <div class="input" id="input15" style="border-right: 1px black dashed;"></div>
            <div class="input" id="input16"></div>
            <div class="input" id="input17"></div>
            <div class="input" id="input18"></div>
            <div class="input" id="input19"></div>
            <div class="input" id="input20" style="border-right: 1px black dashed;"></div>
            <div class="input" id="input21"></div>
            <div class="input" id="input22"></div>
            <div class="input" id="input23"></div>
            <div class="input" id="input24"></div>
            <div class="input" id="input25" style="border-right: 1px black dashed;"></div>
            <div class="input" id="input26"></div>
            <div class="input" id="input27"></div>
            <div class="input" id="input28"></div>
            <div class="input" id="input29"></div>
            <div class="input" id="input30" style="border-right: 1px black dashed;"></div>
            <div class="input" id="input31"></div>
            <div class="input" id="input32"></div>
            <div class="input" id="input33"></div>
            <div class="input" id="input34"></div>
            <div class="input" id="input35"></div>
        </div>
        
        <div class="press d-flex justify-content-around">
            <div class="alphabet">
                <button type="button" class="button" onclick="insert(this)" value="1">&alpha;</button>
                <button type="button" class="button" onclick="insert(this)" value="2">&beta;</button>
                <button type="button" class="button" onclick="insert(this)" value="3">&chi;</button>
                <button type="button" class="button" onclick="insert(this)" value="4">&delta;</button>
                <button type="button" class="button" onclick="insert(this)" value="5">&epsilon;</button>
                <button type="button" class="button" onclick="insert(this)" value="6">&phi;</button>
                <button type="button" class="button" onclick="insert(this)" value="7">&gamma;</button>
                <button type="button" class="button" onclick="insert(this)" value="8">&eta;</button>
                <button type="button" class="button" onclick="insert(this)" value="9">&iota;</button>
                <button type="button" class="button" onclick="insert(this)" value="10">.</button>
            </div>
    
            <button type="button" class="button" onclick="insert(this)" value="11">&larr;</button>
            <button type="button" class="button" onclick="insert(this)" value="12" style="width: 5rem;font-size: 1rem;" id="submit">送出</button>
        </div>
        <div class="otree-form-errors alert alert-danger error">
            正確率未達 80 %。
        </div>
        <div class="complete">
            <h5>
                您已完成今天的題數，請點擊下一頁以繼續
            </h5>
            <button class="otree-btn-next btn btn-primary">下一頁</button>
        </div>



<script type="text/javascript">
    var start_time = Date.now()
    var duration = 0 
    
    // 讀取空格
    for(i=1;i<=35;i++){
        eval('img_' + String(i) + '= document.getElementById(\'img' + String(i) + '\')')
        eval('input_' + String(i) + '= document.getElementById(\'input' + String(i) + '\')')
    }
    
    var greek_list = ['&alpha;', '&beta;', '&chi;', '&delta;', '&epsilon;', '&phi;', '&gamma;', '&eta;', '&iota;', '.']
    var greek_img = ['{{ static "Effort/alpha.jpg" }}', '{{ static "Effort/beta.jpg" }}', '{{ static "Effort/chi.jpg" }}', '{{ static "Effort/delta.jpg" }}', '{{ static "Effort/epsilon.jpg" }}', '{{ static "Effort/phi.jpg" }}', '{{ static "Effort/gamma.jpg" }}', '{{ static "Effort/eta.jpg" }}', '{{ static "Effort/iota.jpg" }}', '{{ static "Effort/cdot.jpg" }}']
    
    //產生min到max之間的亂數
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    };
    
    // 產生第一題
    var question_number = [];
    
    var question = []
    var answer = []
    
    for(i=1;i<=35;i++){
        question_number.push(getRandom(0,9));
        // eval('img_' + String(i) + '.innerHTML =' + "\"<img src='" + String(greek_img[question_number[i-1]]) + "\'>\"")
        eval('img_' + String(i) + '.innerHTML =' + "\'" + greek_list[question_number[i-1]] + "\'")
        question.push(greek_list[question_number[i-1]])
    };
    
    // 點擊按鈕
    var count = 1
    var complete = {{ player.effort }}
    var time_list = ['{{ player.effort_time }}']
    var correct_list = ['{{ player.effort_correct }}']
    var grade_list = ['{{ player.effort_grade }}']
    document.getElementById('number').innerHTML = String(complete)+'/'+ '(10+' +  {{ target }} + ')'
    
    if (complete == 10 + {{target}}){
        $('.complete').show()
        document.getElementById('submit').disabled=true;
    }
    
    function insert(this_button){
        if (this_button.value <= 10){
            eval('input_' + String(count) + '.innerHTML =' + "\'" + greek_list[this_button.value-1] + "\'")
            answer.push(greek_list[this_button.value-1])
            count = count + 1
        } else if (this_button.value == 11){
            eval('input_' + String(count-1) + '.innerHTML =' + '\"\"')
            answer.pop()
            count = count - 1
        } else if (this_button.value == 12){
            //核對成績
            var grade = 0
            var correct = 0
            for(i=1;i<=35;i++){
                if (answer[i-1] == question[i-1]) {
                    grade = grade + 1
                }
            }
            if (grade >= 28){
                complete = complete + 1 
                correct = correct + 1
            } else{
                $('.error').show()
                $('.error').delay(3000).hide(0)
            }

            duration = (Date.now() - start_time) / 1000;
            time_list.push(duration.toFixed(2));
            correct_list.push(correct)
            grade_list.push(grade)
            liveSend({'effort': complete, 'effort_time': String(time_list), 'effort_correct': String(correct_list), 'effort_grade': String(grade_list)});
            start_time = Date.now();
    
            // 更新題數
            document.getElementById('number').innerHTML = String(complete)+'/'+ '(10+' +  {{ target }} + ')'
    
            // 若達到題數
            if (complete == 10 + {{ target }}){
                $('.complete').show()
                document.getElementById('submit').disabled=true;
            }
    
            // 清除所有
            question_number = [];
            question = []
            answer = []
            count = 1
            
            for(i=1;i<=35;i++){
                // 清除所有
                eval('img_' + String(i) + '.innerHTML =' + '\"\"')
                eval('input_' + String(i) + '.innerHTML =' + '\"\"')
            
                // 生成新題目
                question_number.push(getRandom(0,9));
                // eval('img_' + String(i) + '.innerHTML =' + "\"<img src='" + String(greek_img[question_number[i-1]]) + "\'>\"")
                eval('img_' + String(i) + '.innerHTML =' + "\'" + greek_list[question_number[i-1]] + "\'")
                question.push(greek_list[question_number[i-1]])
            }
        }
    
    }
    
    function reloadTimesInHTML() {
            // 同步/更新，讓這兩個 html span 照 js 的這兩個變數來顯示
            $('#effort').html(complete);
    }
</script>


    
    {{ endblock }}