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

　７．制限時間付きテスト

　問題ページごとに解答時間の制限を設定できるようにする。単なる練習問題ではなくテストのページということになる。制限時間になったとき、自動的にページ全体の解答チェックを行う。
　必要な処理を次に示す。

  1. alert関数でテスト開始の確認をする。問題表示の前に行う。　(関数TimeInit)
  2. 経過時間または残り時間を表示する。　(関数TimeDisplay)
  3. 時間になったらページ全体の解答チェックを行う。　(関数TimeDisplay)
  4. 制限時間前に終了できるようにボタンを用意する。　(関数PageCheck 作成済み)


(1) 制限時間の設定
　制限時間用に次の3つの変数をグローバルとして宣言する。

// anschk6.js --==*==-- --==*==-- --==*==-- --==*==--
// グローバル変数
var gSeiseki = new Array(5);    // 成績記録用
var gTimeLimit;    // 制限時間用
var gTimeStart;    // 開始時間用
var gTid;          // タイマー用

　制限時間を設定する関数TimeInitを作成する。この関数はテスト（問題）のタイトルや制限時間を表示した後に、制限時間（分単位）を引数にして呼び出す。開始確認のダイアログ(alert関数)が表示されて「OK」ボタンをクリックすると問題を表示し、テストが開始する。

// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 制限時間の設定
// 　　引数：時間(分)
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function TimeInit(tt){
    gTimeLimit = tt * 60 * 1000;   // 分をミリ秒に変換
    alert("テストを開始します。");    // 開始確認
    dd = new Date();    // 開始時間取得
    gTimeStart = dd.getTime();    // ミリ秒に変換
    gTid = setInterval('TimeDisplay()', 1000);    // タイマーセット(1秒)
}

　関数の最後でタイマーをセットしている。1秒間隔で呼び出す関数はTimeDisplayである。


(2) 経過時間表示と終了
　経過時間を表示するためにフォームと1行テキストを配置する。

サンプル　テスト問題
制限時間（１５分）：
↑フォーム(name=TL) 　　　　　　　　　　　　　　　　　　1行テキスト(name=TLIMIT)↑
1行テキストの属性は次のとおりである。
type text value "00:00:00"
name TLIMIT readonly  
size 15     
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 経過時間表示と終了処理
// 　　引数：なし
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function TimeDisplay(){
    now = new Date();    // 現在時間取得
    dt = now.getTime() - gTimeStart;    // 経過時間計算
    now.setTime(dt + now.getTimezoneOffset() * 60 * 1000);    // ※1 経過時間設定
    dt1 = "0" + now.getHours();    // ※2
    dt1 = dt1.substring(dt1.length - 2, dt1.length);
    dt2 = "0" + now.getMinutes();
    dt2 = dt2.substring(dt2.length - 2, dt2.length);
    dt3 = "0" + now.getSeconds();
    dt3 = dt3.substring(dt3.length - 2, dt3.length);
    TL.TLIMIT.value = dt1 + ":" + dt2 + ":" + dt3;
    if(dt > gTimeLimit){    // ※3
        clearTimeout(gTid);    // タイマー解除
        alert("テスト終了です。[OK] をクリックして下さい。");
        PageCheck();    // ページ全体の解答チェック呼び出し
    }
}

※1　now.getTimezoneOffset()はグリニッジ標準時(GMT : Greenwich Mean Time)と地域ごとの時間の差を分で得ることができる。日本の場合はGMTより9時間先行している。60*1000と経過時間dtをかけ算してミリ秒にして、日付オブジェクトnowに再設定している。

※2　ここから6行で時分秒を2けたの数字に変換している。

※3　経過時間dtと制限時間gTimeLimitを比較して終了時間を判定している。終了時間になったときは、タイマーの解除、終了の確認、ページ全体の解答チェックを行う。

　終了時間以前に「ページ全体の解答チェック」ボタンをクリックして終了（正誤判定と得点集計）ができるが、タイマーが動作したままであるので関数PageCheckにタイマー解除の処理を追加する。また、経過時間表示のフォームが解答チェックの対象にならないように判定を追加する。

// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// ページ全体の解答チェック及び得点集計
// 　　引数：なし
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function PageCheck(){
    clearTimeout(gTid);    // タイマー解除
    dtokuten = 0;    // 得点用
    for(ff = 0; ff < document.forms.length; ++ff){    // このページ内のすべてのフォームを処理
        if(document.forms[ff].name != "ALLCHK" && document.forms[ff].name != "TL"){  // このフォーム以外を処理
            AnswerCheck(document.forms[ff]);     // 解答チェック
            dtokuten = dtokuten + parseInt(document.forms[ff].TOKUTEN.value);  // 得点計算
        }
    }
    ALLCHK.TOKUTEN.value = dtokuten;   // 得点表示
    ALLCHK.CHKB.disabled = true;       // 使用不可に設定
    SeisekiWrite(dtokuten);            // 成績(得点)記録
}

　テスト終了後、ブラウザの更新ボタンをクリックすると解答は再入力できないが、タイマーは動作を開始する。そこで、再入力の確認用の関数isReloadにもタイマー解除の処理を追加する。

// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック済み判定
//   <BODY onload="isReload();">
// 　　引数：なし
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function isReload(){
    for(ff = 0; ff < document.forms.length; ++ff){    // このページ内のすべてのフォームを処理
        formp = document.forms[ff];    // ff番目のフォーム
        if(typeof(formp.SEIKAI) != "undefined" && formp.SEIKAI.value != ""){  // 正解表示あり
            if(formp.KAITO.length > 1){    // 解答入力欄複数あり
                for(n = 0; n < formp.KAITO.length; ++n)
                    formp.KAITO[n].disabled = true;    // 入力不可に設定
            }else{    // 解答入力欄1つ
                formp.KAITO.disabled = true;    // 入力不可に設定
            }
            if(typeof(formp.CHKB) != "undefined")    // チェックボタンあり
                formp.CHKB.disabled = true;    // ボタン使用不可
        }else if(formp.name == "ALLCHK" && formp.TOKUTEN.value != ""){  // ページ全体チェックのフォーム
            formp.CHKB.disabled = true;    // ボタン使用不可
            clearTimeout(gTid);    // タイマー解除
        }
    }
}

　サンプルのテスト問題のHTMLリストを次に示す。
　関数TimeInitを呼び出すまでが表示され、開始の確認が表示される。OKをクリックすると問題が表示される。

<HTML>
<HEAD>
<TITLE>サンプル テスト問題</TITLE>
<SCRIPT language="JavaScript" src="anschk6.js"></SCRIPT></HEAD>
<BODY onload="isReload();"><SCRIPT>
<!--
    SeisekiRead();
//-->
</SCRIPT>
<P>サンプル　<B><FONT size="5">テスト問題</FONT></B></P>
<DIV align="right">
<FORM name="TL">制限時間（１５分）：
<INPUT size="15" type="text" readonly name="TLIMIT" value="00:00:00">
</FORM>
</DIV>
<SCRIPT language="JavaScript">
<!--
    TimeInit(15);    // 15分
//-->
</SCRIPT>
<P>１　次の計算をしなさい。<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>
&nbsp;<BR>
<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>
<P>２　次の計算をしなさい。<BR>
　(1) 123 + 654　=　（①　　　　　）</P>
<FORM>［解答欄］<BR>
① <INPUT size="8" type="text" name="KAITO"><BR>
&nbsp;<BR>
<INPUT size="8" type="text" readonly name="TOKUTEN">点 正解→<INPUT size="20" type="text" readonly name="SEIKAI"><INPUT type="hidden" name="KOTAE" value="777"></FORM>
<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> ）の<BR>
組合せだけでできている言語である。そこで、人間に理解しやすいように命令を英字や<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> ）が開発された。このプログラムを（①）に<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> ）という。その後、数式の書き方や処理手順をもっと<BR>
人間にわかりやすい形式で書く言語が開発された。代表的な言語として、入門者用<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> ）などがある。<BR>
&nbsp;<BR>
解答群<BR>
　　ア ０　　　イ １　　　ウ BASIC　　　エ COBOL　　　オ FORTRAN<BR>
　　カ アセンブラ　　　キ アセンブラ言語　　　ク 機械語<BR>
<INPUT size="8" type="text" name="TOKUTEN" readonly>点
 正解→<INPUT size="50" type="text" name="SEIKAI" readonly>
<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>
<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 size="8" type="text" name="TOKUTEN">点
 正解→<INPUT size="20" type="text" name="SEIKAI">
<INPUT type="hidden" name="KOTAE" value="4"><INPUT type="hidden" name="KOTAE" value="3">
<INPUT type="hidden" name="HAITEN" value="2">
</FORM>
<FORM name="ALLCHK">
<INPUT type="button" value="ページ全体の解答チェック" name="CHKB" onclick="PageCheck()">
 <INPUT size="8" type="text" name="TOKUTEN" readonly>点
 <INPUT type="button" onclick="Retry();" value="再チャレンジ">
</FORM>
</BODY>
</HTML>


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

 

 

inserted by FC2 system