JavaScriptで簡単な漢字テストのアプリをつくります。お題を表示しユーザーに答えを入力させる。入力された答えに応じて適切な処理ができるようになればそれ以外の簡単で有用なアプリをつくることができるようになります。C# WindowsFormsでタイピング練習のアプリを作ったことがありますが、これを応用すればWebアプリケーションとして同じようなものをつくることができます。

formタグと送信ボタン

テキストボックスに何かを入力して[送信]ボタンを押さなくてもEnterキーを押下するだけでどうようの効果を得るためにはFormとsubmitボタンを使うのがおすすめです。

HTMLで以下のコードを書いてテキストボックスになにかを入力してEnterキーを押下するとテキストボックスが空になります。送信処理がおこなわれ、新しくページが読み込まれるからです。

送信ボタンを押してもページ遷移させない

onsubmit=”return false”とすれば送信処理はおこなわれません。

以下のように書くと送信処理はおこなわずに、myfunc1()で定義されている処理がおこなわれます。

簡単な漢字テストのアプリをつくる

HTML部分

JavaScript部分

app.js

問題をつくる

QuestionAnserクラスを定義してコンストラクタに漢字とよみがなを渡します。オブジェクトは配列のなかに格納しておきます。

新しくページが読み込まれたらInit関数を呼び出してquestionsCountとcountCorrectAnswersをリセットして新しい問題を作成します。

送信時の処理

ユーザーがよみがなを入力して送信ボタンをクリック(またはEnterキーを押下)したときの処理を示します。答えが合っているかどうかを調べて結果(正解か不正解か)を表示して次のお題を出します。最後の問題の結果を出力されたあとは

再挑戦できるようにする

再挑戦用のボタンをクリックした場合は最初から処理をやり直します。