問題をランダムに出したい

JavaScriptでクイズを作っているのですが問題の順番をランダムにしたいのですがやり方がよくわかりません。
どなたか教えてください

HTML
1
2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3<html>
4<head>
5<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
6<title>並び替え問題</title>
7
8<script>
9let score = 0;
10q = new Array();
11q[0]="I sometimes watch movies on Sunday .";
12q[1]="This book is too difficult for me .";
13q[2]="Yumi can't stay at her aunt's house .";
14
15
16
17window.addEventListener('DOMContentLoaded', ()=>{
18  const view=document.querySelector('#view1');
19  q[0].split(' ')
20    .map(x=>[x,Math.random()])
21    .sort((x,y)=>x[1]-y[1])
22    .map(x=>x[0])
23    .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
24  view.addEventListener('dragover',e=>e.preventDefault());
25  var t=null;
26  view.querySelectorAll('div').forEach(x=>{
27    x.setAttribute("draggable","true");
28    x.addEventListener('drop',e=>{
29      view.insertBefore(t,x.nextElementSibling);
30      const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
31      if(q[0]==a){
32        document.getElementById("kekka").innerHTML="正解";
33　　　　 score++;
34      }
35    });
36    x.addEventListener('dragstart',e=>{
37      t=e.target;
38    });
39  });
40});
41
42window.addEventListener('DOMContentLoaded', ()=>{
43  const view=document.querySelector('#view2');
44  q[1].split(' ')
45    .map(x=>[x,Math.random()])
46    .sort((x,y)=>x[1]-y[1])
47    .map(x=>x[0])
48    .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
49  view.addEventListener('dragover',e=>e.preventDefault());
50  var t=null;
51  view.querySelectorAll('div').forEach(x=>{
52    x.setAttribute("draggable","true");
53    x.addEventListener('drop',e=>{
54      view.insertBefore(t,x.nextElementSibling);
55      const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
56      if(q[1]==a){
57        document.getElementById("kekka").innerHTML="正解";
58        score++;
59      }
60    });
61    x.addEventListener('dragstart',e=>{
62      t=e.target;
63    });
64  });
65});
66
67window.addEventListener('DOMContentLoaded', ()=>{
68  const view=document.querySelector('#view3');
69  q[2].split(' ')
70    .map(x=>[x,Math.random()])
71    .sort((x,y)=>x[1]-y[1])
72    .map(x=>x[0])
73    .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
74  view.addEventListener('dragover',e=>e.preventDefault());
75  var t=null;
76  view.querySelectorAll('div').forEach(x=>{
77    x.setAttribute("draggable","true");
78    x.addEventListener('drop',e=>{
79      view.insertBefore(t,x.nextElementSibling);
80      const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
81      if(q[2]==a){
82        document.getElementById("kekka").innerHTML="正解";
83        score++;
84      }
85    });
86    x.addEventListener('dragstart',e=>{
87      t=e.target;
88    });
89  });
90});
91
92
93function showScore(){
94    const totalScore = document.getElementById('score-message');
95    if(score < 11) {
96        totalScore.innerHTML = score + "点"
97    } 
98}
99</script>
100
101</head>
102<style type="text/css"> 
103#kekka{
104    font-size:20px;
105    color: rgb(243, 46, 11);
106     }
107#no{
108    font-size:20px;
109    color: rgb(243, 46, 11);
110}
111body {
112  font-family: serif;
113  text-align: center;
114}
115.quizzes-container {
116  width: 400px;
117  margin: 50px auto;
118}
119.quiz-container {
120  border-bottom:1px solid black;
121  padding-bottom: 20px;
122}
123#score-container {
124  border: 1px solid black;
125  height: 50px;
126  width: 20%;
127  position: relative;
128  left: 40%;
129}
130.btn-score {
131  display: block;
132  margin: 20px auto;
133  font-family: serif;
134  background-color: white;
135}
136
137#view1{display:flex;}
138#view1 div{border:solid 2px;padding:8px 16px 8px 16px ;}
139#view1 div:not(:first-child){border-left:solid 0px;}
140
141#view2{display:flex;}
142#view2 div{border:solid 2px;padding:8px 16px 8px 16px ;}
143#view2 div:not(:first-child){border-left:solid 0px;}
144
145#view3{display:flex;}
146#view3 div{border:solid 2px;padding:8px 16px 8px 16px ;}
147#view3 div:not(:first-child){border-left:solid 0px;}
148
149</style>
150
151<BODY >
152<H2>並び替え問題</H2>
153ドラッグアンドドロップで並び替える<br>
154<div class="quiz-container"></div>
155<h2>第1問</h2>
156<div id="view1"></div><br>
157<div class="quiz-container"></div>
158<h2>第2問</h2>
159<div id="view2"></div><br>
160<div class="quiz-container"></div>
161<h2>第3問</h2>
162<div id="view3"></div><br>
163
164<div id="kekka" ></div>
165<div id="no" ></div>
166<div id="score-container">
167  <p id="score-message"></p>
168</div><button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button></div>
169</body>
170</html>
171

m.ts10806

2021/12/14 19:57

「分からない」だけだと丸投げになるので、現状の問題点・自身が試したこと調べたことを記載した上で、「質問」にしてください。ただ、このコードを自身で作られたなら掲題のことが「わからない」というのは甚だ不思議です。

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

回答2件

ベストアンサー

問題も単語の順番もシャッフルしたいならシャッフル用の関数を用意したほうが効率的です
またフローの中に問題を内在しているようです

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const shuffle=x=>x.map(y=>[y,Math.random()]).sort((y,z)=>y[1]-z[1]).map(y=>y[0]);
4  let q = [
5    "I sometimes watch movies on Sunday .",
6    "This book is too difficult for me .",
7    "Yumi can't stay at her aunt's house .",
8    ];
9  q=shuffle(q);
10  document.querySelectorAll('.view').forEach((view,idx)=>{
11    shuffle(q[idx].split(' '))
12      .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
13    view.addEventListener('dragover',e=>e.preventDefault());
14    var t=null;
15    view.querySelectorAll('div').forEach(x=>{
16      x.setAttribute("draggable","true");
17      x.addEventListener('drop',e=>{
18        view.insertBefore(t,x.nextElementSibling);
19      });
20      x.addEventListener('dragstart',e=>{
21        t=e.target;
22      });
23    });
24  });
25  document.querySelector('.btn-score').addEventListener('click',()=>{
26    let score = 0;
27    const totalScore = document.getElementById('score-message');
28    document.querySelectorAll('.view').forEach((view,idx)=>{
29      const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
30      if(q[idx]==a) score++;
31    });
32    totalScore.textContent = score + "点";
33  });
34});
35</script>
36<div class="quiz-container"></div>
37<h2>第1問</h2>
38<div class="view"></div><br>
39<div class="quiz-container"></div>
40<h2>第2問</h2>
41<div class="view"></div><br>
42<div class="quiz-container"></div>
43<h2>第3問</h2>
44<div class="view"></div><br>
45
46<div id="kekka" ></div>
47<div id="no" ></div>
48<div id="score-container">
49  <p id="score-message"></p>
50</div><button class="btn-score" type="button">合計得点を見る</button></div>