- ベストアンサー
JavaScriptで簡単なクイズを作りたいんですが
今HPを作っていて簡単なクイズを入れたいのですが JavaScriptを使ってしようと思ったのですが行き詰りました・・・ クイズの形式は問題をあらかじめ書いていて テキスト部分に答えを書いて ボタンをクリックすると「正解！」や「不正解！答えは○○」 と表示されるようなものです いろんなサイトを見たのですがよく理解できませんでした サンプルのソースなどを書いていただくとありがたいです 宜しくお願いします
- darkwing17
- お礼率4% (2/50)
- JavaScript
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
いきなり複数では難しいので、一つの問題を出題するプログラムを考えましょう。 先にHTMLの方にJavaScriptから操作できるように手を加えておきましょう。 ・答えの入力フィールドのIDに「a1」と指定します。 e.g. <input type="text" id="a1"> ・解答ボタンにクリック時にJavaScriptを呼び出すイベントを記入します。 e.g. <input type="button" value="答え合わせ" onclick="check(1)"> この例では、check関数に、引数「1」を渡して呼び出します。 それでは次に、JavaScriptの方です。 まず、答えのリストを持っていなければなりません。ということで、変数「ans」を用意し、答えを入れておきます。 e.g. var ans = "答え"; 次に、ボタンを押されたときに呼び出されるcheck関数を作ります。 function check(num){ return true; } この例では、引数をnumで受け取ります。このnumは複数になったときに使うのでしばらく登場しません。 中で処理することは、 「入力された値の取得」→「答えとの比較」→一致したとき「"正解です"と表示」、不一致のとき「"不正解です。答えは○○です"と表示」 ですね。ではスクリプトに起こしていきます。 function check(num){ /*入力された値の取得*/ var input = document.getElementById("a1").value; // ページの中からIDが"a1"であるものを探し、その要素のvalueを参照して取得 /*答えとの比較*/ if( input == ans ){ /*正解*/ alert("正解です"); } else { /*不正解*/ alert("不正解です。答えは"+ans+"です"); } return true; } これで単品の処理は終了です。 まずはここまでつくってできているか確認しましょう。次に複数に対応します。 HTMLの方では ・入力フィールドのIDを第1問目なら「a1」、第2問目なら「a2」...と設定していきます。 ・ボタンの方は、onclickの中身を、1問目なら「check(1)」、2問目なら「check(2)」と設定しておきます。 次にJavaScript。 ansに答えを複数入力します。 var ans = ["1問目の答え", "2問目の答え", "3問目の答え"]; check関数を書き換えます。 修正するポイントは以下 ・IDが"a1"ではなく、"a"+numのIDを探すことによって、その問題の回答フィールドを発見する ・ansが配列になったので、配列の要素を参照する。配列は、1,2,3、という数え方ではなく、0,1,2という数え方なので、numを1減らす function check(num){ /*入力された値の取得*/ var input = document.getElementById("a"+num).value; // ページの中からIDが"a"+numであるものを探し、その要素のvalueを参照して取得。 num = num -1; //配列の参照は0からなので、1減らす /*答えとの比較*/ if( input == ans[num] ){ //配列の参照は、配列変数名[要素番号] /*正解*/ alert("正解です"); } else { /*不正解*/ alert("不正解です。答えは"+ans[num]+"です"); } return true; } 本当は半角・全角の違い、ひらがな・カタカナの違いを吸収したりとかする処理はした方が良いのですが、内容が複雑になるので割愛します。 ということで、チャレンジ結果楽しみにしています！
その他の回答 (5)
- Seravy
- ベストアンサー率47% (118/249)
>何度も質問で申し訳ないのですが、答えを複数作るのはどうしたらよいのでしょうか？ >例えば問1の答えは「1970年」または「1970」というようにして、どちらかを書いていれば正解とさせたいのですが なるほど、複数ですね。 ・・たぶん私が書いたものを写せばそのとおり動くようになるとは思うのですが、質問者様のお話を状況をお聞きする限り理解するのは難しいかも知れません。 できれば、まずなにか作ろうとする前に、チュートリアル的なサイトで初歩的な部分からしっかりトレーニングすると、何を使えば良いのかわかってくるので今後の似たような問題解決に役立つと思いますよ。 今回は、答えが複数ある、ということで、2次元配列を使って解決するのが良さそうです。 前回は、問題の数だけ答えを用意しましたが、更にひとつの問題に複数の答えを用意します。 まず、var ansの部分を書き換えます。 var ans = [ ["1問目の答えA", "1問目の答えB"], ["2問目の答え"] , ["3問目の答えA","3問目の答えB", "3問目の答えC"] ]; 見た目は割とシンプルで、[]の中に、[]を作って書いていきます。 注意点として、答えがひとつでも、必ず[]でかこって下さいね。 次に、/*答えとの比較*/以下の部分に次の文を追加します。 /*答えとの比較*/ var flag = false;//正解か不正解かのフラグ。初期値は偽 for( var i=0; i < ans[num].length; i++ ) { //0～答えの要素数分ループ if(input == ans[num][i]){ //i番目の答えと比較、正解ならばフラグを真にしてループを抜ける flag = true; break; } //不正解ならば繰り返し } そして、if( input == ans[num] )の部分を、if( flag )に書き換えます。 以上で複数解答にも対応することが出来ます。 スクリプトとしてはできるだけ早い段階で理解できるよう、どちらかと言えば教科書的なものになっています。 ですので、処理を追いかけれるようになるよう頑張って下さいね。 今後のアイディアとしては、直で2次元配列をスクリプトに書き込んでいくのはややスマートさにかけるので、入力しやすいフォーマットで書き込んで、ページが表示される時に解析して2次元配列に変換して実行したりとか、それができるなら別ファイルに書いておいて、Ajaxで読み込んで…とか夢がひろがりんぐですが、たぶんそう簡単にはできないので今後JavaScriptを勉強した後にトライしてみると面白いかも知れません。 babu_babooさんのスクリプトではそういったスマートさをかなり活かした粋なものになっていますから、基本的なことに追いついたら読解してみるのも良いと思いますよ。
- babu_baboo
- ベストアンサー率51% (268/525)
var myReg = [ [/^1970年$|^1970$/^昭和45年$/, '1970' ], [/^2010年$|^2010$/^平成23年$/, '2010' ] ]; function check( num ) { var input = document.getElementById( 'a' + num ).value; if( ! input ) return; if( myReg[ num ][0].test( input ) ) alert("正解です"); else alert("不正解です。答えは" + myReg[ num ][1] + "です"); }
- Seravy
- ベストアンサー率47% (118/249)
ソースを読みました。 2点怪しいポイントがあります。 まず、ソースの最初の方にあるcheck関数の定義部分が、 >function check(1){ となっていますが、 function check(num){ でお願いします。 関数の引数は呼び出されたときに指定された値を受け取る変数を指定するものです。 function check(1){ だと、 1という数字に、"1"という値を入れなさい、という意味になってしまい、文法エラーが出てしまうのですね。 次に、条件判断、つまりifの中身です。 if(input=ans){ となっていますが、 正しくは、 if( input == ans ){ です。=だと、ただの代入になってしまい、inputにansの中身がコピーされて、それが判断されるためどんな答えでも正解になってしまいます。 私も覚えたての頃はこのミスが多かったのですが、左右の値を比較する演算子は「==」なので、間違えないよう注意してみてくださいね。 では健闘を祈ります。
お礼
丁寧な回答ありがとうございます。 何度も質問で申し訳ないのですが、答えを複数作るのはどうしたらよいのでしょうか？ 例えば問1の答えは「1970年」または「1970」というようにして、どちらかを書いていれば正解とさせたいのですが よろしければまた宜しくお願いします。
- babu_baboo
- ベストアンサー率51% (268/525)
＃２です。ちょっとほそく。 ぼたんの１つてまえのinputをさがして、だい２ひきすうのこたえとをひかくしてます あと、かんけいないですが、１つまえのしつもんのかいとうは function total(t){return eval('['+t.replace(/ /g,'+').replace(/\n/g,',')+']')} alert( total( "1 2 3 4 5\n6 7 8 9 1\n2 3 4 5 6" ) ); こうかきたかったのに、しめきられた。
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <form action="#"> <table border="1"> <tr> <td>q1 <td>このスクリプトで金を儲けるつもりだ？ <td><input type="text" size="10"> <td><input type="button" value="答え合わせ" onclick="chk( this, 'yes' )"> </table> </form> <script type="text/javascript"> var chk = (function ( getpn ) { return function ( e, answer ) { do if( !( e = getpn( e ) ) ) return; while( 'INPUT' !== e.nodeName ); alert( e.value === answer ? '正解です': '不正解！答えは、' + answer ); }; })( function ( node ) { var n; if( n = node.previousSibling ) { while( n.hasChildNodes( ) ) n = n.lastChild; return n; } return node.parentNode; }); </script>
お礼
回答ありがとうございます 参考にしてやってみたのですが反応ボタンを押しても反応しませんでした。 間違っているところがあれば指摘よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Script-type" conten="text/javascript"> <title>タイトル</title> <script type="text/javascript"> <!-- var ans="1970年"; function check(1){ /*入力された値の取得*/ var input=document.getElementById("a1").value;//ページの中からIDが"a1"であるものを探し、その要素のvalueを参照して所得 /*答えとの比較*/ if(input=ans){ /*正解*/ alert("正解です"); }else{ /*不正解*/ alert("不正解です。答えは"+ans+"です"); } return true; } //--> </script> </head> <body background="wakuhaikei.gif"> <p align="center"> <form name="form"> <table border="1" bordercolor="#afeee"> <tr> <td> </td> <td> <p align="center">問題</p> </td> <td> <p align="center">答え</p> </td> <td> <p align="center">答え合わせ</p> </td> </tr> <tr> <td> 問1 </td> <td> オカヤドカリが天然記念物に指定されたのは西暦何年？ </td> <td> <input type="text" id="a1"> </td> <td> <input type="button" value="答え合わせ" onclick="check(1)"> </td> </tr> 以下は省略させて頂きます