JavaScriptでクイズ作る場合に要する機能・条件をまとめた目次ページ

データの構成を以下としてクイズプログラムを作っていきます。

• 別ページBがクイズデータのデータベース。
• 上記から得たデータの内、出題する問題数分だけをまずグローバル二次元配列qx[][]に再作成。
• 出題→正誤判定を規定回数分だけ繰り返しグローバル配列an[]に成績として記録。
• 最後に閲覧者の成績と全問題の正誤状況、解説を表示。

実現するのに必要な機能は、

3択クイズ作成のために要する機能

1	JavaScriptで別ページBの情報を取得する機能。
2	読み取った別ページBのデータから条件に従いクイズを選び出す機能。
3	閲覧者が選んだ選択肢をJavaScriptで取得する機能。
4	クイズの正誤判定を行い、結果を規定時間表示し次の問題へ遷移する機能。
5	全問題分の閲覧者の成績と解説を表示する機能。

JavaScriptとは閲覧者のデバイスで実行されるもの＝ソースにクイズの答えを書いてしまうとクイズにならず。

そのためにクイズページAとは別のページBに問題と答えを書いておき、JavaScriptにてそのページBの情報を読み取った上、データとして使用します。

別ページBはリファラーを条件に使ったアクセス制限により閲覧できないように。方法は、

• 【方法1】JavaScriptによりリファラーがクイズページAでない場合はアクセス禁止。JavaScriptオフでアクセスされると見られてしまう方法。
• 【方法2】.htaccessによりリファラーがクイズページAでない場合はアクセス禁止。通常.htaccessを使えない無料ブログでは実現不可な方法。

別ページBのデータには“カテゴリ”が設定されており、その条件や問題数指定により実際に閲覧者に出題するクイズを作り出す機能。

実際に閲覧者が選択肢を選べるようクイズを画面に表示し、その選択結果をJavaScriptで取得する機能。

ここでは、選択肢を3つとする3択クイズのボタンにリンクを貼り、それにより選んだ答えをJavaScriptが取得することにします。

閲覧者の選んだ答えを受け、正誤判定を行う機能。別ページBのデータ内に正解を書いておく仕様とします。

また、ここでは、1問毎に正誤を判定して閲覧者に見せるのか、それとも全問回答後にまとめて結果表示するのかをモードによって切り替える仕様を考えます。

また、既定時間経過後にJavaScriptの処理を次へ進める機能も内包します。

閲覧者の全問回答後、最終的にそのクイズ成績を発表する画面。

問題内容と閲覧者の正誤状態、正解と解説を表にして表示します。

以下が完成したクイズプログラム。

ここから表示領域～

～ここまで表示領域。

完成したソースコードは、