三択クイズの作り方が分からない

https://kuizy.net/quiz/10
現在上のサイトのような３択クイズを作っています。
htmlには何も書かず、jsで要素を作り、ループさせ選択肢や写真なども表示する形です。

ただ、シャッフルと、選択肢を押したときのイベント（色が変わり、正解！と表示される）、正誤判定（正解、不正解のときの）の書き方で困っています。
一つずつだと動作したりするのですが、全部動かそうとするとエラーが出てしまったりします。
かなり長い時間悩み、調べたのですが、自分では解決できなそうなので、答えのコードを教えていただき、そこから自分で考えたり、理解したいと考えております。

なので、分かる方がいましたら、正しいコードを書いていただきたいです。

一応、自分のコードを載せておきます。
私のコードとは全く関係なくても結構です。

html
1コード<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title> Quizy</title>
7  <link rel="stylesheet" href="./styles.css">
8
9  <!-- bootstrap -->
10  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
11</head>
12
13<body>
14
15  <script src="./main.js"></script>  
16  <!-- bootstrap -->
17  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
18  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
19  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
20</body>
21</html>

css
1コード
2//リセットcss
3/* 
4html5doctor.com Reset Stylesheet
5v1.6.1
6Last Updated: 2010-09-17
7Author: Richard Clark - http://richclarkdesign.com
8Twitter: @rich_clark
9*/
10html, body, div, span, object, iframe,
11h1, h2, h3, h4, h5, h6, p, 
12b, i,dl, dt, dd, ol, ul, li,
13time, mark, audio, video {
14 margin:0;
15 padding:0;
16 border:0;
17 outline:0;
18 vertical-align:baseline;
19 background:transparent;
20}
21body {
22 /* プロジェクトによって変動 */
23 min-width: 1000px;
24 color: #000;
25 line-height: 1.6;
26 font-weight: 400;
27 font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'YuGothic', '游ゴシック', 'メイリオ', Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
28 width: 100%;
29 /* font-smoothing: antialiased; */
30 font-variant-numeric: tabular-nums;
31 /* safari hover対策 */
32 -webkit-font-smoothing: antialiased;
33}
34ul, ol {
35 list-style:none;
36}
37img {
38 vertical-align: bottom;
39 line-height: 1.0;
40}
41/* End of リセット css */
42
43
44
45
46/* ここからcss */
47.container{
48  display: flex;
49  flex-direction: column;
50  align-items: center;
51  justify-content: center;
52}
53.box{
54  width: 70%;
55  margin: 0 auto;
56  margin-top: 150px;
57}
58.box > p{
59  font-size: 22px;
60  font-weight: bold;
61  background: linear-gradient(transparent 70%,#f7ff4e 0);
62  display: inline-block;
63}
64.btn{
65  width: 70%;
66}
67.list{
68  text-align: left;
69  border: 1px solid #ebebeb;
70  padding: 13px;
71  margin: 14px 0;
72  font-weight: 600;
73  cursor: pointer;
74  box-shadow: 0 3px 2px -2px rgba(0,0,0,.13);
75}
76.target{
77  border: 1px solid #b3b0b0;
78  height: 100px;
79  padding: 13px;
80  margin: 30px 0;
81  font-weight: 600;
82  box-shadow: 0 3px 2px -2px rgba(0,0,0,.13);
83  display: flex;
84  flex-direction: column;
85  align-items: start;
86}
87.success{
88  background: linear-gradient(transparent 70%,#0BB2EF 0);
89  display: inline-block;
90  
91}
92.false{
93  background: linear-gradient(transparent 70%,#FD6747 0);
94  display: inline-block;
95}
96/* javascript用 */
97.color-blue{
98  color: white;
99  background-color: #0BB2EF;
100}
101.color-red{
102  color: white;
103  background-color: #FD6747;
104}
105.pointer-events{
106  pointer-events: none ;
107  /* cursor: pointer; */
108}
109.img-fluid{
110  width: 100%;  
111}
112

js
1コード
2    
3      'use strict';
4      {        
5        // 配列
6        const quizeSet = ([
7          ["たかなわ","こうわ","たかわ",1],
8          ["かめいど","かめど","かめと",1],
9          ["こうじまち","おかとまち","かゆまち",1],
10          ["ごせいもん","おなりもん","おかどもん",1],
11          ["とどろき","たたりき","たたら",1],
12          ["せきこうい","いじい","しゃくじい",1],
13          ["ざっしょく","ざっしき","ぞうしき",1],
14          ["みとちょう","おかちまち","ごしろちょう",1],
15          ["ろっこつ","ししぼね","しこね",1],
16          ["こぐれ","こばく","こしゃく",1],
17        ]);
18
19        //配列の中身をシャッフル
20        function shuffle(arr) {
21          for (let k = 3 - 1; k > 0; k--) { // k = ランダムに選ぶ終点のインデックス
22            const j = Math.floor(Math.random() * (k + 1));  // j = 範囲内から選ぶランダム変数
23            [arr[j], arr[k]] = [arr[k], arr[j]]; // 分割代入 k と j を入れ替える
24          }
25          return arr;
26        }
27        quizeSet.map(shuffle);
28        
29        //ループ
30        for(let i = 0; i < quizeSet.length; i++){
31          let h = '<div class="container" id="container">'
32          + '<div class="box" id="box">'
33          + '<p class="title" id="title">'
34          +`${i + 1}.この地名はなんて読む？`
35          +'</p>'
36          + `<img class="img-fluid" src="./img/${i}.png" alt="選択肢の写真">`   //変数iを埋め込む
37          + '</div>'
38          + '<div class="btn" id="btn">'
39          + '<ul id="ul">';
40          for(var g = 0; g < 3; g++){
41            h += `<li class="list" id="${i}-${g}-1">${quizeSet[i][g]}</li>`;
42            let id = `document.getElementById("${i}-${g}-1")`;
43          };
44          h +=
45          '<div id="target">'
46          + '<p id="success"></p>'
47          + '<p id="successText"></p>'
48          + '</div>'
49          + '</ul>'
50          + '</div>'
51          + '</div>';
52          document.write(h);  
53        };
54
55
56         //クリックしたときに表示させる文字用
57        // target
58       const target = document.getElementById("target");
59       //  success
60       const success = document.getElementById("success");
61       //  successText
62       const successText = document.getElementById("successText"); 
63       const successNode1 = document.createTextNode('正解!');
64       const successNode2 = document.createTextNode('正解は「たかなわ」です!');
65       const falseNode1 = document.createTextNode('不正解!');
66       const falseNode2 = document.createTextNode('正解は「たかなわ」です!');
67

gentaro

2020/12/07 18:38

> かなり長い時間悩み、調べたのですが、自分では解決できなそうなので、答えのコードを教えていただき、そこから自分で考えたり、理解したいと考えております。 > なので、分かる方がいましたら、正しいコードを書いていただきたいです。そういうサイトじゃありません。あなたの「具体的にわからない」ところを説明してください。 https://teratail.com/help/question-tips https://teratail.com/help/avoid-asking 誰かに先生を依頼したいなら https://menta.work/ こういうサイトを利用しましょう。

sk-sora--ypi

2020/12/07 19:42

> 答えのコードを教えていただきあなたの載せてるURL先が答えなのではないですか？質問するなら具体的にしましょう

tomtomtomtom

2020/12/07 21:12

ページ拝見しました。ちゃんと動いているように見えたのですが、、？？

m.ts10806

2020/12/08 01:04

エラーでたのならエラーを提示してください。答えだけもらって得られる成果は皆無です。

Hogeike

2020/12/08 03:20

プログラムを採点してもらうサービスではありません。分からない箇所を細かい単位に分割して、ひとつずつ質問してください

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

回答4件

HTML
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18
19<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
20
21  <meta name="theme-color" content="#fafafa">
22</head>
23
24<body>
25  <div class="container">
26
27    <div id="js-question" class="mt-3 alert alert-primary" role="alert">
28      ここにクイズを表示させます
29    </div>
30
31  <div class="d-flex justify-content-center">
32    <button type="button" class="btn btn-primary">選択肢</button>
33    <button type="button" class="ml-1 btn btn-primary">選択肢</button>
34    <button type="button" class="ml-1 btn btn-primary">選択肢</button>
35    <button type="button" class="ml-1 btn btn-primary">選択肢</button>
36
37  </div>
38
39
40
41  </div>
42
43  <script src="quiz.js"></script>
44
45
46
47</body>
48</html>

js
1const quiz = [
2
3  {
4    question: 'ピカチュウの図鑑ナンバーは？',
5    answers: ['20','23','25','30'
6    ],
7    correct: '25',
8    hoge: 'ちなみに20番はラッタ、23番はアーボ、30番はニドリーナです！'
9  },
10];
11
12const quizLength = quiz.length;
13let quizIndex = 0;
14let score = 0;
15const $button = document.getElementsByTagName('button');
16const buttonLength = $button.length;
17
18
19// セットアップクイズ
20
21const setupQuiz = () => {
22
23  // 問題文、選択肢を定義
24  document.getElementById('js-question').textContent = quiz[quizIndex].question;
25
26  let buttonIndex = 0;
27    while(buttonIndex < buttonLength){
28    $button[buttonIndex].textContent = quiz[quizIndex].answers[buttonIndex];
29    buttonIndex++;
30    } 
31}
32
33setupQuiz();
34
35
36// 正誤判定機能
37
38const clickHandler = (e) => {
39  if(quiz[quizIndex].correct === e.target.textContent){
40    window.alert('正解！');
41    score++;
42  }
43  else {
44    window.alert('不正解！');
45  }
46  window.alert(quiz[quizIndex].hoge
47
48);
49  quizIndex++;
50
51  if(quizIndex < quizLength){
52    setupQuiz();
53  } else {
54    window.alert('終了！あなたの正解数は' + score + '/' + quizLength + 'です！');
55  }
56};
57
58let handlerIndex = 0;
59while (handlerIndex < buttonLength) {
60  $button[handlerIndex].addEventListener('click', (e) => {
61    clickHandler(e);
62  });
63  handlerIndex++;
64}

一応自分が作った簡易的なくいずゲームになります。
YouTubeに同じものを作っている教材があるのでご活用ください。

投稿2020/12/10 01:04

編集2020/12/10 05:56

Pro01x19

総合スコア17

babu_babu_baboo

2020/12/10 05:50

最後の while を閉じるための "}" が抜けています。終了した後、ボタンを押すとエラーを吐き出しています。

Pro01x19

2020/12/10 05:56

コピペの際に抜け落ちてしまっていたようです、修正いたしました。ご迷惑をおかけしてしまい申し訳ございませんでした。

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

html+cssで作成した4択クイズです。
参考までにどうぞ。
Javascriptで作るにしても考え方は同じかと
思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        span {
10            display: block;
11            margin: 15px 0;
12        }
13
14        span[class="All_OK"] {
15            display: none;
16        }
17
18        span[class="All_NG"] {
19            display: none;
20        }
21
22        span[class="Q1_OK"] {
23            display: none;
24        }
25
26        span[class="Q2_OK"] {
27            display: none;
28        }
29
30        input[data-q1="ok"]:checked~input[data-q2="ok"]:checked~span[class="All_OK"] {
31            display: block;
32        }
33
34        input[data-q1="ng"]:checked~input[data-q2="ng"]:checked~span[class="All_NG"] {
35            display: block;
36        }
37
38        input[data-q1="ok"]:checked~input[data-q2="ng"]:checked~span[class="Q1_OK"] {
39            display: block;
40        }
41
42        input[data-q1="ng"]:checked~input[data-q2="ok"]:checked~span[class="Q2_OK"] {
43            display: block;
44        }
45    </style>
46</head>
47
48<body>
49    <span>Q1 今何問目？</span>
50    <input type="radio" name="q1" value="1" data-q1="ok">1問目
51    <input type="radio" name="q1" value="2" data-q1="ng">2問目
52    <input type="radio" name="q1" value="3" data-q1="ng">3問目
53    <input type="radio" name="q1" value="4" data-q1="ng">4問目
54    <span>Q2 今何問目？</span>
55    <input type="radio" name="q2" value="1" data-q2="ng">1問目
56    <input type="radio" name="q2" value="2" data-q2="ok">2問目
57    <input type="radio" name="q2" value="3" data-q2="ng">3問目
58    <input type="radio" name="q2" value="4" data-q2="ng">4問目
59
60    <span class="All_OK">全問正解！</span>
61    <span class="All_NG">全問不正解！</span>
62    <span class="Q1_OK">1問正解 Q1正解 Q2不正解 Q2の答え2問目 </span>
63    <span class="Q2_OK">1問正解 Q2正解 Q1不正解 Q1の答え1問目 </span>
64</body>
65
66</html>

投稿2020/12/10 00:45

Jon_do

総合スコア1373

babu_babu_baboo

2020/12/10 06:03

インライン要素を diplay:block; にしたからと言ってブロック要素で囲まないのは、マークアップ言語として相応しくありません。ついでに同じ階層上でないと機能しないことを明示すべきです。

Jon_do

2020/12/10 07:37

確かに、同じ階層上でないと機能しないことを明示しとくべきでした。マークアップとしてはbodyがブロック要素なので囲まれてることになるんじゃないかな？と思いました。 https://validator.w3.org/　ここで構文チェックしてみてもエラーも吐かないのでベストではなくともまぁいいような気もします。難しい。

Lhankor_Mhy

2020/12/10 07:58

横からすみません。 >babu_babu_babooさん body要素直下にインライン要素を置いてはいけないのは、HTML4までです。 HTML5では、インライン要素という分類がなくなりました。body要素の内容として許可されているのは「フローコンテンツ」です。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/body

babu_babu_baboo

2020/12/10 09:09

もうそれは思想的なものですね。そうなれば強要できませんね。「タグの名前を見て構造を理解する」は、それでも基本です。

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

正しいコード

ではないことだけには自信がある。

私のコードとは全く関係なくても

根本が違いすぎると思うよ。
html と css で出来ないことをスクリプトで補うべき。

解読しやすいように？短く書きました。
classList を使うべきだったのかとふと思う。

html&css&Js
1<!DOCTYPE html><meta charset="utf-8">
2<title></title>
3<style>
4* { margin: 0; padding: 0; }
5section {width: 40em; margin: 0 auto;}
6#A>li:first-of-type {display:none;}
7#A>li h3 { border-bottom: 6px yellow solid; }
8#A>li { margin: 2em 0; padding: 0;}
9#A li img { display: block; width: 100%; height: 100px; border: 1px silver solid;}
10#A p { border: 1px silver solid; padding: 1em;}
11#A ul li { list-style: none; padding: 1em; margin: 1em 0; border: 1px silver solid;}
12span.win{border-bottom: 4px #0dd solid; }
13span.lose{border-bottom: 4px red solid; }
14
15#A>li p, #A>li.win span.lose, #A>li.lose span.win, #B { display: none; }
16#A>li.win > p, #A > li.lose > p, #A.comp+#B  { display: block;}
17
18#A>li.win ul li.win, #A>li.lose li.win {background: #0dd;}
19#A>li.lose ul li.bad {background: #faa;}
20#A>li.win p span.win {display: inline;}
21
22</style>
23<body>
24<h1>Quize</h1>
25<section>
26  <ol id="A">
27    <li>
28      <h3></h3>
29      <img src="" alt="問題の画像です">
30      <ul class="list"></ul>
31      <p>
32        <span class="win">正解！</span>
33        <span class="lose">不正解！</span><br>
34        正解は「<output name="a"></output>」です！
35  </ol>
36  <p id="B">
37    正解は、<output name="n"></output> 問でした。
38</section>
39
40<script>
41class QData {//問題
42  constructor (heading, img, choices, correct) {
43    Object.assign (this, {heading, img, choices, correct});
44  }
45}
46
47class Quiz {
48
49  constructor (target, list, result) {
50    Object.assign (this, {target, list, result});
51    target.addEventListener ('click', this, false);
52    this.disp ();
53  }
54
55
56  disp () {
57    let
58      {target, list, result} = this,
59      [first, ...other] = target.querySelectorAll ('ol > li');
60
61    other.forEach (e=> e.remove ());//削除
62    
63    for (let {heading, img, choices, correct} of list) {
64      let
65        li = target.appendChild (first.cloneNode (true)),
66        [h3, img, ul, output] = li.querySelectorAll ('h3, img, ul, p>output')
67
68
69      h3.textContent = heading;
70      img.src = img; // img.alt = img;
71      output.value = choices[correct];
72
73      choices.forEach ((c, i)=> {
74        let li = ul.appendChild (document.createElement ('li'));
75        li.textContent = c;
76        li.className = i === correct ? 'win': 'lose';
77      });
78
79      for (let i = ul.children.length; 1 < i; i--)
80        ul.appendChild (ul.children[Math.random () * i |0]);
81    }
82  }
83
84
85  setAnswer (li, css) {
86    li.className = css;
87
88    let
89      win = this.target.querySelectorAll ('ol > li.win').length,
90      lose = this.target.querySelectorAll ('ol > li.lose').length,
91      output = this.result.querySelector ('output');
92
93    if (win + lose == this.list.length)
94      this.target.className = 'comp';
95
96    output.value = win;
97  }
98
99
100  handleEvent (event) {
101    let e = event.target, ul = e.closest ('ul.list');
102    if (ul) {
103      let p = ul.closest ('li');
104      if (! p.className) {
105        this.setAnswer (p, e.className);
106        'lose' == e.className && this.setAnswer (e, 'bad');
107      }
108    }
109  }
110}
111
112const
113  q = [
114    new QData ('この地名はなんて読む？', 'q0.jpg', ["たかなわ","こうわ","たかわ"], 0),
115    new QData ('この地名はなんて読む？', 'q1.jpg', ["かめいど","かめど","かめと"], 0)
116  ];
117
118new Quiz (A, q, B);
119
120</script>
121