小学生でもできる！どうぶつタッチクイズの作り方【ChatGPTでアプリづくり】

小学生でもできる！どうぶつタッチクイズの作り方【ChatGPTでアプリづくり】
まずはChatGPTにお願いしよう！
メモ帳にペタッとするだけ！
ChatGPTが作ったプログラム（コピーして使ってね）
このゲームのいいところ
もっとすごくするアイデア！
まとめ

小学生でもできる！どうぶつタッチクイズの作り方【ChatGPTでアプリづくり】

こんにちは！
今回は、**ぞうはどれ？ねこはどれ？**と絵文字で答える楽しい「どうぶつタッチクイズ」を、ChatGPTといっしょに作る方法を紹介します。
パソコンとメモ帳だけで作れるよ！

完成するとこんなアプリになります→どうぶつタッチクイズ

まずはChatGPTにお願いしよう！

ChatGPTに下のようにお願いしてみよう👇

「どうぶつの名前がひらがなで出てきて、4つの絵文字からえらぶクイズをHTMLで作ってください。
正解なら◯、まちがいなら✕を出して、10問で1セットにしてさいごに点数と評価を出してください。リセットボタンもつけてください。」

すると…
ChatGPTが**HTMLプログラム（ゲームの中身）**を作ってくれます！

メモ帳にペタッとするだけ！

パソコンでメモ帳を開く
ChatGPTが出してくれたコードをぜんぶコピーして、メモ帳に**ペースト（貼りつけ）**します
名前を「emoji_quiz.html」として保存します
保存するときに、「ファイルの種類」を「すべてのファイル」にしてね
保存したファイルをダブルクリックすると…ゲームスタート！

ChatGPTが作ったプログラム（コピーして使ってね）

👇このコードをまるごとコピーしてメモ帳に貼って保存しよう！
（長いけど、ぜんぶ必要だよ）

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>どうぶつタッチクイズ</title>
<style>
body { text-align: center; font-family: sans-serif; font-size: 24px; }
.animal-btn {
font-size: 40px;
margin: 10px;
padding: 20px 30px;
cursor: pointer;
}
#result {
font-size: 48px;
margin-top: 20px;
}
#score {
margin-top: 20px;
font-size: 28px;
}
#resetBtn {
margin-top: 30px;
padding: 10px 20px;
font-size: 20px;
display: none;
}
</style>
</head>
<body>

<h1>どうぶつタッチクイズ</h1>
<p id=”question”>…</p>

<div id=”result”></div>
<div id=”score”></div>
<button id=”resetBtn” onclick=”resetGame()”>もういちど</button>

let correctAnimal = {};
let questionCount = 0;
let correctCount = 0;

function shuffle(array) {
return array.sort(() => Math.random() – 0.5);
}

function showEvaluation(score) {
if (score === 10) return ‘パーフェクト！すごい！’;
if (score >= 7) return ‘とてもよくできました！’;
if (score >= 4) return ‘がんばったね！’;
return ‘つぎはもっとがんばろう！’;
}

const shuffled = shuffle([…animals]);
correctAnimal = shuffled[0];
const options = shuffle(shuffled.slice(0, 4));

document.getElementById(‘question’).textContent = correctAnimal.name + ‘ はどれ？’;
const choicesDiv = document.getElementById(‘choices’);
choicesDiv.innerHTML = ”;

options.forEach(animal => {
const btn = document.createElement(‘button’);
btn.className = ‘animal-btn’;
btn.textContent = animal.emoji;
btn.onclick = () => checkAnswer(animal);
choicesDiv.appendChild(btn);
});

document.getElementById(‘result’).textContent = ”;
document.getElementById(‘score’).textContent = `もんだい：${questionCount + 1} / 10`;
}

function resetGame() {
questionCount = 0;
correctCount = 0;
document.getElementById(‘score’).textContent = ”;
document.getElementById(‘resetBtn’).style.display = ‘none’;
nextQuestion();
}

nextQuestion();
</script>

</body>
</html>