WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
ZulbgVbsOiZuAhCj

■ JavaScript - サンプル集(257種類) - ゲーム
   - クイズor心理テストVer6

クイズや心理テストに使えるスクリプトです。
質問に対する答えを選び、ボタンを押すとテキストエリア内に結果が表示されます。
また、答えを選択せずにボタンを押すと、エラーメッセージが表示されます。

このスクリプトは、1つのページに複数の質問を設置する事が出来ます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

   function test(doko){
	errors="答えを選択して下さい。";
	dore=-1;
	for(i=0; i<3; i++)if(document.forms[doko].elements[i].checked==true)dore=document.forms[doko].elements[i].value;
	if(dore==-1)document.forms[doko].kekka.value=errors;
	else document.forms[doko].kekka.value=dore;
	}

//-->
</script>
</head>
<body>

質問1:さて、私の今の状態を当ててください。
<form name="form1">
  <input type="radio" name="q1" value="そのと〜り">私はいま眠い<br>
  <input type="radio" name="q1" value="はずれ">私はいまお腹が空いている<br>
  <input type="radio" name="q1" value="いや、当たってるけど…">私はいまお金がない<br>
  <textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
  <input type="button" value="結果" onClick="test('form1');">
</form>
<br>
質問2:明日は晴れるでしょうか?
<form name="form2">
  <input type="radio" name="q1" value="明日にならないとわかりません">はい<br>
  <input type="radio" name="q1" value="ぶ〜っ!">いいえ<br>
  <input type="radio" name="q1" value="そうだよね">どちらとも言えない<br>
  <textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
  <input type="button" value="結果" onClick="test('form2');">
</form>
 ・
 ・
 ・
</body></html>


[ 解説 ]

まず下の方のHTML部分をご覧下さい。

最初に、質問事項を変更します。

「さて、私の今の状態を当ててください。」に、1番目の質問事項を書いてください。
続いて、答えの選択肢部分を書き換えて下さい。
1番目の選択肢は、「私はいま眠い」「私はいまお腹が空いている」「私はいまお金がない」の3つです。

そして、各選択肢の値部分に、答えを記入しておきます。
例えば1番目の選択肢の場合、

<input type="radio" name="q1" value="そのと〜り">私はいま眠い<br>

「そのと〜り」の部分が、答えになります。
ここもお好きな文字を記入してください。
そのまま「はずれ」でも結構ですし、「おしい」とかでも結構です。

次に同じ要領で、2番目の質問事項を変更します。
「明日は晴れるでしょうか?」の部分に、お好きな質問をお書き下さい。

で、同じ要領で選択肢と、その内部に保有している答えを変更して下さい。

さらに質問事項を増やしたい場合は、まず

質問2:明日は晴れるでしょうか?
<form name="form2">
<input type="radio" name="q1" value="明日にならないとわかりません">はい<br>
<input type="radio" name="q1" value="ぶ〜っ!">いいえ<br>
<input type="radio" name="q1" value="そうだよね">どちらとも言えない<br>
<textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
<input type="button" value="結果" onClick="test('form2');">
</form>

をコピーペーストして下さい。

そして同じ要領で質問事項、選択肢、答えを変更して下さい。

で、最後に「form2」と書かれた場所を、数字の部分を1つ繰り上げて「form3」にして下さい。
2カ所有りますから、必ず2カ所とも変更して下さい。

例えば質問事項を1つ増やす場合、以下のようになります。

変更前
質問1:さて、私の今の状態を当ててください。
<form name="form1">
<input type="radio" name="q1" value="そのと〜り">私はいま眠い<br>
<input type="radio" name="q1" value="はずれ">私はいまお腹が空いている<br>
<input type="radio" name="q1" value="いや、当たってるけど…">私はいまお金がない<br>
<textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
<input type="button" value="結果" onClick="test('form1');">
</form>
<br>

質問2:明日は晴れるでしょうか?
<form name="form2">
<input type="radio" name="q1" value="明日にならないとわかりません">はい<br>
<input type="radio" name="q1" value="ぶ〜っ!">いいえ<br>
<input type="radio" name="q1" value="そうだよね">どちらとも言えない<br>
<textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
<input type="button" value="結果" onClick="test('form2');">
</form>
変更後
質問1:さて、私の今の状態を当ててください。
<form name="form1">
<input type="radio" name="q1" value="そのと〜り">私はいま眠い<br>
<input type="radio" name="q1" value="はずれ">私はいまお腹が空いている<br>
<input type="radio" name="q1" value="いや、当たってるけど…">私はいまお金がない<br>
<textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
<input type="button" value="結果" onClick="test('form1');">
</form>
<br>

質問2:明日は晴れるでしょうか?
<form name="form2">
<input type="radio" name="q1" value="明日にならないとわかりません">はい<br>
<input type="radio" name="q1" value="ぶ〜っ!">いいえ<br>
<input type="radio" name="q1" value="そうだよね">どちらとも言えない<br>
<textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
<input type="button" value="結果" onClick="test('form2');">
</form>
<br>

質問3:今は何月でしょうか?
<form name="form3">
<input type="radio" name="q1" value="もう終わったよ">10月<br>
<input type="radio" name="q1" value="正解">11月<br>
<input type="radio" name="q1" value="もうすぐね">12月<br>
<textarea name="kekka" cols="40" rows="5" wrap="soft"></textarea><br>
<input type="button" value="結果" onClick="test('form3');">
</form>
変更は、以上です。

(補足)

テキストエリア内の文字を改行させたい場合は、改行させたい箇所に「\n」を書いてください。

(補足)

答えを3択から2択、または4択などラジオボタンの数を変更したい場合は、 まずボディ内でラジオボタンの数を増減させてください。

次に、上から8行目にある
for(i=0; i<3; i++)
の「3」の部分を、ラジオボタンの数に直してください。

2択にしたいならば
for(i=0; i<2; i++)
になります。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.