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

ポク太郎です。

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

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

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


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

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が取得することにします。

機能詳細は『JS|閲覧者が選んだクイズの答えを取得する機能の実装』まだ工事中。

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

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

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

機能詳細は『JS|クイズの正誤判定を行う機能の実装』まだ工事中。

5.判定結果を規定時間表示し次の問題へ遷移する機能

前項の正誤判定を行う機能の一部。既定時間経過後に、JavaScriptの処理を次へ進める機能。

機能詳細は『JS|JavaScriptの処理を既定時間経過後に次へ進める機能』まだ工事中。

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

こーいったプログラミング関連で参考にすべきはやはり分かってる方。必要な“条件”をしっかり整理してあるので文章内の情報に抜けがありません。

だからJavaScript関連で参考にすべきは、必要情報がしっかり整理されてるページ。

IDが頭の中とっちらか~るさん。うちのサイトの目次も「“ザ・理系”…ゴチャゴチャ中から探す」とありますが、頭ン中こんがらがった同様の意識に親近感が沸きます。

散々色んなネタを使わせてもらってるのでここで紹介させていただきます。教材となり得るしっかりした情報の在処を確保するのは大事よ。

コメント

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