2000.2.7-
クイズジェネレータ:Quizgen (HTML5対応)
小山智史
1. 概要
「クイズジェネレータ」は、記述式あるいは選択式のクイズページを大量生産するためのライブラリプログラムです。
どのようなものかは、次のサンプルをお試しください。
問題解答データから問題ページが自動作成され、表示されます。回答操作をすると正誤の表示やヒントやメモの表示が現れ、操作により次のページに進みます。
2. クイズジェネレータの特徴
- 5分で10問...動作に必要なファイルは、問題数にかかわらず **.html, **.js, quizgen.js の3つ。あっという間に数10問のクイズページが完成。
- 表計算ソフトでデータ作成...csv形式→js形式の変換ツールを用意したので、Excelなどの表計算ソフトでデータ作成が可能。
- ランダムな出題...出題順および選択肢の並びは毎回ランダムになる。
- 変化に富んだ出題パターン...出題パターンが単一ではなく、記述式/選択式の別、選択肢の数、誤答時のヒントや回答後のメモの有無など、さまざまなクイズページを作成可能。
- デザインの変更が容易...文字や画像の大きさ、背景色などいくつかの項目はパラメータで設定可能。また、出題や回答のデザインを大幅に変えたい場合は、ライブラリファイル(quizgen.js)を変更すればすべてのクイズページに適用される。
- 得点の表示...回答情報が蓄積され、最後に得点などが表示される。ただし、保存や回収はできない。
3. クイズページの作り方
「反対語」のクイズページを例に、クイズページの作り方を説明します。
3.1 クイズページに必要なファイル
- antonym.html...このページを呼び出すことにより、以下の2~7のファイルを参照し、クイズページが生成されブラウザに表示されます。データの構成(これらは必須)の他、文字の大きさや背景色を指定できます。詳細はもうひとつのサンプルファイル(antonymp.html)のコメントを参照してください。サウンドを有効にするとこのようになります。
- antonym.js...クイズデータファイルで、このデータを元にクイズページが生成されます。
- quizgen.js...クイズジェネレータのライブラリファイルです。変更の必要はありませんが、このファイルを変更すればページデザインを変更したり機能追加することもできます。
- (imgフォルダ)...必要な場合はここに画像ファイル(gifまたはjpg形式)を入れます。
- (sndフォルダ)...必要な場合はここにサウンドファイル(mp3形式)を入れます。
3.2 クイズデータの作成
「反対語」のクイズページを例にクイズデータを自動作成する方法を説明します。
- 表計算ソフトやメモ帳で問題回答データの元データファイル(例えばantonym.csv)を作成・修正します。1行が1件の問題回答データになり、各行について、項目を「,(カンマ)」で区切ります。項目は
「問題データ, 解答データの並び(記述式の場合は解答、選択式の
場合は選択肢の並びで先頭が正解), ヒントの並び, メモの並び」
のようにします。なお、問題データや解答データに画像や音声を埋めこむ場合は、「画像ファイル名:サウンドファイル名:問題文」のように「:(コロン)」で区切ります。
- csvファイル(antonym.csv)からjsファイル(antonym.js)を生成します。具体的にはCSV2JSのページをご覧ください。もちろん、このようなjsファイルをメモ帳などで直接作成しても構いません。
3.3 quizgen.jsで定義した関数と定数
- quizgen()...クイズを開始する関数です。
- DATA...データを格納する配列です。
- NFC...選択肢数を指定する変数で、1なら記述式、2以上なら選択式のクイズとなります。
- NFH...誤答時に表示するヒントの数を指定する変数で、0なら無し、1なら固定したヒント、2以上(選択肢数)なら回答毎にヒントを用意することを意味します。
- NFM...回答後に表示するメモの数を指定する変数で、0なら無し、1なら固定したメモ、2以上(選択肢数)なら回答毎にメモを用意することを意味します。
- TITLE...タイトル文字列を指定する変数です。
- CREDIT...クイズの開始時や終了時に表示する文字列を指定する変数です。
- PRESET...クイズを始めるに先立って、パラメータ設定画面を表示するかどうかを指定する変数で、0なら直ちにクイズ開始、1ならパラメータを設定後にクイズを開始します。
- SOUND...サウンドデータが用意されている場合、それを有効にするかどうかを指定する変数で、0ならサウンド無し(デフォルト)、1ならピンポン・ブー程度のサウンド、2ならヤッターなど多少変化がつき、3なら問題解答ごとに用意されたサウンドを提示します。サウンドを有効にした場合、クイズの開始に先立ってサウンドファイルを読み込みますので、クイズが始まるまで少し待たされます。
- FSIZE...文字の大きさを指定する変数で、1~7で指定します(デフォルトは5)。
- BGCOLOR...背景色を指定する変数で、デフォルトは"cornsilk"です。
- IMG...画像ファイルを入れるフォルダ名を指定する変数で、デフォルトは"img"です。
- SND...サウンドファイルを入れるフォルダ名を指定する変数で、デフォルトは"snd"です。
- IMGALIGN...画像の表示位置を指定する変数で、"center"または"right"で指定します(デフォルトは"right")。
- IMGWIDTH...画像の幅を指定する変数で、画像の大きさを変えない場合は0とします(デフォルト)。
- IMGHEIGHT...画像の高さを指定する変数で、画像の大きさを変えない場合は0とします(デフォルト)。
- Qmax...最大出題数を指定する変数で、0で全問出題します(デフォルト)。
- Qmes...毎回表示する共通問題文(文字列)を指定する変数で、全問題の冒頭に表示されます。画像や音声ファイルを指定する場合は「:(コロン)」で区切ります。
3.4 クイズの実行
クイズページを呼び出すと、PRESETの指示がある場合には設定画面が現れるので、新規ウィンドウの有無、スキャン操作の有無や時間間隔、サウンドの有無を指示し、開始ボタンを押してください。PRESETの指示がない場合には直ちにクイズが始まります。サウンドを有効にすると少し待たされますが、これは初めに全ての音声データを読み込むためです。
問題は毎回ランダムに出題され、選択式のクイズでは選択肢の並びが毎回ランダムになります。
回答は次のいずれかの方法で行います。
(選択式の場合)
- マウスクリック...選択肢のボタン(スキャン操作が有効な場合はアンカー)をクリックします。
- キーボード入力...選択肢の番号をキーボードから入力し、Enterキーを押す(スキャン操作を有効にした場合は不可)。サウンドを有効にした場合は番号を入力した時に音がでます。
(記述式の場合)
- 回答をキーボードから入力し、Enterキーを押します。数値を入力した場合は音が出ます。
- スキャン操作を有効にしてもスキャン操作で記述式の入力はできません。
なお、いずれの場合も回答操作後は「次へ」の操作で次の問題に進み、「終わり」の操作で終了します。
終了時には成績が表示されます。サウンドを有効にした場合は音もでます。
koyama88@cameo.plala.or.jp