Q&A
Math.random(): 0以上1未満の小数点付きの値をランダムに返す関数
Math.floor(): 小数点以下を切り捨てた値を返す関数(負数の場合は仕様を確認してください)
これらを使うと、例えば
Math.floor(Math.random() * 10)
で、0～9の値をランダムに取得できます。
ランダムという言葉を知っててこれだけコードを書けるなら、質問しなくてもググれば苦もなく自力解決できそうですが…
問題を複数題作れたのはいいのですがランダムに出題する方法がわからないです。どうすればよろしいでしょうか？
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>三択クイズ</title> </head> <body> <h1>路線三択クイズ</h1>
<hr> <h2>問題</h2> <div id="text_q"></div> <h2>選択</h2> <div id="text_s"></div> <h2>解答</h2> <div id="text_a"></div> <script type="text/javascript"> //問題と解答 qa = new Array(); qa[0] = ["山手線が通ってない駅は？","山手駅","御徒町駅","新宿駅",1]; qa[1] = ["新宿駅を通ってない路線は？","小田急線","常磐線","埼京線",2]; qa[2] = ["丸の内線の駅でないものは？","新高円寺駅","東高円寺駅","高円寺駅",3]; qa[3] = ["埼玉高速鉄道線の終着駅は？","赤羽岩淵駅","南鳩ヶ谷駅","浦和美園駅",3]; qa[4] = ["副都心線が通ってない駅は？","新宿三丁目駅","成増駅","小竹向原駅",2]; qa[5] = ["半蔵門線が通ってる駅は？","青山一丁目駅","春日駅","新御徒町駅",1]; qa[6] = ["銀座線が通ってない駅は？","田原駅","神田駅","東銀座駅",3]; qa[7] = ["東西線と丸の内線が通ってる駅は？","市ヶ谷駅","大手町駅","飯田橋駅",2]; qa[8] = ["東西線と有楽町線が通ってる駅は？","飯田橋駅","市ヶ谷駅","有楽町駅",1]; qa[9] = ["三田線が通ってる駅は？","板橋本町駅","上板橋駅","板橋駅",1]; //初期設定 q_sel = 3; //選択肢の数 setReady(); //初期設定 function setReady() { count = 0; //問題番号 ansers = new Array(); //解答記録 //最初の問題 quiz(); } //問題表示 function quiz() { var s, n; //問題 document.getElementById("text_q").innerHTML = (count + 1) + "問目：" + qa[count][0]; //選択肢 s = ""; for (n=1;n<=q_sel;n++) { s += "【<a href='javascript:anser(" + n + ")'>" + n + "：" + qa[count][n] + "</a>】"; } document.getElementById("text_s").innerHTML = s; } //解答表示 function anser(num) { var s; s = (count + 1) + "問目："; //答え合わせ if (num == qa[count][q_sel + 1]) { //正解 ansers[count] = "○"; } else { ansers[count] = "×"; } s += ansers[count] + qa[count][num]; document.getElementById("text_a").innerHTML = s; //次の問題を表示 count++; if (count < qa.length) { quiz(); } else { //終了 s = "<table border='2'><caption>成績発表</caption>"; //1行目 s += "<tr><th>問題</th>"; for (n=0;n<qa.length;n++) { s += "<th>" + (n+1) + "</th>"; } s += "</tr>"; //2行目 s += "<tr><th>成績</th>"; for (n=0;n<qa.length;n++) { s += "<td>" + ansers[n] + "</td>"; } s += "</tr>"; s += "</table>"; document.getElementById("text_q").innerHTML = s; //次の選択肢 s = "【<a href='javascript:history.back()'>前のページに戻る</a>】"; s += "【<a href='javascript:setReady()'>同じ問題を最初から</a>】"; s += "【<a href=''>次の問題に進む</a>】"; document.getElementById("text_s").innerHTML = s; } } </script> </body> </html>よろしくお願いします。
コードはマークダウンのcode機能を利用してご提示ください。
また現在のコードにおける問題点、自身が試したこと調べたことを具体的に記載してください。
というかご自身で書かれたコード、ちゃんと説明できますか？
タグに「JavaScript」を追加してください。HTML側の仕事は少ないです
回答2件
0
単純に乱数で問題を取り出すと、同じ問題を出題することがありますので、下記のようなロジックにするといいでしょう。
問題の配列を最初にシャッフル（ランダムに並べ替える）する。
それを前から順に出題する。
シャッフルは検索すればいろいろ見つかります。
例えば、
【JavaScript】配列のシャッフルする（要素をランダムに並び替える） | Black Everyday Company
投稿2019/11/20 00:46
総合スコア34073
0
このあたりが参考になるのではないでしょうか。
投稿2019/11/19 23:13
編集2019/11/19 23:23
総合スコア48
あなたの回答
tips
プレビュー
