teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問カウントが0になったら残りの問題全てを不正解にしたい

編集履歴

質問編集履歴

11

修正

2020/07/01 15:26

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -290,4 +290,10 @@
290
290
 
291
291
 
292
292
 
293
+ ```ここに言語を入力
294
+
295
+ const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
296
+
297
+ ```
298
+
293
- ここにより詳細な情報を記載してください。
299
+ 不正解の数ではなく、質問の数で計算させることにしました。

10

修正

2020/07/01 15:26

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -18,50 +18,264 @@
18
18
 
19
19
 
20
20
 
21
-
22
-
23
- 以下のブロック内の「currentNum = quizSet.length - 1;」と「isAnswered = true;」が関係しているかなと思って試したりしたのですが、解決できません。
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
21
  よろしくお願いします。
36
22
 
37
23
 
38
24
 
25
+
26
+
27
+
28
+
29
+ ### 発生している問題・エラーメッセージ
30
+
31
+
32
+
33
+ ```
34
+
35
+ 時間切れ後の正答率が違う。
36
+
37
+ (全３問中１問正解だったら正答率が50%となってしまいます。)
38
+
39
+ ```
40
+
41
+
42
+
43
+ ### 該当のソースコード
44
+
45
+
46
+
39
- ```ここに言語を入力
47
+ ```javascript
48
+
49
+
50
+
40
-
51
+ const correctLavel = document.getElementById('correct'); // 正解
52
+
53
+ const wrongLavel = document.getElementById('wrong'); // 不正解
54
+
55
+
56
+
57
+
58
+
59
+ let correct = 0;
60
+
61
+ let wrong = 0;
62
+
63
+
64
+
65
+
66
+
67
+ document.addEventListener('DOMContentLoaded', function() {　//画面表示したら以下を発火
68
+
69
+ startTime = Date.now();
70
+
71
+ countDown();
72
+
73
+ });
74
+
75
+
76
+
77
+ function countDown() {
78
+
79
+ timerId = setTimeout (function() {
80
+
81
+ //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ)
82
+
83
+
84
+
85
+ timeLeft = timeToCountDown - (Date.now() - startTime);
86
+
87
+ //elapsedTimeは、1度しか使わないので直接代入した↑
88
+
89
+
90
+
41
- if(timeLeft < 0){ 　//カウントが0のときの処理
91
+ if(timeLeft < 0){ //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止)
42
92
 
43
93
  clearTimeout(timerId);
44
94
 
45
- timeLeft = 0;
95
+ timeLeft = 0; //timeLeftを0にして、updateTimerで更新する
46
96
 
47
97
  updateTimer(timeLeft);
48
98
 
49
-
50
-
99
+
100
+
51
- btn.classList.remove('disabled');
101
+ btn.classList.remove('disabled'); // Nextボタンのdisabledを解除する
52
-
102
+
53
- btn.textContent = '結果発表';
103
+ btn.textContent = '結果発表'; // Nextボタンの表示は「結果発表」にする
54
-
104
+
55
- currentNum = quizSet.length - 1;//ここを試してみた
105
+ currentNum = quizSet.length - 1; // 最終問題まで終わったとする
56
-
106
+
57
- isAnswered = true; 　　　　　　//ここを試してみた
107
+ isAnswered = true;
58
-
108
+
59
- return;
109
+ return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
60
110
 
61
111
  }
62
112
 
63
113
 
64
114
 
115
+ updateTimer(timeLeft); // 呼び出し(渡すミリ秒はtimerLeft)
116
+
117
+ countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。
118
+
119
+ }, 10);
120
+
121
+ }
122
+
123
+
124
+
125
+
126
+
127
+ sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON
128
+
129
+ startTime = Date.now(); // 押したときの時刻を取得
130
+
131
+ countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/
132
+
133
+ });
134
+
135
+
136
+
137
+ let currentNum = 0;
138
+
139
+ let isAnswered;
140
+
141
+ let score = 0;
142
+
143
+
144
+
145
+
146
+
147
+ function checkAnswer(li) {
148
+
149
+ if (isAnswered) {
150
+
151
+ return;
152
+
153
+ }
154
+
155
+ isAnswered = true;
156
+
157
+
158
+
159
+ if (li.textContent === quizSet[currentNum].c[0]) {
160
+
161
+ li.classList.add('correct');　　　　
162
+
163
+ score++;
164
+
165
+ correct++;
166
+
167
+ } else {
168
+
169
+ li.classList.add('wrong');　　　
170
+
171
+ wrong++;
172
+
173
+ }
174
+
175
+
176
+
177
+ btn.classList.remove('disabled');
178
+
179
+ }
180
+
181
+
182
+
183
+ function setQuiz() {
184
+
185
+ isAnswered = false;
186
+
187
+
188
+
189
+ question.textContent = quizSet[currentNum].q;
190
+
191
+
192
+
193
+ while (choices.firstChild) {
194
+
195
+ choices.removeChild(choices.firstChild);
196
+
197
+ }
198
+
199
+
200
+
201
+ const shuffledChoices = shuffle([...quizSet[currentNum].c]);
202
+
203
+ shuffledChoices.forEach(choice => {
204
+
205
+ const li = document.createElement('li');
206
+
207
+ li.textContent = choice;
208
+
209
+ li.addEventListener('click', () => {
210
+
211
+ checkAnswer(li);
212
+
213
+ if (currentNum === quizSet.length - 1) clearTimeout(timerId); // 最終問題に回答したらタイマー止める
214
+
215
+ });
216
+
217
+ choices.appendChild(li);
218
+
219
+ });
220
+
221
+
222
+
223
+ if (currentNum === quizSet.length - 1) {
224
+
225
+ btn.textContent = '結果発表';
226
+
227
+ }
228
+
229
+ }
230
+
231
+
232
+
233
+ setQuiz();
234
+
235
+
236
+
237
+ btn.addEventListener('click', () => {
238
+
239
+ if (btn.classList.contains('disabled')) {
240
+
241
+ return;
242
+
243
+ }
244
+
245
+ btn.classList.add('disabled');
246
+
247
+
248
+
249
+ showResult();
250
+
251
+
252
+
253
+ function showResult(){
254
+
255
+ const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
256
+
257
+ if (currentNum === quizSet.length - 1) { //最終問題だったらスコアを表示
258
+
259
+ scoreLabel.innerHTML = `${quizSet.length} <br>
260
+
261
+ ${score}<br>
262
+
263
+ ${accuracy.toFixed(2)}%`;
264
+
265
+ result.classList.remove('hidden');
266
+
267
+ } else { //違ったら次の問題へ
268
+
269
+ currentNum++;
270
+
271
+ setQuiz();
272
+
273
+ }
274
+
275
+ }
276
+
277
+ });
278
+
65
279
  }
66
280
 
67
281
  ```
@@ -72,266 +286,6 @@
72
286
 
73
287
 
74
288
 
75
- ### 発生している問題・エラーメッセージ
76
-
77
-
78
-
79
- ```
80
-
81
- 時間切れ後の正答率が違う。
82
-
83
- (全３問中１問正解だったら正答率が50%となってしまいます。)
84
-
85
- ```
86
-
87
-
88
-
89
- ### 該当のソースコード
90
-
91
-
92
-
93
- ```javascript
94
-
95
-
96
-
97
- const correctLavel = document.getElementById('correct'); // 正解
98
-
99
- const wrongLavel = document.getElementById('wrong'); // 不正解
100
-
101
-
102
-
103
-
104
-
105
- let correct = 0;
106
-
107
- let wrong = 0;
108
-
109
-
110
-
111
-
112
-
113
- document.addEventListener('DOMContentLoaded', function() {　//画面表示したら以下を発火
114
-
115
- startTime = Date.now();
116
-
117
- countDown();
118
-
119
- });
120
-
121
-
122
-
123
- function countDown() {
124
-
125
- timerId = setTimeout (function() {
126
-
127
- //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ)
128
-
129
-
130
-
131
- timeLeft = timeToCountDown - (Date.now() - startTime);
132
-
133
- //elapsedTimeは、1度しか使わないので直接代入した↑
134
-
135
-
136
-
137
- if(timeLeft < 0){ //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止)
138
-
139
- clearTimeout(timerId);
140
-
141
- timeLeft = 0; //timeLeftを0にして、updateTimerで更新する
142
-
143
- updateTimer(timeLeft);
144
-
145
-
146
-
147
- btn.classList.remove('disabled'); // Nextボタンのdisabledを解除する
148
-
149
- btn.textContent = '結果発表'; // Nextボタンの表示は「結果発表」にする
150
-
151
- currentNum = quizSet.length - 1; // 最終問題まで終わったとする
152
-
153
- isAnswered = true;
154
-
155
- return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
156
-
157
- }
158
-
159
-
160
-
161
- updateTimer(timeLeft); // 呼び出し(渡すミリ秒はtimerLeft)
162
-
163
- countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。
164
-
165
- }, 10);
166
-
167
- }
168
-
169
-
170
-
171
-
172
-
173
- sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON
174
-
175
- startTime = Date.now(); // 押したときの時刻を取得
176
-
177
- countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/
178
-
179
- });
180
-
181
-
182
-
183
- let currentNum = 0;
184
-
185
- let isAnswered;
186
-
187
- let score = 0;
188
-
189
-
190
-
191
-
192
-
193
- function checkAnswer(li) {
194
-
195
- if (isAnswered) {
196
-
197
- return;
198
-
199
- }
200
-
201
- isAnswered = true;
202
-
203
-
204
-
205
- if (li.textContent === quizSet[currentNum].c[0]) {
206
-
207
- li.classList.add('correct');　　　　
208
-
209
- score++;
210
-
211
- correct++;
212
-
213
- } else {
214
-
215
- li.classList.add('wrong');　　　
216
-
217
- wrong++;
218
-
219
- }
220
-
221
-
222
-
223
- btn.classList.remove('disabled');
224
-
225
- }
226
-
227
-
228
-
229
- function setQuiz() {
230
-
231
- isAnswered = false;
232
-
233
-
234
-
235
- question.textContent = quizSet[currentNum].q;
236
-
237
-
238
-
239
- while (choices.firstChild) {
240
-
241
- choices.removeChild(choices.firstChild);
242
-
243
- }
244
-
245
-
246
-
247
- const shuffledChoices = shuffle([...quizSet[currentNum].c]);
248
-
249
- shuffledChoices.forEach(choice => {
250
-
251
- const li = document.createElement('li');
252
-
253
- li.textContent = choice;
254
-
255
- li.addEventListener('click', () => {
256
-
257
- checkAnswer(li);
258
-
259
- if (currentNum === quizSet.length - 1) clearTimeout(timerId); // 最終問題に回答したらタイマー止める
260
-
261
- });
262
-
263
- choices.appendChild(li);
264
-
265
- });
266
-
267
-
268
-
269
- if (currentNum === quizSet.length - 1) {
270
-
271
- btn.textContent = '結果発表';
272
-
273
- }
274
-
275
- }
276
-
277
-
278
-
279
- setQuiz();
280
-
281
-
282
-
283
- btn.addEventListener('click', () => {
284
-
285
- if (btn.classList.contains('disabled')) {
286
-
287
- return;
288
-
289
- }
290
-
291
- btn.classList.add('disabled');
292
-
293
-
294
-
295
- showResult();
296
-
297
-
298
-
299
- function showResult(){
300
-
301
- const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
302
-
303
- if (currentNum === quizSet.length - 1) { //最終問題だったらスコアを表示
304
-
305
- scoreLabel.innerHTML = `${quizSet.length} <br>
306
-
307
- ${score}<br>
308
-
309
- ${accuracy.toFixed(2)}%`;
310
-
311
- result.classList.remove('hidden');
312
-
313
- } else { //違ったら次の問題へ
314
-
315
- currentNum++;
316
-
317
- setQuiz();
318
-
319
- }
320
-
321
- }
322
-
323
- });
324
-
325
- }
326
-
327
- ```
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
289
  ### 補足情報（FW/ツールのバージョンなど）
336
290
 
337
291
 

9

修正

2020/07/01 14:57

投稿

begine
begine

スコア7

test CHANGED
@@ -1 +1 @@
1
- カウントが0になった時、残りの問題を不正解で処理させたい
1
+ カウントが0になったら残りの問題全てを不正解にしたい
test CHANGED
@@ -1,10 +1,12 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- カウントダウンタイマー付きのクイズ問題を作成しているのですが、時間切れした後の正答率表示が間違っています。
3
+ カウントが0で終了するクイズ問題を作成しています。
4
-
5
-
6
-
4
+
5
+
6
+
7
- 時間以内に答えられたときの正答率は正しいのですが、時間切れ後の正答率表示がおかしいです。
7
+ 条件演算子とテンプレートリテラルを使い、カウントが0になったら残りの問題全てを不正解にしたいと考えているのですが、なかなか思い通りにいきません。
8
+
9
+
8
10
 
9
11
 
10
12
 
@@ -12,13 +14,19 @@
12
14
 
13
15
  【解決したいこと】
14
16
 
15
- 時間切れだった時に、次以降のクイズを不正解でカウントさせたい。
17
+ 時間切れだった時に残りの問題全てを不正解カウントさせたい。
16
-
17
-
18
-
19
-
20
-
18
+
19
+
20
+
21
+
22
+
21
- 以下のブロック内が関係しているかなと思い試してみたりしたのですが、解決することができませんでした。
23
+ 以下のブロック内の「currentNum = quizSet.length - 1;」と「isAnswered = true;」が関係しているかなと思って試したりしたのですが、解決できません。
24
+
25
+
26
+
27
+
28
+
29
+
22
30
 
23
31
 
24
32
 
@@ -44,9 +52,9 @@
44
52
 
45
53
  btn.textContent = '結果発表';
46
54
 
47
- currentNum = quizSet.length - 1;
55
+ currentNum = quizSet.length - 1;//ここを試してみた
48
-
56
+
49
- isAnswered = true; //ここを試してみた
57
+ isAnswered = true; 　　　　　　//ここを試してみた
50
58
 
51
59
  return;
52
60
 

8

修正

2020/07/01 13:44

投稿

begine
begine

スコア7

test CHANGED
@@ -1 +1 @@
1
- 時間切れだった時、次以降のクイズを不正解でカウントさせたい
1
+ カウントが0になった時、残りの問題を不正解で処理させたい
test CHANGED
@@ -10,8 +10,6 @@
10
10
 
11
11
 
12
12
 
13
-
14
-
15
13
  【解決したいこと】
16
14
 
17
15
  時間切れだった時に、次以降のクイズを不正解でカウントさせたい。
@@ -32,7 +30,7 @@
32
30
 
33
31
  ```ここに言語を入力
34
32
 
35
- if(timeLeft < 0){
33
+ if(timeLeft < 0){ 　//カウントが0のときの処理
36
34
 
37
35
  clearTimeout(timerId);
38
36
 

7

修正

2020/07/01 12:30

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  currentNum = quizSet.length - 1;
50
50
 
51
- isAnswered = true;
51
+ isAnswered = true; //ここを試してみた
52
52
 
53
53
  return;
54
54
 

6

修正

2020/07/01 12:16

投稿

begine
begine

スコア7

test CHANGED
@@ -1 +1 @@
1
- クイズ問題で、時間切れ後のクイズ正答率が間違っている
1
+ 時間切れだった時、次以降のクイズを不正解でカウントさせたい
test CHANGED
File without changes

5

修正

2020/07/01 12:15

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,16 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+ 【解決したいこと】
16
+
17
+ 時間切れだった時に、次以降のクイズを不正解でカウントさせたい。
18
+
19
+
20
+
21
+
22
+
13
23
  以下のブロック内が関係しているかなと思い試してみたりしたのですが、解決することができませんでした。
14
24
 
15
25
 
@@ -38,7 +48,7 @@
38
48
 
39
49
  currentNum = quizSet.length - 1;
40
50
 
41
- isAnswered = false;
51
+ isAnswered = true;
42
52
 
43
53
  return;
44
54
 
@@ -134,7 +144,7 @@
134
144
 
135
145
  currentNum = quizSet.length - 1; // 最終問題まで終わったとする
136
146
 
137
- isAnswered = false;
147
+ isAnswered = true;
138
148
 
139
149
  return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
140
150
 

4

修正

2020/07/01 12:14

投稿

begine
begine

スコア7

test CHANGED
@@ -1 +1 @@
1
- カウントダウンタイマー付きのクイズで時間切れした後のクイズ正答率表示がおかしい
1
+ クイズ問題で、時間切れ後のクイズ正答率が間違っている
test CHANGED
File without changes

3

修正

2020/07/01 12:00

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- 以下のブロック内が関係しているかなと思い、isAnswered = true; の true のところを、false や wrong などにし試してみたりしたのですが、解決することができませんでした。
13
+ 以下のブロック内が関係しているかなと思い試してみたりしたのですが、解決することができませんでした。
14
14
 
15
15
 
16
16
 
@@ -38,7 +38,7 @@
38
38
 
39
39
  currentNum = quizSet.length - 1;
40
40
 
41
- isAnswered = true;
41
+ isAnswered = false;
42
42
 
43
43
  return;
44
44
 
@@ -78,57 +78,73 @@
78
78
 
79
79
 
80
80
 
81
- const correctLavel = document.getElementById('correct');
81
+ const correctLavel = document.getElementById('correct'); // 正解
82
-
82
+
83
- const wrongLavel = document.getElementById('wrong');
83
+ const wrongLavel = document.getElementById('wrong'); // 不正解
84
-
85
-
86
-
87
-
84
+
85
+
86
+
87
+
88
88
 
89
89
  let correct = 0;
90
90
 
91
91
  let wrong = 0;
92
92
 
93
+
94
+
95
+
96
+
93
-
97
+ document.addEventListener('DOMContentLoaded', function() {　//画面表示したら以下を発火
98
+
94
-
99
+ startTime = Date.now();
100
+
101
+ countDown();
102
+
103
+ });
104
+
105
+
106
+
95
- function countDown() {
107
+ function countDown() {
96
108
 
97
109
  timerId = setTimeout (function() {
98
110
 
111
+ //timerIdをsetTimeoutの返り値として取得 次の処理を指定したミリ秒後に実行(1度だけ)
112
+
113
+
114
+
99
115
  timeLeft = timeToCountDown - (Date.now() - startTime);
100
116
 
101
-
117
+ //elapsedTimeは、1度しか使わないので直接代入した↑
102
-
103
-
104
-
118
+
119
+
120
+
105
- if(timeLeft < 0){
121
+ if(timeLeft < 0){ //残り時間が0より小さくなったらclearTimeoutを呼ぶ(タイマー停止)
106
122
 
107
123
  clearTimeout(timerId);
108
124
 
109
- timeLeft = 0;
125
+ timeLeft = 0; //timeLeftを0にして、updateTimerで更新する
110
126
 
111
127
  updateTimer(timeLeft);
112
128
 
113
129
 
114
130
 
115
- btn.classList.remove('disabled');
131
+ btn.classList.remove('disabled'); // Nextボタンのdisabledを解除する
116
-
132
+
117
- btn.textContent = '結果発表';
133
+ btn.textContent = '結果発表'; // Nextボタンの表示は「結果発表」にする
118
-
134
+
119
- currentNum = quizSet.length - 1;
135
+ currentNum = quizSet.length - 1; // 最終問題まで終わったとする
120
-
136
+
121
- isAnswered = true;
137
+ isAnswered = false;
122
-
138
+
123
- return;
139
+ return; //clearTimeout()したら次のcountDown()を呼び出したくないためreturnする
124
140
 
125
141
  }
126
142
 
127
143
 
128
144
 
129
- updateTimer(timeLeft);
145
+ updateTimer(timeLeft); // 呼び出し(渡すミリ秒はtimerLeft)
130
-
146
+
131
- countDown();
147
+ countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。
132
148
 
133
149
  }, 10);
134
150
 
@@ -138,20 +154,16 @@
138
154
 
139
155
 
140
156
 
141
- sbtn.addEventListener('click', function() {
157
+ sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON
142
-
158
+
143
- startTime = Date.now();
159
+ startTime = Date.now(); // 押したときの時刻を取得
144
-
160
+
145
- countDown();
161
+ countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/
146
162
 
147
163
  });
148
164
 
149
165
 
150
166
 
151
-
152
-
153
-
154
-
155
167
  let currentNum = 0;
156
168
 
157
169
  let isAnswered;
@@ -160,152 +172,138 @@
160
172
 
161
173
 
162
174
 
175
+
176
+
163
- function shuffle(arr) {
177
+ function checkAnswer(li) {
164
-
165
- for (let i = arr.length - 1; i > 0; i--) {
178
+
166
-
167
- const j = Math.floor(Math.random() * (i + 1));
168
-
169
- [arr[j], arr[i]] = [arr[i], arr[j]];
179
+ if (isAnswered) {
180
+
170
-
181
+ return;
182
+
171
- }
183
+ }
184
+
172
-
185
+ isAnswered = true;
186
+
187
+
188
+
189
+ if (li.textContent === quizSet[currentNum].c[0]) {
190
+
191
+ li.classList.add('correct');　　　　
192
+
193
+ score++;
194
+
173
- return arr;
195
+ correct++;
196
+
197
+ } else {
198
+
199
+ li.classList.add('wrong');　　　
200
+
201
+ wrong++;
202
+
203
+ }
204
+
205
+
206
+
207
+ btn.classList.remove('disabled');
174
208
 
175
209
  }
176
210
 
177
211
 
178
212
 
179
- function checkAnswer(li) {
213
+ function setQuiz() {
180
-
214
+
181
- if (isAnswered) {
215
+ isAnswered = false;
216
+
217
+
218
+
219
+ question.textContent = quizSet[currentNum].q;
220
+
221
+
222
+
223
+ while (choices.firstChild) {
224
+
225
+ choices.removeChild(choices.firstChild);
226
+
227
+ }
228
+
229
+
230
+
231
+ const shuffledChoices = shuffle([...quizSet[currentNum].c]);
232
+
233
+ shuffledChoices.forEach(choice => {
234
+
235
+ const li = document.createElement('li');
236
+
237
+ li.textContent = choice;
238
+
239
+ li.addEventListener('click', () => {
240
+
241
+ checkAnswer(li);
242
+
243
+ if (currentNum === quizSet.length - 1) clearTimeout(timerId); // 最終問題に回答したらタイマー止める
244
+
245
+ });
246
+
247
+ choices.appendChild(li);
248
+
249
+ });
250
+
251
+
252
+
253
+ if (currentNum === quizSet.length - 1) {
254
+
255
+ btn.textContent = '結果発表';
256
+
257
+ }
258
+
259
+ }
260
+
261
+
262
+
263
+ setQuiz();
264
+
265
+
266
+
267
+ btn.addEventListener('click', () => {
268
+
269
+ if (btn.classList.contains('disabled')) {
182
270
 
183
271
  return;
184
272
 
185
273
  }
186
274
 
187
- isAnswered = true;
188
-
189
-
190
-
191
- if (li.textContent === quizSet[currentNum].c[0]) {
192
-
193
- li.classList.add('correct');
275
+ btn.classList.add('disabled');
194
-
195
- score++;
276
+
196
-
277
+
278
+
197
- correct++;
279
+ showResult();
198
-
280
+
281
+
282
+
199
- } else {
283
+ function showResult(){
284
+
200
-
285
+ const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
286
+
287
+ if (currentNum === quizSet.length - 1) { //最終問題だったらスコアを表示
288
+
289
+ scoreLabel.innerHTML = `${quizSet.length} <br>
290
+
291
+ ${score}<br>
292
+
293
+ ${accuracy.toFixed(2)}%`;
294
+
201
- li.classList.add('wrong');
295
+ result.classList.remove('hidden');
296
+
202
-
297
+ } else { //違ったら次の問題へ
298
+
203
- wrong++;
299
+ currentNum++;
300
+
204
-
301
+ setQuiz();
302
+
205
- }
303
+ }
206
-
207
-
208
-
209
- btn.classList.remove('disabled');
210
304
 
211
305
  }
212
306
 
213
-
214
-
215
- function setQuiz() {
216
-
217
- isAnswered = false;
218
-
219
-
220
-
221
- question.textContent = quizSet[currentNum].q;
222
-
223
-
224
-
225
- while (choices.firstChild) {
226
-
227
- choices.removeChild(choices.firstChild);
228
-
229
- }
230
-
231
-
232
-
233
- const shuffledChoices = shuffle([...quizSet[currentNum].c]);
234
-
235
- shuffledChoices.forEach(choice => {
236
-
237
- const li = document.createElement('li');
238
-
239
- li.textContent = choice;
240
-
241
- li.addEventListener('click', () => {
242
-
243
- checkAnswer(li);
244
-
245
- if (currentNum === quizSet.length - 1) clearTimeout(timerId); // 最終問題に回答したらタイマー止める
246
-
247
- });
248
-
249
- choices.appendChild(li);
250
-
251
- });
252
-
253
-
254
-
255
- if (currentNum === quizSet.length - 1) {
256
-
257
- btn.textContent = '結果発表';
258
-
259
- }
260
-
261
- }
262
-
263
-
264
-
265
- setQuiz();
266
-
267
-
268
-
269
- btn.addEventListener('click', () => {
270
-
271
- if (btn.classList.contains('disabled')) {
272
-
273
- return;
274
-
275
- }
276
-
277
- btn.classList.add('disabled');
278
-
279
-
280
-
281
- showResult();
282
-
283
-
284
-
285
- function showResult(){
286
-
287
- const accuracy = correct + wrong === 0 ? 0 : correct / (correct + wrong) * 100;
288
-
289
- if (currentNum === quizSet.length - 1) { //最終問題だったらスコアを表示
290
-
291
- scoreLabel.innerHTML = `${quizSet.length} <br>
292
-
293
- ${score} <br>
294
-
295
- ${accuracy.toFixed(2)}%`;
296
-
297
- result.classList.remove('hidden');
298
-
299
- } else {
300
-
301
- currentNum++;
302
-
303
- setQuiz();
304
-
305
- }
306
-
307
- }
308
-
309
307
  });
310
308
 
311
309
  }

2

修正

2020/07/01 11:56

投稿

begine
begine

スコア7

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- 以下のブロック内が関係しているかなと思い、isAnswered = falseの false のところを、false や wrong などにし試してみたりしたのですが、解決することができませんでした。
13
+ 以下のブロック内が関係しているかなと思い、isAnswered = true; の true のところを、false や wrong などにし試してみたりしたのですが、解決することができませんでした。
14
14
 
15
15
 
16
16
 

1

修正

2020/07/01 11:34

投稿

begine
begine

スコア7

test CHANGED
@@ -1 +1 @@
1
- javascript、 時間切れした後のクイズ正答率表示がおかしい
1
+ カウントダウンタイマー付きのクイズで時間切れした後のクイズ正答率表示がおかしい
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- カウントダウンタイマー付きのクイズ問題を作成しているのですが、時間切れした後の正答率が間違っています。
3
+ カウントダウンタイマー付きのクイズ問題を作成しているのですが、時間切れした後の正答率表示が間違っています。
4
4
 
5
5
 
6
6
 
@@ -10,7 +10,9 @@
10
10
 
11
11
 
12
12
 
13
- 以下のブロック内が関係しているかなと思って試していたのですが、解決することができません。
13
+ 以下のブロック内が関係しているかなと思い、isAnswered = falseの false のところを、false や wrong などにし試してみたりしたのですが、解決することができませんでした。
14
+
15
+
14
16
 
15
17
 
16
18
 
@@ -20,7 +22,27 @@
20
22
 
21
23
  ```ここに言語を入力
22
24
 
23
- if(timeLeft < 0){
25
+ if(timeLeft < 0){
26
+
27
+ clearTimeout(timerId);
28
+
29
+ timeLeft = 0;
30
+
31
+ updateTimer(timeLeft);
32
+
33
+
34
+
35
+ btn.classList.remove('disabled');
36
+
37
+ btn.textContent = '結果発表';
38
+
39
+ currentNum = quizSet.length - 1;
40
+
41
+ isAnswered = true;
42
+
43
+ return;
44
+
45
+ }
24
46
 
25
47
 
26
48
 
@@ -42,7 +64,7 @@
42
64
 
43
65
  時間切れ後の正答率が違う。
44
66
 
45
- (全３問中１問正解だったら正答率が50%となっています)
67
+ (全３問中１問正解だったら正答率が50%となってしまいます。)
46
68
 
47
69
  ```
48
70
 
@@ -220,7 +242,7 @@
220
242
 
221
243
  checkAnswer(li);
222
244
 
223
- if (currentNum === quizSet.length - 1) clearTimeout(timerId); // ★最終問題に回答したらタイマー止める
245
+ if (currentNum === quizSet.length - 1) clearTimeout(timerId); // 最終問題に回答したらタイマー止める
224
246
 
225
247
  });
226
248