プロが教える店舗&オフィスのセキュリティ対策術

どうしても分からなくて困っているので、
どなたか教えてください。

質問は、良くHPを見ていると、クイズや、テストや、性格判断等で、HP上で、質問の答えを選択していくと、その値の答えや、選択した値を合計した結果等をその場で、判断できるようなページを見かけますが、
そういうHPは、どうすれば作れるのでしょうか?

私も、ああいう感じで、英語のレベルテストが、その場で出来るようなものを
作成したいのですが、さっぱり分からなくて・・・
ご指導のほどよろしくお願いします。

A 回答 (7件)

>振り分けて表示するのは、どこを置き換えたら良いのか分からなくて


こうなるハズです。
function total(){
var answer = 0
for(var i = 0; i <= 7; i++){
if(document.mondai.elements[i].checked){
answer += eval(document.mondai.elements[i].value);
}
}
if(answer < 5){
window.open("./low.html?" + answer,"AnsWin","toolbar=no,lcation=no");
}
else{
window.open("./high.html?" + answer,"AnsWin","toolbar=no,lcation=no");
}

>もちろんです。どんなソースなんでしょう・・・
わたしが、最初につくったものです。すこし変更してありますが。
------------------------------
・question.html
<HTML>
<HEAD>
<TITLE>YES/NO Quiz</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
function total(){
radioLength = new Array(4,4,6); //各FORMのradioの数
var loopCount = new Array(0,0,0) //各FORMの初期点数
for(var j = 0; j <= loopCount.length - 1; j++){
for(var i = 0; i <= radioLength[j] - 1; i++){
if(document.forms[j].elements[i].checked){
loopCount[j] += eval(document.forms[j].elements[i].value);
}
}
}
// 結果を別のWindowへ渡す
window.open("./answer.html?" + loopCount.join(";"),"AnsWin", "toolvar=no");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mondai1"><!-- forms[0] -->
<P>Lesson: 1) ◯◯に関する問題:<BR></P>
問題1<BR>
<INPUT TYPE="radio" NAME="q01" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q01" VALUE="0">答え2<BR>
問題2<BR>
<INPUT TYPE="radio" NAME="q02" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q02" VALUE="0">答え2<BR>
</FORM>
<FORM NAME="mondai2"><!-- forms[1] -->
<P>Lesson: 2) ××に関する問題:<BR></P>
問題1<BR>
<INPUT TYPE="radio" NAME="q03" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q03" VALUE="0">答え2<BR>
問題2<BR>
<INPUT TYPE="radio" NAME="q04" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q04" VALUE="0">答え2<BR>
</FORM>
<FORM NAME="mondai3"><!-- forms[2] -->
<P>Lesson: 3) △△に関する問題:<BR></P>
問題1<BR>
<INPUT TYPE="radio" NAME="q05" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q05" VALUE="0">答え2<BR>
問題2<BR>
<INPUT TYPE="radio" NAME="q06" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q06" VALUE="0">答え2<BR>
問題3<BR>
<INPUT TYPE="radio" NAME="q07" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q07" VALUE="0">答え2<BR>
</FORM>
<FORM NAME="kaitou">
<INPUT TYPE="button" VALUE="回答" onClick="total()">
</FORM>
</BODY>
</HTML>
------------------------------
・answer.html
<HTML>
<HEAD><TITLE>Yes/No Quiz</TITLE></HEAD>
<BODY>
<H1>結果</H1>
<SCRIPT LANGUAGE="javascript">
<!--
var GetScore = location.search;
var totalScore = GetScore.split('?');
var score = totalScore[1].split(';');
var totalPoint = 0;
for(var i = 0; i <= score.length - 1; i++){
totalPoint += eval(score[i]);
document.write('Lesson ' + (i + 1) + ": " + score[i] + ' point<BR>');
}
document.write('<P>合計 ' + totalPoint + ' 点<BR></P>');
//-->
</SCRIPT>
</BODY>
</HTML>
------------------------------
このソースに関しては、詳しく説明しません。
    • good
    • 0
この回答へのお礼

本当に、本当にお世話になりありがとうございました。
こんなに親切に誠意を持って教えて頂けて心から感謝しています。ykcさんって本当に知識が豊富で、良くお分かりになるんですね。凄い!ykcさんのお力添えで、おかげさまで私自身では、とても出来ないような事が出来そうです。本当にありがとうございました。

それと、私のメールアドレスを書きますので、よろしかったらメールでもくださいね。
milkylove23@hotmail.com

お礼日時:2001/03/25 16:47

>入力しながら答えがカウントされない方がいいかな・・・


<FORM NAME="kekka">
<INPUT TYPE="text" NAME="kekkabox" SIZE="20">
</FORM>
↑残してあるなら、削除してかまいません。これは動的にスコアを表示させるものです。

>ご気分害されていませんか?
いへ。べつにそんなわけではないですよ。ただ、あまり時間が空かないほうがいいかなぁとおもって、あまり推敲せずにポストしたもので(^^;

>どこかお勧めはありますか?
Java Scriptにしても、CGIにしても、HTMLに関する知識が必須ですので、とほほさんの「とほほのWWW入門( http://wakusei.cplaza.ne.jp/twn/www.htm )」でしょうか。

>下記の部分と置きかえれば良いのでしょうか?
「//書き換えた」のある行です。
得点が5点未満なら「low.html」へ。それ以上なら「high.html」を開きます。

# 最後に掲載したいソースがあるんですが、だいじょうぶでしょうか?

この回答への補足

ご気分害されていないとお聞きしてホッといたしました。

とほほさんのページも見てみました。
参考にして、勉強してみたいと思います。ありがとうございました。

振り分けて表示するのは、どこを置き換えたら良いのか分からなくて、まだ試していません。
どういうわけかOKwebさんから、Answerが入ったというお知らせが入るのが今日だったので、YKCさんが23日に、お答え頂いてるのに、気がつくのが遅くなっちゃて、すぐ試す事が出来ませんでした。今日は、ちょっと忙しいので明日試してみたいと思います。

># 最後に掲載したいソースがあるんですが、だいじょうぶでしょうか?

もちろんです。どんなソースなんでしょう・・・
(’-’。)(。’-’)。ワクワク 

補足日時:2001/03/25 10:03
    • good
    • 0

>正解のトータルを、まとめて表示するように変更は出来ないんですよね?


alertは音がでるので、別ページへ表示するようにしたのですが。
alertのかわりに「prompt("合計点", answer);」としてもよいのですが、ちょっとかっこ悪いです。
というか、新しく開いたウインドウにでませんか?

>得点が分からない方がいいかなーと思ったんですが
集計とか、一人1回とかだけに限定したいんですか?
それだったらJava Scriptではムリです。CGIに投げてください。

>でも、難しいんでしょうね。教えて欲しいな・・・
たいして難しくはないですよ。
Tips系のサイトでなくとも、Java Scriptの基本文法がのせてあるサイトなら、たいがいは掲載されてるとおもいます。
ex)
if(answer < 5){
window.open("./low.html?" + answer,"AnsWin","toolbar=no,lcation=no");
}
else{
window.open("./high.html?" + answer,"AnsWin","toolbar=no,lcation=no");
}

この回答への補足

今回も、ご教授頂きありがとうございます。

>というか、新しく開いたウインドウにでませんか?
はい。出てるんですが、入力しながら答えがカウントされない方がいいかな・・・と少し思ったんですが、今のでも、全然OKですし、凄い満足&感謝しています。
ご気分害されていませんか?素人で訳がわからないことを申し上げてすいません。

>Tips系のサイトでなくとも、Java Scriptの基本文法がのせてあるサイトなら・・・

とありますが、どこかお勧めはありますか?

今回、例として教えていただいた、
ex)

if(answer < 5){
window.open("./low.html?" + answer,"AnsWin","toolbar=no,lcation=no");
}
else{
window.open("./high.html?" + answer,"AnsWin","toolbar=no,lcation=no");
}

というのを、前回教えていただいた、下記の部分と置きかえれば良いのでしょうか?

if(document.mondai.elements[i].checked){
answer += eval(document.mondai.elements[i].value);
}
}
window.open("./answer.html?" + answer,"AnsWin","toolbar=no,nocation=no"); //書き換えた
}

補足日時:2001/03/22 22:58
    • good
    • 0

>アラートでもOKなんですが、アラートのマークとか、


> 音がない方がベターなのですが・・・
とのことですので、はじめの希望のように、次のページへ移行するように組み替えました。
なるべくわかりやすく、便利(汎用的)にしたつもりですが、不明なところは補足しますので、遠慮なくどうぞ(案外ヒマなもので(^^;)。
「question.html」と「answer.html」は、同一のディレクトリにあるものとします。

-----------------------------
・question.html
<SCRIPT LANGUAGE="javascript">
<!--
function total(){
var answer = 0
for(var i = 0; i <= 7; i++){
if(document.mondai.elements[i].checked){
answer += eval(document.mondai.elements[i].value);
}
}
window.open("./answer.html?" + answer,"AnsWin","toolbar=no,nocation=no"); //書き換えた
}
//-->
</SCRIPT>
<FORM NAME="mondai">
問題1<BR>
以下、同一のため省略。
-----------------------------
・answer.html
<H1>Answer</H1>
<SCRIPT LANGUAGE="javascript">
<!--
var GetScore = location.search;
var score = GetScore.split('?');
document.write('あなたの得点は ' + score[1] + ' です<BR>');
//-->
</SCRIPT>
得点が振るわなかったひとは、もうすこし勉強しましょう。<BR>
-----------------------------

question.htmlのwindow.openの仕組みとif文の使い方がわかれば「得点よって違うページへ移行させる」ことも可能です。

>すごい!あんな事もJAVA SCRIPTで出来ちゃうんですね!
ソースを参照すれば、回答がわかってしまうという脆弱姓もあります。
CGIでやるほうが、もっといろいろなことができるので、ほんとうはベストなんですけど・・・
習得までの時間を考えるとしばらくはJAVA SCRIPTでしのぐしかないのでしょうかね。

この回答への補足

ykcさん、またまたまた、詳しく教えていただいて、本当にありがとうございます。m(_ _)mペコッ!なんてお優しいのでしょう!感謝いたします。

さて、今日も早速、HPに張り付けて確認してみました。
あ、サーバーにもアップしないと・・・
むむ!今日のも、凄い!本当にいろいろ出来ちゃうんですねー!すばらしい!

今回、教えて頂いた物は、アラートが出る時みたいに
正解のトータルを、まとめて表示するように変更は出来ないんですよね?<今でも、凄い良いのですが、入力しながら、得点が分からない方がいいかなーと思ったんですが>

>question.htmlのwindow.openの仕組みとif文の使い方>がわかれば「得点よって違うページへ移行させる」こと>も可能です。

なるほど。それはすごく良いですね!
でも、難しいんでしょうね。教えて欲しいな・・・
もし、ご迷惑でなければ、教えてくださいませんか?
私の居る所には、日本の本屋さんが無くて、もはやYKCさんだけが頼りです。今まで、教えていただいたのも、凄く勉強になって、助かりました。

>遠慮無くどうぞ
とおっしゃっていただいて、本当に感謝しています。
いろいろお願いして申し訳ございませんが、
更なる、ご指導をよろしくお願いいたします。

補足日時:2001/03/21 14:56
    • good
    • 0

>それぞれ質問項目や、答えにすればいいのですか?


そうです。サンプルはYes/No形式を想定してます。
VALUEの値を変更することで、結果の値を変更することができます。
問題数を増やすときは「NAME="q06"」のように、NAMEを増やしてください。同じNAMEであれば、同じ範囲(問題への回答)になります。
あまり問題数を増やすと、ブラウザが落ちますので注意が必要です。

>まとめて表示したいのですが、
onClick="total()"をラジオボタンからsubmitへと関連づけを変更して、少し書き換えます。
Java Scriptを使用する場合は、次のページへ表示させるのは難しいです。
<SCRIPT LANGUAGE="javascript">
function total(){
var answer = 0
for(var i = 0; i <= 7; i++){
if(document.mondai.elements[i].checked){
answer += eval(document.mondai.elements[i].value);
}
}
alert("合計: " + answer + "点"); //書き換えた
}
</SCRIPT>
<FORM NAME="mondai">
問題1<BR>
<INPUT TYPE="radio" NAME="q01" VALUE="1">答え1<BR> <!-- 書き換えた -->
<INPUT TYPE="radio" NAME="q01" VALUE="0">答え2<BR>
問題2<BR>
<INPUT TYPE="radio" NAME="q02" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q02" VALUE="0">答え2<BR>
問題3<BR>
<INPUT TYPE="radio" NAME="q03" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q03" VALUE="0">答え2<BR>
問題4<BR>
<INPUT TYPE="radio" NAME="q04" VALUE="1">答え1<BR>
<INPUT TYPE="radio" NAME="q04" VALUE="0">答え2<BR>
<INPUT TYPE="submit" onClick="total()"> <!-- 追加した -->
</FORM>

>また、個人的に有償で設置代行して頂く事は可能でしょうか?
場所によっては無償でも可能ではありますが・・・
保守・更新・管理ということを考えたら、やはりおぼえるのが一番かとおもいますよ。

この回答への補足

早速、HPで表示して見ました。
すごい!あんな事もJAVA SCRIPTで出来ちゃうんですね!
ありがとうございます。ほぼ希望が叶う感じです。

合計点の表示を、アラート以外で、<ただのBOXがでるときみたいに>同じように出来ますでしょうか?
アラートでもOKなんですが、アラートのマークとか、
音がない方がベターなのですが・・・

度々、いろいろお聞きして申し訳ありませんが、よろしくお願い致します。

また、設置代行の件
>場所によっては無償でも可能ではありますが・・・
とのご回答をいただき、ありがとうございます。
お忙しい所、夜遅くにご回答頂くだけで恐縮なのにすいません。でも、私が居るのは海外なので、お願いしたいのは山々ですが、ちょっと無理ですね。ykcさんのおっしゃるとおり、自分で出来るのが1番ですよね。また、分からない事があれば、OK WEBに来ますので助けてくださいませ。

補足日時:2001/03/20 10:05
    • good
    • 0

リアクションがないので、Java Scriptを使ったサンプルを掲載しておきます。



<SCRIPT LANGUAGE="javascript">
<!--
function total(){
var answer = 0
for(var i = 0; i <= 9; i++){ //☆
if(document.mondai.elements[i].checked){
answer += eval(document.mondai.elements[i].value);
}
}
document.kekka.kekkabox.value = answer;
}
//-->
</SCRIPT>
<FORM NAME="kekka">
<INPUT TYPE="text" NAME="kekkabox" SIZE="20">
</FORM>
<FORM NAME="mondai">
問題1<BR>
<INPUT TYPE="radio" NAME="q01" VALUE="1" onClick="total()">答え1<BR>
<INPUT TYPE="radio" NAME="q01" VALUE="0" onClick="total()">答え2<BR>
問題2<BR>
<INPUT TYPE="radio" NAME="q02" VALUE="1" onClick="total()">答え1<BR>
<INPUT TYPE="radio" NAME="q02" VALUE="0" onClick="total()">答え2<BR>
問題3<BR>
<INPUT TYPE="radio" NAME="q03" VALUE="1" onClick="total()">答え1<BR>
<INPUT TYPE="radio" NAME="q03" VALUE="0" onClick="total()">答え2<BR>
問題4<BR>
<INPUT TYPE="radio" NAME="q04" VALUE="1" onClick="total()">答え1<BR>
<INPUT TYPE="radio" NAME="q04" VALUE="0" onClick="total()">答え2<BR>
問題5<BR>
<INPUT TYPE="radio" NAME="q05" VALUE="1" onClick="total()">答え1<BR>
<INPUT TYPE="radio" NAME="q05" VALUE="0" onClick="total()">答え2<BR>
</FORM>

☆印の個所は、ラジオボタンの数によって異なります。ふたつめの「i <= 9」は、「ラジオボタンの数-1」です。ラジオボタンが20コあれば、「for(var i = 0; i <= 19; i++)」になります。

この回答への補足

頂いたサンプルを、実際にHPにコピーして見てみたのですが、ほぼ希望どうりのもので大変感謝しています。

ただ、出来れば、合計点の部分は次のページとかに
まとめて表示したいのですが、どこをどうしたらそうなるのか分からないので、できましたら補足をお願いします。
お忙しい所申し訳ありませんがよろしくお願い致します。

補足日時:2001/03/19 15:28
    • good
    • 0
この回答へのお礼

具体的にスクリプトのサンプルまで教えていただいて
感激です。本当にありがとうございました。

教えていただいたサンプルの☆の部分や2つ目の所を
変更して、問題1、答え1みたいになってる所を
それぞれ質問項目や、答えにすればいいのですか?

お礼日時:2001/03/19 09:59

Java Scriptを使うのが一般的で簡単だとおもいますが、Java Scriptは「ソースを参照すると答えがわかってしまう」ので、FORMを利用したCGIを使う方がベターです。

この回答への補足

CGIを使った物という事ですが、実は、ykcさんが、他の方の会議室についての質問でご紹介していた『結城さん』ていう方のHPで、『クイズ』のようなものを見つけました。こういう感じのができたら、最も理想的なんですが、
私の手におえるか・・・

簡単に設置できるような物は、ご存知ありませんか?
また、個人的に有償で設置代行して頂く事は可能でしょうか?

補足日時:2001/03/19 16:52
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!