<!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>
