先日、某中古屋で『わちゅごなどぅー』のCDを入手した。

よく見ると、通常のバージョンの他に、「1年生+侑 Ver.」「2年生+侑 Ver.」「3年生+侑 Ver.」なるものも収録されているようだ。
これは興味深い。
この「○年生」のグループを覚えることができたら、面白いかもしれない。

というわけで、この情報をもとに、『わちゅごなどぅー』を歌っている人の名前を提示し、それが何年生かを答えさせるクイズを作ってみた。

技術の選択

手軽に挑戦できるよう、通常のWebブラウザとインターネット接続が使えれば使えるHTML・JavaScript・CSSで実装することにした。

無料で公開できる GitHub Pages を用いて公開することにした。

GitHub Pages のデフォルトのURLは「https://ユーザー名​.github​.io/リポジトリ名/」であるが、「.io」のドメインが消滅するかもしれないという主張も出ていて心配なので、独自ドメインでアクセスできるようにする設定を行った。

テック系サービス御用達のトップレベルドメイン「.io」、領有権返還により消滅の危機？【やじうまWatch】 - INTERNET Watch

画面の紹介

今回作成したクイズは、大きく分けて

• タイトル画面

• クイズ画面

• 結果画面

• 共有された結果画面

からなる。

タイトル画面

普通に開いたとき最初に見ることになるだろう、トップ画面である。

• キャラクターを分類する

• 声優を分類する

• キャラクターと声優を分類する

の3種類からモードを選択することで、クイズを開始できる。

クイズ画面

メインとなるクイズを行う画面である。

選択したモードに応じてキャラクターや声優の名前が表示されるので、それが「1年生」「2年生」「3年生」のどれに該当するかを選択していく。

結果画面

選択したモードに応じて用意された全ての問題に解答すると、正解数などを表示する結果画面に移動する。

ここでは、正解数に加えて、

• 混同行列 (正解と自分の解答の組み合わせごとの回数)

• それぞれの問題の正解と自分の解答

を確認することができる。

さらに、結果を X (旧Twitter) にポスト (ツイート) することもできる。

共有された結果画面

ポスト (ツイート) されたURLから見ることができる結果画面である。

通常の結果画面と似ているが、

• 一部のメッセージが異なる

• 自分がクイズをする前に正解を見てしまわないよう、隠している

• ポスト (ツイート) するボタンを表示しない

という違いがある。

操作方法

各画面に表示されるボタンをクリックやタップすることで、モードや何年生かの選択などの操作を行う。

また、ボタンをクリックやタップするかわりに、キーでも操作できる。
具体的には、一番上のボタンのかわりに「1」キー、上から2番目のボタンのかわりに「2」キー、上から3番目のボタンのかわりに「3」キーを用いることができる。

おわりに

せっかく作ったので、いろんな人にやってみてもらえたら嬉しいな。