JavaScriptで読み込むごとに画像を変えて表示させたい

実現したいこと

JavaScriptを使用したクイズを作成しています。
読み込むごとに問題がランダムで変わるようにはなりましたが、その際に問題文の下部へ画像を追加したいです。

発生している問題・分からないこと

JavaScriptで画像を表示するだけなら可能でしたが、ランダムで変わる問題文に合わせて画像も変わるようにしたいのですが、画像が表示されません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8" />
6	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7	<meta id="viewport" name="viewport" content="width=device-width" />
8	<meta name="viewport" content="width=device-width, initial-scale=1.0">
9	<link rel="stylesheet" type="text/css" href="style.css" />
10	<title></title>
11
12</head>
13
14<body>
15
16	<div class="container" id="container">
17		<div class="container-under">
18			<figure>
19					<img src="assets/img/under.svg" alt="">
20			</figure>
21	</div>
22		<!-- 全問題数表示 -->
23		<div class="quiz-info">
24			<ruby>
25				全 <span id="total-questions"></span> 問
26			</ruby>
27		</div>
28
29		<h1>
30			<figure>
31					<img src="assets/img/title.svg" alt="">
32			</figure>
33		</h1>
34
35		<div class="quiz-container" id="quiz-container">
36			<div class="question-number" id="question-number"></div>
37			<div class="question" id="question"></div>
38			<img id="imagePath" src="" alt="">
39			<div class="grid-container" id="choices-container"></div>
40		</div>
41
42		<div class="result-section" id="answer-section">
43			<h2>
44				<ruby>
45					回答結果
46				</ruby>
47			</h2>
48			<p id="answer-result"></p>
49			<h3>
50				<ruby>
51					各選択肢の解説
52				</ruby>
53			</h3>
54			<div id="explanation"></div>                     
55			<div id="next-question" onclick="nextQuestion()">
56				<ruby>
57					次の問題へ
58				</ruby>
59			</div>
60		</div>
61
62		<div id="final-result" class="final-section">
63			<h2>
64				<ruby>		
65					最終結果
66				</ruby>		
67			</h2>
68			<p id="score"></p>
69			<div id="restart-quiz" onclick="restartQuiz()">
70				<ruby>
71					もう一度遊ぶ
72				</ruby>
73			</div>
74		</div>
75	</div>
76
77	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js?ver=3.6.1" id="jquery-core-js">
78	</script>
79	<script src="assets/js/quizData.js"></script>
80	<script src="assets/js/script.js"></script>
81	<script src="assets/js/viewport.js"></script>
82	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
83
84</body>
85
86</html>

JavaScript
1const quizData = [
2  {
3    question: "◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎",
4    imagePath: "assets/img/quiz01.svg",
5    choices: [
6      { 
7        text: "◎◎◎◎◎",
8        explanation:
9          "残念！不正解です。",
10      },
11      { 
12        text: "◎◎◎◎◎",
13        explanation:
14          "正解です！",
15       },
16      { 
17        text: "◎◎◎◎◎",
18        explanation:
19        "残念！不正解です。",
20      },
21      { 
22        text: "◎◎◎◎◎",
23        explanation:
24        "残念！不正解です。",
25      },
26    ],
27    correct: 1,
28  },
29  {
30    question: "×××××××××××××××××××××××××××,
31    imagePath: "assets/img/quiz02.svg",
32    choices: [
33      { 
34        text: "×××××",
35        explanation:
36        "残念！不正解です。",
37       },
38      { 
39        text: "×××××",
40        explanation:
41        "正解です！",     
42      },
43      { 
44        text: "×××××",
45        explanation:
46        "残念！不正解です。",
47       },
48      { 
49        text: "サ×××××",
50        explanation:
51        "残念！不正解です。",
52      },
53    ],
54    correct: 1,
55  },
56  {
57    question: "■■■■■■■■■■■■■■■■■■■■■■■",
58    imagePath: "assets/img/quiz03.svg",
59    choices: [
60      { 
61        text: "■■■■■",
62        explanation:
63        "残念！不正解です。",
64      },
65      { 
66        text: "■■■■■",
67        explanation:
68        "残念！不正解です。",
69      },
70      { 
71        text: "■■■■■",
72        explanation:
73        "残念！不正解です。",
74      },
75      { 
76        text: "身を守るため",
77        explanation:
78        "正解です！",    
79      },
80    ],
81    correct: 3,
82  },
83];

JavaScript
1const totalQuestions = quizData.length;
2document.getElementById("total-questions").textContent = totalQuestions;
3
4let currentQuiz = [];
5let currentQuestion = 0;
6let score = 0;
7
8// 問題をランダムに並び替える関数
9function shuffleArray(array) {
10  for (let i = array.length - 1; i > 0; i--) {
11    const j = Math.floor(Math.random() * (i + 1));
12    [array[i], array[j]] = [array[j], array[i]];
13  }
14  return array;
15}
16
17// 初期化
18function initQuiz() {
19  currentQuestion = 0; // 問題番号の初期化
20  score = 0; // スコアの初期化
21  currentQuiz = shuffleArray([...quizData]); // クイズデータをランダム化
22  loadQuestion();
23}
24
25// 問題と選択肢を表示
26function loadQuestion() {
27  document.getElementById("quiz-container").style.display = "block";
28  document.getElementById("answer-section").style.display = "none";
29  document.getElementById("final-result").style.display = "none";
30
31  // 問題番号を表示
32  document.getElementById("question-number").textContent = `第 ${
33    currentQuestion + 1
34  } 問`;
35
36  const questionData = currentQuiz[currentQuestion];
37
38  let img = document.getElementById("imagePath");
39  document.getElementById("question").textContent = questionData.question;
40  const choicesContainer = document.getElementById("choices-container");
41  choicesContainer.innerHTML = "";
42
43  // 選択肢に番号を付ける
44  questionData.choices.forEach((choice, index) => {
45    const choiceDiv = document.createElement("div");
46    choiceDiv.classList.add("choice");
47    choiceDiv.textContent = `${index + 1}. ${choice.text}`; // 番号付きの選択肢
48    choiceDiv.onclick = () => checkAnswer(index, questionData);
49    choicesContainer.appendChild(choiceDiv);
50  });
51}
52
53// 答えを確認
54function checkAnswer(selected, questionData) {
55  document.getElementById("quiz-container").style.display = "none";
56  document.getElementById("answer-section").style.display = "block";
57
58  const resultText = document.getElementById("answer-result");
59  const explanationDiv = document.getElementById("explanation");
60  explanationDiv.innerHTML = "";
61  explanationDiv.style.textAlign = "left"; // 左寄せ
62
63  if (selected === questionData.correct) {
64    resultText.innerHTML = "<span class='correct'>正解！</span>";
65    score++;
66  } else {
67    resultText.innerHTML = "<span class='wrong'>不正解です。</span>";
68  }
69
70  // 各選択肢の解説を表示（番号付き）
71  questionData.choices.forEach((choice, index) => {
72    const explanationPara = document.createElement("p");
73    if (index === questionData.correct) {
74      explanationPara.innerHTML = `<span style="color: red; font-weight: bold;">${
75        index + 1
76      }. ${choice.text}</span> : ${choice.explanation}`;
77    } else if (index === selected) {
78      explanationPara.innerHTML = `<span style="color: blue;">${index + 1}. ${
79        choice.text
80      }</span> : ${choice.explanation}`;
81    } else {
82      explanationPara.innerHTML = `${index + 1}. ${choice.text} : ${
83        choice.explanation
84      }`;
85    }
86    explanationDiv.appendChild(explanationPara);
87  });
88
89  // 予備知識を枠で囲む
90  const knowledgePara = document.createElement("div");
91  knowledgePara.classList.add("knowledge-box");
92  knowledgePara.innerHTML =
93    "<strong>予備知識:</strong> " + questionData.knowledge;
94  explanationDiv.appendChild(knowledgePara);
95
96  // 最終問題かどうかのチェック
97  if (currentQuestion === currentQuiz.length - 1) {
98    document.getElementById("next-question").textContent = "結果を見る";
99  } else {
100    document.getElementById("next-question").textContent = "次の問題へ";
101  }
102}
103
104// 次の問題へ
105function nextQuestion() {
106  currentQuestion++;
107  if (currentQuestion < currentQuiz.length) {
108    loadQuestion();
109    document.getElementById("container").scrollIntoView({ behavior: "smooth" }); // containerにスクロール
110  } else {
111    showResult();
112  }
113}
114
115// 結果を表示
116function showResult() {
117  document.getElementById("answer-section").style.display = "none";
118  document.getElementById("final-result").style.display = "block";
119
120  const percentage = (score / currentQuiz.length) * 100;
121  document.getElementById("score").textContent = `正解数: ${score}/${
122    currentQuiz.length
123  } (${percentage.toFixed(2)}%)`;
124}
125
126// もう一度遊ぶ
127function restartQuiz() {
128  currentQuestion = 0;
129  score = 0;
130  initQuiz();
131}
132
133// クイズ開始
134initQuiz();
135
136// クイズを表示する関数
137function showQuiz(index) {
138  const quiz = quizData[index];
139
140  // 質問文を表示
141  const questionElement = document.createElement("h2");
142  questionElement.textContent = quiz.question;
143  choicesContainer.appendChild(questionElement);
144
145  // 選択肢を表示
146  const choicesWrapper = document.createElement("div");
147  choicesWrapper.className = "choices-wrapper"; // 選択肢を包む要素のクラス名を追加
148  choicesContainer.appendChild(choicesWrapper);
149}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ソースコードに以下のコードを追加したところ、画像は表示されますが、問題ごとにURLを読み取るわけではありませんでした。

<div id="questionArea"> <img id="questionImage" src="" alt="問題の画像"> </div> <script> function addImageToQuestion(imageUrl) { const questionImage = document.getElementById("questionImage"); questionImage.src = imageUrl; questionImage.style.display = "block"; // 画像を表示する }

// 例として、画像URLを指定して問題文に画像を追加する
addImageToQuestion("assets/img/quiz01.svg");

</script>

補足

特になし

t-n

2025/04/22 07:06

＞ JavaScriptで画像を表示するだけなら可能でしたが、ランダムで変わる問題文に合わせて画像も変わるようにしたいのですが、画像が表示されません。動的に画像を表示しようとしているロジックは存在していませんがどのように記述すればよいかわからないということでしょうか？下記処理では問題文（question）は動的に表示できているので、imagePathについても同様に値を反映すれば実現は可能かと思います。 document.getElementById("question").textContent = questionData.question; ここまで書けているのであれば自力で解決もできるとおもうのでもう少し考えてみてもよいかと思いました。

soraatori

2025/04/23 07:04

回答いただきありがとうございました。動的に画像を表示する記述がわからず、いろいろと試してはみましたが動作しませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

全然試してないですが。

js
1document.getElementById("question").textContent = questionData.question;
2addImageToQuestion(questionData.imagePath);

投稿2025/04/22 09:38

Lhankor_Mhy

総合スコア37413

soraatori

2025/04/23 07:07

回答いただきありがとうございました。試してはみましたが、動作しませんでした。選択ボタンが消えてしまう状態です。

Lhankor_Mhy

2025/04/23 07:55

選択ボタンが消えてしまうということは、エラーが起きている公算が高いですね。エラーメッセージをご提示いただけますか？

soraatori

2025/04/23 08:11

ありがとうございます。「Uncaught ReferenceError: addImageToQuestion is not defined」と表示されています。

Lhankor_Mhy

2025/04/23 08:14

addImageToQuestion を定義していない、というエラーですね。 addImageToQuestion は定義されていないのですか？　もしそうであるなら、定義すれば動くのではないでしょうか。

soraatori

2025/04/24 01:32

ありがとうございます。「addImageToQuestion」を定義しておりませんでした。 const addImageToQuestion = document.getElementById("imagePath"); addImageToQuestion(questionData.imagePath); としてみましたが、動作しませんでした。

juner

2025/04/24 01:43

その宣言している addImageToQuestion は関数ではないのではないでしょうか？（html要素は function ではないのでは？

soraatori

2025/04/24 01:54

ありがとうございます。関数ではないということは、定義の仕方が間違っているということですね。

Lhankor_Mhy

2025/04/24 02:04

もしかして、addImageToQuestion がなんだかわかっておられないですか？ご提示のご質問、「試したこと・調べたこと」＞「上記の詳細・結果」に書かれているコードです。そのコードが書かれている前提で回答をいたしております。エラーが出ているということで、その部分のコードを削除したのか、記載の場所がよくないのかと思ったのですが、違いますか？

soraatori

2025/04/24 02:31

ありがとうございます。 HTMLファイルに記述しているものですね。 <script> function addImageToQuestion(imageUrl) { const questionImage = document.getElementById("questionImage"); questionImage.src = imageUrl; questionImage.style.display = "block"; } addImageToQuestion("assets/img/quiz01.svg"); </script> こちらは調べて記述しましたが、 addImageToQuestion(questionData.imagePath); のコードは動的に表示させるscriptををまとめたJavaScriptファイルに記述しておりました。そこで、 <script> function addImageToQuestion(imageUrl) { const questionImage = document.getElementById("questionImage"); questionImage.src = imageUrl; questionImage.style.display = "block"; } addImageToQuestion(questionData.imagePath); </script> としてみましたが、やはり動作しませんでした。エラーコードは「Uncaught ReferenceError: questionData is not defined」です。こちらは記述場所に問題があるということでしょうか。

Lhankor_Mhy

2025/04/24 02:39

わかりにくくてすみません、回答で記述する場所を指定していたつもりでした。 document.getElementById("question").textContent = questionData.question; というコードはご提示の2つ目のjsの39行目のことです。その下に記述せよ、というつもりでした。

soraatori

2025/04/24 03:00

ありがとうございます。こちらこそお手間を取らせて申し訳ございませんでした。指定いただいた場所へ移動したところ、イメージ通りに動作するようになりました。誠にありがとうございます。とてもいい勉強になりました。

行動規範の内容に同意します