クイズ作成：15個の問題から5個をランダム選択

締切済

質問者：rhymester
質問日時：2008/06/16 16:05
回答数：4件

JavaScriptを用いてクイズを作成しておりまして、次のことを試してみたいのですが、アドバイスをいただきたく思います。

○目的○
「15個の問題数の中から5個をランダムに選択して、それらを1問ずつ順番に表示する（あと、できれば最終画面で正解数を表示する）」

現時点では、15問を無限にランダム表示している状態です。
ちなみに次のようなプログラムになっております。↓
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<html>
<head>
<title>リンク</title>
</head>

<body bgcolor="black" text="white" topmargin="60" leftmargin="80">
<script language="JavaScript"></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>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
目的を達成するためにはどうすればよいか、アドバイスをいただけますようお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： _pipi_
回答日時：2008/06/16 20:46

<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を使うと個々の問題を必要に応じて読み込みます
つまり無駄な問題を読み込まなくてすみます

- 0
- 件

通報する

No.3

回答者： _pipi_
回答日時：2008/06/16 17:51

補足

起動時に var seikai=0;で宣言。
おそらく選択問題でしょうから、
正解は<inout type="button" onClick="seikai++;次の関数を読み込むルーチン"
不正解はそのまま次のページを読み込む。

もしくは
読み込む問題のページに、<input type="hidden" value= で答えも登録しておき、問題の合否の判定に使うとか

- 0
- 件

通報する

この回答へのお礼

解答いただきましてありがとうございます。
情報が少なかったみたいで申し訳ありませんでした。

クイズの流れを補足説明させていただきます。
質問に記述したHTMLプログラムは「クイズのスタート画面」です。

「クイズスタート画面」
　　　　　↓
「問題画面（3択問題）」全15ページ用意してあります。
　　　　　↓
「問題の成否画面」正解用と不正解用の2ページ用意してあります。
　　　　　↓
「問題画面（3択問題）」
　　　　　↓
「問題の成否画面」
　　　　　：
（無限ループ）　

現在は「問題画面（3択）」と「問題の成否画面」を無限に繰り返します。

厳密に言えば、「問題の成否画面(正解or不正解問わず)が5回」表示されたら、次に「正解数を表示するページ(最終ページ)」を表示させたいのですが…。難しいならば、「5問正解」or「5問不正解」になったら「最終ページ」を表示でもいいと考えています。

通報する

お礼日時：2008/06/16 18:40

No.2

回答者： _pipi_
回答日時：2008/06/16 17:27

Ajaxを利用して動的に各問題のページを読み込む方式が便利かと。

- 0
- 件

通報する

No.1

回答者： Kilm
回答日時：2008/06/16 16:43

GETリクエストを利用して正解数や解答数を渡せば出来ると思います。

location.href = myTable[myRnd]+'?cnt='+cnt+'&ans'+ans;
こんな感じのリンクを設定し、パラメータを取り出し、
5問解いていたら最終画面へ移動させる

但し、URLに値が見えるので容易に値を変更できますが…

参考URL：http://atom.blogdns.com/1/565.html