ChatGPTが作った「計算クイズアプリ」

AI・プログラミング
2025.04.25

今回は、**メモ帳だけで作れる「計算クイズアプリ」**を作ってみましょう！
足し算や引き算の問題がランダムに出て、正解するとメッセージが表示される、簡単なHTMLアプリです。

【完成イメージ】計算クイズアプリ

◆ ChatGPTに指示する

次のように入力します
「計算クイズアプリを作ってください」

◆ ChatGPTが作った「計算クイズアプリ」のコードはこちら！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>計算クイズ</title>
<style>
body {
font-family: "Arial", sans-serif;
text-align: center;
margin-top: 100px;
}
input {
font-size: 1.5em;
padding: 5px;
}
button {
font-size: 1.5em;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
#question {
font-size: 2em;
margin-bottom: 20px;
}
#result {
margin-top: 20px;
font-size: 1.5em;
color: #006400;
}
</style>
</head>
<body>
<h1>かんたん計算クイズ</h1>
<div id="question">問題を読み込み中...</div>
<input type="number" id="answer" placeholder="こたえを入力">
<br>
<button onclick="checkAnswer()">こたえる！</button>
<div id="result"></div><script>
let num1, num2, operator, correctAnswer;function generateQuestion() {
num1 = Math.floor(Math.random() * 10 + 1); // 1〜10
num2 = Math.floor(Math.random() * 10 + 1);
operator = Math.random() < 0.5 ? ‘+’ : ‘-‘;
correctAnswer = operator === ‘+’ ? num1 + num2 : num1 – num2;

document.getElementById(“question”).textContent = `${num1} ${operator} ${num2} = ?`;
document.getElementById(“result”).textContent = “”;
document.getElementById(“answer”).value = “”;
}

function checkAnswer() {
const userAnswer = Number(document.getElementById(“answer”).value);
const resultDiv = document.getElementById(“result”);

if (userAnswer === correctAnswer) {
resultDiv.textContent = “🎉 正解！おめでとう！”;
} else {
resultDiv.textContent = `😢 ざんねん！せいかいは「${correctAnswer}」でした`;
}

setTimeout(generateQuestion, 2000); // 2秒後に次の問題
}

window.onload = generateQuestion;
</script>
</body>
</html>

◆ 使い方

  1. メモ帳を開く

  2. 上のコードをコピー＆ペースト

  3. 「keisan.html」などの名前で保存

  4. 保存したファイルをダブルクリックするとすぐ使えます！

◆ ポイント

  • 問題は毎回ランダムに出題されます

  • 正解か不正解か、すぐに画面でフィードバック！

  • 2秒待つと次の問題に進みます（自動）

まとめ

簡単なアプリをいくつか作って、徐々にバージョンアップしていきましょう。

コメント

タイトルとURLをコピーしました