問題と回答がランダムに出題されるページを作成したいと考えています。
やりたい手順は以下のとおりです。
1.JSONで作成された問題と回答を読み込んで1問ずつ出題
2.解答ボタンを押すと正解を表示
3.ボタンを押すか何かキーを押すと画面がクリアされ次の問題を出題
2.までは作ることができたのですが、
whileなどのループを使うと止まらずに最終問題まで行ってしまいます。
(止める方法が分かりません)
どのようにすればよろしいでしょうか?
JavaScript
1<!DOCTYPE HTML> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 5</head> 6<body> 7<script type="text/javascript"> 8 9var req = new XMLHttpRequest(); 10req.open("get", "test.json", true); 11req.send(null); 12req.onload = function(){ 13 var resstr = JSON.parse(req.responseText); 14 process(resstr); 15} 16 17function process(str){ 18 var i = 0, 19 k = str.length, 20 rnum = random_num(k); 21 22 while(i < k){ 23 var m = rnum[i], 24 p = i + 1, 25 target = str[m].ques, 26 item = str[m].ans; 27 28 document.getElementById("numitem").innerHTML = "<br>" + "問題" + p + "<br>"; 29 document.getElementById("qesitem").innerHTML = target + "<br><br>"; 30 31 var inum = random_num(4); 32 33 for(var n = 0; n < 4; n++){ 34 var r = inum[n]; 35 if(inum[n] == 0){ 36 eq = n; 37 } 38 var dispitem = item; 39 40 switch(n){ 41 case 0: 42 document.getElementById("ansitem1").innerHTML = "(a) " + dispitem[r]; 43 break; 44 case 1: 45 document.getElementById("ansitem2").innerHTML = "(b) " + dispitem[r]; 46 break; 47 case 2: 48 document.getElementById("ansitem3").innerHTML = "(c) " + dispitem[r]; 49 break; 50 case 3: 51 document.getElementById("ansitem4").innerHTML = "(d) " + dispitem[r]; 52 break; 53 } 54 55 } 56 57 document.getElementById("myid").onclick = function() { 58 document.getElementById("answer").innerHTML = "答え: (" + String.fromCharCode(97 + eq) + ") " + item[0] + "<br><br>"; 59 } 60 61 i++; 62 } 63} 64 65function random_num(num){ 66 var random = new Array(); 67 for (var i = 1; i < num; i++) { 68 random[i] = Math.floor(Math.random()*num); 69 } 70 random[0] = Math.floor(Math.random()*num); 71 72 for (i = 1; i < num; i++) { 73 var j = 0; 74 while(j < i){ 75 while(random[i] == random[j]){ 76 random[i] = Math.floor(Math.random()*num); 77 j = 0; 78 } 79 j++; 80 } 81 } 82 return random; 83} 84 85</script> 86<p id="numitem"></p> 87<p id="qesitem"></p> 88<p id="ansitem1"></p> 89<p id="ansitem2"></p> 90<p id="ansitem3"></p> 91<p id="ansitem4"></p> 92<button id="myid">解答</button> 93<p id="answer"></p> 94</body> 95</html>
JSON
1[ 2 { 3 "ques":[ 4 "日本一高い山は?" 5 ], 6 "ans":[ 7 "富士山","阿蘇山","桜島","大雪山" 8 ] 9 }, 10 { 11 "ques":[ 12 "日本一長い川は?" 13 ], 14 "ans":[ 15 "信濃川","利根川","石狩川","天竜川" 16 ] 17 }, 18 { 19 "ques":[ 20 "日本一広い湖は?" 21 ], 22 "ans":[ 23 "琵琶湖","霞ヶ浦","阿寒湖","摩周湖" 24 ] 25 } 26]
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/13 00:28