どうぶつの絵文字でクイズを作ろう！

AI・プログラミング

こんにちは！今日は、どうぶつの絵文字を使った簡単なクイズアプリを作る方法を紹介するよ！メモ帳だけで簡単にできるから、初心者でも楽しくプログラミングができるよ。さっそくやってみよう！

用意するもの

  • パソコン

  • メモ帳（Windowsの「メモ帳」やMacの「テキストエディット」など）

  • インターネットにつながった環境（ChatGPTを使うため）

プログラムを作る方法

  1. ChatGPTにプロンプトを送ろう！ まず、ChatGPTに「動物の絵文字を使ったクイズを作りたい」と伝えてみよう。こんな風にお願いしてみてね：

    「動物の絵文字を使って、選択肢で答えるクイズを作りたい。10問作って、最後に点数を出して、正解の動物の名前も表示してほしい。」

  2. ChatGPTからもらったプログラムをコピーしよう！ ChatGPTがくれるコードをそのままコピーして、自分のパソコンに貼り付けよう。次のステップで貼り付ける場所を説明するよ。

  3. メモ帳にプログラムを貼り付けよう！

    • メモ帳を開く

    • ChatGPTからもらったコードを全部コピーしてメモ帳に貼り付ける

    • ファイルを「emoji_quiz.html」などの名前で保存する（拡張子は「.html」にしてね）

  4. ブラウザで開こう！ ファイルを保存したら、そのファイルをダブルクリックして開いてみて！ブラウザでクイズが始まるよ。動物の絵文字が表示されるから、どれが正解かを選んでね！

プログラムの内容

このプログラムでは、動物の絵文字を使った選択問題を作成しているよ。10問の問題に答えた後に、正解数を表示して、ほめことばが出るようになっているんだ。

 どうぶつの絵文字でクイズ

プログラムのコード

以下が実際に使ったプログラムのコードだよ。これをメモ帳にコピーして保存しよう！

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>えもじで どうぶつクイズ</title>
<style>
body { font-family: sans-serif; background: #f0f8ff; padding: 20px; text-align: center; }
.quiz-box { background: #ffffff; border-radius: 10px; padding: 20px; max-width: 600px; margin: auto; box-shadow: 2px 2px 8px #ccc; }
.question { font-size: 24px; margin-bottom: 20px; }
.options button { font-size: 24px; margin: 10px; padding: 10px 20px; border-radius: 10px; cursor: pointer; }
.result { margin-top: 20px; font-size: 20px; }
</style>
</head>
<body>
<div class="quiz-box">
<div id="quiz-area">
<div class="question" id="question"></div>
<div class="options" id="options"></div>
<div id="feedback" class="result"></div>
</div>
<div id="result-area" class="result" style="display:none;"></div>
</div>

<script>
const questions = [
{
hint: "バナナがすきで きのうえに のぼるよ",
answer: "🐵",
choices: ["🐶", "🐵", "🐘"],
correctName: "さる"
},
{
hint: "すいすい およぐよ。ヒレがある",
answer: "🐟",
choices: ["🐟", "🦓", "🐰"],
correctName: "さかな"
},
{
hint: "みみが ながい。にんじんがすき",
answer: "🐰",
choices: ["🐭", "🐸", "🐰"],
correctName: "うさぎ"
},
{
hint: "ジャングルの おうさま！がおー！",
answer: "🦁",
choices: ["🦁", "🐮", "🐱"],
correctName: "らいおん"
},
{
hint: "しろくて さむいくににすんでる",
answer: "🐻‍❄️",
choices: ["🐼", "🐻‍❄️", "🐯"],
correctName: "しろくま"
},
{
hint: "くびが ながいよ。みどりがすき",
answer: "🦒",
choices: ["🦒", "🦓", "🦘"],
correctName: "きりん"
},
{
hint: "しましまの もようがあるよ",
answer: "🦓",
choices: ["🦓", "🐷", "🐧"],
correctName: "しまうま"
},
{
hint: "そらを とべる どうぶつ",
answer: "🐦",
choices: ["🐍", "🐦", "🐌"],
correctName: "とり"
},
{
hint: "おおきくて くろい どうぶつ。おおきな はなもってる",
answer: "🐘",
choices: ["🐘", "🐅", "🦏"],
correctName: "ぞう"
},
{
hint: "にほんの さる。ちいさくて かしこいよ",
answer: "🐵",
choices: ["🐵", "🐔", "🦍"],
correctName: "にほんざる"
}
];

let current = 0;
let score = 0;

function showQuestion() {
const q = questions[current];
document.getElementById('question').textContent = `もんだい ${current + 1}: ${q.hint}`;
const optionsDiv = document.getElementById('options');
optionsDiv.innerHTML = '';
document.getElementById('feedback').textContent = '';

q.choices.forEach(animal => {
const btn = document.createElement('button');
btn.textContent = animal;
btn.onclick = () => submitAnswer(animal);
optionsDiv.appendChild(btn);
});
}

function submitAnswer(choice) {
const correct = questions[current].answer;
const correctName = questions[current].correctName;
if (choice === correct) {
score++;
document.getElementById('feedback').textContent = `⭕️ せいかい！すごい！(正解: ${correctName})`;
} else {
document.getElementById('feedback').textContent = `❌ ざんねん！せいかいは ${correct} (${correctName}) だよ。`;
}
current++;
if (current < questions.length) {
setTimeout(showQuestion, 1500);
} else {
setTimeout(showResult, 2000);
}
}

function showResult() {
document.getElementById('quiz-area').style.display = "none";
const resultDiv = document.getElementById('result-area');
let comment = "";

if (score === 10) {
comment = "🌟 ぜんぶせいかい！すごすぎ！";
} else if (score >= 7) {
comment = "👍 とっても よくできたね！";
} else if (score >= 4) {
comment = "🙂 がんばったね！つぎはもっと とけるよ！";
} else {
comment = "😅 つぎはもっと がんばってみよう！";
}

resultDiv.innerHTML = `けっかは ${score}てん / 10てん でした。<br>${comment}`;
resultDiv.style.display = "block";
}

showQuestion();
</script>
</body>
</html>

まとめ

このように、プログラムをちょっとした編集で自分だけのクイズにできるんだ！もし自分で問題を追加したいときは、問題の「hint」や「choices」を変えてみよう！
プログラミングを学ぶと、もっといろんなアプリやゲームが作れるようになるよ。楽しんでね！🐾

コメント

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