JavaScript プログラミング
 自学自習システム作成 前へ 目次へ 次へ 

 2.問題形式

(1) 記述問題の形式
 記述問題の形式では下のイメージのように、解答の入力部分にそれぞれ1行テキストという入力部品を配置する。

問題形式のイメージ(正誤判定、採点はされない)
記述問題

2 次の8けたの2進数を10進数と16進数に変換せよ。
 (1) 11110111(2) = (@     )(10)   (A    )(16)
 (2) 00100101(2) = (B     )(10)   (C    )(16)

[解答欄] (16進数を表すA〜Fは大文字の半角文字を使うこと。空白文字は入れないこと。)
@ (10)   A (16) (←解答入力欄)
B (10)   C (16) (←解答入力欄)
点 正解→
        (↑得点欄)    (↑正解表示欄)
別の形式
2 次の8けたの2進数を10進数と16進数に変換せよ。
 (1) 11110111(2) = (@ )(10)   (A )(16)
 (2) 00100101(2) = (B )(10)   (C )(16)
                 (↑解答入力欄)     (↑解答入力欄)

点 正解→
        (↑得点欄)    (↑正解表示欄)
 
枠内がフォーム<FORM>〜</FORM>である。

 次に用意する入力部品を示す。

入力部品 type name size value その他
解答入力欄 text KAITO 任意
得点欄 text TOKUTEN 任意 readonly
正解表示欄 text SEIKAI 任意 readonly
「解答チェック」ボタン button CHKB
正解 hidden KOTAE 正解データ
配点 hidden HAITEN 点数
 type="hidden" は「隠しフィールド」、readonlyは入力できなくする指定である。

 解答入力欄(1行テキスト)は問題の個数だけ用意する。複数の解答入力欄は配置した順にKAITO[0], KAITO[1],・・・のように配列として参照できる。また、解答入力欄と同じ個数だけ正解も用意する。
 「解答チェック」ボタンをクリックすると解答入力欄と正解を比較して正誤を判定する。
 正解、不正解は解答入力欄の色で示すことにする。例えば、正解は赤色、不正解は青色などとする。
 配点はひとつのフォーム(<FORM>〜</FORM>)内で1つだけとする。


(2) 択一問題の形式
 択一問題の形式では下のイメージのように、選択肢の直前にそれぞれラジオボタンという入力部品を配置する。

問題形式のイメージ(正誤判定、採点はされない)
択一問題
問題 Webブラウザ上で動作するスクリプト言語は何か。      (↓解答入力欄)
   FORTRAN   COBOL   BASIC   JavaScript  
    (↑選択肢)
点 正解→
 
枠内がフォーム<FORM>〜</FORM>である。

 次に用意する入力部品を示す。

入力部品 type name size value その他
選択肢 radio グループ内で同じ 順番の数値
解答入力欄 text KAITO 任意
得点欄 text TOKUTEN 任意 readonly
正解表示欄 text SEIKAI 任意 readonly
「解答チェック」ボタン button CHKB
正解 hidden KOTAE 正解データ
配点 hidden HAITEN 点数

 選択肢(ラジオボタン)で選択した値(value)が解答入力欄に入力されるようにする。このようにすることで、記述式問題と同じように解答入力欄と正解を比較する形とすることができる。
    onclick = 'KAITO[0].value = namae.value;'

 ラジオボタンは同じグループの中から1つだけにチェックを入れることができるようになっている入力部品である。
 グループ分けは、ラジオボタンに付ける名前(name属性)が同じものが同一グループとなる。
 次のように上下3つずつに同じ名前を付けてラジオボタンを配置した場合、上の3つの中から1つ、下の3つの中から1つの合計2つを選ぶことができる。

111  222  333 ← name="p1"
777  888  999 ← name="p2"

 この部分をHTMLリストで表すと次のようになる。

<FORM>
<INPUT type="radio" name="p1">111
 <INPUT type="radio" name="p1">222
 <INPUT type="radio" name="p1">333
<INPUT type="radio" name="p2">777
 <INPUT type="radio" name="p2">888
 <INPUT type="radio" name="p2">999
</FORM>


(3) 選択問題の形式
 選択問題の形式では下のイメージのように、選択肢の入力部分にそれぞれオプションメニューという入力部品を配置する。

問題形式のイメージ(正誤判定、採点はされない)
選択問題
問題 次の説明文の空欄に入れるべき適当な字句を解答群から選んで記号で答えよ。
 コンピュータが直接理解できる言語は(@ )と呼ばれ、(A )と(B )の
組合せだけでできている言語である。そこで、人間に理解しやすいように命令を英字や
数字などの記号で書けるようにした(C )が開発された。このプログラムを(@)に
変換するプログラムを(D )という。その後、数式の書き方や処理手順をもっと
人間にわかりやすい形式で書く言語が開発された。代表的な言語として、入門者用
の(E )、技術計算用の(F )、事務処理用の(G )などがある。
   (↑解答入力欄)
解答群
  ア 0   イ 1   ウ BASIC   エ COBOL   オ FORTRAN
  カ アセンブラ   キ アセンブラ言語   ク 機械語
点 正解→
 
枠内がフォーム<FORM>〜</FORM>である。

 オプションメニューは解答群で用意されている選択肢以外のものが入力できないようになっている入力部品である。
 上記のイメージの場合、選択肢はア〜クであり、1つのオプションメニューの部分「(@ )」をHTMLリストで表すと次のようになる。

<FORM>
 (@<SELECT name="kai">
  <OPTION value="0" selected> </OPTION>
  <OPTION value="ア">ア</OPTION>
  <OPTION value="イ">イ</OPTION>
  <OPTION value="ウ">ウ</OPTION>
  <OPTION value="エ">エ</OPTION>
  <OPTION value="オ">オ</OPTION>
  <OPTION value="カ">カ</OPTION>
  <OPTION value="キ">キ</OPTION>
  <OPTION value="ク">ク</OPTION>
 </SELECT> )
</FORM>

 次に用意する入力部品を示す。

入力部品 type name size value その他
選択肢 radio グループ内で同じ 順番の数値
解答入力欄(SELECT) KAITO 任意
得点欄 text TOKUTEN 任意 readonly
正解表示欄 text SEIKAI 任意 readonly
「解答チェック」ボタン button CHKB
正解 hidden KOTAE 正解データ
配点 hidden HAITEN 点数


 まとめ
 各入力部品の名前を統一しておくことですべての形式の問題にひとつのプログラムで正誤の判定などを
行えるようにする。
 共通の名前の入力部品
解答入力欄 KAITO 得点欄 TOKUTEN
正解 KOTAE 配点 HAITEN
正解表示欄 SEIKAI 「解答チェック」ボタン CHKB


前へ 目次へ 次へ 
 JavaScript プログラミング Copyright © 2003 Hiroshi Masuda 

 

 

inserted by FC2 system