「原神読み方クイズ」作成してみた話

璃月編のパイモン「そうだ！あの削月築陽真君が言ってた仙人の中に、『留雲借風真君』がいた！」

読めるか！そして覚えられるか！！
仙人の名前がスラスラ出てくるなんて、パイモンは賢いねえ……。

といった具合に、ゲーム「原神」に出てくる人名や地名は独特で、初見で読み方がわからないものが多いです。
長くプレイしている方でも正直曖昧に記憶していることも珍しくないはず。

そこで作ってみました「原神読み方クイズ」。

原神読み方クイズ

ルールは簡単です。出題された用語に対してひらがなで回答するだけ。

例えば「瓊璣野」と出題されたとします。

テキストボックスに解答を打ち込んでいきます。

「けいきや」と打ち込んで、決定！

正解です！やったね。

用語の数は2021/03/07現在で256語。

チェックボックスで出題される用語のカテゴリーが選択できます。

・地名
　例）奔狼領、寒天の釘、孤雲閣、霊矩関……

・店
　例）栄発商店、快刀陳、不卜廬、万文集舎……

・武器
　例）磐岩結緑、螭龍の剣、和璞鳶、匣中日月……

・人名
　例）刻晴、金翼鵬王、理水畳山真君、胡桃……

・敵と魔物
　例）爆炎樹、氷蛍術師、雷蛍術師、丘丘人……

・アイテム
　例）深邃の血、緋紅玉髄、霞生石、金屋蔵嬌……

・秘境
　例）孤雲凌宵の処、華池岩岫、太山府、風龍廃墟……

・用語
　例）五彩招福、明霄灯海、神鋳賦形、帰らぬ熄星……

用語とその読み方については、原神Wiki、okomeさんの「原神用語辞書Ver1.2」、ラクサさんの「テイワット事典Ver1.2.3」を大変参考にさせていただきました。素晴らしい辞書機能で、愛用させていただいております。感謝。

自分のJavascriptの勉強も兼ねてのため、未熟な点も多々あるかと思いますが、片手間に遊んでもらえればと思います！
「こういう用語もほしい！」「読み方違う！」など、要望・意見あればお知らせください～～。

原神読み方クイズ

[おまけ]作成で工夫した点

といってもクイズサイトのベースは以前作った「東方英単語クイズ」のままなので、大きな変化点はありません。

強いて挙げるならば、「原神読み方クイズ」は選択肢形式ではなく、ユーザーに答えを直接入力してもらう形式になったところです。
そのため、所望の文字列（今回はひらがな）以外を入力されては正誤判定がうまく機能しない可能性があります。

そこでHTML5の機能を用いると簡単にフォーム内のテキストボックスの入力値に制限ができるというではないですか。
使用するのはpattern属性の正規表現で、今回は「ひらがな」「ー（長音）」の制限をしたら良いため、

pattern="[\u3041-\u3096\u30FC]*"

となります。

この機能を使う上で一点注意したいのは、何も対策しないとフォームの決定ボタンを押すとsubmitされてページが更新されることです。
これはこのサイトに関する作りが原因ですが、途中で更新されると始めの出題設定画面に戻ってしまいます。
これを防ぐため、フォームのonsubmit属性を次のようにします。

onsubmit="return false;"

以上、最終的なテキストボックス部は次のようになりました。

<form id="textIn" onsubmit="return false;">
    <input maxlength="20" class="form" type="text" pattern="[\u3041-\u3096\u30FC]*" id="form_textIn" style="width:100%;" placeholder="ひらがなで入力" required >
</form>
<button form="textIn" class="send" id="button_textIn">決定</button>

フォーム外にボタンを持ってきていますが、特別意味はありません。
maxlengthで文字数制限、placeholderで入力欄のガイド、requiredで空白禁止しています。

前回書いた原神記事はこちら

他にも原神の記事を書いています。

原神プレイ記事｜歌津｜note