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

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

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

693閲覧

ランダム表示形式のクイズJSで格納した画像を表示させるようにするにはどうしたら良いでしょうか?

Toshiki0615

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/07/09 03:40

前提・実現したいこと

JS上で配列として格納させた画像を表示させたいです。加えて、しっかりと表示ができたら、CSSで修正できるようにしたいです。CSS上でも、どのようにしたらimgの調整ができるのか教えて頂けるとありがたいです。

発生している問題・エラーメッセージ

画像を表示したい位置に画像ではなく文字がでてきてしまっています

該当のソースコード

HTML

1 <div class="gwd-page-content gwd-div-zdu5"> 2 <section class="container"> 3 <p id="question"></p> 4 <div id=""></div> 5 <ul id="image"> 6 <li> 7 <div>A0</div> 8 <div> 9 <gwd-image source="a0.png" id="img[0].src"></gwd-image> 10 </div> 11 </li> 12 <li> 13 <div>A1</div> 14 <div> 15 <gwd-image source="a1.png" id="img[1].src"></gwd-image> 16 </div> 17 </li> 18 <li> 19 <div>A2</div> 20 <div> 21 <gwd-image source="a2.png" id="img[2].src"></gwd-image> 22 </div> 23 </li> 24 </ul> 25 <ul id="choices"></ul> 26 <div id="btn" class="disabled">Next</div> 27 <section id="result" class="hidden"> 28 <p></p> 29 <a href="https://www.rakuten.co.jp/">申込へ進む</a> 30 </section> 31 </section> 32 <script src="main.js"></script> 33 </div>

Java

1'use strict'; 2 3{ 4 const question = document.getElementById('question'); 5 const image = document.getElementById('image'); 6 const choices = document.getElementById('choices'); 7 const btn = document.getElementById('btn'); 8 const result = document.getElementById('result'); 9 const scoreLabel = document.querySelector('#result > p'); 10 11 const quizSet = shuffle([ 12 {q: 'What is A?', c: ['A0', 'A1', 'A2'], pic: 'img[0].src'}, 13 {q: 'What is B?', c: ['B0', 'B1', 'B2'], pic: 'img[1].src'}, 14 {q: 'What is C?', c: ['C0', 'C1', 'C2'], pic: 'img[2].src'}, 15 ]); 16 let currentNum = 0; 17 let isAnswered; 18 let score = 0; 19 let img = new Array(); 20 img[0] = new Image(); 21 img[0].src="img/img1.png"; 22 img[1] = new Image(); 23 img[1].src="img/img2.png"; 24 img[2] = new Image(); 25 img[2].src="img/img3.png"; 26 img[3] = new Image(); 27 img[3].src="img/img4.png"; 28 img[4] = new Image(); 29 img[4].src="img/img5.png"; 30 img[5] = new Image(); 31 img[5].src="img/img6.png"; 32 33 function shuffle(arr) { 34 for (let i = arr.length - 1; i > 0; i--) { 35 const j = Math.floor(Math.random() * (i + 1)); 36 [arr[j], arr[i]] = [arr[i], arr[j]]; 37 } 38 return arr; 39 } 40 41 function checkAnswer(li) { 42 if (isAnswered) { 43 return; 44 } 45 isAnswered = true; 46 47 if (li.textContent === quizSet[currentNum].c[0]) { 48 li.classList.add('correct'); 49 score++; 50 } else { 51 li.classList.add('wrong'); 52 } 53 54 btn.classList.remove('disabled'); 55 } 56 57 function setQuiz() { 58 isAnswered = false; 59 60 question.textContent = quizSet[currentNum].q; 61 image.innerHTML = quizSet[currentNum].pic; 62 63 while (choices.firstChild) { 64 choices.removeChild(choices.firstChild); 65 } 66 67 const shuffledChoices = shuffle([...quizSet[currentNum].c]); 68 shuffledChoices.forEach(choice => { 69 const li = document.createElement('li'); 70 li.textContent = choice; 71 li.addEventListener('click', () => { 72 checkAnswer(li); 73 }); 74 choices.appendChild(li); 75 }); 76 77 if (currentNum === quizSet.length - 1) { 78 btn.textContent = 'Show Score'; 79 } 80 } 81 82 setQuiz(); 83 84 btn.addEventListener('click', () => { 85 if (btn.classList.contains('disabled')) { 86 return; 87 } 88 btn.classList.add('disabled'); 89 90 if (currentNum === quizSet.length - 1) { 91 scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`; 92 result.classList.remove('hidden'); 93 } else { 94 currentNum++; 95 setQuiz(); 96 } 97 }); 98}

CSS

1body { 2 font-size: 40px; 3 font-family: Verdana, sans-serif; 4} 5 6.container { 7 width: 1100px; 8 margin: 20px auto; 9 background: #fff; 10 border-radius: 4px; 11 padding: 32px; 12 position: relative; 13} 14 15#question { 16 margin-bottom: 32px; 17 font-weight: bold; 18} 19 20#img { 21 margin-bottom: 32px; 22 font-weight: bold; 23} 24 25#choices { 26 list-style: none; 27 padding: 0; 28 margin-bottom: 32px; 29} 30 31#choices > li { 32 border: 1px solid #ccc; 33 border-radius: 4px; 34 padding: 10px; 35 margin-bottom: 10px; 36 cursor: pointer; 37} 38 39#choices > li:hover { 40 background: #f8f8f8; 41} 42 43#choices > li.correct { 44 background: #d4edda; 45 border-color: #c3e6cb; 46 color: #155724; 47 font-weight: bold; 48} 49 50#choices > li.correct::after { 51 content: ' ... correct!'; 52} 53 54#choices > li.wrong { 55 background: #f8d8da; 56 border-color: #f5c6cb; 57 color: #721c24; 58 font-weight: bold; 59} 60 61#choices > li.wrong::after { 62 content: ' ... wrong!'; 63} 64 65#btn, #result > a { 66 background: #3498db; 67 padding: 8px; 68 border-radius: 4px; 69 cursor: pointer; 70 text-align: center; 71 color: #fff; 72 box-shadow: 0 4px 0 #2880b9; 73} 74 75#btn.disabled { 76 background: #ccc; 77 box-shadow: 0 4px 0 #bbb; 78 opacity: 0.7; 79} 80 81#result { 82 position: absolute; 83 width: 1000px; 84 background: #fff; 85 padding: 30px; 86 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 87 top: 200px; 88 left: 0; 89 right: 0; 90 margin: 0 auto; 91 border-radius: 4px; 92 text-align: center; 93 transition: 0.4s; 94} 95 96#result.hidden { 97 transform: translateY(-500px); 98} 99 100#result > p { 101 font-size: 125px; 102 text-decoration: bold; 103} 104 105#result > a { 106 display: block; 107 text-decoration: none; 108}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問