- ベストアンサー
ユーザー入力値の正誤判定をブラウザーで行う方法
構想中の考え ： HP上でクイズをする。 複数の質問に対する答えが全問正解の場合は、ページAへ行く。 1問でも不正解な場合は、ページBへ行く。 上記のようなページを作るためには、JavaScriptを使うと出来るのではないかと思っていますが、私の知識は、初歩の初歩です。 手持ちの本、「JavaScript例文活用辞典」（技術評論社 平成13年第3刷）を見てド素人並に試みましたが、全く歯が立ちません。 以下が私の失敗作です。 間違っていた時のコマンドの書き方は、全く不明で何も触れていません。 =========== <html> <head> <title>--</title> <script language="JavaScript"><!-- function matchNum() { n=eval(document.myFORM.myTEXT.value); if(n==1492) {window.open("abc.html","good","");} } //--></script> </head> <body> <form name="myForm"> コロンブスがアメリカを発見した年は？ ： <input type="text" name="myTEXT"><br> <input type="button" value=" Check " onClick="matchNum()"> </form> </body> </html> ========= 1問だけでも上手く作動しません。 これを例えば5問～10問と増やした場合のJavaScriptの具体的なソースを解説と共に示していただければ、幸甚です。 宜しくお願いします。 （本当はページBでどこが間違いかを示すのが理想ですが今の自分には無理なのでそこまでは望みません）
- totolo36
- お礼率60% (9/15)
- JavaScript
- 回答数11
- ありがとう数7
- みんなの回答 （11）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんばんわ。 まず、出来ない原因は大文字と小文字の間違いです。 誤： n=eval(document.myFORM.myTEXT.value); 正： n=eval(document.myForm.myTEXT.value); かなり雑ですが、こんな感じでどうでしょうか。 ■クイズhtml <html> <head> <title>クイズ</title> </head> <body> <script language="JavaScript"> <!-- function matchNum() { //不正解があったかどうかを確認するフラグ flag = 0; ans = ""; //質問の答え ansArray = new Array(); ansArray[0] = "1"; ansArray[1] = "2" ; ansArray[2] = "3" ; ansArray[3] = "4" ; ansArray[4] = "5" ; //採点（5の所は質問の数を入力） for ( i = 0 ; i < 5 ;i ++ ) { //不正解ページに表示する文 ans = ans + "質問" + i + "：正解=" + ansArray[i] + " 貴方の回答=" + document.myForm.elements[i].value //一問でも不正解があったらフラグを1にする if (document.myForm.elements[i].value != ansArray[i]) { flag = 1; ans = ans + " 結果=×" + "<br>\n"; } else { ans = ans + " 結果=○" + "<br>\n"; } } //全問正解・不正解有り の判定 if (flag == 0) { window.open("abc.html","good",""); } else if (flag == 1) { retval = window.open("def.html","nogood",""); retval.document.write (ans); } } //--> </script> <form name="myForm"> 質問０ ：<input type="text" name="myTEXT" value="1"><br> 質問１ ：<input type="text" name="myTEXT" value="2"><br> 質問２ ：<input type="text" name="myTEXT" value="3"><br> 質問３ ：<input type="text" name="myTEXT" value="4"><br> 質問４ ：<input type="text" name="myTEXT" value=""><br> <input type="button" value=" Check " onClick="matchNum()"> </form> </body> </html> 注意： エレメント番号でフォームの値を確認しているので、 テキストボックスとテキストボックスの間にボタン 等がある場合は注意してください。 その他： JavaScriptだとソースを見れば正解が解ってしまい ますが宜しいのでしょうか？ 外部JavaScriptファイルとして書くと、ほんの少し 解りにくくなりますよ。 それでは。
その他の回答 (10)
こんにちは。 暇人なので再度登場しました（爆 \nを書いたのは、document.writeで文字列を書き出した場合に、 そのHTMLソースが見やすいように書いておきました。 ・\n無し ■質問 [ 0 ]<br>正解 = 北海道<br>解答 = 1<br>結果 = ×<br> ・\n有り ■質問 [ 0 ]<br> 正解 = 北海道<br> 解答 = 1<br> 結果 = ×<br> <br> innerHTMLで文字列を表示させた場合はソースには出ないのですが、 document.write用に\nを入れて書いたまま投稿してしまいました。 毎回、ミスがあって申し訳ありません。 それでは。
お礼
GX71さん 最後までお答えいただき誠にありがとうございます。 \nについての解説、ありがとうございます。 きっとお答えいただけると思って、このスレッドを解決済みにしないでおきました。 手取り足取り教えていただきましたが、明日このスレッドを解決済みスレッドとして終了させて頂きますので宜しくお願いします。 又、別の質問のスレッドを立ち上げた折は何卒宜しくお願いします。 尚、リンクの件、本当になんら気兼ねなくいつでもご連絡下さい。
こんばんわ。 こちらこそ、ご丁寧にお返事を頂きありがとうございます。 色々だーっと言ってもかえってよく分らなくなってしまう かもしれませんが、一応いくつかアドバイスという形で。 （既にご存知の部分も多いかもしれませんけれど。） １． 不正解ページに表示する文字列についてですが、最初に書 いたものだと見づらいかもしれませんので、気が向いた時 にでもこんな感じに修正してみるのもいいかもしれません。 //不正解ページに表示する文 ans = ans + "■質問 [ " + i + " ]<br>\n" + " 正解 = " + ansArray[i] + "<br>\n" + " 解答 = " + document.myForm.elements[i].value + "<br>\n"; なお、以下のようになっていますので、ご自身でHTMLタグ を追加されたりする場合は参考にしてみて下さい。 i は質問番号 ansArray[i] は質問に対する答え document.myForm.elements[i].value は回答者の入力 + は文字の連結 "" 内は文字列 \n は改行（書く場合は""内に書く） ２． URL・メニューバーなどの非表示、右クリック禁止などを しても、それらは簡単に回避出来てしまうという事を覚 えておくといいかと思います。 ３． <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ソースの一番上にこのように書いてありますが、これは HTML4.01に準拠した場合に書くものなので、準拠してい ない場合は書かない方がいいです。 準拠しているかどうか確認する場合は、こちらです。 http://validator.w3.org/ ４． あと、教えて! gooは規約によりユーザ自身のサイトなどを 公開することは認められておらず、消されてしまうような ので控えたほうが宜しいかと思います。 リンクの件については、せっかくですが一般公開用サイト は持っていない為、またの機会にお願いしたいと思います。 長々と一々細かい事を書いてきましたが、知らないでいるよりは 良いと思いましたので、書かせて頂きました。 あと、JavaScriptにミスがあったりそのソースも雑で汚かったり、 投稿時にミスがあったりと分りづらかった点も多かったとは思い ますが、なんとか出来るようになったようで安心しました。 それでは、失礼します。
お礼
GX71さん 本当に幾度と無くご親切に教えていただき誠に恐れ入ります。 最後のアドバイス大変参考になりました。 これだけ細かく説明して頂くと私の知識範囲内でも理解できます。 1.不正解ページの見栄えに関する助言ありがとうございました。 これなら私にも出来ると思います。 時間の有る時にやってみます。 "\n"は、改行マークだとはうすうす気づいていました。 ただ、このような基礎の基礎は、JavaScriptの本にも説明がありません。 基礎の基礎を省略しない初心者向けのJavaScriptの本があれば売れると思います。 ただ、"<br>\n"のように何故、<br>を伴うのか理解できません。 <br>は、htmlの改行マークですが、JavaScriptでは、\nとセットにしないといけないのでしょうか？ 又、質問してしまってすみません。 2.URL、メニューバー、右クリック禁止など手を尽くしてもソースは、 見れる人間には見れると言う事、大変参考になりました。 良く憶えておきます。 3.HTML4.01宣言文を謳う場合は、<script type="text/JavaScript">とすべきだったのですね。 ひょっとしたら、当初上手く行かなかったのは、このせいだったのかもしれないと思っています。 貼り付けていただいたW3Cの構文チェックサイト大変有益でした。 英語だったのでちょっと面倒ですが、それでも文法上の間違いはどれか直ぐ分かりました。 これからも構文を間違わないように、利用させて頂きます。 4.教えてgooの規約の件まで教えていただき、ありがとうございました。 gooの人が発見したら削除してくれると思います。 私が貼り付けたURLを保存しておいて下されば、リンクご希望の際は、 いつでもおっしゃってください。 私は、このような場所で、質問することに常にためらいがありますが、 貴殿のような人が居て、答えてくれますと本当にありがたいです。 深い知識のみならず貴殿の配慮と労を惜しまぬ心がとてもありがたいです。 本当に初心者にご親切に教えていただき誠にありがとうございました。 明日、このスレッドを解決済みの処理をさせて頂きます。
- kiwidream1997
- ベストアンサー率0% (0/1)
GX71さん 再びお世話になります。 totolo36です。 以下がerror.htmlファイルのソースです ： ====================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>はずれ～！！</title> </head> <body> <div style="font:bold 17px; "> <a href="./"> ホーム</a> </div> <span id="test"></span> <div style="margin-top:50px; text-align:center; font:bold 50px/60px; color:black; "> はずれ！！ </div> </body> </html> ====================== 実は、最初は上手く行かず、何度も色々試しました。どうしてもエラーのページが思い通りに表示されず、恥ずかしながら又、貴殿にお尋ねしようと思い、削れる部分を全て削りました。そして、もう一度試したら上手く行きました！ 私のような初心者に詳細にご丁寧に教えていただき本当にありがとうございました。 全ソースを貼り付けていますので、このスレッドは、他の方にもかなり有益だと思います。 教えてGooの良回答の点数だけではどうも申し訳ありませんので、若し、差し支えなかったら、私のHPのリンク集に貴殿のサイトをリンクさせて頂きます。 私のリンク集は、何種類かありますが、PR4のリンク集もありますので下記のURLからご連絡お願いします。 本当に最後まで見捨てずに教えていただき誠にありがとうございました。
- kiwidream1997
- ベストアンサー率0% (0/1)
GX71さん 本当にご親切に何度も解答頂き誠にありがとうございます。totolo36です。質問者としては何度も投稿出来ませんので、別のIDにしています。結局、貴殿の示してくれた、Scriptで希望通りの結果が出ました～！ 本当に嬉しいです。以下そのソースです ： ===================================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>第一関門突破～！！</title> <script language="JavaScript"> <!-- function matchNum() { n=eval(document.myForm.myTEXT.value); //不正解があったかどうかを確認するフラグ flag = 0; ans = ""; //質問の答え ansArray = new Array(); ansArray[0] = "北海道"; ansArray[1] = "1492" ; ansArray[2] = "吉田松陰" ; ansArray[3] = "ユーロ" ; ansArray[4] = "蘇我入鹿" ; //採点 for ( i = 0 ; i < 5 ;i ++ ) { //不正解ページに表示する文 ans = ans + "質問" + i + "：正解=" + ansArray[i] + " 貴方の回答=" + document.myForm.elements[i].value; //一問でも不正解があったらフラグを1にする if (document.myForm.elements[i].value != ansArray[i]) { flag = 1; ans = ans + " 結果=×" + "<br>\n"; } else { ans = ans + " 結果=○" + "<br>\n"; } } //全問正解・不正解有り の判定 if (flag == 0) { window.open("congatulation.html","good",""); } else if (flag == 1) { retval = window.open("error.html","nogood",""); retval.document.getElementById('test').innerHTML = ans; } } //--> </script> </head> <body> <div style="font:bold 17px; "> <a href="./"> ホーム</a> </div> <div align=center> <p> 以下の問題にお答え下さい。 </p> <div style="width:700px; text-align:left; font:17px; color:black; margin-bottom:20px; "> <form name="myForm"> <ol> <li> 私の出身地は、どこでしょうか？（都道府県で答え下さい、漢字）：<br> <input type="text" name="myTEXT" value="1"><br> </li> <li> コロンブスがアメリカ大陸を発見した年は？（半角英数字）：<br> <input type="text" name="myTEXT" value="2"> </li> <li> 松下村塾を開いた人は誰？（漢字）：<br> <input type="text" name="myTEXT" value="3"> </li> <li> 2004年現在のドイツの通貨単位は何？（全角カタカナ）：<br> <input type="text" name="myTEXT" value="4"> </li> <li> 645年 中大兄皇子が宮中で成敗した人間は誰？（漢字）：<br> <input type="text" name="myTEXT" value="5"> </li> </ol> <input type="button" value=" Check " onClick="matchNum()"> </form> </div> </center> </body> </html> ===================================== errorのhtmlファイルを別に投稿します。 そこで補足説明させて頂きます。
度々失礼します。 編集ミスしたまま投稿してしまいました。 ■メインのhtml //ウインドウを開く retval = window.open("error.html","nogood",""); //書きこむ（ここを新たに追加） retval.document.getElementById('test').innerHTML = ans; 下の一行は消してしまって構いません。 retval.document.write (ans); それでは。
こんばんわ。 その error.html は既に作成されているのですか？ もし、そうだとしたら以下の方法で出来ると思います。 ■メインのhtml //ウインドウを開く retval = window.open("error.html","nogood",""); //ドキュメントを開く（ここを新たに追加） retval.document.open(); //書きこむ（ここも新たに追加） retval.document.getElementById('test').innerHTML = ans; //ドキュメントを閉じる（ここも新たに追加） retval.document.close(); ■error.html（下の行を、ansを表示させたい部分に書く） <span id="test"></span> それでは。
こんにちは。 以下、訂正部分です。 ■最後にセミコロンを入れてください。 誤：ans = ans + "質問" + i + "：正解=" + ansArray[i] + " 貴方の回答=" + document.myForm.elements[i].value 正：ans = ans + "質問" + i + "：正解=" + ansArray[i] + " 貴方の回答=" + document.myForm.elements[i].value; これは、私が投稿した時点で抜けていたようで、失礼しました。 ■16 を 5に変えてください。 誤：for ( i = 0 ; i < 16 ;i ++ ) { 正：for ( i = 0 ; i < 5 ;i ++ ) { あと、消した部分が HTMLタグ（入力フォーム等）・JavaScript 部分ではなく、文字の所だけなのであれば問題はないのですが、 それ以外のHTMLタグやJavaScript部分を一部でも消してしまうと、 どこが間違っているのかが分りませんので、出来れば全部載せて 頂ければと思います。 （この場合、お礼欄に書けるように何回か回答投稿をします。） それと、もしこれでもエラーが出た場合は、InternetExplorerの ステータスバー（左下）に黄色い三角マークが出ると思いますの でそこをマウスでダブルクリックして下さい。 すると、ダイアログが出てくると思いますので、詳細表示(D)>> を押してエラー内容を表示させ、その部分を教えてください。 何か分らない事があれば遠慮なくどうぞ。 分る範囲内でお答えしたいと思います。 それでは失礼します。
補足
GX71さん 本当に御親切に教えていただき誠にありがとうございます。 おっしゃるように変更しました。 すると遂に出来ました！！ ありがとうございます。 感激です！！ 本当にありがとうございます。 更にあつかましく質問して宜しいでしょうか？ 1問でも不正解があった場合に表示されるページに元のページに戻るリンクをつけるのは、どのようなScriptを追加したら宜しいのでしょうか？ 不正解があった場合のページ 「error.html」に再挑戦するためにクイズのページに戻るリンクなどが設定されていて、そのページの特定の部分に ： retval = window.open("error.html","nogood",""); retval.document.write (ans); の(ans)を挿入するようにするには、どのようにしたら宜しいでしょうか？ 本当に何度もお聞きして大変あつかましいですが、何卒宜しくお願い申し上げます。
こんにちは。 上手く動作しないとの事ですが、それはどういう事でしょうか？ （例：ボタンを押しても全く反応がない、エラーが出る等） 出来れば補足をお願いします。 ・OS（Windows/Mac等）のバージョン等 ・ブラウザ（InternetExplorer/Netscape等）のバージョン等 それでは。
お礼
GX71さん ご報告が遅れまして申し訳ございません。 文字数制限に引っかかり苦労してぎりぎりまで、文字を削りこの下の段にソースを書きました。 宜しければ、内容を吟味して添削していただけ無いでしょうか？
補足
GX71さん 未熟な私に追加の質問を頂き感謝の念に耐えません。 現状では、ボタンを押すとステータスバーに一瞬 「ページでエラーが発生しました」と表示されます。 そして、直ぐにページが表示されましたと代わります。 御質問の件にお答えします。 ・OS ： Windows XP home edition SP2 ・Browser ： IE6 です。 ただ、貴殿が提示していただいたスクリプトを私の構想に合わせてもう少し手を加えて試してみたいと思います。 それから再度ここにそのページのソース全体をここに貼り付け、ご報告致しますので、再度検証頂けたら幸甚です。 本当にご親切に御教授頂き、誠にありがとうございます。 それでは、又、ここに書き込みます。 1～2日お時間を頂きたくお願い申し上げます。 教えていただく立場でありながら、待っていただくのは誠に恐縮ですが、未熟者故、何卒御容赦の程宜しくお願い申し上げます。 ps. 当面のクイズは、元旦に行う旨を10日位前に私のHPで宣言していたため、当座は、間に合わないので、検討中のJavaScriptは、諦め、原始的な方法で対処しています。 しかし、次回は、何とか構想通りのクイズページを作りたいと思っておりますので引き続き当該の問題解決に向け努力中です。
- KenKen_SP
- ベストアンサー率62% (785/1258)
No.1です。 参考URLをあげておきます。WEBのことなら、WEB検索でたいてい調べられます。 検索キーとしては、JavaScript クイズ とか。 頑張って下さい。
お礼
KenKen_SPさん ご親切に教えていただいて、誠にありがとうございます。 貼り付けて頂いた、infoseekのURLを見ました。 サンプルのソースを見たら、これなら自分でも出来ると思いました。 ソースをそのままコピーして、変更すべき箇所（この場合は、飛ぶべきファイル名とパス）を自分の物に変更し、試しました。 それでも、正常に作動しません。 如何に私のJavaScriptの知識が稚拙であるか分かりました。 しかし、もう少し努力を続ければ、必ずあのサンプルは、上手く作動可能と思いますので、もう少し試行錯誤を繰り返します。 又、試した結果をご報告致します。 取り合えずお礼まで。 本年があなたに取りまして良い年であります事を願っています。
- KenKen_SP
- ベストアンサー率62% (785/1258)
ページを飛ばすだけなら、 <script language="JavaScript"> <!-- function matchNum(){ n=eval(document.myFORM.myTEXT.value); if(n==1492) {window.location='abc.html';} } //--> </script> ですね。
お礼
GX71さん ご親切に返答頂き誠にありがとうございます。 貴殿の示してくれたソースを見た時、将にこれが解答だ！ と思い胸が高鳴りました。 そして実際に変更すべき部分、正解などをソースのしかるべきところに記入し、試しましたが、上手く作動しませんでした。 今の私のJavaScript知識が余りにも乏しいためですが、もう少し試して再度ここでご報告致します。 取り合えず、お礼とご報告まで。 2005年があなたに取りまして、素晴らしい年になるように願っています。
補足
GX71さん ============================= <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>第一関門突破～！！</title> <script language="JavaScript"> <!-- function matchNum() { n=eval(document.myForm.myTEXT.value); //不正解があったかどうかを確認するフラグ flag = 0; ans = ""; //質問の答え ansArray = new Array(); ansArray[0] = "北海道"; ansArray[1] = "1492" ; ansArray[2] = "吉田松陰" ; ansArray[3] = "ユーロ" ; ansArray[4] = "蘇我入鹿" ; //採点 for ( i = 0 ; i < 16 ;i ++ ) { //不正解ページに表示する文 ans = ans + "質問" + i + "：正解=" + ansArray[i] + " 貴方の回答=" + document.myForm.elements[i].value //一問でも不正解があったらフラグを1にする if (document.myForm.elements[i].value != ansArray[i]) { flag = 1; ans = ans + " 結果=×" + "<br>\n"; } else { ans = ans + " 結果=○" + "<br>\n"; } } //全問正解・不正解有り の判定 if (flag == 0) { window.open("congatulation.html","good",""); } else if (flag == 1) { retval = window.open("error.html","nogood",""); retval.document.write (ans); } } //--> </script> </head> <body> <div style="font:bold 17px; "> <a href="./">ホーム</a></div> <div align=center> <p>取り合えずおめでとうございます～！！</p> <div style="width:700px; text-align:center; font:bold 20px; color:black; margin-top:20px; margin-bottom:20px; "> しかし、本番は、これからです。<br> 以下の質問に全て答えてください。<br> 全問正解者のみが幸運の暦を手にする栄冠に輝きます！</div> <div style="width:700px; text-align:left; font:17px; color:black; margin-bottom:20px; "> <form name="myForm"> <ol> <li> 私の出身地は、どこでしょうか？（都道府県で答え下さい、漢字）：<br> <input type="text" name="myTEXT" value="1"><br> </li> <li> コロンブスがアメリカ大陸を発見した年は？（半角英数字）：<br> <input type="text" name="myTEXT" value="2"> </li> <li> 松下村塾を開いた人は誰？（漢字）：<br> <input type="text" name="myTEXT" value="3"> </li> <li> 2004年現在のドイツの通貨単位は何？（全角カタカナ）：<br> <input type="text" name="myTEXT" value="4"> </li> <li> 645年 中大兄皇子が宮中で成敗した人間は誰？（漢字）：<br> <input type="text" name="myTEXT" value="5"> </li> </ol> <input type="button" value=" Check " onClick="matchNum()"> </form> </div> </div> </body> </html> ================================= 実際は、JavaScriptのソースは、外部ファイルにします。そして、当該ページへのリンクは、 <a href="javascript:void(0)" onClick="window.open('quiz.html','quiz','width=800,height=600,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes')"><img src="recycle.gif" border=0></a> として、URL、メニューバーなどを非表示にして又、右クリック禁止にすれば、解答は見れないと思いますが如何でしょうか？ 上記のScriptのどこが間違っているのか、御教授願えますでしょうか？ 初歩的な知識不足で大変お手数で申し訳ありませんが何卒宜しくお願い申し上げます。