teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップゲーム開発に関する質問難易度別に分けたクイズの問題が正しく出題されない

編集履歴

回答編集履歴

2

全面的な修正

2021/09/09 15:06

投稿

luuguas
luuguas

スコア501

test CHANGED
@@ -1,6 +1,12 @@
1
+ #### 原因
2
+
1
- 133行目~140行目
3
+ 131行目~140行目
2
4
 
3
5
  ```JavaScript
6
+
7
+ //選択肢をクリックしたときの動作
8
+
9
+
4
10
 
5
11
  let handlerIndex=0;
6
12
 
@@ -20,70 +26,106 @@
20
26
 
21
27
  ```
22
28
 
23
- 選択肢をクリックしたときに呼び出されるイベントリスナーが、問題の難易度に関わらず初級用のものになっており、中級を選んでいても初級と同じ処理になってしまっています。
29
+ インデントのせいで分かりづらいですが、この箇所は実際には**ページを読み込んだタイミングで実行されます**。そのため、選択肢のボタンには問題の難易度に関わらず初級用のイベントリスナーが設定され、中級を選んでも途中から初級と同じ処理が実行されてしまいます。
24
30
 
25
31
 
26
32
 
33
+ 176行目~
34
+
35
+ ```JavaScript
36
+
37
+ //選択肢をクリックしたときの動作
38
+
39
+
40
+
41
+ while(handlerIndex<answerLength){
42
+
43
+ $answerW[handlerIndex].addEventListener("click",(e)=>{
44
+
45
+ clickHandlerM(e);
46
+
47
+ });
48
+
49
+ handlerIndex++;
50
+
51
+ };
52
+
53
+ //clickHandlerEを全ての選択肢に設定
54
+
55
+ ```
56
+
27
- ページの読み込み時に選択肢のボタンにイベントリスナーを設定しているため、問題の難易度に応じた場合分けが出来ていません。難易度を選んだタイミングでイベントリスナーを設定すると良いでしょう。
57
+ こちらも、ページを読み込んだタイミングで実行されています。ただし`handlerIndex`の値が131行目~140行目の処理後の値のままなので、whileループの中身は1度も実行されません。
28
58
 
29
59
 
30
60
 
31
61
  #### 修正例(一部)
32
62
 
63
+ 27行目から余計なインデントがついているせいで、コードがいつ実行されるのかが分かりにくくなっています。
64
+
65
+ コードの読みやすさのためにも、インデントは正確につけましょう。
66
+
67
+
68
+
69
+ 難易度のボタンをクリックしたタイミングで、難易度に応じたイベントリスナーを選択肢のボタンに設定すると正しく動きます。
70
+
33
71
  ```JavaScript
34
72
 
35
- //100行目~
73
+ //110行目~
36
74
 
37
- $easy.onclick = function(){
75
+ $easy.onclick = function(){
38
76
 
39
- setUpQuizE();
77
+ setUpQuizE();
40
78
 
41
- let handlerIndex=0;
79
+ let handlerIndex=0;
42
80
 
43
- while(handlerIndex<answerLength){
81
+ while(handlerIndex<answerLength){
44
82
 
45
- $answerW[handlerIndex].addEventListener("click",(e)=>{
83
+ $answerW[handlerIndex].addEventListener("click",(e)=>{
46
84
 
47
- clickHandlerE(e);
85
+ clickHandlerE(e);
48
86
 
49
- });
87
+ });
50
88
 
51
- handlerIndex++;
89
+ handlerIndex++;
52
-
53
- };
54
-
55
- //clickHandlerEを全ての選択肢に設定
56
90
 
57
91
  };
58
92
 
93
+ //clickHandlerEを全ての選択肢に設定
94
+
95
+ };
59
96
 
60
97
 
98
+
61
- //(元々の133行目~139行目のコードは削除)
99
+ //133行目~139行目のコードは削除
62
100
 
63
101
 
64
102
 
65
103
  //154行目~
66
104
 
67
- $middle.onclick = function(){
105
+ $middle.onclick = function(){
68
106
 
69
- setUpQuizM();
107
+ setUpQuizM();
70
108
 
71
- let handlerIndex=0;
109
+ let handlerIndex=0;
72
110
 
73
- while(handlerIndex<answerLength){
111
+ while(handlerIndex<answerLength){
74
112
 
75
- $answerW[handlerIndex].addEventListener("click",(e)=>{
113
+ $answerW[handlerIndex].addEventListener("click",(e)=>{
76
114
 
77
- clickHandlerM(e);
115
+ clickHandlerM(e);
78
116
 
79
- });
117
+ });
80
118
 
81
- handlerIndex++;
119
+ handlerIndex++;
82
-
83
- };
84
-
85
- //clickHandlerMを全ての選択肢に設定
86
120
 
87
121
  };
88
122
 
123
+ //clickHandlerMを全ての選択肢に設定
124
+
125
+ };
126
+
127
+
128
+
129
+ //176行目~のコードは削除
130
+
89
131
  ```

1

修正前コードの修正

2021/09/09 15:06

投稿

luuguas
luuguas

スコア501

test CHANGED
@@ -1,20 +1,22 @@
1
- 133行目~139行目
1
+ 133行目~140行目
2
2
 
3
3
  ```JavaScript
4
4
 
5
- let handlerIndex = 0;
5
+ let handlerIndex=0;
6
6
 
7
- while (handlerIndex < answerLength) {
7
+ while(handlerIndex<answerLength){
8
8
 
9
- $answerW[handlerIndex].addEventListener("click", (e) => {
9
+ $answerW[handlerIndex].addEventListener("click",(e)=>{
10
10
 
11
- clickHandlerE(e);
11
+ clickHandlerE(e);
12
12
 
13
- });
13
+ });
14
14
 
15
- handlerIndex++;
15
+ handlerIndex++;
16
16
 
17
- };
17
+ };
18
+
19
+ //clickHandlerEを全ての選択肢に設定
18
20
 
19
21
  ```
20
22