クイズアプリを作ろう

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

HTMLファイルを作成しよう

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

💡 ヒント
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>
2

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

3問以上の問題を配列で作りましょう。各問題に質問文・選択肢・正解インデックスを持たせます。

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

参考: 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 },
];
3

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

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

💡 ヒント
現在の問題番号を変数で管理し、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>';
  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);
  });
}
4

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

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

💡 ヒント
クリックされた選択肢のインデックスとanswerを比較します
📝 模範解答を見る

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

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

結果表示を作ろう

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

💡 ヒント
スコアを表示し、全問正解ならお祝いメッセージを出します
📝 模範解答を見る

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

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

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

CSSでデザインを整えよう

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

💡 ヒント
カード風のデザイン、ボタンのホバー効果を追加します
📝 模範解答を見る

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

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; }
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら