この記事はN・S高等学校 (1) Advent Calendar 2021 の3日目の記事です。
はじめに
こんにちは。N高等学校3年次のなっかのうです！もうすぐ卒業です...
12月3日...なんか三連単みたいなのでこの日付を選びました！
この記事では、JavaScriptを用いてそこそこ本格的な診断テストを作ったので、そちらの簡単な仕組みや感想などを話していこうと思います！
作ったもの
あなたに近いウマ娘を診断する、「ウマ娘シンダン」というものを作りました！
主な機能
・自分の性格がどちらに傾いているかわかるパラメータのグラフ的なものが見れる！
・自分に一番近いウマ娘、遠いウマ娘がわかる機能
・Twitterや、URLコピペで自分の結果を共有できる機能
・ウマ娘がアップデートで増えた際にURLさえあれば対応できる機能
特にこだわりのポイント
大きく二つあります。
URLで全てを管理するシステム
例えば、私の結果のURLは、
https://nakano1120.github.io/uma-sindan/question/question12.html?q1=1&q2=2&q3=2&q4=2&q5=1&q6=1&q7=2&q8=2&q9=4&q10=4&q11=1
になります。
この?q1=1のように質問ページごとに回答をURLクエリに保存することで、最後の結果のページだけで計算をし、あとはページ遷移＋結果をURLクエリに書き込みだけすれば済むので、例えば質問が増えてもすぐに対応できます。
もう一つ利点があり、結果のURLさえあれば再現できるので、簡単にシェアできます。
採点システム
この個性をどう評価するか考えたところ、色々調べた挙句
「ビビリさ」
「活発さ」
「好奇心の高さ」
「協調性の高さ」
「真面目さ」
の５つのパラメータを質問ごとに上下させて、最終的に出た数値を結果として出すという仕組みになっています。
例えば質問1「夏にデートをするとしたら？」で「海に行く」を答えた場合、初期値はそれぞれ50なので
「ビビリさ」 56(+6)
「活発さ」 56(+6)
「好奇心の高さ」 56(+6)
「協調性の高さ」 50
「真面目さ」 50
となります。
そしてこの結果から、それぞれのウマ娘が持っているパラメータとの差異を計算します。
私の結果は
「ビビリさ」 56
「活発さ」 100
「好奇心の高さ」 96
「協調性の高さ」 74
「真面目さ」 58
でした。この結果と一番近かったエルコンドルパサーは、
「ビビリさ」 46（差異10）
「活発さ」 99（差異1）
「好奇心の高さ」 82（差異14）
「協調性の高さ」 56（差異18）
「真面目さ」 46（差異12）
差異の合計55（これが最終結果の「距離」）
となり、私の（推しであり）一番近いウマ娘になります。
さいごに
自分の推しを出すRTAするもよし、身内で楽しむもよし、共有して楽しむもよしな診断テスト、いかがでしたでしょうか？
この診断テスト、結構自信作なのでぜひ広めていただけると幸いです！
来年はN高校卒業しますが、ちょくちょくqiita使っていこうと思います！
追記（おまけ）
実はこのサイトなんですが、「W3C」「WHATWG」などのWEB標準に準拠することにできる限り気を使って制作しています。
例えば、border-radiusなどの角丸は完全な推奨ではないため使っていません。
これに準拠することにより、比較的古いようなwebブラウザでも動くようになっており、
VoiceOverなどの読み上げ機能にも優しい構造になってます！
今後WEBデザインなどしていく方々はぜひWEB標準のドキュメント、目を通しておいた方がいいと思います！
一個人の意見ですが、今後のWeb業界のためにもよろしくお願いします！