2-2 掛け算の問題に答える

アクセスするたびに異なる九九の掛け算問題をJavascriptで作成しましょう。
さらに問題の答えを入力して、[答え合わせ] ボタンを押したとき、
正解であれば [あたり]、間違っていれば [はずれ！こたえは XX です。] とメッセージウィンドウに表示してください。

ファイル名は js2-2.html  としてください。

実行例

× ＝ 　

サンプル

このサンプルは不完全です。 <省略> の部分は適宜補いましょう。

 ： 省略

1: <script language="JavaScript">
2: <!--
3:
4: function RandomSet(){
5:    document.myForm.kake1.value = <省略>
6:    document.myForm.kake2.value = <省略>
7:    document.myForm.kaitou.value = "";
8: }
9:
10: function AnswerCheck(){
11:    Q1 = eval(document.myForm.kake1.value);
12:    Q2 = eval(document.myForm.kake2.value);
13:    Input = eval(document.myForm.kaitou.value);
14:    Seikai = Q1 * Q2;
15:    if ( Input == Seikai ){
16:      alert("<省略>");
17:    }else{
18:      alert("<省略>");
19:    }
20:    RandomSet();
21: }
22:
23: // -->
24: </script>
25:
26:
27: <form name="myForm">
28: <p>
29: <input type="text" size="2" name="kake1"> ×
30: <input type="text" size="2" name="kake2"> ＝
31: <input type="text" size="2" name="kaitou">　
32: <input type="button" value="答え合わせ" onclick="AnswerCheck()">
33: </p>
34: </form>
35:
36: <script language="JavaScript">
37: <!--
38: RandomSet();
39: // -->
40: </script>

  ： 省略

解説

おおまかな流れ

計算を入力するためのテキストボックスを作り、
Javascriptで２つの処理を作成します。

・処理１：ひとつは掛け算の数値をランダムに決めて、テキストボックスに表示する処理です。
・処理２：もう一つは、[答え合わせ] ボタンが押された時に入力された答えが正しいかどうかを判定する処理です。

ページの表示が完成した時や、答え合わせをした後には 処理１ を実行します。
[答え合わせ] ボタンがクリックされたら、 処理２ を実行します。

ランダムな数値を発生させるには

コンピュータは実行するたびに異なる数値を発生させることができます。
毎回異なる値が出る処理を ランダム と呼び、このような数値を 乱数 と呼びます。
乱数を発生させるためには、Math.random() を使います。
(例)
ransu = Math.random();
変数 ransu には ０ 〜 １未満(0.9999…) の毎回異なる数値が代入されます。

たとえば、Math.random() を５回実行すると、次のようになります。
Math.random() → 0.5244709264402512
Math.random() → 0.9947257957642761
Math.random() → 0.23080856422893703
Math.random() → 0.6167811077293009
Math.random() → 0.9522702992831404

今回は九九の計算なので、１から９の整数の乱数が必要です。
そのためには、以下のように計算します。

ransu = Math.floor( Math.random() * 9 ) + 1;
※ Math.floor() は小数点以下を切り捨てます。

試しに上の命令を５回実行してみると、以下のようになります。

ransu = 5      　(Math.random() → 0.4511958046350628)
ransu = 8      　(Math.random() → 0.8682708030100912)
ransu = 1      　(Math.random() → 0.01926384842954576)
ransu = 3      　(Math.random() → 0.3198658430483192)
ransu = 7      　(Math.random() → 0.7704826653935015)

これで、毎回違う掛け算の問題を出題できます。

プログラム本体の解説

このページには、 掛け算する数値を表示する入力欄 kake1 kake2 と
答えを記入する入力欄 kaitou があります。

4〜8行目：
掛け算の入力フォームに乱数を埋め込む関数 RandomSet() です。
毎回異なる値を kake1 kake2 に表示し、答えを記入する欄 kaitou を空白にしています。

10行目：
function AnswerCheck(){
答え合わせをする関数です。
回答が正しいかどうかを判定し、 alert() で正解・不正解のメッセージを表示するまでの処理を行います。

11〜14行目：
Q1 = eval(document.myForm.kake1.value);
Q2 = eval(document.myForm.kake2.value);
Input = eval(document.myForm.kaitou.value);
Seikai = Q1 * Q2;
掛け算する数値２つと入力された解答の数値１つを Q1 Q2 Input に取り出しています。
注意としては、取り出した値を eval() 関数を使って数値に変換している点です。変えている点です。
Javascriptでは フォームから値を取り出すと、その値は数値ではなく文字列として返ってきます。
正しく計算を行うためには、 フォームから取り出した値は、 eval() を使って数値に変換する必要があります。
(例)
入力フォーム kake1 kake2 にそれぞれ "2"  "3" が代入されている時、
Q1 = document.myForm.kake1.value;
Q2 = document.myForm.kake2.value;
Seikai = Q1 + Q2;
を実行すると、 Seikai には  2 + 3 = 5  ではなく、 "2" + "3" = "23"  が代入されてしまいます。

38行目：
ページが表示された直後に、最初の掛け算問題を画面に表示するために
RandomSet();
を最初に一度実行しています。