2000.2.7-

クイズジェネレータ:Quizgen (HTML5対応)

小山智史

1. 概要

 「クイズジェネレータ」は、記述式あるいは選択式のクイズページを大量生産するためのライブラリプログラムです。

 どのようなものかは、次のサンプルをお試しください。

 問題解答データから問題ページが自動作成され、表示されます。回答操作をすると正誤の表示やヒントやメモの表示が現れ、操作により次のページに進みます。

2. クイズジェネレータの特徴

  1. 5分で10問...動作に必要なファイルは、問題数にかかわらず **.html, **.js, quizgen.js の3つ。あっという間に数10問のクイズページが完成。
  2. 表計算ソフトでデータ作成...csv形式→js形式の変換ツールを用意したので、Excelなどの表計算ソフトでデータ作成が可能。
  3. ランダムな出題...出題順および選択肢の並びは毎回ランダムになる。
  4. 変化に富んだ出題パターン...出題パターンが単一ではなく、記述式/選択式の別、選択肢の数、誤答時のヒントや回答後のメモの有無など、さまざまなクイズページを作成可能。
  5. デザインの変更が容易...文字や画像の大きさ、背景色などいくつかの項目はパラメータで設定可能。また、出題や回答のデザインを大幅に変えたい場合は、ライブラリファイル(quizgen.js)を変更すればすべてのクイズページに適用される。
  6. 得点の表示...回答情報が蓄積され、最後に得点などが表示される。ただし、保存や回収はできない。

3. クイズページの作り方

 「反対語」のクイズページを例に、クイズページの作り方を説明します。

3.1 クイズページに必要なファイル

  1. antonym.html...このページを呼び出すことにより、以下の2~7のファイルを参照し、クイズページが生成されブラウザに表示されます。データの構成(これらは必須)の他、文字の大きさや背景色を指定できます。詳細はもうひとつのサンプルファイル(antonymp.html)のコメントを参照してください。サウンドを有効にするとこのようになります。
  2. antonym.js...クイズデータファイルで、このデータを元にクイズページが生成されます。
  3. quizgen.js...クイズジェネレータのライブラリファイルです。変更の必要はありませんが、このファイルを変更すればページデザインを変更したり機能追加することもできます。
  4. (imgフォルダ)...必要な場合はここに画像ファイル(gifまたはjpg形式)を入れます。
  5. (sndフォルダ)...必要な場合はここにサウンドファイル(mp3形式)を入れます。

3.2 クイズデータの作成

「反対語」のクイズページを例にクイズデータを自動作成する方法を説明します。
  1. 表計算ソフトやメモ帳で問題回答データの元データファイル(例えばantonym.csv)を作成・修正します。1行が1件の問題回答データになり、各行について、項目を「,(カンマ)」で区切ります。項目は
    「問題データ, 解答データの並び(記述式の場合は解答、選択式の
    場合は選択肢の並びで先頭が正解), ヒントの並び, メモの並び」
    のようにします。なお、問題データや解答データに画像や音声を埋めこむ場合は、「画像ファイル名:サウンドファイル名:問題文」のように「:(コロン)」で区切ります。
  2. csvファイル(antonym.csv)からjsファイル(antonym.js)を生成します。具体的にはCSV2JSのページをご覧ください。もちろん、このようなjsファイルをメモ帳などで直接作成しても構いません。

3.3 quizgen.jsで定義した関数と定数

3.4 クイズの実行

 クイズページを呼び出すと、PRESETの指示がある場合には設定画面が現れるので、新規ウィンドウの有無、スキャン操作の有無や時間間隔、サウンドの有無を指示し、開始ボタンを押してください。PRESETの指示がない場合には直ちにクイズが始まります。サウンドを有効にすると少し待たされますが、これは初めに全ての音声データを読み込むためです。

 問題は毎回ランダムに出題され、選択式のクイズでは選択肢の並びが毎回ランダムになります。

 回答は次のいずれかの方法で行います。

(選択式の場合) (記述式の場合)

なお、いずれの場合も回答操作後は「次へ」の操作で次の問題に進み、「終わり」の操作で終了します。

終了時には成績が表示されます。サウンドを有効にした場合は音もでます。


koyama88@cameo.plala.or.jp