Javascriptを用いて、表示される問題を文章＋画像にする方法

４択のクイズを作っていて、普段は文章しか出さないのですが、問題によっては、文章が表示されるセクションの下の位置に、画像を貼りたいと思っています。以下のJSファイルのように、QuizContentに混ぜようか(何とかしてQuizContent[currentNum].q[1]とかにできないかな）と安易に考えたらやはりエラーでした。画像だけは別配列にすることも考えましたが。。。
特定の問題だけに画像を表示させるアドバイスをいただければと思います。お願いいたします。

以下はJSのファイルです。

(function(){
   'use strict';

const question = document.getElementById('question');
const answers = document.getElementById('answers');
const next = document.getElementById('next');

const QuizContent = [
  {q: 'What is A?', a:['A0', 'A1', 'A2', 'A3']},
  {q: 'What is B?', a:['B0', 'B1', 'B2', 'B3']},
  {q: 'What is C?', a:['C0', 'C1', 'C2', 'C3']},
  {q: 'What is D?', a:['D0', 'D1', 'D2', 'D3']},
  {q: 'What is E?', 'img/engels.jpg', a:['E1', 'E2', 'E3', 'E4']},
];
let currentNum = 0;

function shuffle(arr){
  let i = arr.length - 1;
  for(i = arr.length - 1; i > 0; i--){
    const j = Math.floor(Math.random() * (i + 1));
    [arr[j], arr[i]] = [arr[i], arr[j]];
  }
  return arr;
}

function checkAnswer(li){
  if(li.textContent === QuizContent[currentNum].a[0]){
    console.log('correct');
  } else {
    console.log('wrong');
  }
}

function typing(str = ""){
    let buf = question.innerHTML;
    let writed = buf.length;
    let write = "";
    if(writed < str.length){
        write = str.charAt(writed);
    }

    question.innerHTML = buf + write;
}

let timerArray = new Array();

function setQuiz() {
  while (timerArray.length > 0) {
    clearInterval(timerArray.shift());
  }
  const shuffledAnswers = shuffle([...QuizContent[currentNum].a]);
  let str = QuizContent[currentNum].q;
  question.innerHTML = '';
  let typeid = setInterval(function() {
     typing(str);
  }, 150);
  timerArray.push(typeid);

  shuffledAnswers.forEach(answer => {
    const li = document.createElement('li');
    li.textContent = answer;
    li.addEventListener('click', () => {
      checkAnswer(li);
    });
    answers.appendChild(li);
  });
}

setQuiz();
next.addEventListener('click', function() {
   currentNum++;
   while(answers.firstChild){
     answers.removeChild(answers.firstChild);
   }
   setQuiz();
});

})();

以下はHTMLのファイルです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Quiz</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div id="question"></div>
    <p id="pic">
    <img src = "img/engels.jpg">
    </p>
    <ul id="answers">
    </ul>
    <div id="next">Next</div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

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

回答1件

ベストアンサー

下記のようにして QuizContent[currentNum].imgの有無を確認すれば良いのではないでしょうか。

js
1{q: 'What is E?', img:'img/engels.jpg', a:['E1', 'E2', 'E3', 'E4']}

投稿2019/04/25 17:39

kei344

総合スコア69398

williamsArk

2019/04/25 18:12

ありがとうございました。まだまだ未熟なので、考えが柔軟に浮かばない＋知識が足りないのがダメなところです。以下のような感じでしょうか？ if(QuizContent[currentNum].contains('img')){ pic.children.src = QuizContent.img; }

kei344

2019/04/25 18:16

containsは何をしているのでしょう･･･。QuizContentはただのオブジェクトだったのでは。

Asylum35aO2

2019/04/25 19:59

ありがとうございました。んん、やはり難しいですね。containはこういう使い方はできませんでしたか。contain('img')で、配列にイメージを含んでいれば、と行けるかなと思ってしまいました。

kei344

2019/04/26 02:09

To: Asylum35aO2さん複数アカウントを持つことは利用規約にて禁止されています。【利用規約｜teratail（テラテイル）】 https://teratail.com/legal 第7条（禁止事項） (11) 複数のユーザーIDを1人で保有する行為

papinianus

2019/04/26 10:07

if(QuizContent[currentNum].img)){ pic.children.src = QuizContent[currentNum].img; } こういうことでは？

williamsArk

2019/04/27 07:29

アカウントに関してはすいません。気づきませんでした。あとで削除いたします。

williamsArk

2019/04/27 07:30

またご返信いただきありがとうございました。試させていただきます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Javascriptを用いて、表示される問題を文章＋画像にする方法

関連した質問