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

質問

今HPを作っていて簡単なクイズを入れたいのですが
JavaScriptを使ってしようと思ったのですが行き詰りました・・・

クイズの形式は問題をあらかじめ書いていて
テキスト部分に答えを書いて
ボタンをクリックすると「正解！」や「不正解！答えは○○」
と表示されるようなものです

いろんなサイトを見たのですがよく理解できませんでした

サンプルのソースなどを書いていただくとありがたいです

宜しくお願いします

回答No.6

Seravy

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