この記事は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業界のためにもよろしくお願いします！