Quiz Generator（クイズ作成スクリプト）

自作 JSライブラリの４択（複数選択）クイズジェネレータ（クイズ作成スクリプト）です。
以前に公開したFlash版クイズをJavascriptで書きました。
こういうのがWEBで見つからなかったので、Jqueryの勉強の為に作ってみました。スクリプトは綺麗に書けてませんが、出来ましたので紹介します。

特徴

JS設定ファイルを変更するだけで、簡単に4択クイズが作成できます。
Jquery.jsを使用して作っています。
設定ファイルを変更するだけで、出題数の設定、問題を昇順・ランダム出題、正解不正解の表示の有無、サウンドの有無、制限時間の有無、問題の獲得点数、オープニングメッセージ、総得点によるエンディングメッセージの振り分けなどができ、自由度が高くなってます。
あなたのホームページやブログに掲載してみては如何でしょう。
問題文・解答選択文はご自身で考えてください。

ダウンロード

ダウンロード (quiz-generator.zip)

設置方法

ダウンロードしてご覧下さい。

HTMLの記述。

HTMLヘッダ内に記述 Jqueryを使用しています。
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="quiz-setting.js"></script>
<script type="text/javascript" src="quiz-generator.js"></script>
<link rel="stylesheet" type="text/css" href="quiz-generator.css" />
HTML body内に記述
<div id="quiz_box"></div>

クイズ設定ファイル(quiz-setting.js)の記述

各種設定&問題・回答&得点による振り分けメッセージなど
/*========================================
* Quiz Generator 設定ファイル
* Copyright 2008 Sawa's Factory
* http://sawa-s.com/quiz-generator.html
========================================*/

/* ===================  オープニング&クイズ設定  =================== */
/* クイズボックスの横幅 縦幅*/
q_w=450;    //横幅 px min=400
q_h=380;    //縦幅 px 選択数の増減によって調整してください。3択：330 4択：380 5択：430
/* タイトル */
q_title="４択クイズ";
/* オープニングメッセージ */
openning_msg="このクイズは４択形式のクイズです。<br />全部で１０問あり、満点は１００点です。<br />&nbsp;<br />あなたは何点取れるでしょうか？";
/* 出題数 */
q_no=10;
/* 出題順 0-昇順 1-ランダム */
q_rnd=1;
/* 正解・不正解の表示 0-表示しない 1-表示する */
q_dsp=1;
/* 正解・不正解を表示する場合、表示する秒数 */
q_dtime=2;
/*正解・不正解を表示する場合、サウンドを 0-使用しない 1-使用する */
q_sound=1;
/* 制限時間（秒） 0-設定なし */
q_timer=10;

/* =================== 問 題 =================== */
var questions = [
["問題1", ["選択1-１", "選択1-2", "選択1-3", "選択1-4"], 1, 7]
,["問題2", ["選択2-１", "選択2-2", "選択2-3", "選択2-4"], 2, 7]
,["問題3", ["選択3-１", "選択3-2", "選択3-3", "選択3-4"], 3, 10]
,["問題4", ["選択4-１", "選択4-2", "選択4-3", "選択4-4"], 4, 8]
,["問題5", ["選択5-１", "選択5-2", "選択5-3", "選択5-4"], 1, 7]
,["問題6", ["選択6-１", "選択6-2", "選択6-3", "選択6-4"], 1, 1]
,["問題7", ["選択7-１", "選択7-2", "選択7-3", "選択7-4"], 1, 12]
,["問題8", ["選択8-１", "選択8-2", "選択8-3", "選択8-4"], 1, 7]
,["問題9", ["選択9-１", "選択9-2", "選択9-3", "選択9-4"], 1, 10]
,["問題10", ["選択10-１", "選択10-2", "選択10-3", "選択10-4"], 1, 7]
];
/* =================== エンディング =================== */
var endings = [
[100, "満点でしたよ。お見事です。"]
,[80, "う〜ん。さすがですね。"]
,[50, "なかなかやりますね。"]
,[30, "もうちょっとです。がんばりましょう"]
,[0, "あれ、わざと間違えたのかな。"]
];

Quiz Generator(quiz-setting.js)の解説

q_w=450;
q_h=380;

クイズボックスの横幅と縦幅を記述。解答の選択数が5個の場合は縦幅を430以上にしてください。

q_title="・・・";

クイズのタイトルを記述してください。

openning_msg="・・・";

オープニングメッセージを記述してください。
下記にあるタグ・スタイルを指定できます。

q_no=10;

出題数を記述。問題数より少なくても可。多いとエラーになる。
問題数が20問、出題数が10問、ランダム出題の場合、問題の中からランダムに10問出題されます。ランダムですので毎回出題内容が変わります。
問題20問、出題10問、昇順出題の場合は先頭から10問が出題され、残りの10問は出題されません。

q_rnd=1;

出題順 0-昇順 1-ランダムに出題（一度出題した問題は再出題（重複）しません。）

q_dsp=1;

正解・不正解の表示 0-表示しない 1-表示する、正解か不正解か分からない事でエンディングが楽しみになるかも？

q_dtime=2;

正解・不正解を表示する場合、表示する秒数。

q_sound=1;

正解・不正解を表示する場合、サウンドを 0-使用しない 1-使用する。
使用するにした場合、オープニングメッセージに「※注：音が出ます。」と追加表示されます。

q_timer=10;

制限時間（秒） 0-設定なし　制限時間を設定するとカウントダウンします。時間切れの場合は不正解となり、次の問題に進みます。

var questions = [
["問題1", ["選択1-１", "選択1-2", "選択1-3", "選択1-4"], 1, 7]
,["問題2", ["選択2-１", "選択2-2", "選択2-3", "選択2-4"], 2, 7] 以下省略
];

[問題文,[解答の選択岐],正解番号,得点]のように記述する。問題数は何問でも続けて書くことが出来ます。例えば100問ある場合は100個列記してください。
問題文はタグ・スタイル（下記参照）を指定できます。

解答の選択岐は複数記述してください。5択の場合は5個書いてください。（例：...,["選択1", "選択2", "選択3", "選択4", "選択5"],... サンプル2の設定ファイル参照）
正解番号は選択岐の正解の番号（頭から1 2 3 4...と数える）を書いてください。

得点は任意の数字を書いてください。全て10でもOKです。例えば、簡単な問題がある場合、他の問題が10なら2とすることが出来ます。逆に難しい問題は15とする事ができます。これは難しい問題を正解した場合は得点が高くなるという事です。お好きなように得点を配分してください。

総得点の計算方法は、正解した得点の合計÷出題した得点の総合計（出題しなかった問題の得点は含まない）×100を四捨五入します。ですので満点は100点になります。得点の総合計は100にしなくてもOKです。

var endings = [
[100, "満点でしたよ。お見事です。"]
,[80, "う〜ん。さすがですね。"]
,[50, "なかなかやりますね。"]
,[30, "もうちょっとです。がんばりましょう"]
,[0, "あれ、わざと間違えたのかな。"]
];

[分岐点数,エンディングメッセージ]のように記述する。
分岐得点は分岐させる得点を書いてください。総得点がこの得点以上の場合、エンディングメッセージを決めています。例は5個ですが幾つでも書くことが出来ます。例えば3つで90,50,0、6つで100,85,50,35,20,0など。必ず最後は0になるようにしてください。最初は100でなくても構いません。90ならば総得点が90点以上のメッセージになります。
エンディングメッセージにはその分岐点数に合ったメッセージを記入してください。タグ・スタイルを指定できます。

タグ・スタイルの指定、注意事項

オープニング・エンディングメッセージと問題文はタグ・スタイルの指定が可能です。
例：<span style='color:#000;font-size:20px;'></span>,
<strong></strong>,<i></i>,<br />,<img src='image-URL' />など
使用できないタグ・文字は、<div id='id'></div>、ダブルクォーテーション、カンマです。ダブルクォーテーションは&quot;またはシングルクオーテーションを使用してください。タグ内もシングルクオーテーションで記述してください。

1ページに複数のクイズを作成したい場合、prototype.jsを使用している場合、ブログに貼り付けたい場合などダウンロードに付属しているiframe.htmlのようにiframeを使用してください。

問題文に画像を使いたい場合、imgタグを使用できますが、画像が大きい場合はスタイルシート(#quiz_questionのwidth,height、#quiz_wrapのwidth（縦幅は自動計算）、クイズボックスの横幅縦幅の設定)を変更する必要があります。(既定値は最大横幅350px 高さ4文字分64pxくらい)

サウンドを使用しない場合・正解不正解を表示しない場合は、サウンドファイル・画像ファイルは削除してしまって構いません。

StyleSheetです。

スタイルシートの一部（変更可の部分）
/*========================================
* Quiz Generator 用スタイルシート
* Copyright 2008 Sawa's Factory
* http://sawa-s.com/quiz-generator.html
========================================*/

/* クイズ出題ボックスの設定 */
#quiz_box{
  position: relative;
  overflow: hidden;
/* 背景や位置、文字の設定　お好きなように変更してください。 */
  margin: 0 auto;
  border: 2px solid #396;  /* ボックスの枠線 */
  background: #EEFFFF;  /* 背景色 url(･･･.jpg)で背景画像を入れることも可能 */
  color: #000;      /* 文字色 */
  font-size: 14px;
  font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS P Gothic","Osaka",Verdana,Arial, Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: 3px;
  line-height: 120%;
}
/* クイズタイトル */
#quiz_title{
  margin: 20px auto;
  width: 400px;
  height: 30px;
  text-align: center;
  font-size: 18px;
  line-height: 32px;
  background: #366;
  border: 1px solid #339;
  color: #FFE;
}
/* オープニング　メッセージ　フォントなどは変更可 */
#quiz_msg{
  margin: 40px auto;
  width: 400px;
  height: 300px;
  font-size: 18px;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
}
/* エンディング　メッセージ　変更可 */
span.end_tk{
  color: red;
  font-size: 18px;
}
この下にも続きますが、ここからは変更禁止です。

サンプル

サンプル1

問題数：5問、出題数：5問、出題順：ランダム、横幅：450、縦幅：380、
正解・不正解の表示：する、表示する秒数：2、サウンド：使用する、制限時間：10秒。
設定ファイルはこちら。（右クリックで保存）

サンプル2

問題数：8問、出題数：5問、出題順：ランダム、横幅：450、縦幅：430（最大解答選択数5）、 正解・不正解の表示：しない、制限時間：10秒。
設定ファイルはこちら。（右クリックで保存）

サンプル3

問題数：8問、出題数：8問、出題順：昇順、横幅：450、縦幅：380、正解・不正解の表示：する、表示する秒数：2、サウンド：使用しない、制限時間：設定しない。
設定ファイルはこちら。（右クリックで保存）

複数のクイズを作成する場合は、設定ファイルとHTMLファイルを別の名前で用意し（JS本体、スタイルシートは共用できます。）、iframeを使って書いてください。（このページのソース、クイズの中のソースを参照してください。Downloadした中にも入っています。）

動作確認

Win/ IE 6.0, 7.0 Firefox 2.0 Safari 3.1で動作確認しています。
IE 6.0では一部透過されませんが、またあとで見直します。画像ファイルの背景色とクイズの背景色を同じにする手もあります。

ライセンス

個人利用（非営利）の場合、無償でご利用いただけます。クレジットは削除禁止です。
商用・法人使用は有償（1000円）になります。
再配布・改造しての再配布は禁止させて頂きます。ご自身で改造して使用する場合、クレジットを削除しなければOKです。

このスクリプトを利用した方は、使用報告掲示板に利用報告をお願いいたします。

カスタマイズ

有償（300〜500円程度）にて設定ファイルのカスタマイズを致します。
スクリプトの大幅変更などのカスタマイズは有償（1000円）で承ります。
ご自分で設定できない、うまく動かないなど、お問い合わせからご相談ください。
こんなのが欲しいとリクエストがあれば掲示板またはお問い合わせに投稿お願いします。

更新履歴

2008年5月18日 公開

今後の改変予定：以前のFlash版にあった満点獲得者のお名前・メッセージの登録(CGI)を付ける予定。