JavaScript | 変数への値の代入と変数の初期化

JavaScript
2020.04.12
スポンサーリンク

実行できるサンプルコード

保存名例：variable_practice.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 変数練習サンプル</title>
</head>
<body>
  <h1>JavaScript 変数の宣言・代入・初期化 練習</h1>
  <p>結果はブラウザの「コンソール（Console）」に表示されます。</p>
  <button onclick="runSamples()">実行する</button>

  <script>
    function runSamples() {
      console.clear();
      console.log("=== 練習問題① 宣言と代入の違い ===");
      let x;
      console.log("x:", x); // undefined
      x = 10;
      console.log("x に 10 を代入 →", x);

      console.log("\n=== 練習問題② const のルール ===");
      try {
        const y = 5; // ← 正しい形にしておく
        console.log("const y =", y);
        // y = 6; // ← これを有効にするとエラー
      } catch (e) {
        console.error("エラー:", e.message);
      }

      console.log("\n=== 練習問題③ 再代入できるか？ ===");
      let a = 2;
      a = 5;
      console.log("let a =", a);

      try {
        const b = 3;
        console.log("const b =", b);
        b = 7; // エラーになる
      } catch (e) {
        console.error("エラー:", e.message);
      }

      console.log("\n=== 練習問題④ 代入の順番 ===");
      let x1 = 3;
      let y1 = x1;
      x1 = 7;
      console.log("x1 =", x1);
      console.log("y1 =", y1);

      console.log("\n=== 練習問題⑤ 参照型のコピー ===");
      let arr1 = [1, 2];
      let arr2 = arr1;
      arr2.push(3);
      console.log("arr1:", arr1);
      console.log("arr2:", arr2);

      console.log("\n=== おまけ: スプレッド構文でコピー ===");
      let arrA = [1, 2];
      let arrB = [...arrA];
      arrB.push(3);
      console.log("arrA:", arrA);
      console.log("arrB:", arrB);
    }
  </script>
</body>
</html>
HTML

使い方

  1. 上のコードをコピーしてメモ帳などに貼り付ける
  2. variable_practice.html という名前で保存
  3. ブラウザで開く（Chrome / Edge / Firefox など）
  4. ページ内の「実行する」ボタンをクリック
  5. コンソールを開く（Windows: F12 → Console タブ）

学習ポイント

  • 各問題の挙動を変えて試してみる（コメントアウトを外す・値を変えるなど）
  • let → const に変えてエラーになるパターンを確認
  • arr1 と arr2 のような「参照型コピー」の動作をしっかり観察

自動採点付き JS クイズ

保存名：variable_quiz.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript 変数クイズ</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #f4f4f8;
      padding: 20px;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    .quiz {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      padding: 20px;
      margin: 20px auto;
      max-width: 600px;
    }
    label {
      font-weight: bold;
      display: block;
      margin-bottom: 6px;
    }
    input[type="text"] {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
    }
    button {
      background: #4a90e2;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }
    button:hover {
      background: #357ab8;
    }
    .result {
      margin-top: 10px;
      font-weight: bold;
    }
    .correct {
      color: green;
    }
    .wrong {
      color: red;
    }
  </style>
</head>
<body>
  <h1>JavaScript 変数クイズ</h1>
  <div class="quiz">
    <div>
      <label>① 次のコードの1行目の出力結果は？</label>
      <pre><code>let x; console.log(x);</code></pre>
      <input type="text" id="q1" placeholder="例：undefined" />
    </div>

    <div>
      <label>② const 変数は宣言と代入を分けて行える？（はい / いいえ）</label>
      <input type="text" id="q2" placeholder="はい or いいえ" />
    </div>

    <div>
      <label>③ 次のコードの出力結果は？</label>
      <pre><code>let a = 2; a = 5; console.log(a);</code></pre>
      <input type="text" id="q3" placeholder="数値を入力" />
    </div>

    <div>
      <label>④ 次のコードの出力結果は？</label>
      <pre><code>let x = 3; let y = x; x = 7; console.log(y);</code></pre>
      <input type="text" id="q4" placeholder="数値を入力" />
    </div>

    <div>
      <label>⑤ 次のコードの出力結果は？</label>
      <pre><code>
let arr1 = [1, 2];
let arr2 = arr1;
arr2.push(3);
console.log(arr1);
      </code></pre>
      <input type="text" id="q5" placeholder="例：[1, 2, 3]" />
    </div>

    <button onclick="checkAnswers()">採点する</button>

    <div id="results" class="result"></div>
  </div>

  <script>
    function checkAnswers() {
      const answers = {
        q1: "undefined",
        q2: "いいえ",
        q3: "5",
        q4: "3",
        q5: "[1,2,3]",
      };

      let score = 0;
      let total = Object.keys(answers).length;
      let resultHTML = "<h3>結果：</h3>";

      for (let key in answers) {
        const userInput = document.getElementById(key).value
          .replace(/\s+/g, "")
          .toLowerCase();
        const correct = answers[key].replace(/\s+/g, "").toLowerCase();

        if (userInput === correct) {
          score++;
          resultHTML += `<p>✅ ${key.toUpperCase()}：正解！</p>`;
        } else {
          resultHTML += `<p>❌ ${key.toUpperCase()}：不正解（正解は ${answers[key]}）</p>`;
        }
      }

      resultHTML += `<p><strong>${score} / ${total} 問正解！</strong></p>`;
      const resultDiv = document.getElementById("results");
      resultDiv.innerHTML = resultHTML;
      resultDiv.className = "result";
    }
  </script>
</body>
</html>
HTML

使い方

  1. 上のコードをメモ帳などに貼り付けて
    → variable_quiz.html として保存
  2. ブラウザで開く
  3. 各問題の答えを入力し、「採点する」ボタンをクリック
  4. 下に結果（○× と正解数）が表示されます！

カスタマイズの例

  • 問題を増やしたい場合は、answers オブジェクトと <div> を追加するだけ。
  • 入力を select（選択式）に変えることも可能。
  • 採点結果を色付きバーやスコアメーターで表示する機能も追加できます。

進捗バー付き JavaScript 変数クイズ

保存名：variable_quiz_progress.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript 変数クイズ（進捗バー付き）</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #f5f7fa;
      padding: 30px;
      color: #333;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .quiz-container {
      background: white;
      border-radius: 16px;
      padding: 20px 30px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 650px;
      margin: 20px auto;
    }

    .question {
      margin-bottom: 25px;
    }

    label {
      font-weight: bold;
      display: block;
      margin-bottom: 6px;
    }

    input[type="text"] {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
      box-sizing: border-box;
    }

    button {
      background: #4a90e2;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
      display: block;
      width: 100%;
    }

    button:hover {
      background: #357ab8;
    }

    .result {
      margin-top: 20px;
      font-weight: bold;
    }

    .correct {
      color: green;
    }

    .wrong {
      color: red;
    }

    /* --- Progress Bar --- */
    .progress-wrapper {
      background: #ddd;
      border-radius: 8px;
      height: 20px;
      overflow: hidden;
      margin-top: 15px;
      margin-bottom: 25px;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #4a90e2, #7bc4ff);
      transition: width 0.4s ease;
    }

    .score-display {
      text-align: right;
      margin-top: -10px;
      margin-bottom: 10px;
      font-size: 15px;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>JavaScript 変数クイズ 💡</h1>

  <div class="quiz-container">
    <div class="score-display">
      スコア: <span id="score">0</span> / 5
    </div>

    <div class="progress-wrapper">
      <div class="progress-bar" id="progress-bar"></div>
    </div>

    <div class="question">
      <label>① 次のコードの1行目の出力結果は？</label>
      <pre><code>let x; console.log(x);</code></pre>
      <input type="text" id="q1" placeholder="例：undefined" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>② const 変数は宣言と代入を分けて行える？（はい / いいえ）</label>
      <input type="text" id="q2" placeholder="はい or いいえ" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>③ 次のコードの出力結果は？</label>
      <pre><code>let a = 2; a = 5; console.log(a);</code></pre>
      <input type="text" id="q3" placeholder="数値を入力" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>④ 次のコードの出力結果は？</label>
      <pre><code>let x = 3; let y = x; x = 7; console.log(y);</code></pre>
      <input type="text" id="q4" placeholder="数値を入力" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>⑤ 次のコードの出力結果は？</label>
      <pre><code>
let arr1 = [1, 2];
let arr2 = arr1;
arr2.push(3);
console.log(arr1);
      </code></pre>
      <input type="text" id="q5" placeholder="例：[1,2,3]" oninput="updateProgress()" />
    </div>

    <button onclick="checkAnswers()">採点する</button>
    <div id="results" class="result"></div>
  </div>

  <script>
    const answers = {
      q1: "undefined",
      q2: "いいえ",
      q3: "5",
      q4: "3",
      q5: "[1,2,3]",
    };

    function updateProgress() {
      const total = Object.keys(answers).length;
      let filled = 0;

      for (let key in answers) {
        const value = document.getElementById(key).value.trim();
        if (value !== "") filled++;
      }

      const percent = (filled / total) * 100;
      document.getElementById("progress-bar").style.width = percent + "%";
    }

    function checkAnswers() {
      let score = 0;
      let total = Object.keys(answers).length;
      let resultHTML = "<h3>採点結果：</h3>";

      for (let key in answers) {
        const userInput = document.getElementById(key).value
          .replace(/\s+/g, "")
          .toLowerCase();
        const correct = answers[key].replace(/\s+/g, "").toLowerCase();

        if (userInput === correct) {
          score++;
          resultHTML += `<p class="correct">✅ ${key.toUpperCase()}：正解！</p>`;
        } else {
          resultHTML += `<p class="wrong">❌ ${key.toUpperCase()}：不正解（正解は ${answers[key]}）</p>`;
        }
      }

      resultHTML += `<p><strong>${score} / ${total} 問正解！</strong></p>`;
      document.getElementById("results").innerHTML = resultHTML;
      document.getElementById("score").textContent = score;

      // 進捗バーをスコアに応じた色に変化
      const bar = document.getElementById("progress-bar");
      const percent = (score / total) * 100;
      bar.style.width = percent + "%";
      bar.style.background = percent === 100
        ? "linear-gradient(90deg, #00c853, #64dd17)" // 緑
        : "linear-gradient(90deg, #4a90e2, #7bc4ff)";
    }
  </script>
</body>
</html>
HTML

特徴

✅ 入力が進むと進捗バーがリアルタイムで伸びる
✅ 採点ボタンで正解・不正解が表示され、スコアも反映
✅ 全問正解するとバーが 緑色（達成カラー） に！
✅ 初心者でもHTMLファイルを開くだけで使える

使い方

  1. コードをコピーしてメモ帳などに貼り付け
  2. variable_quiz_progress.html として保存
  3. ブラウザで開く
  4. 各問題に答えを入力すると進捗バーが動きます
  5. 「採点する」ボタンを押して結果を確認

発展アイデア

次のような拡張も可能です：

  • 🔁 「もう一度挑戦」ボタンを追加
  • 🔊 正解時に効果音を再生
  • 💾 結果をローカルストレージに保存して「前回のスコア」を表示
  • 🧭 ページ切り替え式クイズ（1問ずつ出題）

結果をローカル保存して復習できる JavaScript クイズ

保存名：variable_quiz_memory.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript 変数クイズ（保存・復習つき）</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #f6f8fb;
      padding: 30px;
      color: #333;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .quiz-container {
      background: #fff;
      border-radius: 16px;
      padding: 25px 30px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      max-width: 700px;
      margin: 20px auto;
    }

    .question {
      margin-bottom: 25px;
    }

    label {
      font-weight: bold;
      display: block;
      margin-bottom: 6px;
    }

    input[type="text"] {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
      box-sizing: border-box;
    }

    button {
      background: #4a90e2;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
      display: inline-block;
    }

    button:hover {
      background: #357ab8;
    }

    .result {
      margin-top: 20px;
      font-weight: bold;
    }

    .correct {
      color: green;
    }

    .wrong {
      color: red;
    }

    .progress-wrapper {
      background: #ddd;
      border-radius: 8px;
      height: 20px;
      overflow: hidden;
      margin-top: 15px;
      margin-bottom: 25px;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #4a90e2, #7bc4ff);
      transition: width 0.4s ease;
    }

    .score-display {
      text-align: right;
      margin-top: -10px;
      margin-bottom: 10px;
      font-size: 15px;
      color: #555;
    }

    .last-result {
      background: #e8f5e9;
      border-left: 5px solid #66bb6a;
      padding: 10px 15px;
      margin-bottom: 15px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>JavaScript 変数クイズ 💡（復習つき）</h1>

  <div class="quiz-container">
    <div id="lastResult" class="last-result" style="display:none;"></div>

    <div class="score-display">
      スコア: <span id="score">0</span> / 5
    </div>

    <div class="progress-wrapper">
      <div class="progress-bar" id="progress-bar"></div>
    </div>

    <div class="question">
      <label>① 次のコードの1行目の出力結果は？</label>
      <pre><code>let x; console.log(x);</code></pre>
      <input type="text" id="q1" placeholder="例：undefined" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>② const 変数は宣言と代入を分けて行える？（はい / いいえ）</label>
      <input type="text" id="q2" placeholder="はい or いいえ" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>③ 次のコードの出力結果は？</label>
      <pre><code>let a = 2; a = 5; console.log(a);</code></pre>
      <input type="text" id="q3" placeholder="数値を入力" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>④ 次のコードの出力結果は？</label>
      <pre><code>let x = 3; let y = x; x = 7; console.log(y);</code></pre>
      <input type="text" id="q4" placeholder="数値を入力" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>⑤ 次のコードの出力結果は？</label>
      <pre><code>
let arr1 = [1, 2];
let arr2 = arr1;
arr2.push(3);
console.log(arr1);
      </code></pre>
      <input type="text" id="q5" placeholder="例：[1,2,3]" oninput="updateProgress()" />
    </div>

    <button onclick="checkAnswers()">採点する</button>
    <button onclick="resetQuiz()">リセット</button>

    <div id="results" class="result"></div>
  </div>

  <script>
    const answers = {
      q1: "undefined",
      q2: "いいえ",
      q3: "5",
      q4: "3",
      q5: "[1,2,3]",
    };

    // --- ページ読み込み時に前回結果を表示 ---
    window.onload = () => {
      const lastResult = localStorage.getItem("variableQuizResult");
      if (lastResult) {
        const data = JSON.parse(lastResult);
        document.getElementById("lastResult").style.display = "block";
        document.getElementById("lastResult").innerHTML =
          `<strong>前回の結果：</strong><br>
          スコア：${data.score} / 5<br>
          日時：${data.date}`;
      }
    };

    function updateProgress() {
      const total = Object.keys(answers).length;
      let filled = 0;

      for (let key in answers) {
        const value = document.getElementById(key).value.trim();
        if (value !== "") filled++;
      }

      const percent = (filled / total) * 100;
      document.getElementById("progress-bar").style.width = percent + "%";
    }

    function checkAnswers() {
      let score = 0;
      let total = Object.keys(answers).length;
      let resultHTML = "<h3>採点結果：</h3>";

      for (let key in answers) {
        const userInput = document.getElementById(key).value
          .replace(/\s+/g, "")
          .toLowerCase();
        const correct = answers[key].replace(/\s+/g, "").toLowerCase();

        if (userInput === correct) {
          score++;
          resultHTML += `<p class="correct">✅ ${key.toUpperCase()}：正解！</p>`;
        } else {
          resultHTML += `<p class="wrong">❌ ${key.toUpperCase()}：不正解（正解は ${answers[key]}）</p>`;
        }
      }

      resultHTML += `<p><strong>${score} / ${total} 問正解！</strong></p>`;
      document.getElementById("results").innerHTML = resultHTML;
      document.getElementById("score").textContent = score;

      // --- 結果を localStorage に保存 ---
      const now = new Date();
      const resultData = {
        score: score,
        date: now.toLocaleString(),
      };
      localStorage.setItem("variableQuizResult", JSON.stringify(resultData));

      // --- 進捗バーの色変化 ---
      const bar = document.getElementById("progress-bar");
      const percent = (score / total) * 100;
      bar.style.width = percent + "%";
      bar.style.background = percent === 100
        ? "linear-gradient(90deg, #00c853, #64dd17)"
        : "linear-gradient(90deg, #4a90e2, #7bc4ff)";
    }

    function resetQuiz() {
      for (let key in answers) {
        document.getElementById(key).value = "";
      }
      document.getElementById("progress-bar").style.width = "0%";
      document.getElementById("results").innerHTML = "";
      document.getElementById("score").textContent = "0";
      localStorage.removeItem("variableQuizResult");
      document.getElementB
HTML

このバージョンの特徴

✅ スコアと日時を自動保存（ブラウザを閉じても残る）
✅ 次回アクセス時に「前回の結果」を自動で表示
✅ 進捗バー＆スコア表示はリアルタイム更新
✅ 「リセット」ボタンで保存内容を削除して再挑戦

使い方

  1. コードをコピー → variable_quiz_memory.html として保存
  2. ブラウザで開く
  3. 答えを入力 → 「採点する」
  4. ページを閉じて再度開くと「前回の結果」が上に表示されます！

さらに発展させるなら

次のような機能も追加可能です👇

  • 🎯 各問題の 正答率を記録してグラフ表示
  • 🔊 正解・不正解で音が鳴る
  • 🧩 クイズをカテゴリー別（変数・関数・配列）に切り替え可能
  • ☁️ 複数回の履歴を保存・一覧表示（学習履歴帳）

正答率グラフ付き JS クイズ

保存名：variable_quiz_chart.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript 変数クイズ（正答率グラフ付き）</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #f6f8fb;
      padding: 30px;
      color: #333;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .quiz-container {
      background: #fff;
      border-radius: 16px;
      padding: 25px 30px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      max-width: 750px;
      margin: 20px auto;
    }

    .question {
      margin-bottom: 25px;
    }

    label {
      font-weight: bold;
      display: block;
      margin-bottom: 6px;
    }

    input[type="text"] {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid #ccc;
      font-size: 16px;
      box-sizing: border-box;
    }

    button {
      background: #4a90e2;
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
      margin-right: 10px;
    }

    button:hover {
      background: #357ab8;
    }

    .result {
      margin-top: 20px;
      font-weight: bold;
    }

    .correct {
      color: green;
    }

    .wrong {
      color: red;
    }

    .progress-wrapper {
      background: #ddd;
      border-radius: 8px;
      height: 20px;
      overflow: hidden;
      margin-top: 15px;
      margin-bottom: 25px;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #4a90e2, #7bc4ff);
      transition: width 0.4s ease;
    }

    .score-display {
      text-align: right;
      margin-top: -10px;
      margin-bottom: 10px;
      font-size: 15px;
      color: #555;
    }

    canvas {
      max-width: 100%;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      margin-top: 30px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>JavaScript 変数クイズ 📊（正答率グラフ付き）</h1>

  <div class="quiz-container">
    <div class="score-display">
      スコア: <span id="score">0</span> / 5
    </div>

    <div class="progress-wrapper">
      <div class="progress-bar" id="progress-bar"></div>
    </div>

    <!-- 質問エリア -->
    <div class="question">
      <label>① 次のコードの1行目の出力結果は？</label>
      <pre><code>let x; console.log(x);</code></pre>
      <input type="text" id="q1" placeholder="例：undefined" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>② const 変数は宣言と代入を分けて行える？（はい / いいえ）</label>
      <input type="text" id="q2" placeholder="はい or いいえ" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>③ 次のコードの出力結果は？</label>
      <pre><code>let a = 2; a = 5; console.log(a);</code></pre>
      <input type="text" id="q3" placeholder="数値を入力" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>④ 次のコードの出力結果は？</label>
      <pre><code>let x = 3; let y = x; x = 7; console.log(y);</code></pre>
      <input type="text" id="q4" placeholder="数値を入力" oninput="updateProgress()" />
    </div>

    <div class="question">
      <label>⑤ 次のコードの出力結果は？</label>
      <pre><code>
let arr1 = [1, 2];
let arr2 = arr1;
arr2.push(3);
console.log(arr1);
      </code></pre>
      <input type="text" id="q5" placeholder="例：[1,2,3]" oninput="updateProgress()" />
    </div>

    <button onclick="checkAnswers()">採点する</button>
    <button onclick="resetQuiz()">リセット</button>

    <div id="results" class="result"></div>

    <!-- グラフ -->
    <canvas id="scoreChart"></canvas>
  </div>

  <script>
    const answers = {
      q1: "undefined",
      q2: "いいえ",
      q3: "5",
      q4: "3",
      q5: "[1,2,3]",
    };

    let chart;

    // ページ読み込み時に履歴グラフを表示
    window.onload = function () {
      const savedResults = JSON.parse(localStorage.getItem("quizHistory") || "[]");
      drawChart(savedResults);
    };

    function updateProgress() {
      const total = Object.keys(answers).length;
      let filled = 0;

      for (let key in answers) {
        const value = document.getElementById(key).value.trim();
        if (value !== "") filled++;
      }

      const percent = (filled / total) * 100;
      document.getElementById("progress-bar").style.width = percent + "%";
    }

    function checkAnswers() {
      let score = 0;
      let total = Object.keys(answers).length;
      let resultHTML = "<h3>採点結果：</h3>";

      for (let key in answers) {
        const userInput = document.getElementById(key).value
          .replace(/\s+/g, "")
          .toLowerCase();
        const correct = answers[key]
HTML

このバージョンのポイント

✅ 過去の成績（最大何回でも）を自動記録
✅ Chart.js で「回数ごとの正答率」を折れ線グラフ化
✅ ページを再読み込みしても履歴は保持
✅ 「リセット」で履歴削除＋グラフリセット

使い方

  1. 上のコードを variable_quiz_chart.html として保存
  2. ブラウザで開く
  3. 回答 → 採点 → スコアが自動で保存＆グラフ更新
  4. 何度も挑戦すると履歴グラフが伸びていきます📈

次の発展アイデア

  • 🧩 カテゴリ別クイズ切り替え（変数・関数・配列など）
  • 🧠 正答率ランキング表示（最高スコア保存）
  • 🎵 正解時・不正解時に音やアニメーションを追加
JavaScript | MDN
JavaScript (JS) は軽量でインタープリター型（あるいは実行時コンパイルされる）第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くのブラ...
developer.mozilla.org
前へ
1234
スポンサーリンク
タイトルとURLをコピーしました