クイズアプリの作り方

クイズアプリは、問題を表示し、回答を集め、採点して、結果を表示します。単純な版は、固定の一つのクイズをブラウザ内で採点するもので、半日もあれば作れます。学習、採用、コンテストで人が頼りにする版には、問題バンク、サーバー側に保管された答え、保存された受験結果、公平な時間管理が必要です。どちらを作るかは早めに決めてください。アーキテクチャが変わります。

どんなクイズかを決める

「クイズ」という言葉は、非常に異なる製品を含んでいます。

利害のない性格診断であれば、すべてをブラウザ内で安全に動かせます。評価試験ではそうはいきません。ライブのクイズにはリアルタイム更新が必要で、これは別のレベルの複雑さです。そこがポイントでない限り、最初のバージョンからは外してください。

クイズアプリに必要なもの

データ

• クイズ：タイトル、説明、設定（制限時間、受験回数、問題の並び替え、合格点、終了後に答えを表示するか）。
• 問題：どのクイズに属するか、問題文、種類、配点、任意の画像、終了後に表示する解説。
• 選択肢：問題の回答の選択肢と、どれが正解か。
• 受験：誰がどのクイズを、いつ開始・送信したか、スコア。
• 回答：受験ごとに、各問題で選んだ選択肢（または入力したテキスト）。

受験と回答を分けて保存すると、利用者がどこを間違えたかを正確に示せます。また、ほとんどの人が間違える問題を見つけることもできます。そうした問題は、たいてい言い回しがよくない問題です。

ページ

• クイズ編集画面：作成者が問題を追加し、並べ替え、正解の選択肢を設定し、プレビューできる画面。
• クイズの開始ページ：問題数、制限時間、受験回数などのルールを表示。
• 問題画面：スマホでは一度に一問ずつ表示し、進捗（「10問中4問目」）を示す。
• 結果ページ：スコア、合否、設定が許す場合は問題ごとのフィードバック。
• 作成者向けダッシュボード：受験数、平均点、最も間違えられた問題。

権限

作成者はクイズを作成・編集し、受験者は受験するだけです。クイズがクラスやチーム向けなら、グループを追加して、割り当てられたクイズだけが見えるようにしてください。アプリにログインを追加する方法を参照してください。

書き出しておくべき採点ルール

クイズアプリのバグの多くは採点に関するものです。次のルールをプロンプトに書いてください。

1. 単一選択：正解なら満点、それ以外は0点。
2. 複数選択（「当てはまるものをすべて選ぶ」）：全問正解のみ得点にするか、部分点を認めるかを決めてください。部分点なら、誤った選択で減点するかどうかも決めます。例を書いておくと確実です。「正解はAとC。Aだけ選ぶと2点中1点。A、B、Cを選ぶと2点中1点。」
3. 未回答の問題は0点とし、誤答ではなく未回答と表示してください。
4. 制限時間は、サーバー側で開始時刻を基準に強制してください。ブラウザのタイマーは表示のためだけのもので、誰でも止めたり変えたりできます。
5. 問題の並び替えは、表示の順番だけを変えるもので、どの選択肢が正解かは変えないでください。正解は位置ではなく選択肢のIDで保存してください。

答えをブラウザに出さない

これは、すべての本格的なクイズアプリが必ず正しく扱うべき技術的なポイントです。ページが正解の印付きで問題を受け取り、自分で採点してしまうと、誰でも開発者ツールで答えを読めてしまいます。

解決策の説明は単純です。サーバーは正解のフラグを含まない問題を送り、利用者が回答を送信したら、サーバーが受験を採点して結果を返します。プロンプトにもそのことを明記してください。娯楽のクイズであれば問題にならないかもしれませんが、修了証、成績、賞品が絡むなら重要です。

最初に効くプロンプトの例

作成者がログインしてクイズを作れるWebアプリを作ってください。クイズにはタイトル、説明、任意の制限時間、受験回数、合格点を設定できます。問題の種類は単一選択、複数選択、正誤のいずれかで、配点と任意の解説を持ちます。受験者はリンクからクイズを開き、ルールを確認してから、進捗バー付きの画面で一度に一問ずつ回答します。正解は、送信するまでブラウザに送らないでください。受験はサーバー側で採点し、制限時間はサーバー側の開始時刻を基準に強制してください。複数選択は全問正解のみ得点とします。送信後、スコア、合否を表示し、作成者が許可している場合は、問題ごとに正解と解説も表示してください。すべての受験と回答をデータベースに保存してください。作成者には、平均点と最も間違えられた問題を表示する結果ページを用意してください。

作成のステップ

1. まず編集画面を作る。さまざまな種類の問題を十問作ってみてください。問題を書くのが大変なら、作成者はアプリを使いません。
2. 受験を試す。スマホで試してください。進捗、戻る・進む、更新したときの動作を確認します。
3. サーバー側の採点。クイズを受けながらブラウザのネットワークタブを開き、送信前に、どのレスポンスにも正解が含まれていないことを確認してください。
4. 採点のテスト。期待する点数が分かっている例を五つ、AIに示してください。部分的に正解した複数選択の回答や、未回答の問題を含めます。
5. タイマー。制限時間のあるクイズを開始し、時間を過ぎてから送信してください。受け付けられないか、締め切り時点の回答として採点されるべきです。どちらにするかを決めてください。
6. 結果と分析。意図的に行った受験で、最も間違えられた問題の一覧が正しいかを確認します。
7. 追加機能。ここまで来てから、画像、ランダムに出題する問題バンク、修了証、ランキングを追加してください。

よくある失敗

• ページの中に答えがある。 最も一般的で、最も深刻な欠陥です。
• ブラウザの時計を信用する。 制限時間はサーバー側で強制してください。
• 正解を「2番目の選択肢」として保存する。 並び替えをすると、間違った答えが正解になってしまいます。
• 利用者が受験した後にクイズを編集する。 問題を変えると、古いスコアの意味も変わってしまいます。受験があるクイズはロックするか、バージョンを管理してください。
• 評価試験で再挑戦を無制限にする。 受験回数のルールを決め、サーバー側で強制してください。
• ランキングで本名をデフォルトで表示する。 特に生徒の場合は、利用者が表示名を選べるようにしてください。

既製の製品を選んだほうがよい場合

教室で手早くゲームをする、既に使っているコース管理ツールの中でクイズを行う、一度きりの見込み客獲得用のクイズを作る、といった用途なら、既存のクイズツールやフォームツールのほうが速く、多くは無料です。学習管理システムには、成績簿付きのクイズ機能が含まれています。フォーム形式で作るなら、Typeformの代替ツールとGoogleフォームの代替ツールを参照してください。

自作するのに向いているのは、クイズが大きな仕組みの一部である場合です。販売しているコース、採用のフロー、独自のルールの研修プログラムなどです。また、既存ツールにはない採点、ブランディング、データの所有権が必要な場合も自作に向いています。練習用にはフラッシュカードアプリと組み合わせたり、オンラインコースのプラットフォームの中に組み込んだりできます。

Mythexで作る

Mythexでは、チャットでクイズアプリを説明し、ライブプレビューで試せます。スマホサイズの表示も使えます。受験を保存したいと頼むと、エージェントがデータベースを追加し、フロントエンドと一緒にサーバー側の採点も書きます。作成者のログインには、Mythexが提供する組み込みのサインイン製品ではなく、自分で選んだ認証方法をエージェントが接続します。変更で採点が壊れた場合は、以前のチェックポイントに戻して、やり直せます。公開はmythex.aiのリンクで行えるほか、Proプランでは独自ドメインも使えます。

よくある質問