JavaScriptを用いたインタラクティブな数学教材の開発

　WWWサーバー上に数学の教材を置き，それらをWWWブラウザーで利用させるとき，一方的に知識を押し付けるのでなく，WWWブラウザー上で入力するパラメーターを変更させることにより，コンピューターに異なる結果を表示させ，学習者の理解を深めることを目的とした教材の開発を試みた。

1 ねらい（CGI・JavaScript・Java）

　普通Webサーバーは静的な情報(テキストやイメージ，音声)をブラウザーに送信する。ユーザーのアクションにより動的に変化するドキュメントを作るためにはCGI・JavaScript・Javaなどいくつかの手法がある。

　CGIはPerl，sh，Cなどをプログラムをサーバー内に置いて実行されるので，サーバーやUNIXの知識が必要であるため，利用するには作成者に多くの負担がかかる。セキュリティーホールになり得ることから多くのサーバーでCGIの利用を禁止されているなど問題点も多い。

　JavaScriptはHTMLドキュメントの中にテキストファイルとして埋め込まれ，解釈実行するのはクライアント側のブラウザーである。このためネットワークにつながなくても実行でき，とりあえずブラウザーとエディターだけで開発に取り掛かるこどが可能であり。特定なCPUやOSに依存しないことなどの特長がある。

　JavaもまたCPUやOSに依存しないインタラクティブなホームページを作成することが出来る言語であるが，特別な開発環境が必要なこと，本格的なオブジェクト指向言語であることから，簡単に自分のホームページに取り込むには難しい言語である。

　以上ように，JavaScriptは普通のエンドユーザーがインタラクティブなホームページを作る上で最も適したプログラム言語と思われる。

2　指導計画（２分法）

(1) 目的

　2分法のアルゴリズムを理解させるためのホームページ

(2) 特長

　初期値を変えることにより，解へどのように近づいていくかをみることができる。一定の方程式だけでなく，JavaScriptで実行できる任意の関数を使った方程式を解くことができる。これはJavaScriptがインタープリターであること，数式を評価するeval()という関数を備えていることにより実現できた。またHTMLのフレーム機能を生かし，パラメーターを入力するフレームと結果を表示するフレームとを分け，利用者が結果を見ながらパラメーターを入力しやすくした。

(3) 本時の学習内容

　f(x)=x*x-3,A=0,B=2として３の平方根を求めているところ。（方程式x ²-3=0(0 <x<2) を解く）
f(x)の３平方根

f(x)=sin(x)-0.5 A=0 B=1実行している。（方程式sin(x)=0.5(0<x<1)を解く）

(4)リスト

1)<FRAMESET>タグを用いて，画面を左右に２分割した。利用者は最初にこのページにアクセスする。

<!-- 2bunfr.htm -->
<HTML>
<HEAD>
   <TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="40%,*">
   <FRAME SRC="2bun.htm" NAME="jWin" SCROLLING="y">
   <FRAME SRC="dummy.htm" NAME="Result">
</FRAMESET>
</HTML>

2)２分法を実行するJavaScriptのプログラムを埋め込んだ2bun.htmのリスト

<!-- 2bun.htm -->
<HTML>
<HEAD>
<TITLE>JavaScript AND Math 1 </TITLE>
<SCRIPT LANGUAGE="JavaScript">

<!-- HIDE FROM OTHER BROWSER
var FX;
var A,B,C,x;

function set(f){
　FX=f.fx.value;
　A=eval(f.a.value);
　B=eval(f.b.value);
}

function F(A){
　var Y;
　x=A;
　with (Math) {
    Y = eval(FX);
  }
　return Y;
}

function display(r) {
　r.document.write("<TR ALIGN='right'>");
　r.document.write("<TD>",A ,"</TD> <TD>",B," </TD> <TD>" ,C,"</TD>");
　r.document.writeln("</TR>");
　r.document.writeln("<TR> </TR>");
　r.document.writeln("<TR> </TR>");
}

function check(A,B) {
　if ( F(A) * F(B) > 0 ) {
     alert("A,Bの選びかたが間違っています");
     return 1;
　}
　return 0;
}

function main(f){
var I;
　set(f);
　if ( check(A,B)==0 ) {
    r=parent.Result;
    r.document.writeln("<HTML>");
    r.document.writeln("<BODYB GCOLOR='#000000' TEXT='#FFFF00'
 >");
    r.document.writeln("<H1>結果</H1>")；
    r.document.writeln("<TABLE>");
    for( i=1; i >0 ; ){
        C = (A+B)/2;
        if (Math.abs(A-C)< 0.00001 ) {
            break;
        }
        if ( F(A)*F(C) > 0 ) {
            A = C;
        }
        else {
            B = C;
        }
        display(r);
    }
    r.document.writeln("</TABLE>");
    r.document.writeln("<BR> <BR>");
    r.document.writeln("</BODY>");
    r.document.writeln("</HTML>");
    r.close();
　}
}

// STOP HIDING FROM OTHER BROWSER -->
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFF00" LINK="#FF0000" >

<H1> 2分法</H1>
<H4>２分法で方程式f(x)=0の解を求めます。<p>
下を入力してからボタンを押して下さい。
</H4>
<FORM name="gauss.form">
f(x)=<INPUT TYPE="text" name="fx" SIZE="20" > <p>
A=<INPUT TYPE="text" name="a" SIZE="4" 
> <p>
B=<INPUT TYPE="text" name="b" SIZE="4" 
> <p>
f(A)f(B)<0となるようにA，Bを選んで下さい。<P>
<INPUT TYPE="button" name="bu" VALUE="Calc" onClick="main(this.form)">
</FORM>
</BODY>
</HTML>

3)最初に結果を表示するためフレームであることを表示する。プログラム実行後は表示されない。

<!-- dummy.htm -->
<HTML>
<HEAD>
<TITLE>Result</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#000080">
<H1> ここに結果が表示されます</H1>
</BODY>
</HTML>

４　評価とまとめ

　このようなページを中心としてアルゴリズムを説明するページ，特定の方程式を指定してその解を求めさせる演習のページを組み込むことにより，学習システムを構築していくことが簡単にできる。この他，以下の２点を開発している。

掃き出し法を理解させるためのページ
JavaScriptとVRMLとを組み合わせて円錐と平面の交線をインタラクティブに表示させるページ

　インタラクティブな特徴を生かし，生徒が自主的に色々なパラメーターを入力し数学的な思考を深められればと思うのだが中々難しい。

　このように最初の値だけで自動的に実行させるのではなく，生徒自身に途中の判断（２分法ならば，次にどの値をＡ，Ｂとするか）させるなど改良も考えられる。

Hakidashiho JavaScript+VRML

これらは，http://server.bshs.gakushuin.ac.jp/math.htmで公開する予定である。

（実践者　学習院高等科　町田規雄）