JavaScript - 成績の記録

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

　６．成績の記録(Cookie)

　練習問題のページごとに成績（得点）の記録を残せるようにする。Javaスクリプトにはディスクにアクセス（読み書き）する命令がないので、成績の記録にはクッキーを使用する。クッキーに対する読み書きについては「11．クッキー」で作成した関数CookieReadとCookieWriteを使用する。

クッキー情報の読み書き関数　「11．クッキー」参照

クッキーから読み込み
　　function CookieRead(kword) 　引数： kword = キーワード
　返却値：データ

クッキーへの書き込み
　　function CookieWrite(kword, kdata, kday) 　引数： kword = キーワード
　　　　　　kdata = データ
　　　　　　kday = 保存期間(日数)
　返却値：なし

　成績の記録に関する仕様は次のとおりとする。

成績は過去5回分記録できるようにする。
成績の記録は「ページ全体の解答チェック」ボタンがクリックされたときに行う。
ページが表示されたときに過去の成績が表示できるようにする。

　クッキーに情報を書き込むときには識別のためのキーワードが必要になる。ここでは、ページのタイトル（<TITLE>～</TITLE>で設定する）をキーワードとして利用することにする。したがって、練習問題のページを作成するときには必ずタイトルを設定する必要がある。ページのタイトルは document.title で参照することができる。

// anschk5.js --==*==-- --==*==-- --==*==-- --==*==--
// グローバル変数
var gSeiseki = new Array(5);    // 成績記録用
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック関係
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック
// 　　引数：formp = フォーム
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function AnswerCheck(formp){
    《変更がないので省略》
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック済み判定
//   <BODY onload="isReload();">
// 　　引数：なし
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function isReload(){
    《変更がないので省略》
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 再チャレンジ
// 　　引数：なし
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function Retry(){
    《変更がないので省略》
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// ページ全体の解答チェック及び得点集計
// 　　引数：formp=フォーム
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function PageCheck(formp){
    dtokuten = 0;    // 得点用
    for(ff = 0; ff < document.forms.length; ++ff){  // このページ内のすべてのフォームを処理
        if(document.forms[ff].name != "ALLCHK"){      // このフォーム以外を処理
            AnswerCheck(document.forms[ff]);            // 解答チェック
            dtokuten = dtokuten + parseInt(document.forms[ff].TOKUTEN.value);  // 得点計算
        }
    }
    ALLCHK.TOKUTEN.value = dtokuten;    //得点表示
    ALLCHK.CHKB.disabled = true;        // 使用不可に設定
    SeisekiWrite(dtokuten);             // 成績(得点)記録
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 成績データ読み込み(Cookie)
// 　成績データを読み込んで表形式で表示する。キーワードはページのタイトル。
// 　　引数：なし
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function SeisekiRead(){
    //成績読み込み → gSeiseki[]へ格納
    seiseki = CookieRead(document.title);    // クッキー情報読み込み
    if(seiseki == ""){    //成績記録なし 
        gSeiseki = "-,-,-,-,-".split(",");  // ※1
    }else{                // 成績記録あり
        gSeiseki = seiseki.split(",");      // ※1
    }
    // HTML出力(表形式) ※3
    html = '<TABLE border="1" cellspacing="1" style="font-size : 9pt;"><TBODY>';
    html = html + '<TR><TD rowspan="2" bgcolor="#cccccc">成績の記録</TD>';
    html = html + '<TH bgcolor="#cccccc">&nbsp; 前　回 &nbsp;</TH>';
    html = html + '<TH bgcolor="#cccccc">&nbsp; 前々回 &nbsp;</TH>';
    html = html + '<TH bgcolor="#cccccc">&nbsp; 3回前 &nbsp;</TH>';
    html = html + '<TH bgcolor="#cccccc">&nbsp; 4回前 &nbsp;</TH>';
    html = html + '<TH bgcolor="#cccccc">&nbsp; 5回前 &nbsp;</TH></TR>';
    html = html + '<TR><TD align="center">' + gSeiseki[0] + '</TD>';
    html = html + '<TD align="center">' + gSeiseki[1] + '</TD>';
    html = html + '<TD align="center">' + gSeiseki[2] + '</TD>';
    html = html + '<TD align="center">' + gSeiseki[3] + '</TD>';
    html = html + '<TD align="center">' + gSeiseki[4] + '</TD></TR>';
    html = html + '</TBODY></TABLE>';
    document.write(html);
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 成績データ書き込み(Cookie)
// 　　引数：今回の成績（得点）
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function SeisekiWrite(seiseki){
    for(n = 4; n > 0; --n)        // データをシフト
        gSeiseki[n] = gSeiseki[n-1];
    gSeiseki[0] = seiseki;        // データを追加
    sdat = gSeiseki.join(",");    // ※2 データ連結(区切り",")
    CookieWrite(document.title, sdat, 150);    // クッキー書き込み(150日間)
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキー関係
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーへの書き込み
// 　　引数：kword=キーワード　　kdata=データ　　kday=保存期間(日数)
// 　　返却値：なし
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieWrite(kword, kdata, kday)
{
    if(!navigator.cookieEnabled){
        alert("クッキーへの書き込みができません");
        return;
    }
    sday = new Date();
    sday.setTime(sday.getTime() + (kday * 1000 * 60 * 60 * 24));
    s2day = sday.toGMTString();
    document.cookie = kword + "=" + escape(kdata) + ";expires=" + s2day;
}
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// クッキーから読み込み
// 　　引数：kword=キーワード
// 　　返却値：データ
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function CookieRead(kword)
{
    if(kword == "")
        return "";
    kword = kword + "=";
    kdata = "";
    scookie = document.cookie + ";";
    start = scookie.indexOf(kword);
    if (start != -1){
        end = scookie.indexOf(";", start);
        kdata = unescape(scookie.substring(start + kword.length, end));
    }
    return kdata;
}

　スクリプト後半のクッキー情報の読み書きCookieWriteとCookiRead関数は「11．クッキー」を参照のこと。クッキー情報の保存期間は150日、約3か月としている。
　ページ全体をチェックしているPageCheck関数に成績書き込みSeisekiWrite関数の呼び出しを追加している。
　　　　SeisekiWrite(dtokuten);　　　　// 成績(得点)記録

※1 splitメソッド
　　gSeiseki = "-,-,-,-,-".split(",");
　　gSeiseki = seiseki.split(",");
　gSeisekiは配列である。スクリプトの先頭でグローバル変数として用意している。→ver gSeiseki = new Array(5);
　変数seisekiにはクッキーから読み込んだ成績データがカンマ区切りで格納されている。
　　　　得点，得点，得点，得点，得点　　という形式　→　例えば　seiseki = "55,66,77,88,99" とする。
　splitメソッドは文字列を区切り文字で分割して配列に格納する。

gSeiseki[0] gSeiseki[1] gSeiseki[2] gSeiseki[3] gSeiseki[4]

1つ目の処理結果 - - - - -

2つ目の処理結果 55 66 77 88 99

※2 joinメソッド
　　sdat = gSeiseki.join(",");
　splitメソッドと逆で配列のデータを区切り文字で区切って連結する。

gSeiseki[0] gSeiseki[1] gSeiseki[2] gSeiseki[3] gSeiseki[4] joinの結果

例1 - - - - - -,-,-,-,-

例2 55 66 77 88 99 55,66,77,88,99

※3 HTML出力
　SeisekiRead関数で成績を読み込んだ後に表示される表は次のとおりである。

成績の記録前　回前々回 3回前 4回前 5回前

47 32 - - -

成績の記録	前　回	前々回	3回前	4回前	5回前
47	32	-	-	-

　SeisekiRead関数はページに成績の記録を表示したい部分にスクリプト(SeisekiRead();)を書くだけである。
　ページの先頭に成績の記録を表示する場合のHTMLを次に示す。

<HTML>
<HEAD>
<TITLE>サンプル問題</TITLE>
<SCRIPT language="JavaScript" src="anschk5.js"></SCRIPT></HEAD>
<BODY onload="isReload();">
<SCRIPT>
<!--
    SeisekiRead();
//-->
</SCRIPT>
<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>
　　《以下、省略》


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

クッキーから読み込み　　function CookieRead(kword)	引数： kword = キーワード　返却値：データ
クッキーへの書き込み　　function CookieWrite(kword, kdata, kday)	引数： kword = キーワード　　　　　　kdata = データ　　　　　　kday = 保存期間(日数) 　返却値：なし

	gSeiseki[0]	gSeiseki[1]	gSeiseki[2]	gSeiseki[3]	gSeiseki[4]
1つ目の処理結果	-	-	-	-	-
2つ目の処理結果	55	66	77	88	99