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

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

　一応できあがったスクリプトanschk1.jsであるが、出題が1問だけの場合、エラーが発生する。解答入力欄(KAITO)が1つの場合、KAITOオブジェクトは配列とはならないために起こるエラーである。

(4) 出題が1問の場合の対応
　解答入力欄(KAITO)が複数(2つ以上)ある場合、オブジェクトのKAITOはformp.KAITO[n]として参照できるが、解答入力欄が1つの場合、オブジェクトKAITOはformp.KAITO[0]として参照できない。エラーになる。formp.KAITOとしなければならない。
　対策として、オブジェクトKAITOが複数あるかどうかを調べ、処理を分けることにする。複数あるかどうかは、lengthプロパティで調べることができる。
　次にHTMLリストとスクリプトを示す。

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<SCRIPT language="JavaScript" src="anschk2.js"></SCRIPT></HEAD>
<BODY>
<P><B>記述問題</B><BR>
２　次の計算をしなさい。<BR>
　(1) 123 + 654　=　（①　　　　　）<BR>
<FORM>［解答欄］<BR>
      ① <INPUT size="8" type="text" name="KAITO"><BR>    // 解答入力欄 1つだけ
 <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">    // 正解
</FORM>
</BODY>
</HTML>
// anschk2.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);
    // 解答チェック
    if(formp.KAITO.length > 1){    // 解答入力欄複数あり
        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 + " ";  // 正解データ作成 正解
        }
    }else{    // 解答入力欄1つ
        if(formp.KAITO.value == formp.KOTAE.value){    // 正誤の判定
            tensu = haiten;                                        // 得点加算
            formp.KAITO.style.backgroundColor = OkColor;    // 正解の色
        
            }elseformp.KAITO.style.backgroundColor = NgColor;    // 不正解の色
        seikai_data = seikai_data + formp.KOTAE.value + " ";    // 正解データ作成 正解
    }
    // 得点・正解表示
    if(typeof(formp.TOKUTEN) != "undefined")    // 得点欄あり
        formp.TOKUTEN.value = tensu;    // 得点表示
    if(typeof(formp.SEIKAI) != "undefined")    // 正解表示欄あり
        formp.SEIKAI.value = seikai_data;    // 正解表示
}


　択一問題の場合はさらに、ラジオボタンのアクションも配列でない形(KAITO.value)にする必要がある。

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<SCRIPT language="JavaScript" src="anschk2.js"></SCRIPT></HEAD>
<BODY>
<FORM>問題　Webブラウザ上で動作するスクリプト言語は何か。<BR>
　　<INPUT type="radio" name="a1" onclick='KAITO.value="1";'> FORTRAN
　　<INPUT type="radio" name="a1" onclick='KAITO.value="2";'> COBOL
　　<INPUT type="radio" name="a1" onclick='KAITO.value="3";'> BASIC
　　<INPUT type="radio" name="a1" onclick='KAITO.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>


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

 

 

inserted by FC2 system