- ベストアンサー
JavaScriptで簡単なクイズを作りたいんですが
Seravyの回答
いきなり複数では難しいので、一つの問題を出題するプログラムを考えましょう。 先に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; } 本当は半角・全角の違い、ひらがな・カタカナの違いを吸収したりとかする処理はした方が良いのですが、内容が複雑になるので割愛します。 ということで、チャレンジ結果楽しみにしています！
関連するQ&A
- javascriptでクイズ
HP上で簡単なクイズのページを作りたいのですが、 私はjavascript初心者なのでさっぱり分かりません。。。 --内容としてはこんな感じです----------- 3択クイズでラジオボタンをつける。 全部で5問くらいを5つの枠にわけ1ページに表示 「回答する」ボタンで判定 全問正解なら別ページにリンク。 不正解の場合はその箇所の背景の色を変える。 ----------------------------------------- ちょっと分かりにくくてすみません・・・ ご回答いただけると、とっても助かります！ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ＪａｖａＳｃｒｉｐｔについて
ＪａｖａＳｃｒｉｐｔについて JavaScriptで、ITパスポートの試験問題ページみたいなものが作りたいですが、記述の仕方がわかりません。 問題形式は、問1・問2・問3・・・と続き、解答は、すべてアイウエのどれかで、ラジオボタンで選んでいって、一番下の解答ボタンをクリックしたら、アラートが出てきて、次のような表示の仕方になるように作りたいです。 「正解数は○○問です。改行 合格/不合格です。」 なお、○○は、点数で、これは、各問の正解したものを合計していって、合格/不合格は、正解数が、正解数/総問題数が、６０％を超えていたら、合格。そうでなければ、不合格と表示するものです。 そして、リセットボタンをクリックしたら、すべてのラジオボタンのチェックをはずすようにしたいです。そして、ラジオボタンは、各問1つに対して、１つのみ選べれるようにしてほしいです。 そして、不合格なら、アラートをもうひとつ表示したいです。内容は、「もう一度挑戦しますか？改行 挑戦するなら、ＯＫをクリックしてください。」 そしてＯＫをクリックしたら、リセットし、キャンセルしたら、チャックデータはそのままにしておく。 上記のようなことは、可能なのでしょうか？ 可能なら、お早めにご解答ください。 不可能なら、何がダメなのか教えてください。お願いします。
- ベストアンサー
- レンタルサーバ・ASP
- JavaScriptについて。
今、HPを作成しています。 その中で、「時間ごとに表示するテキストを変える」JavaScriptを取り入れようと思っているのですが、あれって時間ごとに色を変えたりフォントやサイズを変えることってできないのでしょうか？ いろんなサイトに行っても、基本的なソースしか載っていなくて困っています。わかる方いたら教えていただけると嬉しいです。
- 締切済み
- レンタルサーバ・ASP
- 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 を起動して表示するにはソースを どこにどのように書けばよいでしょうか。
- 締切済み
- JavaScript
- 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を切り替えるプログラムなど、簡単なプログラムは作ることができるようになったのですが、ここで行き詰まってしまいました。 どのようにすればよいか教えてください。お願いします。
- 締切済み
- Java
- JavaScriptによるフォームの入力チェック
3択のクイズ（ラジオボタン）があり、 ・いずれも選択されていない場合→入力を促すダイアログ表示 ・不正解→残念でしたページ（HTML）へ ・正解→応募ページ（HTML）へ という制御をJavaScriptで記述したいと思っていますが、 なかなかうまくいきません… よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます 参考にしてやってみたのですが反応ボタンを押しても反応しませんでした。 間違っているところがあれば指摘よろしくお願いします。 <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> 以下は省略させて頂きます