質問編集履歴

3

誤字

2021/08/10 10:03

投稿

asao112
asao112

スコア12

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,3 @@
1
1
  削除します。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
2
2
 
3
- ;。。。。。。。。。。。。。。。。。。。
3
+ ;。。。。。。。。。。。。。。。。。。。あああ

2

誤字

2021/08/10 10:03

投稿

asao112
asao112

スコア12

test CHANGED
File without changes
test CHANGED
@@ -1,439 +1,3 @@
1
- ### 前提・実現たいこと
1
+ 削除ます。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
2
2
 
3
-
4
-
5
- ここに質問の内容を詳しく書いてください
3
+ 。。。。。。。。。。。。。。。。。。
6
-
7
- JavaScriptとHTMLを使った10回クイズの問題を作っているさいのエラーハンドリング
8
-
9
- を行いたいのですがうまくいきません。
10
-
11
-
12
-
13
- ### 該当のソースコード
14
-
15
- ```JavaScript
16
-
17
- {
18
-
19
-  const API_URL = 'https://opentdb.com/api.php?amount=10';
20
-
21
-
22
-
23
-  class Quiz {
24
-
25
-   constructor(quizData) {
26
-
27
-    this._quizzes = quizData.results;
28
-
29
-    this._correctAnswersNum = 0;
30
-
31
-   }
32
-
33
-
34
-
35
-   getQuizCategory(index) {
36
-
37
-    return this._quizzes[index - 1].category;
38
-
39
-   }
40
-
41
-
42
-
43
-   getQuizDifficulty(index) {
44
-
45
-    return this._quizzes[index - 1].difficulty;
46
-
47
-   }
48
-
49
-
50
-
51
-   getNumOfQuiz() {
52
-
53
-    return this._quizzes.length;
54
-
55
-   }
56
-
57
-
58
-
59
-   getQuizQuestion(index) {
60
-
61
-    return this._quizzes[index - 1].question;
62
-
63
-   }
64
-
65
-
66
-
67
-   getCorrectAnswer(index) {
68
-
69
-    return this._quizzes[index - 1].correct_answer;
70
-
71
-   }
72
-
73
-
74
-
75
-   getIncorrectAnswers(index) {
76
-
77
-    return this._quizzes[index - 1].incorrect_answers;
78
-
79
-   }
80
-
81
-
82
-
83
-   countCorrectAnswersNum(index, answer) {
84
-
85
-    const correctAnswer = this._quizzes[index - 1].correct_answer;
86
-
87
-    if (answer === correctAnswer) {
88
-
89
-     return this._correctAnswersNum++;
90
-
91
-    }
92
-
93
-   }
94
-
95
-
96
-
97
-   getCorrectAnswersNum() {
98
-
99
-    return this._correctAnswersNum;
100
-
101
-   }
102
-
103
-  }
104
-
105
-
106
-
107
-  const titleElement = document.getElementById('title');
108
-
109
-  const questionElement = document.getElementById('question');
110
-
111
-  const answersContainer = document.getElementById('answers');
112
-
113
-  const startButton = document.getElementById('start-button');
114
-
115
-  const genreElement = document.getElementById('genre');
116
-
117
-  const difficultyElement = document.getElementById('difficulty');
118
-
119
-
120
-
121
-  startButton.addEventListener('click', () => {
122
-
123
-   startButton.hidden = true;
124
-
125
-   fetchQuizData(1);
126
-
127
-  });
128
-
129
-
130
-
131
-  const fetchQuizData = async (index) => {
132
-
133
-   titleElement.textContent = '取得中';
134
-
135
-   questionElement.textContent = '少々お待ち下さい';
136
-
137
-
138
-
139
-
140
-
141
-   const response = await fetch(API_URL);
142
-
143
-   const quizData = await response.json();
144
-
145
-   const quizInstance = new Quiz(quizData);
146
-
147
-   setNextQuiz(quizInstance, index);
148
-
149
-  };
150
-
151
-
152
-
153
-  const setNextQuiz = (quizInstance, index) => {
154
-
155
-   while (answersContainer.firstChild) {
156
-
157
-    answersContainer.removeChild(answersContainer.firstChild);
158
-
159
-   }
160
-
161
-
162
-
163
-   if (index <= quizInstance.getNumOfQuiz()) {
164
-
165
-    makeQuiz(quizInstance, index);
166
-
167
-   } else {
168
-
169
-    finishQuiz(quizInstance);
170
-
171
-   }
172
-
173
-  };
174
-
175
-
176
-
177
-  const makeQuiz = (quizInstance, index) => {
178
-
179
-   titleElement.innerHTML = `問題 ${index}`;
180
-
181
-   genreElement.innerHTML = `【ジャンル】 ${quizInstance.getQuizCategory(index)}`;
182
-
183
-   difficultyElement.innerHTML = `【難易度】 ${quizInstance.getQuizDifficulty(index)}`;
184
-
185
-   questionElement.innerHTML = `【クイズ】${quizInstance.getQuizQuestion(index)}`;
186
-
187
-
188
-
189
-   const answers = buildAnswers(quizInstance, index);
190
-
191
-
192
-
193
-   answers.forEach((answer) => {
194
-
195
-    const answerElement = document.createElement('li');
196
-
197
-    answersContainer.appendChild(answerElement);
198
-
199
-
200
-
201
-    const buttonElement = document.createElement('button');
202
-
203
-    buttonElement.innerHTML = answer;
204
-
205
-    answerElement.appendChild(buttonElement);
206
-
207
-
208
-
209
-    buttonElement.addEventListener('click', () => {
210
-
211
-     quizInstance.countCorrectAnswersNum(index, answer);
212
-
213
-     index++;
214
-
215
-     setNextQuiz(quizInstance, index);
216
-
217
-    });
218
-
219
-   });
220
-
221
-  };
222
-
223
-
224
-
225
-  const finishQuiz = (quizInstance) => {
226
-
227
-   titleElement.textContent = `あなたの正答数は${quizInstance.getCorrectAnswersNum()}です`
228
-
229
-   genreElement.textContent = '';
230
-
231
-   difficultyElement.textContent = '';
232
-
233
-   questionElement.textContent = '再チャレンジしたい場合は下をクリック';
234
-
235
-
236
-
237
-   const restartButton = document.createElement('button');
238
-
239
-   restartButton.textContent = 'ホームに戻る';
240
-
241
-   answersContainer.appendChild(restartButton);
242
-
243
-   restartButton.addEventListener('click', () => {
244
-
245
-    location.reload();
246
-
247
-   });
248
-
249
-  };
250
-
251
-
252
-
253
-  const buildAnswers = (quizInstance, index) => {
254
-
255
-   const answers = [
256
-
257
-    quizInstance.getCorrectAnswer(index),
258
-
259
-    ...quizInstance.getIncorrectAnswers(index)
260
-
261
-   ];
262
-
263
-   return shuffleArray(answers);
264
-
265
-  };
266
-
267
-
268
-
269
-  const shuffleArray = ([...array]) => {
270
-
271
-   for (let i = array.length - 1; i >= 0; i--) {
272
-
273
-    const j = Math.floor(Math.random() * (i + 1));
274
-
275
-    [array[i], array[j]] = [array[j], array[i]];
276
-
277
-   }
278
-
279
-   return array;
280
-
281
-  };
282
-
283
- }
284
-
285
- ```
286
-
287
- ```html
288
-
289
- <!DOCTYPE html>
290
-
291
- <html lang="en">
292
-
293
- <head>
294
-
295
- <meta charset="UTF-8">
296
-
297
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
298
-
299
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
300
-
301
- <title>Document</title>
302
-
303
- </head>
304
-
305
- <body>
306
-
307
- <div class="container"></div> 
308
-
309
- <h1 id="title">ようこそ</h1>
310
-
311
- <h4 id="genre"></h4>
312
-
313
- <h4 id="difficulty"></h4> 
314
-
315
- <p id="question"><hr>以下のボタンをクリック<hr></p>
316
-
317
- <button id="start-button">開始</button>    
318
-
319
- </div>
320
-
321
-  <div id="answers"></div>
322
-
323
- <script src="app.js"></script>
324
-
325
- </body>
326
-
327
- </html>
328
-
329
- ```
330
-
331
- ###エラーハンドリングをしたと思われる箇所
332
-
333
- ```
334
-
335
-   const response = await fetch(API_URL);
336
-
337
-   const quizData = await response.json();
338
-
339
-   const quizInstance = new Quiz(quizData);
340
-
341
- ```
342
-
343
-
344
-
345
- ### 試したこと
346
-
347
- 以下のコードのように成功時のコードを記述の欄にそのま該当コード
348
-
349
- を記述してみましたがう甘く作動しませんでした。
350
-
351
-
352
-
353
- ```
354
-
355
- fetch(API_URL, {
356
-
357
- method: 'GET'
358
-
359
- })
360
-
361
- .then(response => {
362
-
363
- if (!response.ok) {
364
-
365
- console.error('サーバーエラー');
366
-
367
- }
368
-
369
-         //成功時のコードを記述
370
-
371
-  const response = await fetch(API_URL);
372
-
373
-   const quizData = await response.json();
374
-
375
-   const quizInstance = new Quiz(quizData);
376
-
377
- })
378
-
379
- .catch(error => {
380
-
381
- console.error('通信に失敗しました', error);
382
-
383
- });
384
-
385
- ```
386
-
387
- また新しくコードを書いてみましたが何も変化が起きず成功したいるのか、
388
-
389
- 分かりません。
390
-
391
- ```
392
-
393
- fetch('https://opentdb.com/api.php?amount=10')
394
-
395
- .then((response) => response.text())
396
-
397
- .then((text) => console.log(text))
398
-
399
- .catch((error) => console.log(error));
400
-
401
- fetch('file.txt')
402
-
403
- .then((response) => {
404
-
405
- if(response.ok) { // ステータスがokならば
406
-
407
- return response.text(); // レスポンスをテキストとして変換する
408
-
409
- } else {
410
-
411
- throw new Error();
412
-
413
- }
414
-
415
- })
416
-
417
- .then((text) => console.log(text))
418
-
419
- .catch((error) => console.log(error));
420
-
421
-
422
-
423
-
424
-
425
-
426
-
427
-   setNextQuiz(quizInstance, index);
428
-
429
- ```
430
-
431
- 上手にエラーハンドリングできる方法を教えていただきたいです
432
-
433
-
434
-
435
- ### 補足
436
-
437
- まだ始めたばかりで頭の悪い質問のなってしまい申し訳ございません
438
-
439
- ヒントでも良いのでおしえもらいたいです。

1

誤字

2021/08/10 08:53

投稿

asao112
asao112

スコア12

test CHANGED
@@ -1 +1 @@
1
- クイズ問題のエラーハンドリングについて
1
+ 間違いす。。。。。。
test CHANGED
File without changes