JavaScript - 解答チェックのスクリプト

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

　３．解答チェックのスクリプト

(1) スクリプト作成
　記述問題と選択問題はどちらもユーザが答えた解答が入力部品KAITOに格納されている。したがって、入力部品KAITOと正解データが格納された隠しフィールドKOTAEをそれぞれ配置順に比較して正誤を判定する。複数の同じ名前の入力部品は配列として扱うことができ、配置順にxx[0], xx[1], xx[2], ・・・で参照できる(xxは名前)。

記述問題
２　次の計算をしなさい。
　(1) 123 + 654　=　（①　　　　　）
　(2) 123 * 10　 =　（②　　　　　）

［解答欄］　　　　　　↓KAITO
① 　　　②
　　　↑KAITO　　↓TOKUTEN　　↓SEIKAI
点正解→
隠しフィールド　KOTAE, KOTAE, HAITEN

　①の解答入力欄はKAITO[0].value、②の解答入力欄はKAITO[1].valueで参照できる。同じく正解データはKOTAE[0].value、KOTAE[1].valueで参照できる。
　解答入力欄の個数はKAITO.lengthで知ることができるのでfor文の繰り返しが利用できる。
　正解であればHAITEN.valueずつ加算していく。スクリプトは次のようになる。

// サンプル（このままでは動かない）
tensu = 0;
seikai_data = "";
for(n = 0; n < KAITO.length; ++n){    // 問題（解答入力欄）数分繰り返す
    if(KAITO[n].value == KOTAE[n].value)   // 正誤の判定
        tensu = tensu + HAITEN.value;      // 得点加算
        seikai_data = seikai_data + KOTAE.value + ", ";    // 正解データ作成
}
TOKUTEN.value = tensu;    // 得点表示
SEIKAI.value = seikai_data;    // 正解表示

　選択問題用のスクリプトも入力部品の名前を同じにしているので同じである。また、1つのフォーム内に記述問題と選択問題が混在してもかまわない。

　上記、記述問題のHTMLリストを次に示す。

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<SCRIPT language="JavaScript" src="anschk1.js"></SCRIPT></HEAD>
<BODY>
<P><B>記述問題</B><BR>
２　次の計算をしなさい。<BR>
　(1) 123 + 654　=　（①　　　　　）<BR>
　(2) 123 * 10　 =　（②　　　　　）</P>
<FORM>［解答欄］<BR>
      ① <INPUT size="8" type="text" name="KAITO">    // 解答入力欄
　　　② <INPUT size="8" type="text" name="KAITO"><BR>    // 解答入力欄
 <BR>
 <INPUT type="button" name="CHKB" value="解答チェック"
  onclick="AnswerCheck(this.form);">    // ボタン
 <INPUT size="8" type="text" readonly name="TOKUTEN">点    // 得点欄
 正解→<INPUT size="20" type="text" readonly name="SEIKAI">    // 正解表示欄
 <INPUT type="hidden" name="KOTAE" value="777">    // 正解
 <INPUT type="hidden" name="KOTAE" value="1230">    // 正解
</FORM>
</BODY>
</HTML>

　配点(HAITEN)は省略している。省略したときは1点とする。
　得点欄(TOKUTEN)と正解表示欄(SEIKAI)は入力できないように readonly 属性を設定している。

　解答をチェックするプログラムは関数AnswerCheckとして、外部ファイル(anschk1.js)として作成する。
　関数AnswerCheckは処理対象のフォーム(this.form)を引数として受け取る。正誤判定を行い、得点を得点欄に、正解を正解表示欄に表示する。また、正解の場合は解答入力欄(KAITO)の背景を #FFB0B0 色（薄い赤色）に、不正解の場合は #B0B0FF 色（薄い青色）に設定する。

　関数AnswerCheckのスクリプト（プログラム）を次に示す。外部ファイルanschk1.jsとして作成する。

// anschk1.js --==*==-- --==*==-- --==*==-- --==*==--

// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック関係
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック
// 　　引数：formp = フォーム
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function AnswerCheck(formp){
    // 初期化
    OkColor = "#FFB0B0";    // 正解の色
    NgColor = "#B0B0FF";    // 不正解の色
    tensu = 0;    // 点数用
    seikai_data = "";    // 正解データ作成用
    if(typeof(formp.HAITEN) == "undefined")    // 配点なし=1点
        haiten = 1;
    else
        haiten = parseInt(formp.HAITEN.value);
    // 解答チェック
    for(n = 0; n < formp.KAITO.length; ++n){    // 問題（解答入力欄）数分繰り返す
        if(formp.KAITO[n].value == formp.KOTAE[n].value){  // 正誤の判定
            tensu = tensu + haiten;                          // 得点加算
            formp.KAITO[n].style.backgroundColor = OkColor;  // 正解の色
        }else
            formp.KAITO[n].style.backgroundColor = NgColor;  // 不正解の色
        seikai_data = seikai_data + "(" + (n+1) + ") ";          // 正解データ作成 番号
        seikai_data = seikai_data + formp.KOTAE[n].value + " ";  // 正解データ作成 正解
    }
    // 得点・正解表示
    if(typeof(formp.TOKUTEN) != "undefined")  // 得点欄あり
        formp.TOKUTEN.value = tensu;              // 得点表示
    if(typeof(formp.SEIKAI) != "undefined")   // 正解表示欄あり
        formp.SEIKAI.value = seikai_data;         // 正解表示
}

　配点(HAITEN)、得点欄(TOKUTEN)と正解表示欄(SEIKAI)は、省略できるようにオブジェクトの存在を確認してから利用している。存在の確認には typeof関数を利用している。存在しなければ"undefined"という文字列が返却される。

ちょっと改良
　正解表示欄の大きさは実際に表示させて、size属性を調整する。
　　　　正解→<INPUT size="20" type="text" readonly name="SEIKAI"> // 正解表示欄
　大きさを自動的に調整させる場合は、次のようにプログラムの中でsize属性を設定する。
　　　　formp.SEIKAI.size = seikai_data.length * 1.5;
　　　　　　　　　　　　　　　　　↑正解データの文字数　　↑倍率（適宜変更）

(2) 選択問題の動作確認
　同じスクリプトで選択問題が処理できるかを確認する。

選択問題の例

問題　次の説明文の空欄に入れるべき適当な字句を解答群から選んで記号で答えよ。
　コンピュータが直接理解できる言語は（① ）と呼ばれ、（② ）と（③ ）の
組合せだけでできている言語である。そこで、人間に理解しやすいように命令を英字や
数字などの記号で書けるようにした（④ ）が開発された。このプログラムを（①）に
変換するプログラムを（⑤ ）という。その後、数式の書き方や処理手順をもっと
人間にわかりやすい形式で書く言語が開発された。代表的な言語として、入門者用
の（⑥ ）、技術計算用の（⑦ ）、事務処理用の（⑧ ）などがある。

解答群
　　ア０　　　イ１　　　ウ BASIC　　　エ COBOL　　　オ FORTRAN
　　カアセンブラ　　　キアセンブラ言語　　　ク機械語
点正解→

　上記、記述問題のHTMLリストを次に示す。

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<SCRIPT language="JavaScript" src="anschk1.js"></SCRIPT></HEAD>
<BODY>
<FORM>問題　次の説明文の空欄に入れるべき適当な字句を解答群から選んで記号で答えよ。<BR>
　コンピュータが直接理解できる言語は（①<SELECT name="KAITO">
  <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> ）と呼ばれ、（②<SELECT name="KAITO">
  <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> ）と（③<SELECT name="KAITO">
  <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> ）の組合せだけでできている言語である。そこで、人間に理解しやすいように命令を英字や
数字などの記号で書けるようにした（④<SELECT name="KAITO">
  <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> ）が開発された。このプログラムを（①）に
変換するプログラムを（⑤<SELECT name="KAITO">
  <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> ）という。その後、数式の書き方や処理手順をもっと
人間にわかりやすい形式で書く言語が開発された。代表的な言語として、入門者用
の（⑥<SELECT name="KAITO">
  <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> ）、技術計算用の（⑦<SELECT name="KAITO">
  <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> ）、事務処理用の（⑧<SELECT name="KAITO">
  <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> ）などがある。<BR>
 <BR>
解答群<BR>
　　ア ０　　　イ １　　　ウ BASIC　　　エ COBOL　　　オ FORTRAN<BR>
　　カ アセンブラ　　　キ アセンブラ言語　　　ク 機械語<BR>
<INPUT type="button" name="CHKB" value="解答チェック" onclick="AnswerCheck(this.form);">
 <INPUT size="8" type="text" readonly name="TOKUTEN">点
 正解→<INPUT size="50" type="text" readonly name="SEIKAI">
<INPUT type="hidden" name="KOTAE" value="ク">
<INPUT type="hidden" name="KOTAE" value="ア">
<INPUT type="hidden" name="KOTAE" value="イ">
<INPUT type="hidden" name="KOTAE" value="キ">
<INPUT type="hidden" name="KOTAE" value="カ">
<INPUT type="hidden" name="KOTAE" value="ウ">
<INPUT type="hidden" name="KOTAE" value="オ">
<INPUT type="hidden" name="KOTAE" value="エ">
<INPUT type="hidden" name="HAITEN" value="5">
</FORM>
</BODY>
</HTML>

　スクリプトは同じ anschk1.js を使って動作を確認する。

(3) 択一問題の動作確認
　択一問題では、下の例のように選択肢にラジオボタンを配置し、選んだ（チェックを入れた）選択肢の番号（配置順）が解答入力欄に表示されるようにする。解答入力欄には直接入力できないようにする。

択一問題の例

問題　Webブラウザ上で動作するスクリプト言語は何か。
　　 FORTRAN　　 COBOL　　 BASIC　　 JavaScript　　

問題　初心者向けといわれるインタプリタ言語は何か。
　　 FORTRAN　　 COBOL　　 BASIC　　 JavaScript　　

点正解→

　上記、記述問題のHTMLリストを次に示す。

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<SCRIPT language="JavaScript" src="anschk1.js"></SCRIPT></HEAD>
<BODY>
<FORM>問題　Webブラウザ上で動作するスクリプト言語は何か。<BR>
　　<INPUT type="radio" name="a1" onclick='KAITO[0].value="1";'> FORTRAN
　　<INPUT type="radio" name="a1" onclick='KAITO[0].value="2";'> COBOL
　　<INPUT type="radio" name="a1" onclick='KAITO[0].value="3";'> BASIC
　　<INPUT type="radio" name="a1" onclick='KAITO[0].value="4";'> JavaScript
　　<INPUT size="3" type="text" name="KAITO" readonly><BR>
 <BR>
問題　初心者向けといわれるインタプリタ言語は何か。<BR>
　　<INPUT type="radio" name="a2" onclick='KAITO[1].value="1";'> FORTRAN
　　<INPUT type="radio" name="a2" onclick='KAITO[1].value="2";'> COBOL
　　<INPUT type="radio" name="a2" onclick='KAITO[1].value="3";'> BASIC
　　<INPUT type="radio" name="a2" onclick='KAITO[1].value="4";'> JavaScript
　　<INPUT size="3" type="text" name="KAITO" readonly><BR>
 <BR>
<INPUT type="button" name="CHKB" value="解答チェック" onclick="AnswerCheck(this.form);">
 <INPUT size="8" type="text" readonly name="TOKUTEN">点
 正解→<INPUT size="20" type="text" readonly name="SEIKAI">
<INPUT type="hidden" name="KOTAE" value="4">
<INPUT type="hidden" name="KOTAE" value="3">
<INPUT type="hidden" name="HAITEN" value="2">
</FORM>
</BODY>
</HTML>

　スクリプトは同じ anschk1.js を使って動作を確認する。

　ラジオボタンはグループごとに名前(name)を変える。上の例では1問目は"a1"、2問目は"a2"としている。

　ラジオボタンには解答入力欄に番号を入力するため、onclickイベントのアクションとして次の式を設定している。
　　　　KAITO[n].value = "1";

　解答入力欄は直接データが入力できないように readonly 属性を設定している。

　択一問題の場合は、他の問題と違ってラジオボタンを利用しているので選択肢のグループごとに同じ名前にする必要がある。また、問題の順番にあわせてアクションのスクリプトで使用するKAITOオブジェクトの番号を変更する必要があり、利用にあたっては少し不便がある。
　しかし、同じスクリプトで記述問題、選択問題と択一問題の3種類を処理することができることが確認できた。


JavaScript プログラミング	Copyright © 2003 Hiroshi Masuda