JavaScriptで簡単な漢字テストのアプリをつくります。お題を表示しユーザーに答えを入力させる。入力された答えに応じて適切な処理ができるようになればそれ以外の簡単で有用なアプリをつくることができるようになります。C# WindowsFormsでタイピング練習のアプリを作ったことがありますが、これを応用すればWebアプリケーションとして同じようなものをつくることができます。
formタグと送信ボタン
テキストボックスに何かを入力して[送信]ボタンを押さなくてもEnterキーを押下するだけでどうようの効果を得るためにはFormとsubmitボタンを使うのがおすすめです。
HTMLで以下のコードを書いてテキストボックスになにかを入力してEnterキーを押下するとテキストボックスが空になります。送信処理がおこなわれ、新しくページが読み込まれるからです。
|
1 2 3 4 5 6 7 8 9 10 |
<form> <input type="text" value=""> <input type="submit" value="送信"> </form> <!-- // method、action、onsubmitを省略した場合は以下と同じ --> <form method="post" action="" onsubmit=""> <input type="text" value=""> <input type="submit" value="送信"> </form> |
送信ボタンを押してもページ遷移させない
onsubmit=”return false”とすれば送信処理はおこなわれません。
|
1 2 3 4 |
<form onsubmit="return false"> <input type="text" value=""> <input type="submit" value="送信"> </form> |
以下のように書くと送信処理はおこなわずに、myfunc1()で定義されている処理がおこなわれます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<form onsubmit="return myfunc1()"> <input type="text" value=""> <input type="submit" value="送信"> </form> <script> function myfunc1() { // なんらかの処理 return false; } </script> |
簡単な漢字テストのアプリをつくる
HTML部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>漢字テスト</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #container { margin:20px; } #result { margin-bottom:20px; } </style> </head> <body> <div id="container"> <div id="result">正解・不正解・前の問題の答えが表示される部分</div> <div id="result-all"></div> <div id="question">ここに問題が表示される</div> <form method="post" action="" onsubmit="return SendYourAnswer()" id="form1"> 解答：<input type="text" id="your-answer" value=""> <input type="submit" value="送信"> <p>送信ボタンを押さなくても読みを入力後 Enterキーで送信できます。</p> </form> <button type="button" id = "retry" onclick = "Retry()">再挑戦！</button> </div> <script type='text/javascript' src='./app.js'></script> </body> </html> |
JavaScript部分
app.js
|
1 2 3 4 5 6 7 8 9 10 |
let questionElm = document.getElementById('question'); let yourAnswerElm = document.getElementById("your-answer"); let resultElm = document.getElementById("result"); let formElm1 = document.getElementById("form1"); let retryButtom = document.getElementById("retry"); let questionsCount = 0; // 何問目？ let countCorrectAnswers = 0; // 正解数 |
問題をつくる
QuestionAnserクラスを定義してコンストラクタに漢字とよみがなを渡します。オブジェクトは配列のなかに格納しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class QuestionAnser{ constructor(question, anser){ this.Question = question; this.Anser = anser; } } let questionAnsers = []; function CreateQuestions(){ questionAnsers = []; questionAnsers.push(new QuestionAnser('蜜柑', 'みかん')); questionAnsers.push(new QuestionAnser('仙人掌', 'さぼてん')); questionAnsers.push(new QuestionAnser('鬼灯', 'ほおずき')); questionAnsers.push(new QuestionAnser('天道虫', 'てんとうむし')); questionAnsers.push(new QuestionAnser('馴鹿', 'トナカイ')); } |
新しくページが読み込まれたらInit関数を呼び出してquestionsCountとcountCorrectAnswersをリセットして新しい問題を作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
window.onload = function() { Init(); } function Init() { questionsCount = 0; countCorrectAnswers = 0; // 結果を表示する要素を非表示にする resultElm.style.display = 'none'; resultAllElm.style.display = 'none'; // 再挑戦用のボタンを非表示にする retryButtom.style.display = 'none'; CreateQuestions(); // 問題文を表示させる question.style.display = 'block'; question.innerText = '問題：' + questionAnsers[0].Question; // 解答用のフォームも表示させる formElm1.style.display = 'block'; } |
送信時の処理
ユーザーがよみがなを入力して送信ボタンをクリック（またはEnterキーを押下）したときの処理を示します。答えが合っているかどうかを調べて結果（正解か不正解か）を表示して次のお題を出します。最後の問題の結果を出力されたあとは
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
function SendYourAnswer() { // form要素の値を取得する let yourAnswer = yourAnswerElm.value; // 結果を表示するための要素を表示させる resultElm.style.display = 'block'; if(questionAnsers[questionsCount].Anser == yourAnswer){ resultElm.innerText = '【正解】' + questionAnsers[questionsCount].Anser; countCorrectAnswers++; } else resultElm.innerText = '【不正解】' + questionAnsers[questionsCount].Anser; questionsCount++; if(questionsCount < questionAnsers.length){ // actionで指定した先に遷移させない // 次の問題文を表示させる questionElm.innerText = '問題：' + questionAnsers[questionsCount].Question; yourAnswerElm.value = ''; } else { // 最後の問題が終わったら 正解数もあわせて表示する resultAllElm.style.display = 'block'; let result = `${questionAnsers.length}問中 ${countCorrectAnswers}問正解`; resultAllElm.innerText = result; question.style.display = 'none'; formElm1.style.display = 'none'; // 再挑戦用のボタンを表示する retryButtom.style.display = 'block'; } return false; // ページを遷移させないためにつねにfalseを返す } |
再挑戦できるようにする
再挑戦用のボタンをクリックした場合は最初から処理をやり直します。
|
1 2 3 |
function Retry() { Init(); } |
