質問編集履歴

4

修正

2020/07/01 06:06

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -76,18 +76,10 @@
76
76
 
77
77
 
78
78
 
79
- 'use strict';
80
-
81
-
82
-
83
79
  {
84
80
 
85
81
  const btn = document.getElementById('btn');
86
82
 
87
- const result = document.getElementById('result');
88
-
89
- const scoreLabel = document.querySelector('#result > p');
90
-
91
83
  const timer = document.getElementById('timer'); //1
92
84
 
93
85
  const sbtn = document.getElementById('sbtn'); //2
@@ -106,69 +98,145 @@
106
98
 
107
99
 
108
100
 
109
-
110
-
111
- document.addEventListener('DOMContentLoaded', function() {
101
+ function countDown() { // countDownの宣言
102
+
112
-
103
+ timerId = setTimeout (function() {
104
+
105
+ //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ)
106
+
107
+
108
+
109
+ // const elapsedTime = Date.now() - startTime; 経過時間 = 現在時刻 - スタートした時間
110
+
111
+ // timeLeft = timeToCountDown - elapsedTime; 残り時間 = カウントダウン時間 - 経過時間
112
+
113
+ timeLeft = timeToCountDown - (Date.now() - startTime);
114
+
115
+ //elapsedTimeは、1度しか使わないので直接代入した↑
116
+
117
+
118
+
119
+ if(timeLeft < 0){ //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止)
120
+
113
- startTime = Date.now();
121
+ clearTimeout(timerId);
122
+
114
-
123
+ timeLeft = 0; //timeLeftを0にして、updateTimerで更新する
124
+
125
+ updateTimer(timeLeft);
126
+
127
+ return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
128
+
129
+ }
130
+
131
+
132
+
133
+ updateTimer(timeLeft); // 呼び出し(渡すミリ秒はtimerLeft)
134
+
135
+ countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。
136
+
115
- countDown();
137
+ }, 10);
138
+
139
+ }
140
+
141
+
142
+
143
+ sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON
144
+
145
+ startTime = Date.now(); // 押したときの時刻を取得
146
+
147
+ countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/
116
148
 
117
149
  });
118
150
 
119
151
 
120
152
 
153
+
154
+
155
+
156
+
157
+ function setQuiz() {
158
+
159
+ isAnswered = false;
160
+
161
+
162
+
121
- function countDown() { // countDownの宣言
163
+ question.textContent = quizSet[currentNum].q;
122
-
164
+
165
+
166
+
123
- timerId = setTimeout (function() {
167
+ while (choices.firstChild) {
124
-
125
- //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ)
168
+
126
-
127
-
128
-
129
- // const elapsedTime = Date.now() - startTime; 経過時間 = 現在時刻 - スタートした時間
130
-
131
- // timeLeft = timeToCountDown - elapsedTime; 残り時間 = カウントダウン時間 - 経過時間
132
-
133
- timeLeft = timeToCountDown - (Date.now() - startTime);
134
-
135
- //elapsedTimeは、1度しか使わないので直接代入した↑
136
-
137
-
138
-
139
- if(timeLeft < 0){ //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止)
140
-
141
- clearTimeout(timerId);
169
+ choices.removeChild(choices.firstChild);
142
-
143
- timeLeft = 0; //timeLeftを0にして、updateTimerで更新する
170
+
144
-
145
- updateTimer(timeLeft);
146
-
147
- return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
148
-
149
- }
171
+ }
150
-
151
-
152
-
153
- updateTimer(timeLeft); // 呼び出し(渡すミリ秒はtimerLeft)
172
+
154
-
173
+
174
+
155
- countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。
175
+ const shuffledChoices = shuffle([...quizSet[currentNum].c]);
176
+
156
-
177
+ shuffledChoices.forEach(choice => {
178
+
179
+ const li = document.createElement('li');
180
+
181
+ li.textContent = choice;
182
+
183
+ li.addEventListener('click', () => {
184
+
185
+ checkAnswer(li);
186
+
157
- }, 10);
187
+ });
188
+
189
+ choices.appendChild(li);
190
+
191
+ });
192
+
193
+
194
+
195
+ if (currentNum === quizSet.length - 1) {
196
+
197
+ btn.textContent = 'Show Score';
198
+
199
+ }
200
+
201
+
158
202
 
159
203
  }
160
204
 
161
205
 
162
206
 
207
+ setQuiz();
208
+
209
+
210
+
163
- sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON
211
+ btn.addEventListener('click', () => {
212
+
164
-
213
+ if (btn.classList.contains('disabled')) {
214
+
215
+ return;
216
+
217
+ }
218
+
219
+ btn.classList.add('disabled');
220
+
221
+
222
+
223
+ if (currentNum === quizSet.length - 1) {
224
+
165
- startTime = Date.now(); // 押したときの時刻を取得
225
+ scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
166
-
226
+
167
- countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/
227
+ result.classList.remove('hidden');
228
+
229
+ } else {
230
+
231
+ currentNum++;
232
+
233
+ setQuiz();
234
+
235
+ }
168
236
 
169
237
  });
170
238
 
171
-
239
+ }
172
240
 
173
241
 
174
242
 
@@ -190,4 +258,4 @@
190
258
 
191
259
 
192
260
 
193
- ここにより詳細な情報をしてい。
261
+ していただいたコードで解決できました

3

修正

2020/07/01 06:06

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -66,125 +66,9 @@
66
66
 
67
67
 
68
68
 
69
- ```html
70
-
71
- <!DOCTYPE html>
72
-
73
- <html lang="ja">
74
-
75
- <head>
76
-
77
- <meta charset="utf-8">
78
-
79
- <title>Quiz</title>
80
-
81
- <link rel="stylesheet" href="css/styles.css">
82
-
83
- </head>
84
-
85
- <body>
86
-
87
- <section class="container2"> <!-- スタート画面-->
88
-
89
- <p>ボタンクリックで時間制限のあるクイズが始まります。</p>
90
-
91
- <div class="sbtn_move">
92
-
93
- <button id="sbtn" type="button" onclick="location.href='quiz.html'">START</button>
94
-
95
- </div>
96
-
97
- </section>
98
-
99
- <section hidden>
100
-
101
- <div></div>
102
-
103
- </section>
104
69
 
105
70
 
106
71
 
107
- <div hidden id="question"></div> <!--要素を取得させるだけのため、非表示-->
108
-
109
- <div hidden id="choices"></div>
110
-
111
- <div hidden id="setQuiz"></div>
112
-
113
- <div hidden id="btn"></div> <!--要素を取得させるだけのため、非表示-->
114
-
115
-
116
-
117
- <script src="js/main.js"></script>
118
-
119
- </body>
120
-
121
- </html>
122
-
123
- ```
124
-
125
-
126
-
127
- ```html
128
-
129
-
130
-
131
- <!DOCTYPE html>
132
-
133
- <html lang="ja">
134
-
135
- <head>
136
-
137
- <meta charset="utf-8">
138
-
139
- <title>Quiz</title>
140
-
141
- <link rel="stylesheet" href="css/styles.css">
142
-
143
- </head>
144
-
145
- <body>
146
-
147
- <section class="container"> <!-- クイズ画面-->
148
-
149
- <p id="question"></p> <!--問題文,jsで扱いやすいようにidを使う。-->
150
-
151
- <ul id="choices"> <!--選択肢-->
152
-
153
- </ul>
154
-
155
- <div id="btn" class="disabled">Next</div> <!--次の問題に進むボタン,押せない状態のボタン-->
156
-
157
-
158
-
159
- <section class="container3">
160
-
161
- <div id="timer">00:00.000</div> <!--カウントダウンタイマーを表示-->
162
-
163
- </section>
164
-
165
- <section id="result" class="hidden"> <!--結果画面,最初はクラスで画面外へ隠す-->
166
-
167
- <p></p>
168
-
169
- <a href="index.html">Replay?</a> <!--ページ再読み込みでゲームを最初から始める-->
170
-
171
- </section>
172
-
173
- </section>
174
-
175
-
176
-
177
- <button hidden id="sbtn"></button> <!--要素を取得させるだけのため、このボタンは非表示-->
178
-
179
-
180
-
181
- <script src="js/main.js"></script>
182
-
183
- </body>
184
-
185
- </html>
186
-
187
- ```
188
72
 
189
73
 
190
74
 
@@ -197,10 +81,6 @@
197
81
 
198
82
 
199
83
  {
200
-
201
- const question = document.getElementById('question');
202
-
203
- const choices = document.getElementById('choices');
204
84
 
205
85
  const btn = document.getElementById('btn');
206
86
 
@@ -224,29 +104,7 @@
224
104
 
225
105
 
226
106
 
227
- /*constは初期化が必要 const X = 数値、もしくは初期化しない場合は let x; */
228
107
 
229
-
230
-
231
- function updateTimer(t) { //ミリ秒を渡すと、分や秒に直す。t でミリ秒を渡す。
232
-
233
- const d = new Date(t); //渡されたtで、Dateオブジェクトを作る。
234
-
235
- let m = d.getMinutes(); //このDateオブジェクトから「分や秒」を取り出す。
236
-
237
- let s = d.getSeconds();
238
-
239
- let ms = d.getMilliseconds();
240
-
241
- m = ('0' + m).slice(-2); //文字列と数値を連結させると文字列になる。
242
-
243
- s = ('0' + s).slice(-2); //文字列と数値を連結させると文字列になる。
244
-
245
- ms = ('00' + ms).slice(-3); //文字列と数値を連結させると文字列になる。
246
-
247
- timer.textContent = m + ':' + s + '.' + ms; //timerの中身を書き換え。
248
-
249
- }
250
108
 
251
109
 
252
110
 

2

修正

2020/07/01 05:58

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -314,153 +314,7 @@
314
314
 
315
315
 
316
316
 
317
- const quizSet = shuffle([
317
+
318
-
319
- {q: '世界で一番大きな湖は?', c: ['カスピ海', 'カリブ海', '琵琶湖']},
320
-
321
- {q: '2の8乗は?', c: ['256', '64', '1024']},
322
-
323
- {q: '次のうち、最初にリリースされた言語は?', c: ['Python', 'JavaScript', 'HTML']},
324
-
325
- ]);
326
-
327
- let currentNum = 0;
328
-
329
- let isAnswered;
330
-
331
- let score = 0;
332
-
333
-
334
-
335
- function shuffle(arr) {
336
-
337
- for (let i = arr.length - 1; i > 0; i--) {
338
-
339
- const j = Math.floor(Math.random() * (i + 1));
340
-
341
- [arr[j], arr[i]] = [arr[i], arr[j]];
342
-
343
- }
344
-
345
- return arr;
346
-
347
- }
348
-
349
-
350
-
351
- function checkAnswer(li) {
352
-
353
- if (isAnswered) {
354
-
355
- return;
356
-
357
- }
358
-
359
- isAnswered = true;
360
-
361
-
362
-
363
- if (li.textContent === quizSet[currentNum].c[0]) {
364
-
365
- li.classList.add('correct');
366
-
367
- score++;
368
-
369
- } else {
370
-
371
- li.classList.add('wrong');
372
-
373
- }
374
-
375
-
376
-
377
- btn.classList.remove('disabled');
378
-
379
- }
380
-
381
-
382
-
383
- function setQuiz() {
384
-
385
- isAnswered = false;
386
-
387
-
388
-
389
- question.textContent = quizSet[currentNum].q;
390
-
391
-
392
-
393
- while (choices.firstChild) {
394
-
395
- choices.removeChild(choices.firstChild);
396
-
397
- }
398
-
399
-
400
-
401
- const shuffledChoices = shuffle([...quizSet[currentNum].c]);
402
-
403
- shuffledChoices.forEach(choice => {
404
-
405
- const li = document.createElement('li');
406
-
407
- li.textContent = choice;
408
-
409
- li.addEventListener('click', () => {
410
-
411
- checkAnswer(li);
412
-
413
- });
414
-
415
- choices.appendChild(li);
416
-
417
- });
418
-
419
-
420
-
421
- if (currentNum === quizSet.length - 1) {
422
-
423
- btn.textContent = 'Show Score';
424
-
425
- }
426
-
427
- }
428
-
429
-
430
-
431
- setQuiz();
432
-
433
-
434
-
435
- btn.addEventListener('click', () => {
436
-
437
- if (btn.classList.contains('disabled')) {
438
-
439
- return;
440
-
441
- }
442
-
443
- btn.classList.add('disabled');
444
-
445
-
446
-
447
- if (currentNum === quizSet.length - 1) {
448
-
449
- scoreLabel.textContent = `Score: ${score} / ${quizSet.length}`;
450
-
451
- result.classList.remove('hidden');
452
-
453
- } else {
454
-
455
- currentNum++;
456
-
457
- setQuiz();
458
-
459
- }
460
-
461
- });
462
-
463
- }
464
318
 
465
319
  ```
466
320
 

1

修正

2020/06/28 09:14

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -286,8 +286,6 @@
286
286
 
287
287
  updateTimer(timeLeft);
288
288
 
289
- result();
290
-
291
289
  return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
292
290
 
293
291
  }