クイズメーカー

4択のクイズを自分で作り、その内容ごとURLに埋め込んで配れるツールです。受け取った人はリンクを開くだけで出題画面に入り、その場で採点まで終わります。アカウント登録もサーバーへの保存もなく、問題文はURLの中にしか存在しません。配信の企画やチーム内のちょっとした余興のために作りました。

こんなときに使う

• 配信やイベントで、視聴者にリンクを1本投げて答えてもらいたいとき
• チームの新メンバー歓迎で、内輪ネタの4択クイズを即席で用意したいとき
• 勉強会の最後に理解度チェックを配りたいが、フォームを作るほどではないとき
• 作った問題を、どこかのサービスにアカウントを作らずに残したくないとき

使い方

1. クイズのタイトルを入力します。
2. 問題文を書き、選択肢A〜Dの4つを埋めます。左のラジオボタンで正解を指定します。
3. 「＋ 問題を追加」で問題を増やします。2問目以降は「削除」で個別に消せます。
4. 「シェア用URLを作成」を押すと、未入力の欄がないか検査したうえでURLが生成されます。
5. 「コピー」でURLを取得して配布します。「このクイズに挑戦してみる →」から自分で動作確認もできます。

仕様と機能

項目	内容
選択肢	各問題ちょうど4つ（A〜D）。増減はできません
問題数	上限なし。ただしURLが長くなります
URLの作り	クイズ全体をJSON化し、UTF-8のままbase64url（+→-、/→_、末尾の=を削除）へ変換して #play= の後ろに格納
検査項目	タイトル未入力／問題0件／問題文の空欄／選択肢の空欄をそれぞれ日本語で指摘
下書き保存	編集内容を随時localStorage（キーは quiz-maker-draft）へ保存し、次回開いたときに復元
出題画面	1問ずつ表示。回答すると正解が緑、選んだ誤答が赤で示され、そこで確定
結果	正答数／問題数と正答率。100%・60%以上・それ未満でコメントが変わります
読み込み時の検証	URL内のデータが4択でない、正解番号が0〜3の外、といった場合は出題画面を出さず作成画面に戻ります

作るときに決めたこと

このツールの中心は「データベースを持たない」という一点です。クイズの中身をサーバーに保存すれば短いURLが発行できますが、そのぶん保存期間・削除依頼・不適切な投稿への対応がすべてこちらの責任になります。個人が毎日1本作るアプリで抱えるには重すぎる。そこで、クイズ本体をURLの断片（ハッシュ）に丸ごと入れる方式にしました。ハッシュはブラウザからサーバーへ送信されない部分なので、問題文が私の手元に届くこともありません。

日本語をそのままbase64にすると文字化けするため、TextEncoderでUTF-8のバイト列にしてから変換しています。さらに + / = を含まないbase64urlに直しているのは、チャット欄やSNSに貼られたときにURLの末尾が切れたり自動リンクが途切れたりするのを避けるためです。

選択肢を4つで固定したのは迷った末の判断でした。2択や5択を許すとUIに選択肢の増減ボタンが増え、「作るのが面倒」に一歩近づきます。余興用の道具として、迷わず埋められる形のほうが優先だと考えました。同じ理由で、解説文の入力欄も入れていません。

下書きのlocalStorage保存は、実際に長めのクイズを作っている最中にタブを閉じてしまい、全部消えた経験から後で足しました。逆に、作ったクイズの一覧管理は入れていません。URLさえ手元にあればそれが実体なので、一覧は二重管理になるからです。

注意点

• 問題数を増やすほどURLが長くなります。極端に長いURLは一部のアプリやサービスで途中で切られることがあるため、配布前に自分でリンクを開いて確認してください。
• クイズの内容はURLに符号化されているだけで暗号化ではありません。技術的な知識があればURLから正解を読み取れます。試験や選考など、正解を秘匿する必要がある用途には向きません。
• 下書きはこの端末のブラウザにのみ保存されます。別の端末やブラウザには引き継がれません。