| クイズゲーム ver.1.1 |
||||
◆サンプル |
||||
|
問題１：
次の○に文字を入れて 生存競争の激しさを表す 四字熟語を完成させてください。 ○肉○食
問題２：
次のうち、このサイトの名前はどれ？
問題３：
＜機能と特徴＞○×クイズです。 管理人あうが好きなお酒の種類は バーボンである。○か×か。 ・○×の２択や３択などのクイズが作れます (答えの数に制限はありません) ・最後に集計して点数を表示できます。 点数は問題ごとに設定できます。 |
||||
 |
|
|
|
|
 |
|
| 公開日 | 2003.2.21 | ||
| 最終更新日 | 2003.6.15 | ||
| バージョン | ver.1.1 | ||
| 動作確認 | IE6.0,NN4.7,NN7.0,Opera7.2 | ||
| cookie | 不使用 | ||
| CSS | 使用 | ||
| 更新履歴 | 2003.6.15 | ver1.1 | 設定をわかりやすいように改良(変更点：ソース１) |
 |
|
|
|
|
|
|
||
| 初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
|
|
|
||||
|
１．カスタマイズフォームを使って設定をしてください。 ２．ソース１を<head>〜</head>の間に書き込んでください。 ３．ソース２を<body>〜</body>の クイズを表示したい場所に書き込んでください。 ４．ソース３を<boyd>〜<body>の間に書き込んでください。 書き込む位置はソース２を書き込んだ位置以降 ただし、それがテーブル内の場合は<table>〜</table>の外にしてください。 よくわからない場合は</body>の直前に書き込んでください。 ５．ブラウザでテストしてみてください。 正常にクイズが動作すれば設置は完了です。 |
||||||
|
|
|||||
 |
|
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
|
|
|
■特にありません。
|
||||||
|
|
|||||
|
|
|
|
|
||
| カスタマイズフォーム | 補足説明 | 改造方法 | ||||
|
|
|
|
|
||
|
■集計時のメッセージを変更する。 //設定〜//ここまでの２〜３行目を変更してください。 ２行目の文中に満点の点数を表示させたい位置に(((満点)))， 獲得点数を表示させたい位置に(((得点)))と書き込むと 自動的にその部分に各点数を当てはめて表示します。 (((満点)))や(((得点)))は書き込まなくても動作はします。
q_mes = 'あなたの得点は(((満点)))点中(((得点)))点でした。';
３行目はもう一度始めからやる場合のリンクの文字を書き込みます。
q_retry = 'もう一度やる';
始めからやるリンクを表示させたくない場合は３行目を次のようにしてください。 q_retry = ""; ■各問題の点数を設定する。 //設定〜//ここまでの６行目以降を変更してください。 半角数字で設定してください。 []内が1なら１問目、2なら２問目の配点といった要領です。 q_ten[1] = 10; q_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_mid = new Array();
q_ten = new Array();
//設定
q_mes = 'あなたの得点は(((満点)))点中(((得点)))点でした。<br>'; //点数集計時のメッセージ
q_retry = 'もう一度やる'; //もう一度やるリンクの文字
q_ten[1] = 10; //1問目の点数
//ここまで
q_point1 = 0;
q_point2 = 0;
q_temp1 = 0;
q_temp2 = 0;
for(i in q_ten)
{q_point2 += q_ten[i]-0}
i = 0;
q_ii = 1;
function q_set()
{i = 0;
q_ii = 1;
q_point1 = 0;
with(document)
{if(document.all)
{while(document.all("q_question"+i))
{if(all("q_question"+i).offsetWidth > q_temp1)
{q_temp1 = all("q_question"+i).offsetWidth;}
if(all("q_question"+i).offsetHeight > q_temp2)
{q_temp2 = all("q_question"+i).offsetHeight;}
i++;}
q_table = '<table border="0" cellspacing="0" cellpadding="0" width="'+q_temp1+'" height="'+q_temp2+'">\n';
q_table += '<tr>\n<td valign="top"><div id="q_posi" class="q_ilayer"></div></td>\n</tr></table>';
all("q_spacer").innerHTML = q_table;
all("q_posi").innerHTML = all("q_question1").innerHTML;}
else if(document.getElementById)
{while(document.getElementById("q_question"+i))
{if(getElementById("q_question"+i).offsetWidth > q_temp1)
{q_temp1 = getElementById("q_question"+i).offsetWidth;}
if(getElementById("q_question"+i).offsetHeight > q_temp2)
{q_temp2 = getElementById("q_question"+i).offsetHeight;}
i++;}
q_table = '<table border="0" cellspacing="0" cellpadding="0" width="'+q_temp1+'" height="'+q_temp2+'">\n';
q_table += '<tr>\n<td valign="top"><div id="q_posi" class="q_ilayer"></div></td>\n</tr></table>';
getElementById("q_spacer").innerHTML = q_table;
getElementById("q_posi").innerHTML = getElementById("q_question1").innerHTML;}
else if(document.layers)
{while(document.layers["q_question"+i])
{layers["q_question"+i].visibility="hidden";
layers["q_question"+i].top = layers["q_posi"].pageY;
layers["q_question"+i].left = layers["q_posi"].pageX;
i++;}
layers["q_question1"].visibility="visible";}}}
function q_change(i)
{with(document)
{if(document.all)
{if(all("q_question"+(i-0+1)))
{all("q_posi").innerHTML = all("q_question"+(i-0+1)).innerHTML;
q_ii++;}
else
{q_point();}}
else if(document.getElementById)
{if(getElementById("q_question"+(i-0+1)))
{getElementById("q_posi").innerHTML = getElementById("q_question"+(i-0+1)).innerHTML;
q_ii++;}
else
{q_point();}}
else if(document.layers)
{layers["q_question"+i].visibility="hidden";
if(layers["q_question"+(i-0+1)])
{layers["q_question"+(i-0+1)].visibility="visible";
q_ii++;}
else
{q_point();}}}}
function q_quiz(i)
{if(i == 0)
{q_point1 += q_ten[q_ii]-0;}
with(document)
{if(document.all)
{all("q_layer").innerHTML = '<embed src="../gif/'+q_mid[i]+'" autostart="true" autoplay="true" repeat="1" loop="false" hidden="true">';}
else if(document.getElementById)
{getElementById("q_layer").innerHTML = '<embed src="../gif/'+q_mid[i]+'" autostart="true" autoplay="true" repeat="1" loop="false" hidden="true">';}
else if(document.layers)
{with(layers["q_layer"].document)
{open();
write('<embed src="../gif/'+q_mid[i]+'" autostart="true" autoplay="true" repeat="1" loop="false" hidden="true">');
close();}}}
q_change(q_ii);}
function q_point()
{q_mes2 = q_mes.replace("(((得点)))",q_point2);
q_mes2 = q_mes2.replace("(((満点)))",q_point1);
with(document)
{if(document.all)
{all("q_posi").innerHTML = q_mes2+'<br><a href="JavaScript:q_set();">'+q_retry+'</a>';}
else if(document.getElementById)
{getElementById("q_posi").innerHTML = q_mes2+'<br><a href="JavaScript:q_set();">'+q_retry+'</a>';}
else if(document.layers)
{with(layers["q_question0"].document)
{open();
write(q_mes2+'<br><a href="JavaScript:q_set();">'+q_retry+'</a>');
close();}
layers["q_question0"].visibility = "visible";}}}
function q_spacer()
{with(document)
{if(document.getElementById || document.all)
{open();
write('<div id="q_spacer"></div>');
close();}
else if(document.layers)
{while(document.layers["q_question"+i])
{if(layers["q_question"+i].clip.width > q_temp1)
{q_temp1 = layers["q_question"+i].clip.width;}
if(layers["q_question"+i].clip.height > q_temp2)
{q_temp2 = layers["q_question"+i].clip.height;}
i++;}
open();
write('<div id="q_posi" class="q_ilayer"></div>');
write('<spacer width="'+q_temp1+'" height="'+q_temp2+'" type="block"><br>');
close();}}}
with(document)
{open();
write('<style type="text/css">\n<!-\-\n');
write('.q_layer {position:absolute;visibility:hidden;}\n');
write('.q_ilayer{position:relative;}')
write('\n-\->\n<\/style>');
close();}
// -->
</script>
|
■ソース２(以下のソースを<body>〜<body>の間に書き込んでください) | |
<span id="q_layer" class="q-s-layer"></span> <div id="q_question0" class="q_layer"></div>
<!--問題ここから-->
<!--1個目の問題--> <div id="q_question1" class="q_layer"> 問題１：<br><br> 次の○に文字を入れて<br> 生存競争の激しさを表す<br> 四字熟語を完成させてください。<br><br> ○肉○食<br> <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> </div> <!--問題ここまで-->
<script language="JavaScript" type="text/javascript"><!-- q_spacer(); // --></script>
|
■ソース３(以下のソースを<body>〜</body>の間に書き込んでください) | |
<script language="JavaScript" type="text/javascript"><!-- q_set(); // --></script>
 |
|