Touch Typing - K's Atelier

JavaScriptでタイピングの練習。
制限時間とかいろいろ追加したいけど，今はとりあえずここまで。
<!DOCTYPE html>
<html>

<head>
    <title>Touch Typing Training</title>
    <meta charset="UTF-8">
    <style>
        pre {
            margin: 0em 0;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>level:</td>
            <td>
                <pre id="level"></pre>
            </td>
        </tr>

        <tr>
            <td>problem:</td>
            <td>
                <pre id="problem"></pre>
            </td>
        </tr>
        <tr>
            <td>type:</td>
            <td>
                <pre id="reply"></pre>
            </td>
        </tr>
        <tr>
            <td>answer:</td>
            <td>
                <pre id="answer"></pre>
            </td>
        </tr>
    </table>
    <script>
        let keys = "fjdksla;ghvmc,x.z/bnrueiwoqpty4738291056";
        let level = 2;

        window.onload = function () {
            print_level(level);
            create_problem(level);
        }

        function print_level(lvl) {
            let level_div = document.getElementById("level");
            level_div.innerHTML = lvl;
        }

        function create_problem(lvl) {
            let prob = "";
            for (i = 0; i < 8; i++) {
                for (j = 0; j < 5; j++) {
                    let idx = Math.floor(Math.random() * lvl);
                    prob = prob + keys[idx];
                }
                prob = prob + " ";
            }
            prob = prob.trim();
            let problem = document.getElementById("problem");
            problem.innerHTML = prob;

        }

        function push_Keydown(event) {
            let key = event.key;
            if (key == "Control") { return; }
            let prob = document.getElementById("problem");
            let rep = document.getElementById("reply");
            let prob_str = prob.innerHTML;
            let rep_str = rep.innerHTML;
            if (key == "Enter" || rep_str.length >= prob_str.length) {
                update_level();
                print_level(level);
                create_problem(level);
                clear_reply();
                clear_answer();
            } else {
                let prob = document.getElementById("problem");
                let rep = document.getElementById("reply");
                let ans = document.getElementById("answer");
                let prob_str = prob.innerHTML;
                let rep_str = rep.innerHTML;
                let ans_str = ans.innerHTML;
                rep_str = rep_str + key;
                rep.innerHTML = rep_str;
                if (prob_str.charAt(rep_str.length - 1) == key) {
                    ans.innerHTML = ans_str + " ";
                } else {
                    ans.innerHTML = ans_str + prob_str.charAt(rep_str.length - 1);
                }

            }
        }

        function clear_reply() {
            let rep = document.getElementById("reply");
            rep.innerHTML = "";
        }

        function clear_answer() {
            let ans = document.getElementById("answer");
            ans.innerHTML = "";
        }

        function update_level() {
            let prob = document.getElementById("problem");
            let rep = document.getElementById("reply");
            let prob_str = prob.innerHTML;
            let rep_str = rep.innerHTML;
            let c = 0;
            for (i = 0; i < prob_str.length; i++) {
                if (prob_str.charAt(i) != rep_str.charAt(i)) {
                    c++;
                }
            }
            if (c > 3) {
                level--;
            } else {
                level++;
            }

            if (level < 2) { level = 2; }
        }

        window.addEventListener("keydown", push_Keydown);
    </script>

</body>

</html>