{{ 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>
<table class="table">
    <tr>
        <th>問題番号</th>
        <th>暗号</th>
        <th>解読結果</th>
    </tr>
    <tr>
        <td><div id="question_num"></div></td>
        <td><div id="q_code"></div></td>
        <td><input type="text" id="q_response"><button type="button" onclick="sendAnalyze()" id="btn-offer">次へ-></button></td>
    </tr>
</table>
<div id="warning"></div>
<div id="key"></div>

<script>
    let key = js_vars.key;
    let q_codes = js_vars.q_codes;

    // テーブル作成
    let keyStr = "<table border='2'>";
    keyStr += "<tr><td colspan='2'>解読キー</td></tr>";
    for (let e in key) {
        keyStr += "<tr style='text-align: center;'><td>" + e + "</td><td>" + key[e] + "</td></tr>";
    }
    document.getElementById("key").innerHTML = keyStr;
    keyStr += "</table>";
    // テーブル作成(ここまで)

    // ライブページの実行メソッドから値を受け取った時の処理
    function liveRecv(data) {
        console.log(data)
        // javascript destructuring assignment
        let {num_of_responses} = data;
        document.getElementById('q_code').innerText = q_codes[num_of_responses];
        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_code': document.getElementById('q_code').value, 
                  'q_response': document.getElementById('q_response').value});
        document.getElementById('q_response').value = "";
    }

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

</script>

{{ endblock }}