- 締切済み
クイズ作成：15個の問題から5個をランダム選択
JavaScriptを用いてクイズを作成しておりまして、次のことを試してみたいのですが、アドバイスをいただきたく思います。 ○目的○ 「15個の問題数の中から5個をランダムに選択して、それらを1問ずつ順番に表示する（あと、できれば最終画面で正解数を表示する）」 現時点では、15問を無限にランダム表示している状態です。 ちなみに次のようなプログラムになっております。↓ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <html> <head> <title>リンク</title> </head> <body bgcolor="black" text="white" topmargin="60" leftmargin="80"> <script language="JavaScript"><!-- myCnt = 15; // リンク先の数 myTable = new Array( // リンク先の登録 "クイズテスト2.html", "クイズテスト3.html", "クイズテスト4.html", "クイズテスト5.html", "クイズテスト6.html", "クイズテスト7.html", "クイズテスト8.html", "クイズテスト9.html", "クイズテスト10.html", "クイズテスト11.html", "クイズテスト12.html", "クイズテスト13.html", "クイズテスト14.html", "クイズテスト15.html", "クイズテスト16.html" ); function myRndLink(){ // 適当に選んでリンクする関数 myRnd = Math.floor(Math.random()*myCnt); // 0～(myLine-1)の乱数を求める location.href = myTable[myRnd]; // リンクする } // --></script> <form> <div align="right"> <font size="5">クイズをお楽しみください！</font><br><br><br> <font size="5">こちらからどうぞ → <input type="button" value="START" onClick="myRndLink()"></font><br> </div> <br><br> <div align="right"> <img src="..\00. ダウンロード素材\オーディオ\ライン\line02.gif" width="800"> </div> </form> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 目的を達成するためにはどうすればよいか、アドバイスをいただけますようお願いいたします。
- rhymester
- お礼率68% (69/101)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
<html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした！ <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です！ <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> ----------------------------- これでもページを書き換えることなく実現できます これは問題を隠して、必要に応じて表示してます ですがAjaxを使うと個々の問題を必要に応じて読み込みます つまり無駄な問題を読み込まなくてすみます
補足 起動時に var seikai=0;で宣言。 おそらく選択問題でしょうから、 正解は<inout type="button" onClick="seikai++;次の関数を読み込むルーチン" 不正解はそのまま次のページを読み込む。 もしくは 読み込む問題のページに、<input type="hidden" value= で答えも登録しておき、問題の合否の判定に使うとか
Ajaxを利用して動的に各問題のページを読み込む方式が便利かと。
- Kilm
- ベストアンサー率87% (7/8)
GETリクエストを利用して正解数や解答数を渡せば出来ると思います。 location.href = myTable[myRnd]+'?cnt='+cnt+'&ans'+ans; こんな感じのリンクを設定し、パラメータを取り出し、 5問解いていたら最終画面へ移動させる 但し、URLに値が見えるので容易に値を変更できますが…
お礼
解答いただきましてありがとうございます。 参考URLも拝見したのですが、難しそうですね。 なにぶん、HTMLを本格的に学習し始めたのが約1ヶ月前で、JavaScriptに関しては１～2週間前なもので… なんとか、頑張って作り上げてみようと思います。
お礼
解答いただきましてありがとうございます。 情報が少なかったみたいで申し訳ありませんでした。 クイズの流れを補足説明させていただきます。 質問に記述したHTMLプログラムは「クイズのスタート画面」です。 「クイズスタート画面」 ↓ 「問題画面（3択問題）」 全15ページ用意してあります。 ↓ 「問題の成否画面」 正解用と不正解用の2ページ用意してあります。 ↓ 「問題画面（3択問題）」 ↓ 「問題の成否画面」 ： （無限ループ） 現在は「問題画面（3択）」と「問題の成否画面」を無限に繰り返します。 厳密に言えば、「問題の成否画面(正解or不正解問わず)が5回」表示されたら、次に「正解数を表示するページ(最終ページ)」を表示させたいのですが…。難しいならば、「5問正解」or「5問不正解」になったら「最終ページ」を表示でもいいと考えています。