ブログデザイン備忘録～イベントハンドラ応用(入力判定)

1. 入力欄、ボタン、結果表示用タグ
2. 入力を判定する関数
3. はてなTeX記法との組み合わせ
4. 関数の引数の設定
5. まとめ

　今回はjavascript関数・イベントハンドラの応用としてユーザの入力を判定して結果を表示する、例えば計算ドリルのようなものを構築する方法について紹介したい。

1. 入力欄、ボタン、結果表示用タグ

　仕組みとしては入力欄としてテキストボックスを用意して、ボタンが押されたら入力を判定する関数を呼び出し、判定結果を表示する。まず以下のようにテキストボックス、ボタンおよび表示用のタグ(<p>タグなど)を用意する。ユーザ入力のテキストは<input type="text" id="q1_input" size="1" maxlength="2" >としてinput typeに"text"とするとテキストボックスが配置され、また、どのテキストボックスに入力された値か区別する必要があるためidを"q1_input"とする。sizeおよびmaxlengthは、入力内容に応じて適宜調整すればよいが、今回はsizeを1, 入力桁数を指定するmaxlengthは2とした。ボタンについては <input type="button" value="解答" onclick="q1()">としてnput typeに"button"とするとボタンが配置され、クリック時にユーザが入力した解答を判定するためイベントハンドラをonclickとして判定する関数q1()を呼び出すようにしておく。最後に結果を表示するためのタグを<p id="ans_q1"> <p>として、q1()によってタグのテキストコンテンツを上書きするようにする。

1+2=<input type="text" id="q1_input" size="1" maxlength="2"> <input type="button" value="解答" onclick="q1()"> <p id="ans_q1"> <p>

2. 入力を判定する関数

　入力を判定する関数q1()を以下のように定義した。テキストボックスの入力内容は document.getElementByIdを用いvar answer1 = document.getElementById("q1_input");とすることでanswer1というオブジェクトに格納される。値を取り出すにはanswer1.valueとすればよい。同様に判定は表示するidを"ans_q1"としたpタグの情報をvar chk1_disp= document.getElementById("ans_q1");としてオブジェクトchk1_dipsに格納する。判定する部分はif文により正解である3とテキストボックスに入力した値answer1.valueを比較して、正解であればchk1_disp.textContent="正解";とすると"ans_q1"としたpタグに"正解"というテキストが書き込まれる。さらに chk1_disp.style.color="blue";とするとタグのスタイル設定のうちフォント色を変更でき、今回の場合は青になる。正解ではない場合(else)も同様な処理で"不正解"でフォント色が赤になるようにした。

<script>
  function q1() {
    var  answer1 = document.getElementById("q1_input");
    var  chk1_disp=  document.getElementById("ans_q1");
    if (answer1.value==3){
               chk1_disp.textContent="正解";
               chk1_disp.style.color="blue";
     }else{
              chk1_disp.textContent="不正解";
              chk1_disp.style.color="red";　　　
     }
  }
 </script>

以上実装すると以下のようになり、テキストボックスに数値を入力して"解答"ボタンをクリックすると入力した値に応じて正解・不正解を表示する。

1+2=

3. はてなTeX記法との組み合わせ

　はてなブログ上では、はてなのTeX記法とも組み合わせて、高度な計算ドリルの作成も可能となる。上の例で1+2のところをTeXに置き換えると

[tex:  \displaystyle \int\_{0}^{2} 3x^{2} dx = ] <input type="text" id="q2_input" size="1" maxlength="2"> <input type="button" value="解答" onclick="q2()"> <p id="ans_q2"> <p>

入力を判定する関数はテキストボックスやpタグのidだけ変えて上と同様にする

<script>
  function q2() {
    var  answer2 = document.getElementById("q2_input");
    var  chk2_disp=  document.getElementById("ans_q2");
    if (answer2.value==8){
               chk2_disp.textContent="正解";
               chk2_disp.style.color="blue";
     }else{
              chk2_disp.textContent="不正解";
              chk2_disp.style.color="red";　　　
     }
  }
 </script>

実装結果としては以下のようになる。

$\displaystyle \int_{0}^{2} 3x^{2} dx =$

はてなブログ以外だとMathJaxなどを使えば同様のことができると思う。

4. 関数の引数の設定

　複数の入力、問題については、引数なしの関数だとそれぞれ判定の関数を定義する必要があり効率が悪い。そこで引数を設けると関数を1つ定義するだけでよい。以下の関数q_a(ans,inp,out)はansは正解を出す値:数値、inpはテキストボックスのid:テキスト, outは判定を表示するタグのid:テキストとする。イベントハンドラonclickで関数を呼び出すときに以下のように onclick="q_a(20,'q3_input','ans_q3')"として引数を指定した上で関数をy日出す。なおテキストは' 'で囲う。

10 x 2 =<input type="text" id="q3_input" size="1" maxlength="2"> <input type="button" value="解答" onclick="q_a(20,'q3_input','ans_q3')"> <p id="ans_q3"> <p>

5<sup>2</sup> x 2 =<input type="text" id="q4_input" size="1" maxlength="2"> <input type="button" value="解答" onclick="q_a(50,'q4_input','ans_q4')"> <p id="ans_q4"> <p>

関数の処理は、引数を最初に定義して、定義した上で直接id名等を記述したところを引数名に置き換えればよい。

<script>
  function q_a(ans,inp,out) {
    var  answer = document.getElementById(inp);
    var  chk_disp=  document.getElementById(out);

    if (answer.value==ans){
               chk_disp.textContent="正解";
               chk_disp.style.color="blue";
     }else{
              chk_disp.textContent="不正解";
              chk_disp.style.color="red";　　　
     }
  }
 </script>