チェックボックスとラジオボタンの利用

チェックボックス，ラジオボタン，リストボックスの利用

■　チェックボックスを用いた解答欄の作成
　チェックボックスは，選択肢の中で複数個を選ぶ可能性があるときに用います．１つだけを選ぶときは，後で述べるラジオボタンによります．
なお，以下に述べるチェックボックス，ラジオボタン，リストボックスはいずれも，<form></form>の中になければなりません．

<head> <script language="javascript"> kr = new Array(); kr[0] = new Image(); kr[0].src = "white.gif"; kr[1] = new Image(); kr[1].src = "yes.gif"; kr[2] = new Image(); kr[2].src = "no.gif";	<!-------------KR情報-------------> white.gif・・・白紙 yes.gif・・・・・○ no.gif・・・・・・×
function saiten(qnum) {if(qnum == 1) {if(document.q1.a1.checked == true && document.q1.a2.checked == false && document.q1.a3.checked == true && document.q1.a4.checked == false) document.q1.kekka1.src = kr[1].src; else document.q1.kekka1.src = kr[2].src; } }	<!-------------採点関数------------> 　ＨＴＭＬでチェックボックスを書いたことのある方は，左記のプログラムに戸惑われるかもしれません．　同一グループは同じnameによって識別し，valueによって選択されたかどうかを判断するという原則はどこに行ってしまったのか？　ここでは，同一グループかどうか（１つの問題の解答かどうか）の判断はプログラムで行うので，グループ名(name)をすべて異なるものにしたのです．この結果，チェックボックスのvalueが全くの飾りになっています．　なお，１番目がチェックされていて，かつ，２番目がノーチェックで，．．．というように論理積を指定するには，両端にスペースを入れて && でつなぎます．(Cと同様で,&　だけではビット積になります．) 　またはを表わす記号は \|\| です．
function renew(qnum) {if(qnum == 1) { document.q1.a1.checked = false; document.q1.a2.checked = false; document.q1.a3.checked = false; document.q1.a4.checked = false; document.q1.kekka1.src = kr[0].src; } } </script> </head>	<!---------チェックボックスの初期化---> 　学校で授業に使うような場合，前の時間に使った人の答が出てくるようでは困ります．また，やり直すときも，解答欄を白紙に戻したいものです．　ここでは，KR情報もついでに初期化しています．
<body> 次の計算のうち，正しいものを選びなさい．(答は１つだけとは限りません．) <form name="q1"> <input type="checkbox" name="a1" value="b1">２ａ＋３ａ＝５ａ<br> <input type="checkbox" name="a2" value="b2">５ａ－ａ＝５<br> <input type="checkbox" name="a3" value="b3">ａ×ａ=ａ<sup>2</sup><br> <input type="checkbox" name="a4" value="b4">３＋ａ＝３ａ<br> <img SRC="white.gif" NAME="kekka1" height=50 width=50> <input type="button" value="採点" onClick="saiten(1)"> <input type="button" value="やり直す" onClick="renew(1)"> </form>	<!--------画面上で見える部分-------->

＜実際の見え方１＞

次の計算のうち，正しいものを選びなさい．(答は１つだけとは限りません．)

（配列を用いて，プログラムをコンパクトにまとめる方法）

上記のプログラム中， ...== true; ...==false; の繰り返しが冗長に思われる場合，解答の配列を準備してこれと照合することが考えられます．問題数が多いときファイルサイズを節約する効果や問題の追加・修正に便利です．
　なお，この方法は，問題が単純な繰り返しになっている場合には適していますが，途中１個所でもテキストボックス・ラジオボタン・ボタンなどが不規則に追加されているときには，解答配列の置き方が変わる点に注意してください．

ans = new Array();
ans[0] = new Array(0,0,0,0); //配列の番号は０からなので，ダミーを置いたもの
ans[1] = new Array(1,0,1,0);
function n2t(num)
{if(num == 1)
return true;
else if(num == 0)
return false;
}
function saiten2(qnum)
{for(kk = 0; kk < 4; kk++)
{if(document.q1.elements[kk].checked != n2t(ans[qnum][kk]))
{ document.q1.kekka1.src = kr[2].src;
return; //****これが大事
}
}
document.q1.kekka1.src = kr[1].src;
}
bodyの中のボタンの部分を次のように書き換えます．
<input type="button" value="採点(配列)" onClick="saiten2(1)">

　解答を２次元配列として作成します．
ans[1]は問題１の解答の束です．
　ans[1][0]が問題１の先頭のチェックボックスの答
　ans[1][1]が問題１の２番目のチェックボックスの答
　ans[1][2]が問題１の３番目のチェックボックスの答
　ans[1][3]が問題１の４番目のチェックボックスの答
です．（ＣやJavaScriptでは配列の番号は０から始まります．）
　n2t()　は　number to true　を略したつもりです．配列要素が1ならばtrueを返し，0ならばfalseを返します．
　q1というフォームの中のチェックボックス，ラジオボタン，テキストボックスなどは，前から順にelements[番号]で参照できます．ただし先頭は０番です．
　左記の採点関数では，0番から３番までのうち１つでも間違いがあれば間違いと判定して関数の外に出ます．全部正しければfor()ループを抜け出て正しいと判定しています．
　「****これが大事」と書いた部分がないと，解答が何であっても正しいという判断に突入します．

＜実際の見え方２＞　前の例で「採点(配列)」というボタンを押してください．

■　ラジオボタンを用いた解答欄の作成
　チェックボックスは，複数個の解答が予想される場合に用いますが，ラジオボタンは１つだけを選択する場合に用います．ラジオボタンにおいては，どれかを選択すれば他の選択は自動的に解除されます．

function saiten_radio()
{if(document.q2.toi1[2].checked == true)
document.q2.kekka2.src = kr[1].src;
else
document.q2.kekka2.src = kr[2].src;
}

ラジオボタングループ名[配列番号].checked が trueかどうかで判断

　なお，ラジオボタンを教材として使用する場合も，前述と同様の事情で初期化は必要です．各ボタンを checked = false;とします．

<form name="q2"><b>　金閣寺は何時代に作られましたか？　<input type="radio" name="rei" value="a0" checked>を付けなさい．</b>
<br><input type="radio" name="toi1" value="a1">平安時代　<input type="radio" name="toi1" value="a2">鎌倉時代　<input type="radio" name="toi1" value="a3">室町時代　<input type="radio" name="toi1" value="a4">安土桃山時代　<input type="radio" name="toi1" value="a5">江戸時代
<br><img SRC="white.gif" NAME="kekka2" BORDER=0 height=50 width=50>
<br><input type="button" name="b1" value="採点する" onClick="saiten_radio()"></form>

　ラジオボタンでは同じnameを持つ選択肢は，同一グループです．
　左の例では平安時代から江戸時代までの５つの時代を同一のnameにしています．この場合，これらのうち１つが選択されれば他の選択は自動的に解除されます．
　ラジオボタンにおいては，選択肢は名前[配列番号］で参照できるため，左のvalueは単なる飾りになっています．

　デフォルトでチェックしておいて，例外の場合だけ他の選択肢を選ぶ仕組みとするにはchecked と書いておきます．左の例では，「見本」の部分にcheckedを用いています．
　ホームページ上では，白紙回答を送られると集計上困るようなアンケートによく用いられています．（私も使っています．）

　なお，第２問を作るには，nameの異なるべつのグループ例えばtoi2などとします．

　（なお，ラジオボタンで選択肢が５個の場合に限定したものについては，JavaScriptによる□タク作成ツールというソフトがあるようです．）

＜実際の見え方３＞

■　リストボックスを用いた解答欄の作成
　ラジオボタンと同様に選択肢を１つ選ぶものとして，リストボックスがあります．次の例では，始め１つの選択肢が見えていて，▼またはリストの欄をクリックすると他の選択肢が見えるものです．

function saiten_list()
{if(document.q3.toi3[2].selected == true)
document.q3.kekka3.src = kr[1].src;
else
document.q3.kekka3.src = kr[2].src;
}

リストボックスのグループ名[配列番号].selected　が　true　かどうかで判断します．

　なお，リストボックス初期化は必要です．各ボタンを selected = false;とします．

<form name="q3"><b>　金閣寺は何時代に作られましたか？<select name="toi3"><option value=1></b>平安時代<option value=2>鎌倉時代<option value=3>室町時代<option value=4>安土桃山時代<option value=5>江戸時代</select>
<br><img SRC="white.gif" NAME="kekka3" BORDER=0 height=50 width=50>
<br><input type="button" name="b1" value="採点する" onClick="saiten_list()"></form>

　option　の中でｖａｌｕｅ=を付けなければ，'平安時代'というような文字列が値となります．valueを設定して数値で照合する方が簡潔になります．

　蛇足ですが，このファイルの中にb1という同じ名前のボタンがありますが，異なるformの中にあるので識別するようです．
　このような特別な事情がないときに，同一ファイル内で同一名の識別子を用いた場合，概して最後に登場したものを表わすようです．

＜実際の見え方４＞ （複数の候補が見える状態から始める方法）
　上の例では，他にも選択肢があることが分かるとは限りません．平安時代が，解答として指定されているかのように誤解する余地はあります．そこで，初めから複数個の選択肢を見せておくのが，次の例の size=2,3,4...です．

function saiten_list2()
{if(document.q4.toi4[2].selected == true)
document.q4.kekka4.src = kr[1].src;
else
document.q4.kekka4.src = kr[2].src;
} 

<form name="q4"><b>　金閣寺は何時代に作られましたか？<select name="toi4" size=3><option value=1></b>平安時代<option value=2>鎌倉時代<option value=3>室町時代<option value=4>安土桃山時代<option value=5>江戸時代</select>
<br><img SRC="white.gif" NAME="kekka4" BORDER=0 height=50 width=50>
<br><input type="button" name="b1" value="採点する" onClick="saiten_list2()"></form> 　size=3　とすることにより，３個まで選択肢を見せる．

＜実際の見え方５＞
　金閣寺は何時代に作られましたか？

　なお，リストボックスで複数個を選択可能とする方法もあるようですが，チェックボックスの方が操作性がよいと思いますので割愛します．
←覚え書きに戻る　 ←←メニューに戻る