質問編集履歴

4

書式の改善

2018/08/13 14:48

投稿

taka_php
taka_php

スコア14

test CHANGED
File without changes
test CHANGED
@@ -104,7 +104,11 @@
104
104
 
105
105
 
106
106
 
107
+ ```
108
+
107
- ```html
109
+ html
110
+
111
+ ```
108
112
 
109
113
  <!DOCTYPE html>
110
114
 

3

分かりやすく

2018/08/13 14:48

投稿

taka_php
taka_php

スコア14

test CHANGED
File without changes
test CHANGED
@@ -16,67 +16,23 @@
16
16
 
17
17
 
18
18
 
19
- function btn1_click(){
19
+ (function() {
20
20
 
21
- // 値(数値)を取得
21
+ 'use strict';
22
-
23
- var num = document.form1.color1.selectedIndex;
24
22
 
25
23
 
26
24
 
27
- // 値(value)を取得
25
+ var question = document.getElementById('question');
28
26
 
29
- var str = document.form1.color1.options[num].value;
27
+ var btn = document.getElementById('btn');
30
28
 
31
-
32
-
33
- currentNum = str;
34
-
35
- }
36
-
37
-
38
-
39
- (function() {
40
-
41
- 'use strict';
42
-
43
-
44
-
45
- // id の questionを、変更させる命令
46
-
47
- var question = document.getElementById('question');
48
-
49
- var btn = document.getElementById('btn');
50
-
51
- // id のanswer 直下の li を変更させる命令
52
-
53
- var answers = document.querySelectorAll('#answers > li');
29
+ var answers = document.querySelectorAll('#answers > li');
54
-
55
- var kaitou = document.getElementById('kaitou');
56
-
57
- var kaisetu = document.getElementById('kaisetu');
58
-
59
- var result = document.getElementById('result');
60
-
61
- //得点ラベルの値を表示
62
-
63
- var scoreLabel = document.querySelector('#result > p');
64
30
 
65
31
 
66
32
 
67
33
 
68
34
 
69
- //
70
-
71
- var shuffledAnswers;
72
-
73
-
74
-
75
- //配列
76
-
77
-
78
-
79
- var quizSet = [
35
+ var quizSet = [
80
36
 
81
37
  {q: 'What is A?', a: ['A0', 'A1', 'A2']},
82
38
 
@@ -88,281 +44,63 @@
88
44
 
89
45
 
90
46
 
91
- //問題番号を設定
92
-
93
- var currentNum = 0;
47
+ var currentNum = 0;
94
-
95
- //回答したかを
96
-
97
- var isAnswered;
98
-
99
- //問題完了後にスコアを表示
100
-
101
- var score = 0;
102
48
 
103
49
 
104
50
 
51
+
52
+
105
- //シャッフル処理の実装
53
+ function setQuiz() {
54
+
55
+
56
+
57
+
58
+
59
+
60
+
61
+ }
106
62
 
107
63
 
108
64
 
65
+ function setEvents() {
66
+
67
+ var i;
68
+
69
+ for (i = 0; i < answers.length; i++) {
70
+
71
+ answers[i].addEventListener('click', function() {
72
+
73
+ checkAnswer(this);
74
+
75
+ });
76
+
77
+ }
78
+
79
+ }
109
80
 
110
81
 
111
82
 
83
+ function checkAnswer(node) {
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+ }
92
+
93
+ }
112
94
 
113
95
 
114
96
 
115
- function shuffle(arr) {
97
+ setQuiz();
116
98
 
117
- var i;
118
-
119
- var j;
120
-
121
- var tmp;
122
-
123
- for (i = arr.length - 1; i >= 0; i--) {
124
-
125
- j = Math.floor(Math.random() * (i + 1));
126
-
127
- tmp = arr[i];
128
-
129
- arr[i] = arr[j];
130
-
131
- arr[j] = tmp;
132
-
133
- }
134
-
135
- return arr;
136
-
137
- }
138
-
139
-
140
-
141
- function setQuiz() {
142
-
143
-
144
-
145
- //次の問題にいくときに回答、解説を消す
146
-
147
- //回答を表示させる。
148
-
149
- kaitou.textContent = '';
150
-
151
- kaisetu.textContent = '';
152
-
153
-
154
-
155
-
156
-
157
- var i;
158
-
159
-
160
-
161
- // id="question" を文字に置き換える命令
162
-
163
- question.textContent = quizSet[currentNum].q;
164
-
165
-
166
-
167
- // id answer 直下のli を文字に置き換える命令
168
-
169
- // shuffledAnswers = shuffle(quizSet[currentNum].a);
170
-
171
-
172
-
173
- //slice()をつけないと、配列の順番まで入れ替わる
174
-
175
- shuffledAnswers = shuffle(quizSet[currentNum].a.slice());
176
-
177
-
178
-
179
- //問題表示でfalse
180
-
181
- isAnswered = false;
182
-
183
-
184
-
185
- for (i = 0; i < answers.length; i++) {
186
-
187
- answers[i].classList.remove('correct');
188
-
189
- answers[i].classList.remove('wrong');
190
-
191
- answers[i].textContent = shuffledAnswers[i];
192
-
193
- }
194
-
195
- btn.classList.add('disabled');
196
-
197
-
198
-
199
- //最後の問題では、btnをshow scoreにする。
200
-
201
- if (currentNum === quizSet.length - 1) {
202
-
203
- btn.textContent = 'Show Score';
204
-
205
- }
206
-
207
-
208
-
209
- }
210
-
211
-
212
-
213
- function setEvents() {
214
-
215
- var i;
216
-
217
- for (i = 0; i < answers.length; i++) {
218
-
219
- answers[i].addEventListener('click', function()
220
-
221
- {
222
-
223
- checkAnswer(this);
224
-
225
- });
226
-
227
- }
228
-
229
-
230
-
231
- //btnをクリックしたときの処理,次の問題に
232
-
233
- btn.addEventListener('click', function() {
234
-
235
- if (this.classList.contains('disabled')) {
236
-
237
- return;
238
-
239
- }
240
-
241
- //ボタンを押したときの動作
242
-
243
- // setQuiz();
244
-
245
- if (currentNum === quizSet.length) {
246
-
247
- // show score
248
-
249
- // console.log('Score: ' + score + ' / ' + quizSet.length);
250
-
251
- //スコアの値を入れる
252
-
253
- scoreLabel.textContent = 'Score: ' + score + ' / ' + quizSet.length;
254
-
255
- // 最後の問題だったら、スコアを表示
256
-
257
- result.classList.add('show');
258
-
259
- } else {
260
-
261
- setQuiz();
262
-
263
- }
264
-
265
- });
266
-
267
-
268
-
269
- }
270
-
271
-
272
-
273
-
274
-
275
- function checkAnswer(node) {
276
-
277
-
278
-
279
- //回答されているときはそれ以降の処理をしない。
280
-
281
- if (isAnswered) {
282
-
283
- return;
284
-
285
- }
286
-
287
-
288
-
289
- //クリックされたらtrue
290
-
291
- isAnswered = true;
292
-
293
-
294
-
295
-
296
-
297
- if (node.textContent === quizSet[currentNum].a[0]) {
298
-
299
- // console.log('correct!');
300
-
301
-
302
-
303
- //nodeのテキストに文字をつける
304
-
305
- node.textContent += '... 正解!!';
306
-
307
- //node に、クラスをつける
308
-
309
- node.classList.add('correct');
310
-
311
- //正解時にスコアを加算
312
-
313
- score++;
314
-
315
-
316
-
317
-
318
-
319
- } else {
320
-
321
- // console.log('wrong!');
322
-
323
- node.textContent += '... 間違い!!';
324
-
325
- node.classList.add('wrong');
326
-
327
- }
328
-
329
-
330
-
331
- //回答を表示させる。
332
-
333
- kaitou.textContent = '【回答】:' + quizSet[currentNum].a[0];
334
-
335
- //実験 解説を表示させる。を表示させる
336
-
337
- kaisetu.innerHTML = '★解説★<br>' + quizSet[currentNum].s;
338
-
339
-
340
-
341
-
342
-
343
- //回答後にネクストボタンを押せるようにする。
344
-
345
- btn.classList.remove('disabled');
346
-
347
- currentNum++;
348
-
349
- }
350
-
351
-
352
-
353
- setQuiz();
354
-
355
- setEvents();
99
+ setEvents();
356
100
 
357
101
 
358
102
 
359
103
  })();
360
-
361
-
362
-
363
-
364
-
365
- ```
366
104
 
367
105
 
368
106
 
@@ -438,16 +176,6 @@
438
176
 
439
177
 
440
178
 
441
- <div id="result">
442
-
443
- <p>Score: 3/3</p>
444
-
445
- <a href="">Replay</a>
446
-
447
- </div>
448
-
449
-
450
-
451
179
  </div>
452
180
 
453
181
 

2

コードミス

2018/08/13 14:46

投稿

taka_php
taka_php

スコア14

test CHANGED
File without changes
test CHANGED
@@ -360,23 +360,7 @@
360
360
 
361
361
 
362
362
 
363
- function btn1_click(){
363
+
364
-
365
- // 値(数値)を取得
366
-
367
- var num = document.form1.color1.selectedIndex;
368
-
369
-
370
-
371
- // 値(value値)を取得
372
-
373
- var str = document.form1.color1.options[num].value;
374
-
375
-
376
-
377
- var currentNum = str;
378
-
379
- }
380
364
 
381
365
  ```
382
366
 

1

タイトルの修正

2018/08/13 13:08

投稿

taka_php
taka_php

スコア14

test CHANGED
@@ -1 +1 @@
1
- javascriptにて、ブラウザから
1
+ javascriptにて、ブラウザからセレクトボックスにて変数を変更する方法
test CHANGED
File without changes