WordPressを使って、自分で問題と解答を登録して使えるQAサイトを構築

WordPressを使って、自分で問題と解答を登録して使えるQAサイトを構築

WordPress(ワードプレス)を使って、問題を表示して、回答すると、正解か不正解かを判定して、解説を表示する簡易QAサイトを構築しました。

中小企業診断士の某講座に申し込みましたが、動画の内容はとてもよいのですが、テキストを申し込まない場合は、演習問題や過去問がPDFでしか提供されません。

基本的に、過去問をひたすら解きまくるということが、合格への近道なので、隙間時間での勉強効率を最大化するためには、オンラインで演習問題、過去問を解けるようにすることが必須条件です。

今回申し込んだ講座では、問題をオンラインで解くことができないので、自分でオンライン学習ができるサイトを作成しました。

演習、過去問のPDFデータを、個人利用(Basic認証設定して公開しない)の範囲で、Wordpress(ワードプレス)にデータを取り出して登録しています。

サンプル(下画像)はこのような感じです。個人用なので、見た目にはこだわっていません。

自分で問題と解答を登録できるQAサイトの「内容」

今回、自分で問題と解答を登録して使えるQAサイトの機能として、必要なものは下記5つです。

QAサイトの機能

  • 自分で問題を入力できる
  • 自分で選択肢を入力できる
  • 自分で正解を入力できる
  • 自分で解説を入力できる
  • 選択肢をクリックすると、正解または不正解を表示して、同時に解説を表示する

選択肢の部分は、1次試験のマークシート形式(ア~オ)を想定しています。

自分で問題と解答を登録できるQAサイトの「入力項目を決める」

問題、選択肢、回答、解説をそれぞれをどのように登録するかという問題があります。

「問題」は通常投稿に登録して、それ以外の項目は「カスタムフィールド」を使いました。

こうすることで、「次の問題」に移動する部分に「ページ送り」を使えます。

WordPressの機能をそのまま使って、問題、選択肢、回答、解説の関連付けが簡単にできます。

これをWordpressなしで1から自分で構築しようとすると、「DB設計」「入力フォーム」「回答ページ作成」など複数の作業が発生して、時間がかかってしまいます。

WordPressを使うことで基本的な部分は1日で作成できました。

※データ入力は別途がんばらないといけません。

自分で問題と解答を登録できるQAサイトでつかうプラグイン「Advanced Custom Fields」

今回、選択肢、回答、解説をカスタムフィールドに登録するために、「Advanced Custom Fields」という無料のWordpressプラグインを使いました。

「Advanced Custom Fields」は直感的に操作ができるので、カスタムフィールドを作成する時にはおすすめです。

設定したカスタムフィールドを表示させるには、テーマ側のPHPを修正して、関数を記述しないといけません。

「Advanced Custom Fields」を使った記事投稿画面(下画像)です。

選択肢の部分は、ア~オと入力させておき、1文字(全角)ずつ切り取って、リンクを付けています。

選択肢、回答、解説以外にも、今後の展開を考えて「正解数」「不正解数」「前回の結果」「前回の挑戦日」という項目を設けています。

自分の苦手とするジャンルなどが分かりやすくなるので、もし時間があったら作成予定の部分です。

自分で問題と解答を登録できるQAサイトの「正解・不正解部分」はjQueryで作成

選択肢をクリックして、正解・不正解、解説を表示する部分は、jQueryを使って作成しました。

難しいことはしておらず、正誤判定は、カスタムフィールドの「正解」と「選択肢のクリック内容」を判定しているだけです。

また、解説の表示についても、「選択肢のクリック」と同時に、非表示を表示に切り替えるだけです。

自分で問題と解答を登録できるQAサイトでつかうテーマ「Cocoon」

今回のサイト作成にあたり、テーマは「Cocoon」を使いました。

「Advanced Custom Fields」を使うので、子テーマ化が必須で、Cocoonは子テーマも用意されているので、すぐに使うことができます。

また、テキストメインなので、それほど表示が遅くなるとは思っていませんが、無料サーバーを利用したので、できるだけ軽くて速いテーマを選びました。

「Cocoon」は無料で使えるテーマで、子テーマもダウンロードできます。
Cocoon | WordPress無料テーマ(外部リンク)

自分で問題と解答を登録できるQAサイトで使ったサーバー「XFREE(エックスフリー)」

今回のサイト作成で使ったサーバーは「XFREE(エックスフリー)」という無料レンタルサーバーです。

ポイントは、WordPressが使えること、MYSQLが使えること、データベース容量が100MBあることです。

サイトをスマートフォンで表示すると、画面下に広告が表示されますが、それほど気になりません。ちなみに、PCの場合は広告表示されないのでサイトがキレイです。

無料ですが、各機能を継続して利用する場合、3ヶ月ごとに契約を更新する必要があります。

契約更新により利用期限が3ヶ月延長されます。

契約更新は利用期限の2ヶ月前から可能です。

忘れると、作業したデータが全てパーになってしまうので、バックアップ、もしくは、サーバーを有料レンタルして構築しなおそうかと考えています。

無料で使えるレンタルサーバー「XFREE(エックスフリー)」
無料レンタルサーバー【XFREE(エックスフリー)】(外部リンク)

Freepik – jp.freepik.com によって作成された business ベクトル

スポンサード