今日の運勢アプリ
占うボタンをクリックすると今日の運勢を表示します。
やることの整理
流れとしてはこのような感じになります。
- ボタンをクリックしたら
- 運勢をランダムで決定して
- 結果をポップアップで表示する
手順の単純化
問題を考えやすくするために【○○したら△△する】のかたちに当てはめて手順を単純化したものを作成します。
今回の場合は「ボタン(#fortune .submit)をクリックしたら、ポップアップでなにかを表示する」となります。
【関数】の利用
運勢をランダムで決定するために「指定した範囲の数字を1つランダムで返す」下記の関数を利用します。
関数は、決まったパターンの手順をひとまとめにしてパッケージ化できるものです。
関数を使うことで役割が明確になり、プログラムを整理して書けるようになります。
関数は、function [任意の関数名]{…} で定義します。
【配列】の利用
運勢をランダムで決定するために「運勢のリスト」の配列を使います。
アプローチまとめ
ここまでのアプローチをまとめると下記のようになります。
改善の検討
- 運勢をもっと小分けにする
- 大吉を出やすくする/出にくくする
- 「今日」の間は何回やっても必ず同じ運勢が出るようにする など
犬派/ネコ派判定アプリ
質問にはい/いいえで答えることにより、あなたが犬派かネコ派かを判定するアプリです。
判定用文献
犬派/ネコ派の判定は下記の5つの質問に答えることにより決定します。
質問1:
「外で活発に遊ぶことが好きですか？」
- はい → 犬派
- いいえ → ネコ派
（犬は外で活発に遊ぶことが好きな場合が多いが、ネコは屋内で静かに過ごすことを好むことが多い）
質問2:
「家で一緒にくつろぐとき、静かに寄り添って過ごすのが好きですか？」
- はい → ネコ派
- いいえ → 犬派
（ネコは静かな環境を好み、寄り添うことが多いが、犬はもっと活動的で一緒に動き回ることが多い）
質問3:
「他の動物と一緒に遊ぶのが好きですか？」
- はい → 犬派
- いいえ → ネコ派
（犬は他の動物とも積極的に遊ぶことが多いですが、ネコは独立心が強く、他の動物と一緒に過ごすのが苦手な場合が多い）
質問4:
「食事に関して、食べる時間や内容にこだわりが強い方ですか？」
- はい → ネコ派
- いいえ → 犬派
（ネコは食事にこだわりが強く、気に入らない食べ物は食べないことが多いが、犬は比較的食事におおらか）
質問5:
「毎日、散歩に行くのが楽しみですか？」
- はい → 犬派
- いいえ → ネコ派
（犬は散歩が必要で、散歩に行くことを楽しむことが一般的ですが、ネコは散歩を好まないことが多い）
やることの整理
- 5つの質問を作って
- 質問ごとのはい/いいえボタンクリックしたら
- 押したボタンによって得点を加算して
- 5問目を回答したら結果をテキスト＋画像で表示
手順の単純化
占いアプリと同様に一度手順を単純化して、設問数も1つにして考えます。
【ボタン(#inuneko .q-1 button)をクリックしたら、結果を表示】となります。質問の作成
下記テンプレートを使って問題数分のHTMLを作成します。
※ sectionのclass="q-xx"は問題番号を入れてください(例：class="q-1")
得点調整のアプローチ
犬派ネコ派判定の得点集計の方法を考えます。
例えば、はいを選択した場合には「犬派」に1点、いいえを選択した場合には「ネコ派」に1点を加算するとします。
これでも特に問題はないのですが、もう少しスマートに書くことができます。
犬派は加算、ネコ派は減算して、最終的に0基準で結果判定します。
上記のコードでクリックしたボタンがどれであるか判定するためクラス名を取得しているように、アクションを設定した要素の情報を取得するには下記のように書きます。
質問数の拡張
質問数を増やして、さらに5問目を回答したら結果を表示するようにします。
結果出力の変更
アラートで表示するのではなく、テキストと画像で結果を表示するように変更します。
問題点の整理と解決方法の考察
現状の実装では問題点が多数あるため整理します。
- 同じ質問を複数回答できてしまう
- 質問5だけ回答しても結果が出てしまう
- 結果が出た後も質問に回答できてしまう
- 結果が出た後にもう一度やり直す方法が無い
この解決方法として、以下の仕様に変更します。
- 上から順に回答ではなく、1問ずつ表示して順番に回答させる
- 回答するボタンを押したら自動的に次の質問に移動
- 質問5まで回答したら結果のみ表示
- 結果表示と合わせて「もう一回やる」ボタンを表示
改良版コード
質問を順番に表示させるため、CSSで「showクラスを付けた質問以外は非表示」にする
1問目は最初から表示させるためshowクラスを追記させる。
また結果エリアにリトライボタンを追加する
質問の回答をする度にshowクラスの付け外しを行い表示質問を制御。
またリトライボタンをクリックしたときの動作を追記。
完成！
再度実行して動作を確認します。
完成版