Ｊａｖａ Ｓｃｒｉｐｔの解説
６．クイズ問題の作り方
１．Ｙｅｓ，Ｎｏ問題
ラジオボタン（○のボタン）を押すことにより，Ｙｅｓ，Ｎｏに答えるクイズ形式
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例１＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
var msg1;
ｆｕｎｃｔｉｏｎ ＫＵＩＺＵ１（ｆｍ）｛
ｆ＝ｆｍ．ｆｏｒｍ；ｆ．ｃａｌｌ．ｖａｌｕｅ＝ｆｍ．ｖａｌｕｅ；
｝
ｆｕｎｃｔｉｏｎ ＫＵＩＺＵ２（ｆｍ）｛
ｍｓｇ１＝ｆｍ．ｖａｌｕｅ；
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．Ｒｅｓｕｌｔ．ｖａｌｕｅ＝ｍｓｇ１＋”￥ｎ”；
｝
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜FORM METHOD="POST"＞解答＜INPUT TYPE="text" SIZE=50 NAME="call"＞＜ＢＲ＞
１．成人の体の中には，血液が約１−２リットルある。
＜INPUT TYPE="radio" NAME="back" VALUE="不正解（４−５リットル）" onClick="KUIZU1(this)"＞Yes
＜INPUT TYPE="radio" NAME="back" VALUE="正解（４−５リットル）" onClick="KUIZU1(this)"＞No＜ＢＲ＞
＜/FORM＞
＜FORM METHOD="POST" NAME="MyForm"＞
解答＜TEXTAREA NAME="Result" ROWS=2 COLS=100＞＜/TEXTAREA＞＜ＢＲ＞
２．急に立って，フラーとすることを貧血という。
＜INPUT TYPE="radio" NAME="back" VALUE="不正解（これは起立性低血圧です。貧血では，息切れしやすい，疲れやすなどの症状がでます。）" onClick="KUIZU2(this)"＞Yes
＜INPUT TYPE="radio" NAME="back" VALUE="正解（これは起立性低血圧です。貧血では，息切れしやすい，疲れやすなどの症状がでます。）" onClick="KUIZU2(this)"＞No＜ＢＲ＞
＜/FORM＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例１表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１．テキストボックスに表示する。
1)入力形式
＜INPUT TYPE="radio" NAME="back" VALUE="不正解（４−５リットル）" onClick="KUIZU1(this)"＞Yes
TYPE="radio" ：ラジオボタン／NAME="back"：グループの名前／VALUE ラジオボタンの値／
onClick="KUIZU1(this)"：クリックされた時，関数KUIZU1(this)を実行する。
ラジオボタンとは，○のボタンです。これ以外にTYPE="button"では，文字表示つきの長方形のボタンがあります。
問題に対する解答（表示させる文）をそれぞれのボタンのＶＡＬＵＥ＝“ ”に代入して下さい。
2)値の受け渡し
ｆｕｎｃｔｉｏｎ ＫＵＩＺＵ１（ｆｍ）｛ｆ＝ｆｍ．ｆｏｒｍ；ｆ．ｃａｌｌ．ｖａｌｕｅ＝ｆｍ．ｖａｌｕｅ；｝
ｆ＝ｆｍ．ｆｏｒｍ；ラジオボタンのあるフォームへの参照をｆに代入
ｆ．ｃａｌｌ．ｖａｌｕｅ＝ｆｍ．ｖａｌｕｅ；クリックされたラジオボタンの値をテキストボックスｃａｌｌに代入
3)値の表示
＜INPUT TYPE="text" SIZE=50 NAME="call"＞
SIZEが５０，テキストボックスｃａｌｌの中身を表示。クリックされたボタンのVALUEの文字が表示されます。
２．テキストエリアに表示する。
1)入力形式
上記と同じ
2)値の受け渡し
ｆｕｎｃｔｉｏｎ ＫＵＩＺＵ２（ｆｍ）｛ｍｓｇ１＝ｆｍ．ｖａｌｕｅ；
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．Ｒｅｓｕｌｔ．ｖａｌｕｅ＝ｍｓｇ１＋”￥ｎ”；
｝
ｍｓｇ１＝ｆｍ．ｖａｌｕｅ； クリックされたボタンの値をｍｓｇ１に代入
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．Ｒｅｓｕｌｔ．ｖａｌｕｅ＝ｍｓｇ１＋”￥ｎ”；
ｍｓｇ１＋”￥ｎ”をＭｙＦｏｒｍというフォームのＲｅｓｕｌｔというテキストエリアに代入
”￥ｎ”これは，改行命令。マックでは違う可能性がありますので，マックでは改行されないかもしれません。
3)値の表示
＜FORM METHOD="POST" NAME="MyForm"＞ ＭｙＦｏｒｍという名のフォーム
＜TEXTAREA NAME="Result" ROWS=2 COLS=100＞ Ｒｅｓｕｌｔというテキストエリアを表示
ROWS=2 ：高さCOLS=100：幅
２．三択問題
３個のラジオボタンのいずれかで答える三択問題
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例２＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｖａｒ ｍｓｇ１；
ｆｕｎｃｔｉｏｎ ＫＵＩＺＵ２（ｆｍ）｛
f=fm.form;
if (fm.value=="豚レバー") msg1="不正解です。"+"\n"+"１００ｇ当たり．．略．．";
if (fm.value=="ホウレン草") msg1="不正解です。"+"\n"+"１００ｇ当たり．．略．．";
if (fm.value=="干しひじき") msg1="正解です。"+"\n"+"１００ｇ当たり．．略．．";
ｄｏｃｕｍｅｔ．ＭｙＦｏｒｍ．Ｒｅｓｕｌｔ．ｖａｌｕｅ＝ｍｓｇ１＋”￥ｎ”；
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＦＯＲＭ ＭＥＴＨＯＤ＝”ＰＯＳＴ” ＮＡＭＥ＝”ＭｙＦｏｒｍ”＞
＜TEXTAREA NAME="Result" ROWS=6 COLS=50＞＜/TEXTAREA＞＜ＢＲ＞
＜問題＞１００ｇ当たりの鉄の含有量の多い食品はどれでしょう｡＜ＢＲ＞
＜INPUT TYPE="radio" NAME="back" VALUE="豚レバー" onClick="KUIZU2(this)"＞豚レバー
＜INPUT TYPE="radio" NAME="back" VALUE="ホウレン草" onClick="KUIZU2(this)"＞ホウレン草
＜INPUT TYPE="radio" NAME="back" VALUE="干しひじき" onClick="KUIZU2(this)"＞干しひじき＜ＢＲ＞
＜/FORM＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例２表示 ここをクリックして下さい。例が表示されます。
＜解説＞
if (fm.value=="豚レバー")：押されたラジオボタンの値（VALUE="ここの文字"）が”豚レバー”であれば，次の文（msg1="不正解です。"+．．．）を実行する。
即ち，ｍｓｇ１にラジオボタンに対応した答えを書いておけば，それが表示されます。
ｄｏｃｕｍｅｔ．ＭｙＦｏｒｍ．Ｒｅｓｕｌｔ．ｖａｌｕｅ＝ｍｓｇ１＋”￥ｎ”；結果代入
＜TEXTAREA NAME="Result" ROWS=6 COLS=50＞：結果表示
３．テスト形式問題
ボタンを押して，最後に得点と解答がでるテスト形式問題
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例３＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｖａｒ ｍｓｇ１，ｍｓｇ２，ｍｓｇ３；
function MakeArray(n){this.Length=n;}
var cont=new MakeArray(4);
function KUIZU1(fm,nn){msg1=fm.value;cont[1]=nn;}
function KUIZU2(fm,nn){msg2=fm.value;cont[2]=nn;}
function KUIZU3(fm,nn){msg3=fm.value;cont[3]=nn;}
function SUM(fm){n1=0;
for (i=1;i<4;i++){
n1=n1+cont[i];}
if (isNaN(n1)) {alert("入力されてない項目があります。");}else false;
fm.answer1.value=n1;
}
function disp()
{document.MyForm.Result.value="第一問："+msg1+"\n"+"第二問："+msg2+"\n"+"第三問："+msg3;
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
−−−−−−−−−−
＜INPUT TYPE="radio" NAME="back" VALUE="不正解．略．）" onClick="KUIZU2(this,0)">Yes
＜INPUT TYPE="radio" NAME="back" VALUE="正解．略．）" onClick="KUIZU2(this,1)">Ｎｏ
その他問題は省略
−−−−−−−−−−
＜FORM METHOD="POST" NAME="MyForm"＞
確認の上，採点ボタンを押して下さい。＜ＢＲ＞
＜INPUT TYPE="button" VALUE="採点" onClick="SUM(this.form)"＞＜ＢＲ＞
＜INPUT TYPE="text" SIZE=6 NAME="answer1"＞点＜ＢＲ＞
解答ボタンを押して下さい。解答がでます。＜ＢＲ＞
＜INPUT TYPE="button" VALUE="解答" onClick="disp()"＞＜ＢＲ＞
＜TEXTAREA NAME="Result" ROWS=18 COLS=100＞＜/TEXTAREA＞＜ＢＲ＞
＜/FORM＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例３表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１．function MakeArray(n){this.Length=n;} var cont=new MakeArray(4);
count[ｉ]という配列を決める命令です。countは配列名，ｉは添え字とよばれます。上記はcount[0]，．．count[4]と５つ配列ができます。
配列の数はMakeArray(4) （ ）の中の数字により決まります。ただしcount[0]は使わないで下さい。count[1]から使って下さい。
配列とはデータを入れる箱と考えて下さい。普通の変数と違い添え字を使って色々な処理をするのに便利がよいです。このcountは得点計算に使います。
２．＜INPUT TYPE="radio" NAME="back" VALUE="不正解．略．）" onClick="KUIZU2(this,0)">Yes
例１，例２と異なるところは KUIZU2(this,0)です。(this,n)でｎという数字が入ります。ｎは好きな数字でかまいません。例では正解のときは１，不正解の時は０になってます。
要するに正解だと１点，不正解だと０点ということで数字を関数に送るようになってます。
３．function KUIZU1(fm,nn){msg1=fm.value;cont[1]=nn;}
msg1=fm.value; これはいままでの例と同じです。
cont[1]=nn;第一問の得点がはいります。正解だと１，不正解だと０です。
４．＜INPUT TYPE="button" VALUE="採点" onClick="SUM(this.form)"＞
これは「採点」と名前のついたボタンです。
５．function SUM(fm)について
{n1=0;for (i=1;i<4;i++){n1=n1+cont[i];}
実行されるとn1=count[1]+count[2]+count[3]と合計点がｎ１に代入されます。
if (isNaN(n1)) {alert("入力されてない項目があります。");}else false;
ｎ１に文字が含場合は，入力されてない場所があることになりますので，alertで「入力されてない」注意を表示します。
fm.answer1.value=n1;} テキストボックスanswer1にｎ１を代入
６．function disp()について
{document.MyForm.Result.value="第一問："+msg1+"\n"+"第二問："+msg2+"\n"+"第三問："+msg3;｝
第一問から第三問までの解答の結果をＲｅｓｕｌｔに代入
４．画像を使った問題
ボタンを押すと絵が出て，それに対する答える形式
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＥＡＤ＞
var msg1;
function KUIZU3(fm){f=fm.form;
if (fm.value=="１Ａ")msg1="不正解です。"+"\n"+"気持ちがよいという効果はあります。";
if (fm.value=="１Ｂ")msg1="不正解です。"+"\n"+"気持ちがよいという効果はあります。";
if (fm.value=="１Ｃ")msg1="正解です。"+"\n"+"血液が．．略．．。";
document.TestForm.COMENT.value=msg1+"\n";
}
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜FORM METHOD="POST" NAME="TestForm"＞
解答＜TEXTAREA NAME="COMENT" ROWS=4 COLS=50＞＜/TEXTAREA＞
１．発熱があって冷やす場合，．．略．．。
＜INPUT TYPE="button" VALUE="絵１" onClick="document.mm.src='../image/quiz15.gif'">
＜INPUT TYPE="radio" NAME="back" VALUE="１Ａ" onClick="KUIZU3(this)">１．額
＜INPUT TYPE="radio" NAME="back" VALUE="１Ｂ" onClick="KUIZU3(this)">２．後頭部
＜INPUT TYPE="radio" NAME="back" VALUE="１Ｃ" onClick="KUIZU3(this)">３．脇の下
＜/FORM＞＜ＢＲ＞
＜IMG SRC="../image/quiz12.gif" NAME="mm" WIDTH=150 HEIGHT=150＞
＜／ＢＯＤＹ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例４表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１．＜IMG SRC="../image/quiz12.gif" NAME="mm" WIDTH=150 HEIGHT=150＞
画像の表示ですが，これに名前を付けて置いて下さい。その名前を使って，絵を表示し直します。
ＮＳ Ver３では，＜ＦＯＲＭ＞と＜／ＦＯＲＭ＞の間に置くとうまく動きませんですから解答表示するテキストエリアと絵を一緒におけません。
ＮＳ Ver４ ＩＥVer４では，大丈夫です。解答欄と絵は隣り合わせに置いた方が見やすいのですがＮＳ Ver３を考えるとできません。
２．＜INPUT TYPE="button" VALUE="絵１" onClick="document.mm.src=’../image/quiz15.gif’">
ボタンがクリックされると"document.mm.src=’../image/quiz15.gif’">が実行されます。
ｍｍという名前の絵に新たに'../image/quiz15.gif'という画像を表示します。「’」に注意して下さい。「”」ではありません。
５．付録
クイズ問題のフォームを作りましたので、自分ホームページにクイズを載せたい方は参考にして下さい。
クイズの形式Ｎｏ1
一問ごとに問題が表示される形式のクイズです。
クイズの形式Ｎｏ２
一問ごとに問題が表示される形式のクイズでが、不正解した時点で終了します。
娯楽室の各部屋
