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

ポク太郎です。

ネタがないからと始めた本JavaScript奮闘記

JavaScriptの実例集としてホームページに3択クイズを設置するプログラムを作ってみます。

その3択クイズのために実装する具体的な機能説明は別ページにリンク。本ページはいわば目次で必要な機能、条件、クイズの特性を整理したもの。実装例のページは順次作成していきます。


JavaScriptで作る3択クイズに必要な機能

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

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

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

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

1.JavaScriptで別ページの情報を取得する機能

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

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

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

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

2.読み取った別ページBのから条件に合うクイズを選び出す機能

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

3.閲覧者が選んだ選択肢をJavaScriptが取得する機能

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

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

4.クイズの正誤判定を行う機能

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

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

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

5.全問題分の閲覧者の成績と解説を表示する機能

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

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

6.完成したJavaScriptのクイズプログラム

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

ここから表示領域~

ここまで表示領域。

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

“実例集”の形で公開するJavaScript奮闘記。お役に立つ形でできあがるでしょうか。乞うご期待。

JavaScript3択クイズを作ろう
Step1
仕様・必要機能
Step2
別ページのHTML取得
Step3
出題用2次元配列へ
Step4
閲覧者の回答検出・判定

コメント

タイトルとURLをコピーしました