Quiz Generator Multiple choice (複数選択式クイズ作成スクリプト)

自作 JSライブラリの複数選択式クイズジェネレータ(クイズ作成スクリプト)です。
Quiz Generator Scriptを複数選択式に改良しました。。

択一式のQuiz Generator Scriptはこちらです

複数選択式レベルアップQuiz Generator Scriptはこちらです

特徴

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

ダウンロード

設置方法

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

HTMLの記述。

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

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

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

/* ===================	オープニング&クイズ設定	=================== */
/* クイズボックスの横幅 縦幅*/
var q_w = 450;		//横幅 px  min=400
var q_h = 440;		//縦幅 px  選択数の増減によって調整してください。5択:440   6択:480
/* タイトル */
var q_title = "○○クイズ";
/* オープニングメッセージ &スタートボタン名 */
var opening_msg=[
	"このクイズは○○に関する複数選択式クイズです。"
	,"全部で10問あり、満点は100点です。"
	,""
	,"あなたは何点取れるでしょうか?"
	,""
];
opening_start_button = "START";
/* 出題数 */
var q_no = 10;
/* 出題順 0-昇順 1-ランダム */
var q_rnd = 0;
/* 正解・不正解の表示 0-しない 1-する */
var q_dsp = 1;
/* 正解・不正解を表示する場合、表示する秒数 */
var q_dtime = 2;
/* 正解・不正解を表示する場合、サウンドを使用  0-しない 1-する */
var q_sound = 0;
/* 制限時間(秒) 0-設定なし  */
var q_timer = 20;
/* 時間切れの場合 0-選択済みの回答で正誤判断する 1-正解としない  */
var q_timer_result = 0;
/* 選択岐をシャッフル 0-しない 1-する */
var q_sfl = 1;
/* 選択方法 0-指定された選択数を選択させる 1-選択数は自由にできる */
var sel_method = 1;
/*上記が0で選択数が決められている場合、選択個数以上を選択した場合のアラートメッセージ。 ""(空白)とするとアラートしない。 */
var sel_method_alert = "これ以上の選択は出来ません。";
/* 正解・不正解を表示する 画像ファイル(入れ替える場合のみ) 不正解画像,正解画像の順 */
var img_file = ["image/0.png","image/1.png"];
/* サウンドを鳴らす場合のサウンドファイル (入れ替える場合のみ) 不正解サウンド,正解サウンドの順 */
var sound_file = ["sound/0.wav","sound/1.wav"];
/* 選択岐の背景イメージファイル ノーマル、ホバー、選択済み画像の順 ノーマル、ホバーはCSSにも記述*/
var ans_img_file = ["image/btn_normal.png","image/btn_hover.png","image/btn_checked.png"];
/* 回答送信ボタン名 */
var ans_submit_name="選択 OK";

/* ====  問   題  ==== */
var questions = [
 ["問題1", 
	["選択1-1", "選択1-2", "選択1-3", "選択1-4", "選択1-5"], 
	[1,2], 
	7]
,["問題2", 
	["選択2-1", "選択2-2", "選択2-3", "選択2-4", "選択2-5"], 
	[1,2,3], 
	7]
,["問題3", 
	["選択3-1", "選択3-2", "選択3-3", "選択3-4", "選択3-5"], 
	[1,2], 
	10]
,["問題4", 
	["選択4-1", "選択4-2", "選択4-3", "選択4-4", "選択4-5"], 
	[1,2], 
	8]
,["問題5", 
	["選択5-1", "選択5-2", "選択5-3", "選択5-4", "選択5-5"], 
	[1,2,3], 
	7]
,["問題6", 
	["選択6-1", "選択6-2", "選択6-3", "選択6-4", "選択6-5"], 
	[1,2], 
	5]
,["問題7", 
	["選択7-1", "選択7-2", "選択7-3", "選択7-4", "選択7-5"], 
	[1,2], 
	12]
,["問題8", 
	["選択8-1", "選択8-2", "選択8-3", "選択8-4", "選択8-5"], 
	[1,2,3], 
	7]
,["問題9", 
	["選択9-1", "選択9-2", "選択9-3", "選択9-4", "選択9-5"], 
	[1,2], 
	10]
,["問題10", 
	["選択10-1", "選択10-2", "選択10-3", "選択10-4", "選択10-5"], 
	[1,2], 
	7]
];
/* ==== エンディング ==== */
var endings = [
	 [100, [
		"<span class='msg_tokuten'> う〜ん、お見事!!</span>"
		,"<span class='msg_tokuten'> あなたの得点は <strong>満点</strong>でした。</span>"
		,"",
		,"正解数は!seikai_num!問、正解率は!percent!%です。"
	]]
	,[80, [
		"<span class='msg_tokuten'>う〜ん。さすがですね。</span>"
		,"<span class='msg_tokuten'>あなたの得点は <strong>!tokuten!点</strong> でした。</span>"
		,""
		,"正解数は!seikai_num!問、正解率は!percent!%です。"
		,"再挑戦をお待ちしています。"
	]]
	,[50, [
		"<span class='msg_tokuten'>なかなかやりますね。</span>"
		,"<span class='msg_tokuten'>あなたの得点は <strong>!tokuten!点</strong> でした。</span>"
		,""
		,"正解数は!seikai_num!問、正解率は!percent!%です。"
		,"再挑戦をお待ちしています。"
	]]
	,[30, [
		"<span class='msg_tokuten'>もうちょっとです。がんばりましょう</span>"
		,"<span class='msg_tokuten'>あなたの得点は <strong>!tokuten!点</strong> でした。</span>"
		,""
		,"正解数は!seikai_num!問、正解率は!percent!%です。"
		,"再挑戦をお待ちしています。"
	]]
	,[0, [
		"<span class='msg_tokuten'>あれ、わざと間違えたのかな。</span>"
		,"<span class='msg_tokuten'>あなたの得点は <strong>!tokuten!点</strong> でした。</span>"
		,""
		,"正解数は!seikai_num!問、正解率は!percent!%です。"
		,"再挑戦をお待ちしています。"
	]]
];
/* リスタートボタン名 空白("")にするとボタンを非表示にする事ができます。 */
var restart_button = "再挑戦する";

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

var q_w = 450;
var q_h = 440;

クイズボックスの横幅と縦幅を記述。選択数が多い場合には縦幅を調整してください。

var q_title = "・・・";

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

var openning_msg = ["・・・","・・・","・・・",・・・];

オープニングメッセージを記述してください。
配列になっていて表示する際は改行が入ります。
下記にあるタグ・スタイルを指定できます。

var q_no = 10;

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

var q_rnd = 1;

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

var q_dsp = 1;

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

var q_dtime = 2;

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

var q_sound = 1;

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

var q_timer = 10;

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

var q_timer_result = 0;

時間切れの場合 0-選択済みの回答で正誤判断する 1-正解としない
選択途中でタイプアップになってしまった場合の処理方法です。

var q_sfl = 1;

選択岐のシャッフル 0-しない 1-する
選択岐をランダムに入れ替えることができます。シャッフルするに設定しておけば、以下の選択○-1に正解を置く事が出来ますので、問題数が多い場合には書きやすいと思います。

var sel_method = 1;

選択方法 0-指定された選択数を選択させる 1-選択数は自由にできる
0の場合、選択OKボタンは選択個数に達しないと表示されません。

var sel_method_alert = "これ以上の選択は出来ません。";

選択方法が0で選択数が決められている場合、選択個数以上を選択した場合のアラートメッセージ。 ""(空白)とするとアラートしない。

var img_file=["image/0.png","image/1.png"];

正解・不正解を表示する画像ファイルを入れ替える場合のみ変更してください。
var img_file=["不正解画像名","正解画像名"];、画像ファイルをフォルダに入れる場合はフォルダ名も指定してください。
例:var img_file=["image/fuseikai.png","image/seikai.png"];
画像は透過PNGまたは透過GIFを使った方が綺麗です。

var sound_file=["sound/0.wav","sound/1.wav"];

サウンドファイルを入れ替える場合のみ変更してください。
var img_file=["不正解サウンド名","正解サウンド名"];、サウンドファイルをフォルダに入れる場合はフォルダ名も指定してください。
例:var sound_file=["sound/fuseikai.wav","sound/seikai.wav"];
サウンドファイルはWAV,MIDなどembedタグで動作するものを指定してください。またサウンドファイル先読みしますが、サイズが小さいほうが良いでしょう。

var ans_img_file = ["image/btn_normal.png","image/btn_hover.png","image/btn_checked.png"];

選択岐の背景イメージファイル ノーマル、ホバー、選択済み画像の順です。
選択岐ボタンをご自身で作られる場合は変更してください。
スタイルシートでは指定していません。
チェックボタンのイメージファイルはこちらから頂き、加工しました。

var ans_submit_name="選択 OK";

回答送信ボタン名を入れてください。例:送信・回答チェックなど。

var questions = [
["問題1",
["選択1-1", "選択1-2", "選択1-3", "選択1-4", "選択1-5"],
[1,2],
7]
,["問題2",
["選択2-1", "選択2-2", "選択2-3", "選択2-4", "選択2-5"],
[1,2,3],
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点以上のメッセージになります。
エンディングメッセージにはその分岐点数に合ったメッセージを記入してください。タグ・スタイルを指定できます。
エンディングメッセージには以下の文字列(! !を先頭と最後に入れる)を含めることで置換されます。これら全てを使わなくても構いません。どれを使うかはあなたが判断してください。

置換文字列名称解説
!tokuten!得点得点が入ります。
!seikai_num!正解数正解数が入ります。
!percent!正解率(%)正解数÷出題数×100を四捨五入した値が入ります。
var restart_button = "再挑戦する";

リスタートのボタン名を入れてください。例:Restart など
空白("")にするとボタンを非表示にする事ができます。

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

オープニング・エンディングメッセージと問題文はタグ・スタイルの指定が可能です。
例:<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-Multiple choice
 * Copyright 2013 Sawa's Factory
 * http://sawa-s.com/quiz-generator-mc.html
========================================*/

/* クイズ出題ボックスの設定 */
#quiz_box{
	position: relative;
	overflow: hidden;
/* 背景や位置、文字の設定 お好きなように変更してください。  */
	margin: 0 auto;
	border: 2px outset #69F;	/* ボックスの枠線 */
	background: #EEFFFF;	/* 背景色 url(・・・.jpg)で背景画像を入れることも可能 */
	color: #000;			/* 文字色 */
	font-size: 14px;
	font-family: "Meiryo UI","メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック", "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: 400px;
	font-size: 18px;
	text-align: center;
	font-size: 15px;
	line-height: 25px;
}
/* エンディング 得点表示 変更可 */
span.msg_tokuten{
	color: red;
	font-size: 18px;
}
/*--   正解・不正解画像の表示    表示位置(top,left,width)は自由に変えてください --*/
#dsp0, #dsp1 {
	position: absolute;
	top: 80px;
	left: 0px;
	width: 100%;
	margin: 0; padding: 0;
	z-index: 11;
	display:none;
	text-align: center;
}
/*以下省略。*/

サンプル

サンプル1

基本設定・問題はすべて同じです。設定方法は択一式のQuiz Generator Scriptを参照してください。
制限時間なし、選択方法-指定された選択数を選択、アラートメッセージあり
設定ファイルはこちら。(右クリックで保存)

サンプル2

制限時間なし、選択方法-選択数は自由にできる。
問題文に選択数は書いてありません。
設定ファイルはこちら。(右クリックで保存)

サンプル3

制限時間あり、時間切れの場合-正解としない、選択方法-指定された選択数を選択、アラートメッセージなし
設定ファイルはこちら。(右クリックで保存)

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

動作確認

Win/ IE7〜10 Safari Chromaで動作確認しています。
IE 6.0では一部透過されません。

ライセンス

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

このスクリプトを使用した、いかなる損害に対しても開発者は一切の責任を負いません。

このスクリプトを利用した方は、使用報告掲示板に利用報告をして頂けると幸いです。

カスタマイズ

有償にてカスタマイズもお受けいたします。
お問い合わせから詳しいカスタマイズ方法など送信してください。

更新履歴

2013年2月 9日 公開