20X20掛け算ゲーム

12 X 12 =
答え：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>20X20掛け算ゲーム</title>
  </head>
  <body>
    <h1>20X20掛け算ゲーム</h1>
    <p id="question"></p>
    <label for="answer">答え：</label>
    <input type="text" id="answer" />
    <button id="check">入力</button>
    <p id="result"></p>
    <p id="time"></p>
    <script>
      // 20X20のランダムな掛け算を出題する関数
      function genQuestion() {
        var a = Math.floor(Math.random() * 20) + 1;  // 1〜20のランダムな数
        var b = Math.floor(Math.random() * 20) + 1;  // 1〜20のランダムな数
        return a + " X " + b + " = ";
      }

      var question = document.getElementById("question");
      var answer = document.getElementById("answer");
      var result = document.getElementById("result");
      var time = document.getElementById("time");
      var startTime, endTime;

      function startTimer() {
        setInterval(function() {
          var now = new Date().getTime();
          var elapsedTime = Math.floor((now - startTime)/1000);
          time.textContent = "経過時間：" + elapsedTime + "秒";
        }, 1000);
      }

      // 初期状態
      var questionText = genQuestion();
      question.textContent = questionText;
      answer.value = "";
      answer.focus();
      startTimer();
      startTime = new Date().getTime();

      // 入力ボタンが押された時の処理
      var checkButton = document.getElementById("check");
      checkButton.addEventListener("click", function() {
        var userAnswer = answer.value;
        if (userAnswer === "") {
          result.textContent = "何も入力されていません。";
        } else if (isNaN(userAnswer)) {
          result.textContent = "数字を入力してください。";
        } else {
          var correctAnswer = eval(questionText + userAnswer);
          if (correctAnswer == (eval(questionText))) {
            result.textContent = "正解！";
            endTime = new Date().getTime();
            var elapsedTime = Math.floor((endTime - startTime)/1000);
            questionText = genQuestion();
            question.textContent = questionText;
            answer.value = "";
            answer.focus();
            time.textContent = "経過時間：" + elapsedTime + "秒";
            startTime = new Date().getTime();
          } else {
            result.textContent = "不正解。";
          }
        }
      });
    </script>
  </body>
</html>