質問編集履歴

4

文章の追加

2020/07/31 06:34

投稿

oreo_oreo
oreo_oreo

スコア1

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ![イメージ説明](b4a5da8cf990b4f34a28b755bda4443b.png)
16
16
 
17
- javaScript初心者につき、ソースコードに至らない点があると思いますがご教授お願い致します。
17
+ javaScriptとhtml初心者につき、ソースコードに至らない点があると思いますがご教授お願い致します。
18
18
 
19
19
 
20
20
 

3

画像の追加

2020/07/31 06:34

投稿

oreo_oreo
oreo_oreo

スコア1

test CHANGED
File without changes
test CHANGED
@@ -4,10 +4,16 @@
4
4
 
5
5
  都道府県クイズ(ランダム出題)をつくっています。
6
6
 
7
+ 理想としては(https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12163476872)の入力での正誤判定を目指しています。
8
+
7
9
  出題された問題の答えををフォームに入力し、「判定」を押すことで回答が正解か不正解か表示させたいのですがうまくいきません。
8
10
 
9
11
  具体的には「判定」ボタンを押しても何も起こらず以下のような画面のままです。![イメージ説明](95dca4f650e492096215b112e7fd7e2a.png)
10
12
 
13
+ エラーは以下のように出ています。
14
+
15
+ ![イメージ説明](b4a5da8cf990b4f34a28b755bda4443b.png)
16
+
11
17
  javaScript初心者につき、ソースコードに至らない点があると思いますがご教授お願い致します。
12
18
 
13
19
 

2

画像の追加

2020/07/31 05:47

投稿

oreo_oreo
oreo_oreo

スコア1

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  出題された問題の答えををフォームに入力し、「判定」を押すことで回答が正解か不正解か表示させたいのですがうまくいきません。
8
8
 
9
+ 具体的には「判定」ボタンを押しても何も起こらず以下のような画面のままです。![イメージ説明](95dca4f650e492096215b112e7fd7e2a.png)
10
+
9
11
  javaScript初心者につき、ソースコードに至らない点があると思いますがご教授お願い致します。
10
12
 
11
13
 

1

文章の修正

2020/07/31 05:34

投稿

oreo_oreo
oreo_oreo

スコア1

test CHANGED
File without changes
test CHANGED
@@ -10,377 +10,363 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+
16
+
13
- ### 発生している問題・エラメッセ
17
+ ### 該当のソスコ
18
+
19
+
20
+
21
+ ```javaScript
22
+
23
+ ソースコード
24
+
25
+
26
+
27
+ <!DOCTYPE html>
28
+
29
+ <head>
30
+
31
+ <meta charset="UTF-8">
32
+
33
+ <title>練習</title>
34
+
35
+
36
+
37
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js">
38
+
39
+ </script>
40
+
41
+
42
+
43
+ <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
44
+
45
+ </script>
46
+
47
+
48
+
49
+
50
+
51
+
52
+
53
+ </head>
54
+
55
+ <center>
56
+
57
+ <h1>都道府県クイズ</h1>
58
+
59
+ <hr>
60
+
61
+
62
+
63
+ <!--―― 設問 ――-->
64
+
65
+ <div id="Quiz">
66
+
67
+
68
+
69
+ <h2>問題</h2>
70
+
71
+ <table>
72
+
73
+ <tr>
74
+
75
+ <td>
76
+
77
+ <div style="font-size:30pt;">
78
+
79
+ <p id="Q_text"></p>
80
+
81
+ <center>
82
+
83
+ <img id="Q_img" >
84
+
85
+ </div>
86
+
87
+ </td>
88
+
89
+ </tr>
90
+
91
+ </table>
92
+
93
+
94
+
95
+ <p>
96
+
97
+ <div ng-controller="answer">
98
+
99
+ <input type="text" ng-model="text" />
100
+
101
+ <button ng-click="click()">判定</button>
102
+
103
+ <p>
104
+
105
+
106
+
107
+
108
+
109
+ <h2>解答</h2>
110
+
111
+ <div id="Q_log" style="font-size:30pt;"></div>
112
+
113
+
114
+
115
+
116
+
117
+ <div id="Result" style="display:none">
118
+
119
+ <table>
120
+
121
+ <caption>成績発表</caption>
122
+
123
+ <tbody></tbody>
124
+
125
+ </table>
126
+
127
+ <div>
128
+
129
+ <a href="javascript:history.back()">前のページ</a>
130
+
131
+ <a href="javascript:initQ()">やり直し</a>
132
+
133
+ <a href="">次のページ</a>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+
140
+
141
+
142
+
143
+ <!--―― スクリプト ――-->
144
+
145
+ <script type="text/javascript">
146
+
147
+
148
+
149
+ /*---- 設問リスト ----*/
150
+
151
+ var QlistOriginal = [
152
+
153
+ {
154
+
155
+ "Idx": 0,
156
+
157
+ "text": "東京ディズニーリゾートがある都道府県は?",
158
+
159
+ "A": "千葉県"
160
+
161
+ },
162
+
163
+ {
164
+
165
+ "Idx": 1,
166
+
167
+ "text": "USJがある都道府県は?",
168
+
169
+ "A": "大阪府"
170
+
171
+ },
172
+
173
+ {
174
+
175
+ "Idx": 2,
176
+
177
+ "text": "明太子が有名な県は?",
178
+
179
+ "A": "福岡県"
180
+
181
+ },
182
+
183
+ ];
184
+
185
+
186
+
187
+ /*---- グローバル変数 ----*/
188
+
189
+ //----] 出題数
190
+
191
+ var Qmax = QlistOriginal.length;
192
+
193
+ //----] 出題番号、問題リスト、ログ配列
194
+
195
+ var Qcount, Qlist, Qlog;
196
+
197
+
198
+
199
+ /*---- 関数 : 初期化 ----*/
200
+
201
+ function initQ() {
202
+
203
+ //----] 回答記録をクリア
204
+
205
+ Qlog = new Array();
206
+
207
+ document.getElementById("Q_log").innerHTML = "";
208
+
209
+ //----] 設問リストを初期化
210
+
211
+ Qlist = JSON.parse( JSON.stringify( QlistOriginal ) );/*設問リスト*/
212
+
213
+ Qcount/*出題番号*/ = 0;
214
+
215
+ //----] 表示切替え
216
+
217
+ document.querySelector( "#Quiz" ).style.display = "block";
218
+
219
+ document.querySelector( "#Result" ).style.display = "none";
220
+
221
+ document.querySelector( "#Result tbody" ).innerHTML = "";
222
+
223
+ //----] 1問目を出題
224
+
225
+ setQ();
226
+
227
+ }
228
+
229
+
230
+
231
+ /*---- 関数 : 出題 ----*/
232
+
233
+ function setQ() {
234
+
235
+ //----] 問題をランダムに抽出
236
+
237
+ var random = Math.floor( Math.random()*Qlist.length );
238
+
239
+ var Q = Qlist.splice( random, 1 )[ 0 ];
240
+
241
+ //----] 抽出した問題を Qlog に移植
242
+
243
+ Qlog.push( Q );
244
+
245
+ //----] 問題,画像を表示
246
+
247
+ document.getElementById( "Q_text" ).innerHTML = ( Qcount+1 )+"問目:"+Q.text;
248
+
249
+ document.getElementById( "Q_img" ).src = "./img/"+Q.Idx+".PNG";
250
+
251
+ }
252
+
253
+
254
+
255
+
256
+
257
+ /*---- 関数 : 正解チェック ----*/
258
+
259
+ function checkA() {
260
+
261
+ //----] 現在の問題を取得
262
+
263
+ var Q = Qlog[ Qlog.length-1 ];
264
+
265
+ //----] 答え合わせ
266
+
267
+
268
+
269
+
270
+
271
+ Q.selection = A;
272
+
273
+ Q.bingo = (text ==Q.A );
274
+
275
+ //----] 結果を出力
276
+
277
+ var log = document.getElementById( "Q_log" );
278
+
279
+ //解答したものが増えていく
280
+
281
+ log.appendChild( document.createTextNode( ( Qcount+1 )+"問目" ) );
282
+
283
+ var span = log.appendChild( document.createElement( "span" ) );
284
+
285
+ span.style.color = Q.bingo ? "blue" : "red" ;
286
+
287
+ span.appendChild( document.createTextNode( Q.bingo ? "○" : "×" ) );
288
+
289
+ log.appendChild( document.createTextNode( A ) );
290
+
291
+
292
+
293
+
294
+
295
+
296
+
297
+ //----] 次の問題
298
+
299
+ if( ++Qcount < Qmax ){
300
+
301
+ setQ();
302
+
303
+ }
304
+
305
+ else{
306
+
307
+ var tbody = document.querySelector( "#Result tbody" );
308
+
309
+ //----]----] 1列目
310
+
311
+ var tr = tbody.appendChild( document.createElement( "tr" ) );
312
+
313
+ var cell = tr.appendChild( document.createElement( "th" ) );
314
+
315
+ cell.appendChild( document.createTextNode( "問題" ) );
316
+
317
+ for(var i=0;i<Qlog.length;i++){
318
+
319
+ cell = tr.appendChild( document.createElement( "th" ) );
320
+
321
+ cell.appendChild( document.createTextNode( i+1 ) );
322
+
323
+ }
324
+
325
+ //----]----] 2列目
326
+
327
+ tr = tbody.appendChild( document.createElement( "tr" ) );
328
+
329
+ cell = tr.appendChild( document.createElement( "th" ) );
330
+
331
+ cell.appendChild( document.createTextNode( "正/誤" ) );
332
+
333
+ for(var i=0;i<Qlog.length;i++){
334
+
335
+ cell = tr.appendChild( document.createElement( "td" ) );
336
+
337
+ cell.appendChild( document.createTextNode( Qlog[ i ].bingo ? "○": "×" ) );
338
+
339
+ cell.style.color = Qlog[ i ].bingo ? "blue" : "red" ;
340
+
341
+ }
342
+
343
+ //----]----] 表示
344
+
345
+ document.querySelector( "#Quiz" ).style.display = "none";
346
+
347
+ document.querySelector( "#Result" ).style.display = "block";
348
+
349
+ }
350
+
351
+ }
352
+
353
+
354
+
355
+ /*---- 初期化実行 ----*/
356
+
357
+ initQ();
358
+
359
+
360
+
361
+ </script>
14
362
 
15
363
 
16
364
 
17
365
  ```
18
366
 
19
- エラーメッセージ
367
+
20
-
21
- ```
368
+
22
-
23
-
24
-
25
- ### 該当のソースコード
369
+
26
-
27
-
28
-
29
- ```javaScript
30
-
31
- ソースコード
32
-
33
-
34
-
35
- <!DOCTYPE html>
36
-
37
- <head>
38
-
39
- <meta charset="UTF-8">
40
-
41
- <title>練習</title>
42
-
43
-
44
-
45
- <script src="https://code.jquery.com/jquery-2.1.4.min.js">
46
-
47
- </script>
48
-
49
-
50
-
51
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
52
-
53
- </script>
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
- </head>
62
-
63
- <center>
64
-
65
- <h1>都道府県クイズ</h1>
66
-
67
- <hr>
68
-
69
-
70
-
71
- <!--―― 設問 ――-->
72
-
73
- <div id="Quiz">
74
-
75
-
76
-
77
- <h2>問題</h2>
78
-
79
- <table>
80
-
81
- <tr>
82
-
83
- <td>
84
-
85
- <div style="font-size:30pt;">
86
-
87
- <p id="Q_text"></p>
88
-
89
- <center>
90
-
91
- <img id="Q_img" >
92
-
93
- </div>
94
-
95
- </td>
96
-
97
- </tr>
98
-
99
- </table>
100
-
101
-
102
-
103
- <p>
104
-
105
- <div ng-controller="answer">
106
-
107
- <input type="text" ng-model="text" />
108
-
109
- <button ng-click="click()">判定</button>
110
-
111
- <p>
112
-
113
-
114
-
115
-
116
-
117
- <h2>解答</h2>
118
-
119
- <div id="Q_log" style="font-size:30pt;"></div>
120
-
121
-
122
-
123
-
124
-
125
- <div id="Result" style="display:none">
126
-
127
- <table>
128
-
129
- <caption>成績発表</caption>
130
-
131
- <tbody></tbody>
132
-
133
- </table>
134
-
135
- <div>
136
-
137
- <a href="javascript:history.back()">前のページ</a>
138
-
139
- <a href="javascript:initQ()">やり直し</a>
140
-
141
- <a href="">次のページ</a>
142
-
143
- </div>
144
-
145
- </div>
146
-
147
-
148
-
149
-
150
-
151
- <!--―― スクリプト ――-->
152
-
153
- <script type="text/javascript">
154
-
155
-
156
-
157
- /*---- 設問リスト ----*/
158
-
159
- var QlistOriginal = [
160
-
161
- {
162
-
163
- "Idx": 0,
164
-
165
- "text": "東京ディズニーリゾートがある都道府県は?",
166
-
167
- "A": "千葉県"
168
-
169
- },
170
-
171
- {
172
-
173
- "Idx": 1,
174
-
175
- "text": "USJがある都道府県は?",
176
-
177
- "A": "大阪府"
178
-
179
- },
180
-
181
- {
182
-
183
- "Idx": 2,
184
-
185
- "text": "明太子が有名な県は?",
186
-
187
- "A": "福岡県"
188
-
189
- },
190
-
191
- ];
192
-
193
-
194
-
195
- /*---- グローバル変数 ----*/
196
-
197
- //----] 出題数
198
-
199
- var Qmax = QlistOriginal.length;
200
-
201
- //----] 出題番号、問題リスト、ログ配列
202
-
203
- var Qcount, Qlist, Qlog;
204
-
205
-
206
-
207
- /*---- 関数 : 初期化 ----*/
208
-
209
- function initQ() {
210
-
211
- //----] 回答記録をクリア
212
-
213
- Qlog = new Array();
214
-
215
- document.getElementById("Q_log").innerHTML = "";
216
-
217
- //----] 設問リストを初期化
218
-
219
- Qlist = JSON.parse( JSON.stringify( QlistOriginal ) );/*設問リスト*/
220
-
221
- Qcount/*出題番号*/ = 0;
222
-
223
- //----] 表示切替え
224
-
225
- document.querySelector( "#Quiz" ).style.display = "block";
226
-
227
- document.querySelector( "#Result" ).style.display = "none";
228
-
229
- document.querySelector( "#Result tbody" ).innerHTML = "";
230
-
231
- //----] 1問目を出題
232
-
233
- setQ();
234
-
235
- }
236
-
237
-
238
-
239
- /*---- 関数 : 出題 ----*/
240
-
241
- function setQ() {
242
-
243
- //----] 問題をランダムに抽出
244
-
245
- var random = Math.floor( Math.random()*Qlist.length );
246
-
247
- var Q = Qlist.splice( random, 1 )[ 0 ];
248
-
249
- //----] 抽出した問題を Qlog に移植
250
-
251
- Qlog.push( Q );
252
-
253
- //----] 問題,画像を表示
254
-
255
- document.getElementById( "Q_text" ).innerHTML = ( Qcount+1 )+"問目:"+Q.text;
256
-
257
- document.getElementById( "Q_img" ).src = "./img/"+Q.Idx+".PNG";
258
-
259
- }
260
-
261
-
262
-
263
-
264
-
265
- /*---- 関数 : 正解チェック ----*/
266
-
267
- function checkA() {
268
-
269
- //----] 現在の問題を取得
270
-
271
- var Q = Qlog[ Qlog.length-1 ];
272
-
273
- //----] 答え合わせ
274
-
275
-
276
-
277
-
278
-
279
- Q.selection = A;
280
-
281
- Q.bingo = (text ==Q.A );
282
-
283
- //----] 結果を出力
284
-
285
- var log = document.getElementById( "Q_log" );
286
-
287
- //解答したものが増えていく
288
-
289
- log.appendChild( document.createTextNode( ( Qcount+1 )+"問目" ) );
290
-
291
- var span = log.appendChild( document.createElement( "span" ) );
292
-
293
- span.style.color = Q.bingo ? "blue" : "red" ;
294
-
295
- span.appendChild( document.createTextNode( Q.bingo ? "○" : "×" ) );
296
-
297
- log.appendChild( document.createTextNode( A ) );
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
- //----] 次の問題
306
-
307
- if( ++Qcount < Qmax ){
308
-
309
- setQ();
310
-
311
- }
312
-
313
- else{
314
-
315
- var tbody = document.querySelector( "#Result tbody" );
316
-
317
- //----]----] 1列目
318
-
319
- var tr = tbody.appendChild( document.createElement( "tr" ) );
320
-
321
- var cell = tr.appendChild( document.createElement( "th" ) );
322
-
323
- cell.appendChild( document.createTextNode( "問題" ) );
324
-
325
- for(var i=0;i<Qlog.length;i++){
326
-
327
- cell = tr.appendChild( document.createElement( "th" ) );
328
-
329
- cell.appendChild( document.createTextNode( i+1 ) );
330
-
331
- }
332
-
333
- //----]----] 2列目
334
-
335
- tr = tbody.appendChild( document.createElement( "tr" ) );
336
-
337
- cell = tr.appendChild( document.createElement( "th" ) );
338
-
339
- cell.appendChild( document.createTextNode( "正/誤" ) );
340
-
341
- for(var i=0;i<Qlog.length;i++){
342
-
343
- cell = tr.appendChild( document.createElement( "td" ) );
344
-
345
- cell.appendChild( document.createTextNode( Qlog[ i ].bingo ? "○": "×" ) );
346
-
347
- cell.style.color = Qlog[ i ].bingo ? "blue" : "red" ;
348
-
349
- }
350
-
351
- //----]----] 表示
352
-
353
- document.querySelector( "#Quiz" ).style.display = "none";
354
-
355
- document.querySelector( "#Result" ).style.display = "block";
356
-
357
- }
358
-
359
- }
360
-
361
-
362
-
363
- /*---- 初期化実行 ----*/
364
-
365
- initQ();
366
-
367
-
368
-
369
- </script>
370
-
371
-
372
-
373
- ```
374
-
375
-
376
-
377
-
378
-
379
- ### 試したこと
380
-
381
-
382
-
383
- ここに問題に対して試したことを記載してください。
384
370
 
385
371
 
386
372