クイズや心理テストに使えるスクリプトです。
質問に対する答えを選び、ボタンを押すと画面が変わって結果が表示されます。
また、答えを選択せずにボタンを押すと、エラーメッセージが表示されます。
このスクリプトは、1つのページに1つの質問しか設置できません。
複数の質問を設置したい場合は、Ver4をご覧下さい。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
function test(){
var moji=new Array();
moji[0]="そのと〜り";
moji[1]="はずれ";
moji[2]="いや、当たってるけど…";
var errors="答えを選択して下さい。";
var bodys='<body>';
var tagus='';
var tagus2='';
var dore=-1;
for(i=0; i<3; i++)
if(document.form1.elements[i].checked==true)dore=document.form1.elements[i].value;
if(dore==-1){alert(errors);}
else {
document.open();
document.write('<html>'+bodys);
document.write(tagus+moji[dore]+tagus2);
document.write('<br><br><a href="JavaScript:history.back();">戻る</a></body></html>');
document.close();}
}
//-->
</script>
</head>
<body>
質問：さて、私の今の状態を当ててください。
<form name="form1">
<input type="radio" name="q1" value="0">私はいま眠い<br>
<input type="radio" name="q1" value="1">私はいまお腹が空いている<br>
<input type="radio" name="q1" value="2">私はいまお金がない<br>
<input type="button" value="結果" onClick="test();">
</form>
・
・
・
</body></html>
[ 解説 ]
まず下の方のHTML部分をご覧下さい。
まずは質問事項を変更します。
「さて、私の今の状態を当ててください。」に、質問事項を書いてください。
続いて、答えの選択肢部分を書き換えて下さい。
「私はいま眠い」「私はいまお腹が空いている」「私はいまお金がない」の3つです。
次に、答えを設置します。
スクリプトの上から7〜9行目を変更します。
moji[0]="そのと〜り";
moji[1]="はずれ";
moji[2]="いや、当たってるけど…";
上から順に、
1番目の選択肢を選択した場合
2番目の選択肢を選択した場合
3番目の選択肢を選択した場合
に表示する答えです。
どこを正解にしても結構です。
結果が表示される画面の、ボディタグをカスタマイズしたい場合は、上から11行目の
var bodys='<body>';
のボディタグを変更して下さい。
壁紙やリンク文字の色変更、何でもお好きに設定してください。
また、結果の文字を大きくしたり色を付けたい場合は、その下の行の
var tagus='';
に、開始タグをお書き下さい。
終了タグは、
var tagus2='';
にお書き下さい。
例えば、ボディタグに背景色とテキスト色指定、結果の文字を太字でフォントサイズ4で設定したい場合。
以下のようになります。
var bodys='<body bgcolor="#ffffff" text="#000000">';
var tagus='<b><font size="4">';
var tagus2='</font></b>';
変更は、以上です。
（補足）
答えを3択から2択、または4択などラジオボタンの数を変更したい場合は、
まずボディ内でラジオボタンの数を増減させてください。
次に、上から16行目にある
for(i=0; i<3; i++)
の「3」の部分を、ラジオボタンの数に直してください。
2択にしたいならば
for(i=0; i<2; i++)
になります。
|
