• ベストアンサー

JavaScriptで簡単なクイズを作りたいんですが

今HPを作っていて簡単なクイズを入れたいのですが JavaScriptを使ってしようと思ったのですが行き詰りました・・・ クイズの形式は問題をあらかじめ書いていて テキスト部分に答えを書いて ボタンをクリックすると「正解！」や「不正解！答えは○○」 と表示されるようなものです いろんなサイトを見たのですがよく理解できませんでした サンプルのソースなどを書いていただくとありがたいです 宜しくお願いします

画像を拡大する
回答 全件
ベストアンサー
いきなり複数では難しいので、一つの問題を出題するプログラムを考えましょ…
>何度も質問で申し訳ないのですが、答えを複数作るのはどうしたらよいので…
var myReg = [ 　[/^1970年$|^1970$/^昭和…
ソースを読みました。 2点怪しいポイントがあります。 まず、ソースの…
＃２です。ちょっとほそく。 ぼたんの１つてまえのinputをさがして、…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD …

質問者が選んだベストアンサー

  • ベストアンサー
  • Seravy
  • ベストアンサー率47% (118/249)
回答No.1

いきなり複数では難しいので、一つの問題を出題するプログラムを考えましょう。 先に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; } 本当は半角・全角の違い、ひらがな・カタカナの違いを吸収したりとかする処理はした方が良いのですが、内容が複雑になるので割愛します。 ということで、チャレンジ結果楽しみにしています！

darkwing17
質問者

お礼

回答ありがとうございます 参考にしてやってみたのですが反応ボタンを押しても反応しませんでした。 間違っているところがあれば指摘よろしくお願いします。 <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> 以下は省略させて頂きます

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (5)

  • Seravy
  • ベストアンサー率47% (118/249)
回答No.6

>何度も質問で申し訳ないのですが、答えを複数作るのはどうしたらよいのでしょうか？ >例えば問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さんのスクリプトではそういったスマートさをかなり活かした粋なものになっていますから、基本的なことに追いついたら読解してみるのも良いと思いますよ。

全文を見る
すると、全ての回答が全文表示されます。
回答No.5

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)
回答No.4

ソースを読みました。 2点怪しいポイントがあります。 まず、ソースの最初の方にあるcheck関数の定義部分が、 >function check(1){ となっていますが、 function check(num){ でお願いします。 関数の引数は呼び出されたときに指定された値を受け取る変数を指定するものです。 function check(1){ だと、 1という数字に、"1"という値を入れなさい、という意味になってしまい、文法エラーが出てしまうのですね。 次に、条件判断、つまりifの中身です。 if(input=ans){ となっていますが、 正しくは、 if( input == ans ){ です。=だと、ただの代入になってしまい、inputにansの中身がコピーされて、それが判断されるためどんな答えでも正解になってしまいます。 私も覚えたての頃はこのミスが多かったのですが、左右の値を比較する演算子は「==」なので、間違えないよう注意してみてくださいね。 では健闘を祈ります。

darkwing17
質問者

お礼

丁寧な回答ありがとうございます。 何度も質問で申し訳ないのですが、答えを複数作るのはどうしたらよいのでしょうか？ 例えば問1の答えは「1970年」または「1970」というようにして、どちらかを書いていれば正解とさせたいのですが よろしければまた宜しくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
回答No.3

＃２です。ちょっとほそく。 ぼたんの１つてまえの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" ) ); こうかきたかったのに、しめきられた。

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

<!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>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでクイズ

    HP上で簡単なクイズのページを作りたいのですが、 私はjavascript初心者なのでさっぱり分かりません。。。 --内容としてはこんな感じです----------- 3択クイズでラジオボタンをつける。 全部で5問くらいを5つの枠にわけ1ページに表示 「回答する」ボタンで判定 全問正解なら別ページにリンク。 不正解の場合はその箇所の背景の色を変える。 ----------------------------------------- ちょっと分かりにくくてすみません・・・ ご回答いただけると、とっても助かります！ よろしくお願いいたします。

  • ＪａｖａＳｃｒｉｐｔについて

    ＪａｖａＳｃｒｉｐｔについて JavaScriptで、ITパスポートの試験問題ページみたいなものが作りたいですが、記述の仕方がわかりません。 問題形式は、問1・問2・問3・・・と続き、解答は、すべてアイウエのどれかで、ラジオボタンで選んでいって、一番下の解答ボタンをクリックしたら、アラートが出てきて、次のような表示の仕方になるように作りたいです。 「正解数は○○問です。改行　合格/不合格です。」 なお、○○は、点数で、これは、各問の正解したものを合計していって、合格/不合格は、正解数が、正解数/総問題数が、６０％を超えていたら、合格。そうでなければ、不合格と表示するものです。 そして、リセットボタンをクリックしたら、すべてのラジオボタンのチェックをはずすようにしたいです。そして、ラジオボタンは、各問1つに対して、１つのみ選べれるようにしてほしいです。 そして、不合格なら、アラートをもうひとつ表示したいです。内容は、「もう一度挑戦しますか？改行　挑戦するなら、ＯＫをクリックしてください。」 そしてＯＫをクリックしたら、リセットし、キャンセルしたら、チャックデータはそのままにしておく。 上記のようなことは、可能なのでしょうか？ 可能なら、お早めにご解答ください。 不可能なら、何がダメなのか教えてください。お願いします。

  • JavaScriptについて。

    今、HPを作成しています。 その中で、「時間ごとに表示するテキストを変える」JavaScriptを取り入れようと思っているのですが、あれって時間ごとに色を変えたりフォントやサイズを変えることってできないのでしょうか？ いろんなサイトに行っても、基本的なソースしか載っていなくて困っています。わかる方いたら教えていただけると嬉しいです。

  • クイズサイトの作成

    20問程度のクイズを行うサイトの作成を考えています。ほしい機能は、最終的に点数、正解率が表示される。解答は、5つぐらいのプルダウンメニューもしくは、ボタンから選ぶ。1問、1ページで解答するごとに次のページに進む。一度答えたら、元のページには戻れない。正解、不正解は1問ごとに表示。問題は50問程度の中から、ランダムで20問を出題。 以上のような、サイトを作りたいのですが、一番向いているのは、JAVAScript、ShockWave、CGIなど、どれでしょうか。皆さんのご意見をお願いします。

    • ベストアンサー
    • HTML
  • Flash lite1.0の計算クイズ

    初めまして。 初心者ですがモバイル版のFlash lite1.0で計算クイズを作成したいと思っています。 スタート画面でスタートを押すとクイズが始まり ランダムで問題が表示され、答えを数字ボタンで入力後 正解だと○不正解だと×と表示され また問題へ進んでいき、100問終了後 正解率とかかった時間をランキングに飛ばす と言う仕様で作成していきたいと思っているのですが 現在作成しているスクリプトではランダムはできているのですがクイズが9問までしかできません。 また、問題を表示できても答えを入力し、正解・不正解の表示をさせる方法がわかりません。 問題を100問作成する方法と答えを入力する方法を教えてください。(答えは二桁まで入力可能にしたいです) 説明がわかりづらいかもしれませんが 宜しくお願いします。

    • ベストアンサー
    • Flash
  • JavaScriptの実行

    JavaScript初心者でこんな質問しまして申し訳ありません。 <input type="button" value="sample.csvファイルを読み込み" onclick="loadDataFile('sample.csv')"><br> ボタンをクリックするとloadDataFileの起動しますが ホームページが表示されたと同時にloadDataFile を起動して表示するにはソースを どこにどのように書けばよいでしょうか。

  • Flash Lite1.1のクイズ制作でのクイズ得点の出し方

    今、Flash Lite1.1でモバイル用に作っている三択式クイで、 10問ほど出題したあと最後にその得点を出したいと思っています。 こちらのサイトの http://www.condo.fromc.jp/flash/memo/index2.html ■クイズゲームのサンプル　 を元に、Flash Lite1.1用にプログラムを書き直して作っているのですが、最後の正解、不正解に応じて得点が表示されるプログラムが どうしてもわかりません。 FLASH1.1形式で書き出せる方法があれば教えてください。 ご教授のほど、宜しくお願いいたします。

    • ベストアンサー
    • Flash
  • クイズプログラムを作ろうと思っています。

    クイズページにアクセスすると、 ■全20問の中からランダムに5問を一気に表示 クイズの解答形式は、 ■1問につき3択5問で解答後に答え合わせボタンを押す チェックボタンを押すと、 ■解答者の選択肢を維持しつつ正解表示 また、問のバリエーションを追加する場合、 ■問一覧を外部にするなどして追加修正しやすく 上記のような条件で作りたいのですが、 どういったプログラムで作るのが効率が良いでしょうか？ これから自分でも調べてみるつもりですが、 何か参考になるようなものがあれば、教えて下さい。 技術レベルとしては、PerlとJavascriptの経験アリですが、共に問い合わせフォームとか作る程度。 PHPは知らないわけじゃないけど使った事は無い。 「上記条件で作るならこんなのが良い」とか、 「そういうの作るならコレ覚えた方が良い」とか、 そういったアドバイスなどお待ちしています。

  • iアプリでクイズのプログラムを作成したい

    多肢選択式クイズのiアプリを作成したいと考えております。サーバ上のテキストファイルから問題と答えを読み込んで1問ずつ表示し、正解すると正解と表示した後に次の問題へ、不正解の場合は正しい答えを表示した後に次の問題へ進むようにし、すべての問題が終わったら正答数を表示するような感じで、問題は上記のように多肢選択式にしたいと考えております。 色々と本やwebページを見て、サーバ上のテキストファイルを単純に読み込むだけのプログラムや、ボタンを押す毎にPanelを切り替えるプログラムなど、簡単なプログラムは作ることができるようになったのですが、ここで行き詰まってしまいました。 どのようにすればよいか教えてください。お願いします。

  • JavaScriptによるフォームの入力チェック

    3択のクイズ（ラジオボタン）があり、 ・いずれも選択されていない場合→入力を促すダイアログ表示 ・不正解→残念でしたページ（HTML）へ ・正解→応募ページ（HTML）へ という制御をJavaScriptで記述したいと思っていますが、 なかなかうまくいきません… よろしくお願いいたします。

円板の熱源配置による温度分布の求め方
このQ&Aのポイント
  • 円板の真ん中に熱源をおいた場合、円板の温度分布がどのように変化するのかを求める方法について急いで知りたいです。
  • 伝熱の教科書では、棒に関する問題は多く見つけることができますが、２次元に拡張した問題を扱う教科書は少ないです。
  • これに関連する教科書や参考文献があれば教えてください。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する