{{ block title }}
{{ if player.round_number > Constants.practice_round }}本番{{ else }}練習{{ endif }}({{ round_number }})
{{ endblock }}
{{ block content }}

<p id="news" style="color: green"></p>


<p>和を計算してください。</p>
<p>問題(<span id="question_num"></span>)</p>
<p><div id="formula"></div><input type="number" id="q_response"></p>

<button type="button" onclick="sendAnalyze()" id="btn-offer">次へ-></button>
<div id="warning"></div>

<script>
    // ライブページの実行メソッドから値を受け取った時の処理
    let f_items = [];
    function liveRecv(data) {
        console.log(data)
        // javascript destructuring assignment
        let {num_of_responses} = data;

        let keyStr = "";
        for (let i = 0; i < 6; i++) {
            var a = Math.floor( Math.random() * 4);
            f_items.push(a);
            keyStr += a.toPrecision(3) + (i < 5 ? " + " : " = ");
        }
        document.getElementById("formula").innerHTML = keyStr;
        document.getElementById('question_num').innerText = num_of_responses + 1;
        // document.getElementById('q_code').innerText = q_codes[num_of_responses];
    }

    // 次へボタンを押した時に__init__にあるライブページのメソッドを実行
    function sendAnalyze() {
        if (document.getElementById('q_response').value == "") {
            document.getElementById("warning").innerHTML = "[注意]解答を入力しないと先に進めません";
            return;
        }
        else {
            document.getElementById("warning").innerHTML = "";
        }
        liveSend({'q_formula': f_items,
                  'q_response': document.getElementById('q_response').value});
        f_items = [];
        document.getElementById('q_response').value = "";
    }

    window.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

</script>

{{ endblock }}