JavaScript | 第6章「式と演算子」

JavaScript

2019.01.022025.10.13

演算子クイズ練習アプリ（HTML + JavaScript）

演算子クイズ練習アプリ（HTML + JavaScript）

ブラウザで動かせて、自動採点・スコア表示もできるシンプルな学習アプリです 🎮

目的

JavaScript の「式と演算子」を手を動かして理解するための 自動採点つき練習アプリ

完成イメージ

問題が 1 問ずつ表示される
回答を入力して「採点」ボタンを押すと正誤判定
正答数・スコアを表示
問題を次々に解ける

コード全体（HTML + JS）

コピーして「operators_quiz.html」として保存し、ブラウザで開けばOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 演算子クイズ</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f7fafc;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .quiz-box {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      width: 400px;
      text-align: center;
    }
    h1 {
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }
    .question {
      font-weight: bold;
      margin: 1rem 0;
    }
    input {
      padding: 0.5rem;
      width: 80%;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 1rem;
      text-align: center;
    }
    button {
      background: #3182ce;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
    }
    button:hover {
      background: #2b6cb0;
    }
    .result {
      margin-top: 1rem;
      font-size: 1.1rem;
    }
    .score {
      margin-top: 1rem;
      color: #2f855a;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="quiz-box">
    <h1>🎮 JavaScript 演算子クイズ</h1>
    <div class="question" id="question"></div>
    <input type="text" id="answer" placeholder="答えを入力">
    <br>
    <button id="submit">採点</button>
    <div class="result" id="result"></div>
    <div class="score" id="score"></div>
  </div>

  <script>
    const quiz = [
      { q: '10 % 3 の結果は？', a: '1' },
      { q: '3 == "3" の結果は？（true/false）', a: 'true' },
      { q: '3 === "3" の結果は？（true/false）', a: 'false' },
      { q: '5 > 8 ? 5 : 8 の結果は？', a: '8' },
      { q: 'let x = 0; x || 10 の結果は？', a: '10' },
      { q: 'let x = null; x ?? "JS" の結果は？', a: 'JS' },
      { q: 'typeof 42 の結果は？', a: 'number' },
      { q: '!false の結果は？（true/false）', a: 'true' }
    ];

    let index = 0;
    let score = 0;

    const qEl = document.getElementById('question');
    const aEl = document.getElementById('answer');
    const rEl = document.getElementById('result');
    const sEl = document.getElementById('score');
    const btn = document.getElementById('submit');

    function showQuestion() {
      qEl.textContent = `Q${index + 1}. ${quiz[index].q}`;
      aEl.value = '';
      rEl.textContent = '';
    }

    btn.addEventListener('click', () => {
      const userAnswer = aEl.value.trim();
      const correct = quiz[index].a;
      if (userAnswer.toLowerCase() === correct.toLowerCase()) {
        rEl.textContent = '✅ 正解！';
        rEl.style.color = '#2f855a';
        score++;
      } else {
        rEl.textContent = `❌ 不正解（答え：${correct}）`;
        rEl.style.color = '#e53e3e';
      }

      index++;
      if (index < quiz.length) {
        setTimeout(showQuestion, 1000);
      } else {
        setTimeout(() => {
          qEl.textContent = '🎉 全問終了！';
          aEl.style.display = 'none';
          btn.style.display = 'none';
          rEl.textContent = '';
          sEl.textContent = `あなたのスコア：${score} / ${quiz.length}`;
        }, 1000);
      }
    });

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 演算子クイズ</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f7fafc;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .quiz-box {
      background: white;
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      width: 400px;
      text-align: center;
    }
    h1 {
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }
    .question {
      font-weight: bold;
      margin: 1rem 0;
    }
    input {
      padding: 0.5rem;
      width: 80%;
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 1rem;
      text-align: center;
    }
    button {
      background: #3182ce;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
    }
    button:hover {
      background: #2b6cb0;
    }
    .result {
      margin-top: 1rem;
      font-size: 1.1rem;
    }
    .score {
      margin-top: 1rem;
      color: #2f855a;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="quiz-box">
    <h1>🎮 JavaScript 演算子クイズ</h1>
    <div class="question" id="question"></div>
    <input type="text" id="answer" placeholder="答えを入力">
    <br>
    <button id="submit">採点</button>
    <div class="result" id="result"></div>
    <div class="score" id="score"></div>
  </div>

  <script>
    const quiz = [
      { q: '10 % 3 の結果は？', a: '1' },
      { q: '3 == "3" の結果は？（true/false）', a: 'true' },
      { q: '3 === "3" の結果は？（true/false）', a: 'false' },
      { q: '5 > 8 ? 5 : 8 の結果は？', a: '8' },
      { q: 'let x = 0; x || 10 の結果は？', a: '10' },
      { q: 'let x = null; x ?? "JS" の結果は？', a: 'JS' },
      { q: 'typeof 42 の結果は？', a: 'number' },
      { q: '!false の結果は？（true/false）', a: 'true' }
    ];

    let index = 0;
    let score = 0;

    const qEl = document.getElementById('question');
    const aEl = document.getElementById('answer');
    const rEl = document.getElementById('result');
    const sEl = document.getElementById('score');
    const btn = document.getElementById('submit');

    function showQuestion() {
      qEl.textContent = `Q${index + 1}. ${quiz[index].q}`;
      aEl.value = '';
      rEl.textContent = '';
    }

    btn.addEventListener('click', () => {
      const userAnswer = aEl.value.trim();
      const correct = quiz[index].a;
      if (userAnswer.toLowerCase() === correct.toLowerCase()) {
        rEl.textContent = '✅ 正解！';
        rEl.style.color = '#2f855a';
        score++;
      } else {
        rEl.textContent = `❌ 不正解（答え：${correct}）`;
        rEl.style.color = '#e53e3e';
      }

      index++;
      if (index < quiz.length) {
        setTimeout(showQuestion, 1000);
      } else {
        setTimeout(() => {
          qEl.textContent = '🎉 全問終了！';
          aEl.style.display = 'none';
          btn.style.display = 'none';
          rEl.textContent = '';
          sEl.textContent = `あなたのスコア：${score} / ${quiz.length}`;
        }, 1000);
      }
    });

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

HTML

このアプリで学べること

学べるポイント	内容
算術演算子	`%` の意味（余り）
比較演算子	`==` と `===` の違い
条件（三項）	`a > b ? a : b` の形
論理演算子	`
型判定	`typeof`
総合理解	8問通して式の評価感覚を掴む

拡張アイデア（レベルアップ版）

✅ 難易度（初級／中級／上級）を選択
✅ タイマー機能を追加してスピード勝負
✅ 正答率をグラフで表示（Canvas or Chart.js）
✅ 問題をランダム出題

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31