4択のクイズを作っていて、普段は文章しか出さないのですが、問題によっては、文章が表示されるセクションの下の位置に、画像を貼りたいと思っています。以下の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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/25 18:12
2019/04/25 18:16
2019/04/25 19:59
2019/04/26 02:09
2019/04/26 10:07
2019/04/27 07:29
2019/04/27 07:30