| クイズ・ゲーム (効果音付き) ver.1.1 |
|||||||
◆サンプル |
|||||||
・○×の２択や３択などのクイズが作れます (答えの数に制限はありません) ・正解不正解に応じて効果音を鳴らす事が出来ます。 ・最後に集計して点数を表示できます。 点数は問題ごとに設定できます。 |
|||||||
 |
|
|
|
|
|||
 |
|
| 公開日 | 2003.2.21 | ||
| 最終更新日 | 2003.6.15 | ||
| バージョン | ver.1.1 | ||
| 動作確認 | IE6.0,NN4.7,NN7.1,Opera7.2 | ||
| cookie | 不使用 | ||
| CSS | 使用 | ||
| 更新履歴 | 2003.6.15 | ver1.1 | 設定をわかりやすいように改良(変更点：ソース１) 音声の呼び出しを高速化(変更点：ソース１) |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の クイズを表示したい場所に書き込んでください。 ４．ソース３を<boyd>〜<body>の間に書き込んでください。 書き込む位置はソース２を書き込んだ位置以降 ただし、それがテーブル内の場合は<table>〜</table>の外にしてください。 よくわからない場合は</body>の直前に書き込んでください。 ５．ブラウザでテストしてみてください。 正常にクイズが動作すれば設置は完了です。 |
||||||
|
|
|||||
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
|
|||
|
１．ソース１を<head>〜</head>の間に書き込んでください。 ２．ソース２を<boyd>〜<body>の間の クイズを表示したい位置に書き込んでください。 ３．ソース３を<boyd>〜<body>の間に書き込んでください。 書き込む位置はソース２を書き込んだ位置以降 ただし、それがテーブル内の場合は<table>〜</table>の外にしてください。 よくわからない場合は</body>の直前に書き込んでください。 ４．//設定〜//ここまでの１〜２行目を 鳴らしたい音声ファイルのパスに変更してください。 １行目が正解、２行目が不正解の時の音になります。 q_s_mid[0] = 'pinpon.mid'; q_s_mid[1] = 'bu.mid'; ５．ブラウザでテストしてみてください。 正常にクイズが動作すれば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■集計時のメッセージを変更する。 //設定〜//ここまでの５〜６行目を変更してください。 ５行目の文中に満点の点数を表示させたい位置に(((満点)))， 獲得点数を表示させたい位置に(((得点)))と書き込むと 自動的にその部分に各点数を当てはめて表示します。 (((満点)))や(((得点)))は書き込まなくても動作はします。
q_s_mes = 'あなたの得点は(((満点)))点中(((得点)))点でした。<br>';
６行目はもう一度始めからやる場合のリンクの文字を書き込みます。
q_s_retry = 'もう一度やる';
始めからやるリンクを表示させたくない場合は６行目を次のようにしてください。 q_s_retry = ""; ■各問題の点数を設定する。 //設定〜//ここまでの９行目を変更してください。 半角数字で設定してください。 []内が1なら１問目、2なら２問目といった要領です。 q_s_ten[1] = 10; q_s_ten[2] = 90;■問題とその答えを変更する。 『問題ここから〜問題ここまで』の<div>〜</div>の間に 問題と選択肢を書き込んでください。 選択肢は各イベントハンドラなどで 関数q_quiz()を呼び出してください。 この際、正解の選択肢には引数を0、 不正解の選択肢には引数を1としてください。 <form> <input type="button" value="焼肉定食" onClick="q_quiz(1)"> <input type="button" value="弱肉強食" onClick="q_quiz(0)"> <input type="button" value="焼肉定食" onClick="q_quiz(1)"> </form>■問題を増やす。 //設定〜//ここまでの１０行目を１行増やし 該当個所の数字を増やしてしてください。
//点数設定
q_ten[1] = 10;
q_ten[2] = 80;
q_ten[3] = 10;
次にソース２の下から３行目よりも前に 下記のソースを書き込んで、該当個所の数字を増やしてください。 ２問目なら2、３問目なら3といった要領です。 <div>〜</div>の間に問題と選択肢を書き込めば 問題が増やせます
<div id="q_question1" class="q_layer"></div>
|
||||||
|
|
|||||
 |
 |
|
|
■ソース１(以下のソースを<head>〜</head>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
//ver.1.1
q_s_mid = new Array();
q_s_ten = new Array();
//設定
q_s_mes = 'あなたの得点は(((満点)))点中(((得点)))点でした。<br>'; //点数集計時のメッセージ
q_s_retry = 'もう一度やる'; //もう一度やるリンクの文字
q_s_mid[0] = 'pinpon.mid'; //正解の時の音声ファイルのパス
q_s_mid[1] = 'bu.mid'; //不正解の時の音声ファイルのパス
q_s_ten[1] = 10; //1問目の点数
//ここまで
q_s_point1 = 0;
q_s_point2 = 0;
q_s_temp1 = 0;
q_s_temp2 = 0;
for(i in q_s_ten)
{q_s_point2 += q_s_ten[i]-0}
q_s_ii = 1;
function q_s_set()
{i = 0;
q_s_ii = 1;
q_s_point1 = 0;
with(document)
{if(document.all)
{while(document.all("q_s_question"+i))
{if(all("q_s_question"+i).offsetWidth > q_s_temp1)
{q_s_temp1 = all("q_s_question"+i).offsetWidth;}
if(all("q_s_question"+i).offsetHeight > q_s_temp2)
{q_s_temp2 = all("q_s_question"+i).offsetHeight;}
i++;}
q_s_table = '<table border="0" cellspacing="0" cellpadding="0" width="'+q_s_temp1+'" height="'+q_s_temp2+'">\n';
q_s_table += '<tr>\n<td valign="top"><div id="q_s_posi" class="q_s_ilayer"></div></td>\n</tr></table>';
all("q_s_spacer").innerHTML = q_s_table;
all("q_s_posi").innerHTML = all("q_s_question1").innerHTML;}
else if(document.getElementById)
{while(document.getElementById("q_s_question"+i))
{if(getElementById("q_s_question"+i).offsetWidth > q_s_temp1)
{q_s_temp1 = getElementById("q_s_question"+i).offsetWidth;}
if(getElementById("q_s_question"+i).offsetHeight > q_s_temp2)
{q_s_temp2 = getElementById("q_s_question"+i).offsetHeight;}
i++;}
q_s_table = '<table border="0" cellspacing="0" cellpadding="0" width="'+q_s_temp1+'" height="'+q_s_temp2+'">\n';
q_s_table += '<tr>\n<td valign="top"><div id="q_s_posi" class="q_s_ilayer"></div></td>\n</tr></table>';
getElementById("q_s_spacer").innerHTML = q_s_table;
getElementById("q_s_posi").innerHTML = getElementById("q_s_question1").innerHTML;}
else if(document.layers)
{while(document.layers["q_s_question"+i])
{layers["q_s_question"+i].visibility="hidden";
layers["q_s_question"+i].top = layers["q_s_posi"].pageY;
layers["q_s_question"+i].left = layers["q_s_posi"].pageX;
i++;}
layers["q_s_question1"].visibility="visible";}}}
function q_s_change(i)
{with(document)
{if(document.all)
{if(all("q_s_question"+(i-0+1)))
{all("q_s_posi").innerHTML = all("q_s_question"+(i-0+1)).innerHTML;
q_s_ii++;}
else
{q_s_point();}}
else if(document.getElementById)
{if(getElementById("q_s_question"+(i-0+1)))
{getElementById("q_s_posi").innerHTML = getElementById("q_s_question"+(i-0+1)).innerHTML;
q_s_ii++;}
else
{q_s_point();}}
else if(document.layers)
{layers["q_s_question"+i].visibility="hidden";
if(layers["q_s_question"+(i-0+1)])
{layers["q_s_question"+(i-0+1)].visibility="visible";
q_s_ii++;}
else
{q_s_point();}}}}
function q_s_quiz(i)
{if(i == 0)
{q_s_point1 += q_s_ten[q_s_ii]-0;}
with(document)
{if(document.all)
{all("q_s_layer").innerHTML = '<embed src="'+q_s_mid[i]+'" autostart="true" autoplay="true" repeat="1" loop="false" hidden="true" width="1" height="1">';}
else if(document.getElementById)
{getElementById("q_s_layer").innerHTML = '<embed src="'+q_s_mid[i]+'" autostart="true" autoplay="true" repeat="1" loop="false" hidden="true" width="1" height="1">';}
else if(document.layers)
{with(layers["q_s_layer"].document)
{open();
write('<embed src="'+q_s_mid[i]+'" autostart="true" autoplay="true" repeat="1" loop="false" hidden="true" width="1" height="1">');
close();}}}
q_s_change(q_s_ii);}
function q_s_point()
{q_s_mes2 = q_s_mes.replace("tensu-1",q_s_point2);
q_s_mes2 = q_s_mes2.replace("tensu-2",q_s_point1);
with(document)
{if(document.all)
{all("q_s_posi").innerHTML = q_s_mes2+'<br><a href="JavaScript:q_s_set();">'+q_s_retry+'</a>';}
else if(document.getElementById)
{getElementById("q_s_posi").innerHTML = q_s_mes2+'<br><a href="JavaScript:q_s_set();">'+q_s_retry+'</a>';}
else if(document.layers)
{with(layers["q_s_question0"].document)
{open();
write(q_s_mes2+'<br><a href="JavaScript:q_s_set();">'+q_s_retry+'</a>');
close();}
layers["q_s_question0"].visibility = "visible";}}}
function q_s_spacer()
{with(document)
{if(document.getElementById || document.all)
{open();
write('<div id="q_s_spacer">\n');
for(i in q_s_mid[0])
{write('<embed src="'+q_s_mid[i]+'" autostart="false" autoplay="false" repeat="1" loop="false" hidden="true" width="1" height="1">');}
write('</div>');
close();}
else if(document.layers)
{while(document.layers["q_s_question"+i])
{if(layers["q_s_question"+i].clip.width > q_s_temp1)
{q_s_temp1 = layers["q_s_question"+i].clip.width;}
if(layers["q_s_question"+i].clip.height > q_s_temp2)
{q_s_temp2 = layers["q_s_question"+i].clip.height;}
i++;}
open();
write('<div id="q_s_posi" class="q_s_ilayer"></div>\n');
write('<div slass="q_s_layer">\n')
for(i in q_s_mid)
{write('<embed src="'+q_s_mid[i]+'" autostart="false" autoplay="false" repeat="1" loop="false" hidden="true" width="1" height="1">\n');}
write('</div>')
write('\n<spacer width="'+q_s_temp1+'" height="'+q_s_temp2+'" type="block"><br>');
close();}}}
with(document)
{open();
write('<style type="text/css">\n<!-\-\n');
write('.q_s_layer {position:absolute;visibility:hidden;}\n');
write('.q_s_ilayer{position:relative;}')
write('\n-\->\n<\/style>');
close();}
// -->
</script>
|
■ソース２(以下のソースを<body>〜<body>の間に書き込んでください) | |
<span id="q_s_layer" class="q-s-layer"></span> <div id="q_s_question0" class="q_s_layer"></div>
<!--問題ここから-->
<!--1個目の問題--> <div id="q_s_question1" class="q_s_layer"> 問題１：<br><br> 次の○に文字を入れて<br> 生存競争の激しさを表す<br> 四字熟語を完成させてください。<br><br> ○肉○食<br> <form> <input type="button" value="焼肉定食" onClick="q_s_quiz(1)"> <input type="button" value="弱肉強食" onClick="q_s_quiz(0)"> <input type="button" value="鶏肉朝食" onClick="q_s_quiz(1)"> </form> </div>
<!--問題ここまで-->
<script language="JavaScript" type="text/javascript"><!-- q_s_spacer(); // --></script>
|
■ソース３(以下のソースを<body>〜</body>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript"><!-- q_s_set(); // --></script>
 |
|