-アプリの概要-
Reactを使用して作成した診断アプリです。
合計２０問の質問に回答することで、ファンタジー世界での適職がわかります。
まずはこちらからプレイしてみてください。
https://yk884.github.io/rpg-shindan/
React単体でjsxファイルベースで制作しています。
特にこだわったのは進捗バーです。感覚的に進捗を理解できるように設置しているものですが、綺麗な青のグラデーションがUI上のアクセントになっています。
診断の質問文は、AIに一度生成してもらいましたが、いまいちだったのでほとんど人間の手によって修正しました。
それっぽい質問なだけなので、本格的に心理傾向を分析するものではありません。
また、結果画面に表示される補足解説的な文章は、これまた私がそれっぽい文章を書いているだけです。
診断の判定ロジックはシンプルで、全２０問の中でどの問題にどう回答したかを記録し、最終的にどのタイプの傾向が最も強いかを比較判定しています。
-感想-
「こういうの作りたい」と思い立って勢いで制作したアプリですが、色々と勉強になりました。個人的には診断結果に応じて表示する画像や職業名を切り替える際にマッピングオブジェクトを活用でき、利便性を体感することができたのが成果のひとつです。
もっと凝るなら結果として出る職業パターンを増やし、回答傾向のグラフをChart.jsなどで表示してもよかったかと思います。