質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4039閲覧

繰り返し処理でボタンを押すと次に進めたい

poponta

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/06/12 06:05

問題と回答がランダムに出題されるページを作成したいと考えています。
やりたい手順は以下のとおりです。
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]

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

1.JSONで作成された問題と回答を読み込んで1問ずつ出題
2.解答ボタンを押すと正解を表示
3.ボタンを押すか何かキーを押すと画面がクリアされ次の問題を出題

↑ここの考え方がおかしいです。

1.JSONデータ(問題と解答)を読み込んで、内部変数に格納。 2.ランダム問題番号を生成して、内部変数に格納。 3.画面をクリアして「次の問題」を表示し、「その解答」も準備。 4.解答ボタンを押すと正解を表示。 5.正解を表示中にボタンを押されたら3を再実行。

↑このようにしなければ想定された動きにはならないでしょう。

例えば、

var quizData; // <------- 問題+回答のJSONデータ格納用変数 var randNumbers; // <---- ランダム問題番号の配列を格納する変数 var quizIndex = 0; // <- ランダム問題番号のindexを格納する変数 // 中略 req.onload = function(){ var resstr = JSON.parse(req.responseText); quizData = resstr; // <-- 問題+回答のJSONデータを格納 randNumbers = random_num(quizData.length); // ↑ランダム問題番号を生成 quizIndex = 0; // <------ ランダム問題番号のindexを初期化 prepareQuiz(); // ↑ここで上記の3を実行+4、5の準備をするfunction呼出し } function prepareQuiz(){ // 現在のquizIndexとquizDataを使って、 // 画面をクリアして「次の問題」を表示し、「その解答」も準備。 // ソースコードは省略。 document.getElementById("myid").onclick = function() { // onclickイベントを入れ替えることで、 // 4.解答ボタンを押すと正解を表示。 // 5.正解を表示中にボタンを押されたら3を再実行。 // ↑こちらの4、5を準備。 // ソースコードは省略。 } quizIndex++; // <- ランダム問題番号のindexを進めておく }

↑こんな風にすれば期待された動きになるのでは?

投稿2018/06/12 07:23

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

poponta

2018/06/13 00:28

迅速なご回答ありがとうございます。 ご教示いただいたとおりに修正し、思ったとおりに動くようになりました。 そもそもの考え方が間違っていたのですね。 助かりました。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問