【C#】算数ドリルを作ってみる　<改善編　その１>

前回までで、算数ドリルが動作するレベルまで来ました。

今回は算数ドリルを改善(ブラシュアップ)したいと思います。

■改善内容

今のままでは、子供に提供するレベルに至ってません。

そこで、改善すべき内容を挙げてみました。

1. 起動時が絶対に【５＋３】から始まる
2. １問完結から繰り返し数式を解けるようにしたい（固定１０問）
3. ヒントが出るようにしたい
4. 回答欄を記入して[Enter]キーを押したら、次の問題に移行したい。

まだ、改善したい内容はありますが、今回はこの４点の改善を行いたいと思います。

※すごく長くなったので、「その１」「その２」で分けます。

■起動時【５＋３】から始まらないようにする

ここで悩むべきは、目的は起動時に【５＋３】にならない事です。『終わりよければ全て良し』という言葉がありますが、どんなコーディングをしようが結果が同じになれば、問題はありません。

今回は、下記流れで作っていきたいと思います。

1. 【作成】ボタンを作り、押されると数式を変更する。
2. 【作成】ボタンの処理を関数化する。
3. フォームロードの処理で、関数を呼び出す。
4. 【作成】ボタンは必要なくなるので非表示にする。

まずは【作成】ボタンを作ります。そして、処理内容(フロー)を考えます。

相変わらずのざっくりフローチャートですが許してくださいｗｗｗ

GUIの設計は前回同様です。デザイナーの上にボタンを配置してください。

ボタンの名前は『btnCreate』にしました。

では、『btnCreate』をダブルクリックして、クリックイベントを生成してください。

今回のアプリケーションを使用するのは６歳児が対象になります。

その為、数字は１～９の間でランダムに変化するようにしましょう。

フローチャートは《問題表示》と抽象的に書かれていますが、

具体的処理に落とし込むと、

1. ランダムを使えるように定義する。
2. １～９でランダムの数字を取得。
3. lblNum1のTextに数字を表示
4. １～９でランダムの数字を取得。
5. lblNum2のTextに数字を表示

これをコードで書いてみました。

まずは《ランダムのクラスを使いますよ！！》と定義します。

ランダムの数字は数値なので文字列に変換して、表示させます。

実際に動かしてみましょう。【作成】ボタンを押すと数式が変化するのがわかります。

　　

次は『ボタンの処理を関数化する。』です。

関数化と聞くと難しいと思いますが、簡単に言うと

【処理に名前を付ける行為】だと思ってください。

たとえ話をすると、「手を広げる」という言葉です。
手を広げるためには５本の指をまっすぐ伸ばさないといけません。
５本の指をまっすぐ伸ばす行為を「手を広げる」と呼んでいます。

今回は、「数式を作成する」という言葉(関数)を作成し、先ほどの【作成】ボタンの処理を入れましょう。

書き方は下記のとおりです。

関数の名前は『Create_Formula』です。処理の中身は先ほどの処理をコピペです。

【作成】ボタンの処理は、関数を呼び出しましょう。

　　

つぎは、『フォームロードの処理で、関数を呼び出す』です。

フォームロードというイベントがあります。

ボタンのクリックイベント同様に、フォームロードのイベントを作りましょう。

フォームをダブルクリックしても作れるのですが、

今回はプロパティウィンドウから、イベントを作成する方法です。

フォームをクリックし、プロパティウィンドウの⚡マークをクリックして、『Load』をダブルクリックすることでイベントが自動生成されます。

他にもいろいろなイベントがあるので、見てみると面白いかもしれません。

フォームロードのイベントに先ほど作った関数を呼び出します。

実際に動かしてみましょう。起動時の数式が起動するたびに変化することが確認できます。

　　

最後に、『【作成】ボタンは必要なくなるので非表示にする。』です。

【作成】ボタンのプロパティ《Visible》をFalseに変更してください。

デザイナー上はボタンが表示されていますが、

起動させると表示されていないことが確認できます。

　　

これで起動時に固定の数式で表示されないようになりました。

一歩進歩しました。次の改善を行います。

■１問完結から繰り返し数式を解けるようにしたい（固定１０問）

今のままだと、１問とてしまった後は、アプリケーションを再起動しないと新しい問題に挑戦できません。その為、１０問問題を解いてもらって、正解数を表示できるようにしましょう！！

必要な情報は、３つです。

①全問題数(今回は10問固定)
②回答した問題数
③正解数

ここで、必要な情報を定義します。

クラス全体で使いたいので、クラスの一番上に自分はよく書きます。

変数はできたので、次は、１０問解いたら、正解数を表示するようにしましょう。

左の《現在》の赤枠部から、《改善》の赤枠部に書き直しましょう！！

現在の赤枠部は一度削除します。

次に、フロー表通りに作り直します。

フロー表の枠部を色毎に書いています。

回答数/正解数を初期化(リセット)する所は、関数化しておきました。

※変数の初期化はよく使うので、初期化用の関数を作っておくのがオススメ

変数の初期化をした時は、必ず新しい問題に変更するようにもしています。

その為、フォームロードで新しい数式に切り替えていましたが、変数の初期化も一緒にしたいので、今回作った関数をフォームロードで使用するように切り替えましょう。

起動してみてください。

１０問解いたら、正解数が表示されるようになっています。

■ちょっと気づかい

これを何回か使っていくと、気になることが発生します。

それは、自分が何問解いているかわからない事です。

その為、現在何問目をしているか表示するようにしましょう。

※しなくてもいいです。単なる気遣いです。

問題を表示(関数名：Create_Formula)する度に、フォームの上部に記載するようにしました。

■まとめ

①ランダムを使うときは、インスタンスを生成する(Random [名前] = new Random)
②関数化とは、処理に名前を付けること
③プロパティの⚡マークから、イベントを自動生成

次回は、残りの改善（ヒントの表示/Enterで次の問題）をやっていこうと思います。

残り少しです。子供の為に作って自慢しましょうっっ！！