クイズアプリを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう

HTMLファイルを作成しよう

クイズの表示エリアと結果エリアを配置しましょう。

id="quiz-area" にJavaScriptで問題を動的に表示します。

id="result" は全問終了後のスコア表示用です。

最初は空の div だけ置いておきます。

<script> タグは </body> の直前に書きます。

HTMLの要素が読み込まれた後にJSが実行されるようにするためです。

ブラウザで開いて「🧠 クイズ」が表示されることを確認しましょう。

💡 ヒント

quiz.html, style.css, script.js の3ファイルを作ります

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クイズ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>🧠 クイズ</h1>
  <div id="quiz-area"></div>
  <div id="result"></div>
  <script src="script.js"></script>
</body>
</html>

問題データを配列で作ろう

3問以上の問題を配列で作りましょう。

各問題に質問文・選択肢・正解インデックスを持たせます。

オブジェクトの構造:

{ q: "質問", choices: ["A", "B", "C"], answer: 0 }

answer: 0 は choices[0]（最初の選択肢）が正解という意味です。

answer: 1 なら2番目、answer: 2 なら3番目が正解です。

確認: console.log(questions[0].q) で最初の問題文が表示されればOKです。

console.log(questions.length) で問題数が表示されることも確認しましょう。

問題を増やしたいときは、配列に同じ形式のオブジェクトを追加するだけです。

自分のオリジナル問題を作ってみましょう！好きなジャンル（アニメ、ゲーム、歴史など）で作ると楽しいです。

5問以上あると本格的なクイズアプリになります。

💡 ヒント

各問題をオブジェクトにして配列に入れます

参考: JS レッスン4: 繰り返し

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

const questions = [
  { q: "HTMLの正式名称は？", choices: ["Hyper Text Markup Language", "High Tech Modern Language", "Home Tool Markup Language"], answer: 0 },
  { q: "CSSの役割は？", choices: ["ページの構造を作る", "見た目をデザインする", "動きをつける"], answer: 1 },
  { q: "JavaScriptの役割は？", choices: ["見た目をデザインする", "ページの構造を作る", "動きをつける"], answer: 2 },
];

問題文を表示する関数を作ろう

まず問題文だけを表示する関数を作りましょう。

current 変数で「今何問目か」を管理します。

innerHTML で quiz-area の中身を書き換えて問題文を表示します。

この時点ではまだ選択肢ボタンは表示されません。次のステップで追加します。

innerHTML を使うと HTML タグを含む文字列をそのまま要素の中身にできます。

💡 ポイント: current + 1 で「Q1」「Q2」と問題番号を表示しています（配列は0始まりなので+1）。

💡 ヒント

現在の問題番号を変数で管理し、DOMに問題文を表示します

参考: JS レッスン6: DOM操作

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

let current = 0;
let score = 0;
const area = document.getElementById("quiz-area");

function showQuestion() {
  const q = questions[current];
  area.innerHTML = '<div class="question"><p><strong>Q' + (current+1) + '.</strong> ' + q.q + '</p></div>';
}

選択肢ボタンを動的に追加しよう

問題文の下に選択肢ボタンを動的に生成しましょう。

String.fromCharCode(65+i) で A, B, C のアルファベットを生成しています。

65はAの文字コードです。i=0→A, i=1→B, i=2→C となります。

各ボタンにクリックイベントを設定し、選んだ番号を checkAnswer に渡します。

createElement("button") で新しいボタン要素を作り、appendChild で追加します。

この方法を「DOM の動的生成」と呼びます。HTMLに直接書かず、JSで要素を作る方法です。

中間確認: 末尾に showQuestion(); を追加してブラウザで確認しましょう。

問題文と選択肢ボタンが表示されればOKです。

まだクリックしても何も起きません（checkAnswer は次のステップで作ります）。

forEach は配列の各要素に対して関数を実行するメソッドです。

引数の c は選択肢テキスト、i はインデックス（0, 1, 2...）です。

💡 ヒント

forEach で選択肢ごとにボタンを作成し、クリックイベントを設定します

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

// showQuestion 関数の中に追加:
q.choices.forEach(function(c, i) {
  const btn = document.createElement("button");
  btn.className = "btn";
  btn.textContent = String.fromCharCode(65+i) + ". " + c;
  btn.addEventListener("click", function() { checkAnswer(i); });
  area.querySelector(".question").appendChild(btn);
});

正解判定と次の問題への遷移を作ろう

正解なら score を増やし、全問終了したら結果を表示しましょう。

selected === questions[current].answer で正解かどうか判定します。

=== は厳密等価演算子です。型も値も一致するときだけ true になります。

current++ で次の問題に進み、全問終わったら showResult() を呼びます。

確認: 選択肢をクリックして正解/不正解のアラートが出ること、次の問題に進むことを確認しましょう。

💡 ヒント

クリックされた選択肢のインデックスとanswerを比較します

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

function checkAnswer(selected) {
  if (selected === questions[current].answer) {
    score++;
    alert("⭕ 正解！");
  } else {
    alert("❌ 不正解…");
  }
  current++;
  if (current < questions.length) {
    showQuestion();
  } else {
    showResult();
  }
}

結果表示を作ろう

全問終了後にスコアを表示しましょう。

最後の showQuestion() でアプリを起動します。

全問正解なら特別なメッセージを追加します。

確認: 全問答えた後にスコアが表示されればOKです。

全問正解で「🎉 全問正解！」が追加されることも確認しましょう。

area.innerHTML = "" で問題表示エリアを空にしてからスコアを表示します。

💡 ヒント

スコアを表示し、全問正解ならお祝いメッセージを出します

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

function showResult() {
  area.innerHTML = "";
  const result = document.getElementById("result");
  result.textContent = score + " / " + questions.length + " 問正解！";
  if (score === questions.length) {
    result.textContent += " 🎉 全問正解！";
  }
}

showQuestion(); // 最初の問題を表示

CSSでデザインを整えよう

CSSでカードデザインとボタンのホバー効果を追加して完成です！

.btn:hover でマウスを乗せたときの色を変えると、クリックできることが伝わります。

border-radius: 12px で角を丸くするとカード感が出ます。

max-width: 500px と margin: 40px auto でクイズを中央寄せにします。

発展課題:

・問題を5問以上に増やしてみよう

・正解時にボタンを緑、不正解時に赤にしてみよう

・「もう一度」ボタンを追加してリトライできるようにしよう

・正解の選択肢を表示してから次の問題に進むようにしよう

・問題をランダムな順番で出題してみよう（配列のシャッフル）

・タイマーをつけて制限時間内に答えるようにしよう

💡 ヒント

カード風のデザイン、ボタンのホバー効果を追加します

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

body { font-family: sans-serif; max-width: 500px; margin: 40px auto; padding: 0 16px; background: #f5f5f5; }
h1 { color: #0f766e; text-align: center; }
.question { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #ddd; }
.btn { display: block; width: 100%; padding: 12px; margin: 8px 0; border: 1.5px solid #ddd; border-radius: 8px; background: #fff; font-size: 15px; cursor: pointer; text-align: left; }
.btn:hover { border-color: #0f766e; background: #f0fdfa; }
#result { text-align: center; font-size: 20px; font-weight: bold; margin: 24px 0; }

📖 if文の詳しい解説で条件分岐をもっと学べます。

🎯

📚 使う技術を学ぶ

⚠️ つまずいたら

スタイルが反映されない — CSSファイルが読み込まれていない
画像が表示されない — 画像パスが間違っている
スマホで表示が小さい — viewport meta タグがない
エラーメッセージの読み方