JavaScript｜写真付き4択クイズの作り方解説【コード有】

2023年6月26日2024年4月20日

こんにちは！tenjiprogrammingです。
今回はJavaScriptで写真付きの4択クイズを作成する方法を説明します。

サンプルコードも載せるので自分の環境でも書いて試してみてください！

サンプルコード

サンプルコードを先に載せます。

HTML

// index.htmlのサンプルコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>4択クイズ</title>
</head>

<body>
  <h1>クイズの質問文</h1>
  <div id="choices">
    <!-- 選択肢が表示される場所 -->
  </div>
  <script src="script.js"></script>
</body>
</html>

JavaScript

const quizData = [
    {
      question: "質問1",
      choices: [
        {
          text: "選択肢A",
          imagePath: "./photos/a.jpg",
          isCorrect: true
        },
        {
          text: "選択肢B",
          imagePath: "./photos/b.jpg",
          isCorrect: false
        },
        {
          text: "選択肢C",
          imagePath: "./photos/c.jpg",
          isCorrect: false
        },
        {
          text: "選択肢D",
          imagePath: "./photos/d.jpg",
          isCorrect: false
        }
      ]
    },
    {
      question: "質問1",
      choices: [
        {
          text: "選択肢A",
          imagePath: "./photos/d.jpg",
          isCorrect: true
        },
        {
          text: "選択肢B",
          imagePath: "./photos/c.jpg",
          isCorrect: false
        },
        {
          text: "選択肢C",
          imagePath: "./photos/a.jpg",
          isCorrect: false
        },
        {
          text: "選択肢D",
          imagePath: "./photos/b.jpg",
          isCorrect: false
        }
      ]
    },
  ];
  
  const choicesContainer = document.getElementById("choices");
  
// クイズを表示する関数
function showQuiz(index) {
  const quiz = quizData[index];

  // 質問文を表示
  const questionElement = document.createElement("h2");
  questionElement.textContent = quiz.question;
  choicesContainer.appendChild(questionElement);

  // 選択肢を表示
  const choicesWrapper = document.createElement("div");
  choicesWrapper.className = "choices-wrapper"; // 選択肢を包む要素のクラス名を追加
  choicesContainer.appendChild(choicesWrapper);

  quiz.choices.forEach((choice, choiceIndex) => {
    const choiceElement = document.createElement("div");
    choiceElement.className = "choice-item"; // 選択肢の要素のクラス名を追加
    const choiceImage = document.createElement("img");
    choiceImage.src = choice.imagePath;
    choiceImage.alt = choice.text;

    // CSSで画像の表示サイズを調整
    choiceImage.style.width = "200px";
    choiceImage.style.height = "auto";

    // 選択肢がクリックされた時の処理
    choiceElement.addEventListener("click", () => {
      // 選択された選択肢が正解かどうかをチェックする関数を呼び出す
      checkAnswer(index, choiceIndex);
    });

    choiceElement.appendChild(choiceImage);
    choicesWrapper.appendChild(choiceElement);
  });
}

// CSSで選択肢を横に並べるスタイルを追加
const styleElement = document.createElement("style");
styleElement.textContent = `
  .choices-wrapper {
    display: flex;
  }
  .choice-item {
    margin-right: 10px;
    cursor: pointer; /* カーソルをポインターにする */
  }
`;
document.head.appendChild(styleElement);


// 正解判定の関数
function checkAnswer(questionIndex, choiceIndex) {
  const quiz = quizData[questionIndex];
  const choice = quiz.choices[choiceIndex];
  
  if (choice.isCorrect) {
    alert("正解です！");
  } else {
    alert("不正解です。");
  }

  // 次の問題を表示するか、クイズ終了処理を行う
  if (questionIndex + 1 < quizData.length) {
    // 次の問題がある場合は、次の問題を表示
    clearQuiz(); // 現在の問題をクリア
    showQuiz(questionIndex + 1); // 次の問題を表示
  } else {
    // クイズ終了処理を行う（例: 結果を表示する、リセットするなど）
    clearQuiz(); // 最後の問題をクリア
    alert("クイズ終了です。");
  }
}

// クイズをクリアする関数
function clearQuiz() {
  choicesContainer.innerHTML = ""; // 選択肢をクリア
}
  
  // // 最初の問題を表示する
  showQuiz(0)

四択クイズのサンプルコードです。コピペでも動くと思いますが、script.js中の写真のパスと名前は自分の環境に合わせてください。

解説

htmlのコードは特に解説することもないのでjsのコードをメインに簡単に解説します。

問題文と選択肢の準備

JavaScript

const quizData = [
    {
      question: "質問1",
      choices: [
        {
          text: "選択肢A",
          imagePath: "./photos/a.jpg",
          isCorrect: true
        },
        {
          text: "選択肢B",
          imagePath: "./photos/b.jpg",
          isCorrect: false
        },
        {
          text: "選択肢C",
          imagePath: "./photos/c.jpg",
          isCorrect: false
        },
        {
          text: "選択肢D",
          imagePath: "./photos/d.jpg",
          isCorrect: false
        }
      ]
    },
    {
      question: "質問1",
      choices: [
        {
          text: "選択肢A",
          imagePath: "./photos/d.jpg",
          isCorrect: true
        },
        {
          text: "選択肢B",
          imagePath: "./photos/c.jpg",
          isCorrect: false
        },
        {
          text: "選択肢C",
          imagePath: "./photos/a.jpg",
          isCorrect: false
        },
        {
          text: "選択肢D",
          imagePath: "./photos/b.jpg",
          isCorrect: false
        }
      ]
    },
  ];

問題文と選択肢を準備してます。今回は2問用意しました。
(選択肢の順番を入れ替えただけですが。。)

問題数が多くなる場合は、ここも別ファイルにした方が可読性が上がっていいと思います。

今回は二つだけなので同じファイルに書きました。

JavaScript

const choicesContainer = document.getElementById("choices");

htmlで用意したidがchoicesの要素を取得してます。取得した要素は選択肢を表示するコンテナとして使用されます。

クイズを表示(質問文と選択肢を表示/正誤判定)

JavaScript

// クイズを表示する関数
function showQuiz(index) {
  const quiz = quizData[index];

  // 質問文を表示
  const questionElement = document.createElement("h2");
  questionElement.textContent = quiz.question;
  choicesContainer.appendChild(questionElement);

  // 選択肢を表示
  const choicesWrapper = document.createElement("div");
  choicesWrapper.className = "choices-wrapper"; // 選択肢を包む要素のクラス名を追加
  choicesContainer.appendChild(choicesWrapper);

  quiz.choices.forEach((choice, choiceIndex) => {
    const choiceElement = document.createElement("div");
    choiceElement.className = "choice-item"; // 選択肢の要素のクラス名を追加
    const choiceImage = document.createElement("img");
    choiceImage.src = choice.imagePath;
    choiceImage.alt = choice.text;

    // CSSで画像の表示サイズを調整
    choiceImage.style.width = "200px";
    choiceImage.style.height = "auto";

    // 選択肢がクリックされた時の処理
    choiceElement.addEventListener("click", () => {
    // 選択された選択肢が正解かどうかをチェックする関数を呼び出す
      checkAnswer(index, choiceIndex);
    });

    choiceElement.appendChild(choiceImage);
    choicesWrapper.appendChild(choiceElement);
  });
}

これがクイズを表示する部分です。showQuizの引数に渡されたindexを元にして表示します。

次に質問文表示の部分です。
indexを元に決定したquizの問題文を表示しています。

同じ理屈で選択肢の写真を表示しています。

写真のサイズを調整しています。これがないと写真が大きくなりすぎるかもしれません。

選択肢がクリックされたら正解・不正解を判断する関数を呼び出します。

この関数自体はもう少し後ろに定義しています。

JavaScript

// CSSで選択肢を横に並べるスタイルを追加
const styleElement = document.createElement("style");
styleElement.textContent = `
  .choices-wrapper {
    display: flex;
  }
  .choice-item {
    margin-right: 10px;
    cursor: pointer; /* カーソルをポインターにする */
  }
`;
document.head.appendChild(styleElement);

cssで選択肢を横に並べています。縦並びになってしまうと見栄えが悪いのでcssで横並びにしましょう。

JavaScript

// 正解判定の関数
function checkAnswer(questionIndex, choiceIndex) {
  const quiz = quizData[questionIndex];
  if (choiceIndex === quiz.correctChoiceIndex) {
    alert("正解です！");
  } else {
    alert("不正解です。");
  }

  // 次の問題を表示するか、クイズ終了処理を行う
  if (questionIndex + 1 < quizData.length) {
    // 次の問題がある場合は、次の問題を表示
    clearQuiz(); // 現在の問題をクリア
    showQuiz(questionIndex + 1); // 次の問題を表示
  } else {
    // クイズ終了処理を行う（例: 結果を表示する、リセットするなど）
    clearQuiz(); // 最後の問題をクリア
    alert("クイズ終了です。");
  }
}

// クイズをクリアする関数
function clearQuiz() {
  choicesContainer.innerHTML = ""; // 選択肢をクリア
}
  
  // // 最初の問題を表示する
  showQuiz(0)

正解か不正解を判断する関数では問題を用意したところで設定しているtrue/falseで判別しています。

正解・不正解を判別したら次の問題を表示します。今回は問題の配列(quizData)のindex0から順番に表示しています。

なので配列の一番最後を表示した後はクイズを終了します。

クイズを終了した後に選択肢をクリアしています。
最後の問題をずっと表示しておきたい場合は実装しなくても大丈夫です。

「もう一度挑戦する」ボタンなどを実装するのもおすすめです。

最後にshowQuiz(0)で一番最初の問題を表示しています。
(これがないと問題が始まりません)

まとめ

この記事ではJavaScriptで四択問題を作成する方法を紹介しました。

今回はシンプルなものですが、独自の機能を追加したり選択肢の数を変えたりするのもいいと思います！

当サイトではこの記事以外にもJavaScriptに関する知識を紹介しています。そちらも併せてご覧ください。

またプログラミング初心者向けに学習中の疑問に答える企画をしています。下のnoteから確認してみてください！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

コメント一覧（2件）

チョビ より:

2023年11月18日 2:22 PM

例えば、質問Ⅰで選択肢Aの正解、不正解のボタンを押すと、本来ならば正解となるはずですが、不正解となるのは何故か

返信
- tenjiprograming より:
  
  2023年11月18日 10:57 PM
  
  チョビ様
  ご指摘いただきありがとうございます。
  正解を判断する関数に誤りがあったため修正しました。
  修正点は以下の2点です。
  
  ①選択された選択肢のデータにアクセスするためにconst choice = …を追加
  ②正誤判定の条件をif (choice.isCorrect)に変更
  
  記事内のコードは以上の修正を加えたものに更新しています。ご確認お願いします。
  また何かお気づきの点があればお知らせください。
  
  改めてご指摘ありがとうございました。
  
  返信

JavaScript｜写真付き4択クイズの作り方解説【コード有】

サンプルコード

解説

問題文と選択肢の準備

クイズを表示(質問文と選択肢を表示/正誤判定)

まとめ

関連記事

コメント

コメント一覧 （2件）

コメントする コメントをキャンセル

コメント一覧（2件）

コメントするコメントをキャンセル