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

 8.暗号化 U

 暗号・復号化の処理を自学自習システムに組み込む。これによって、問題ページのHTMLソースが見られても答えをわかりにくくすることができる。ここに組み込む暗号・復号化の処理は最終的に作成した関数Angou(キーを文字列で指定)とする。

 次に、自学自習システムに組み込む暗号・復号化の処理と変更のある関数のリストを示す。

// anschk7.js --==*==-- --==*==-- --==*==-- --==*==--
// グローバル変数
var gSeiseki = new Array(5);    // 成績記録用
var gTimeLimit;    // 制限時間用
var gTimeStart;    // 開始時間用
var gTid;          // タイマー用
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック関係
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 解答チェック
//   引数: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){    // 問題(解答入力欄)数分繰り返す
            xkotae = unescape(Angou(formp.KOTAE[n].value));    // 答え復号化
            if(formp.KAITO[n].value == xkotae){    // 正誤の判定
                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 + xkotae + " ";    // 正解データ作成 正解
            formp.KAITO[n].disabled = true;    // 入力不可に設定
        }
    }else{    // 解答入力欄1つ
        xkotae = unescape(Angou(formp.KOTAE.value));    // 答え復号化
        if(formp.KAITO.value == xkotae){    // 正誤の判定
            tensu = haiten;    // 得点加算
            formp.KAITO.style.backgroundColor = OkColor;    // 正解の色
        }else
            formp.KAITO.style.backgroundColor = NgColor;    // 不正解の色
        seikai_data = seikai_data + xkotae + " ";    // 正解データ作成 正解
        formp.KAITO.disabled = true;    // 入力不可に設定
    }
    if(typeof(formp.CHKB) != "undefined")    // チェックボタンあり
        formp.CHKB.disabled = true;    // ボタン使用不可
    // 得点・正解表示
    if(typeof(formp.TOKUTEN) != "undefined")    // 得点欄あり
        formp.TOKUTEN.value = tensu;    // 得点表示
    if(typeof(formp.SEIKAI) != "undefined")    // 正解表示欄あり
        formp.SEIKAI.value = seikai_data;    // 正解表示
}

// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
// 暗号・復号化
//   引数:str=対象文字列
//   返却値:暗号化または復号化された文字列
// --==*==-- --==*==-- --==*==-- --==*==-- --==*==--
function Angou(str){
    keyw = "JavaScript";    // キー
    pt = 0;    // キーのけた用
    str2 = "";
    for(nn = 0; nn < str.length; ++nn){
        asc = str.charAt(nn).charCodeAt();    // 文字コード
        keyw2 = keyw.charAt(pt).charCodeAt() & 0x0F;    // pt番目の文字の下位4ビット
        ++pt;
        if(pt >= keyw.length)    // キー終了
            pt = 0;
        asc = asc ^ keyw2;    // 排他的論理和
        if(asc == 0x7f)    // 0x7fはダメ
            asc = asc ^ keyw2;    // 排他的論理和(元に戻す)
        str2 = str2 + String.fromCharCode(asc);
    }
    return str2;
}

 暗号・復号化のキーは"JavaScript"としている。必要に応じて変更する。
 解答チェックを行う前に、隠しフィールドKOTAEのデータを復号し、変数xkotaeに格納している。入力した答えをチェックするときはこの変数xkotaeと比較する。

 次にサンプル問題のHTMLリストを示す。隠しフィールドKOTAEに設定した正解のデータを暗号に変更している。

<HTML>
<HEAD>
<TITLE>サンプル問題</TITLE>
<SCRIPT language="JavaScript" src="anschk7.js"></SCRIPT></HEAD>
<BODY onload="isReload();"><SCRIPT>
<!--
    SeisekiRead();
//-->
</SCRIPT>
<P>1 次の計算をしなさい。<BR>
 (1) 123 + 654 = (@     )<BR>
 (2) 123 * 10  = (A     )</P>
<FORM>[解答欄]<BR>
@ <INPUT size="8" type="text" name="KAITO">
   A <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="=61">
<INPUT type="hidden" name="KOTAE" value=";351">
</FORM>
<P>2 次の計算をしなさい。<BR>
 (1) 123 + 654 = (@     )</P>
<FORM>[解答欄]<BR>
@ <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="=61">
</FORM>
<FORM>3 次の説明文の空欄に入れるべき適当な字句を解答群から選んで記号で答えよ。<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> )と呼ばれ、(A<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> )と(B<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>
数字などの記号で書けるようにした(C<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>変換するプログラムを(D<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>
の(E<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> )、技術計算用の(F<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> )、事務処理用の(G<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>
  ア 0   イ 1   ウ BASIC   エ COBOL   オ FORTRAN<BR>
  カ アセンブラ   キ アセンブラ言語   ク 機械語<BR>
<INPUT type="button" name="CHKB" value="解答チェック" onclick="AnswerCheck(this.form);">
 <INPUT size="8" type="text" name="TOKUTEN" readonly>点
 正解→<INPUT size="50" type="text" name="SEIKAI" readonly>
<INPUT type="hidden" name="KOTAE" value="/t51BE">
<INPUT type="hidden" name="KOTAE" value="/t51B1">
<INPUT type="hidden" name="KOTAE" value="/t51B7">
<INPUT type="hidden" name="KOTAE" value="/t51BG">
<INPUT type="hidden" name="KOTAE" value="/t51BA">
<INPUT type="hidden" name="KOTAE" value="/t51B5">
<INPUT type="hidden" name="KOTAE" value="/t51BB">
<INPUT type="hidden" name="KOTAE" value="/t51B;">
<INPUT type="hidden" name="HAITEN" value="5">
</FORM>
<FORM>4 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>
5 初心者向けといわれるインタプリタ言語は何か。<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" name="TOKUTEN">点
 正解→<INPUT size="20" type="text" name="SEIKAI">
<INPUT type="hidden" name="KOTAE" value=">">
<INPUT type="hidden" name="KOTAE" value="9">
<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>

 答えを暗号化するには、前のページで作成したHTMLを利用した。


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

 

 

inserted by FC2 system