- ベストアンサー
javascriptでクイズ
HP上で簡単なクイズのページを作りたいのですが、 私はjavascript初心者なのでさっぱり分かりません。。。 --内容としてはこんな感じです----------- 3択クイズでラジオボタンをつける。 全部で5問くらいを5つの枠にわけ1ページに表示 「回答する」ボタンで判定 全問正解なら別ページにリンク。 不正解の場合はその箇所の背景の色を変える。 ----------------------------------------- ちょっと分かりにくくてすみません・・・ ご回答いただけると、とっても助かります！ よろしくお願いいたします。
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo1の補足を見ても、どこにも肝心のスクリプトがみあたらないけど…?? スクリプトだと正解がわかっちゃうので、サーバサイドで判定するのが本来なんでしょうけどね <html> <script type="text/javascript"> function hoge() { var ans=[2,3]; var flg=true; var i=1; var q; while (q=document.getElementById('Q'+i)){ var a=q.getElementsByTagName('input'); var flg2=false; for (var n=0; n<a.length; n++){ if (a[n].checked && a[n].value==ans[i-1]) flg2=true; } q.getElementsByTagName('span')[0].style.backgroundColor=flg2?'':'yellow'; i++; flg=flg && flg2; } return flg; } </script> <body> クイズ <form method="POST" action="fuga.html"> <div id="Q1"> <p><span>問題1：なんたらかんたらどうなのよ</span><br> 回答： <input type="radio" name="A1" value="1">1.不正解 <input type="radio" name="A1" value="2">2.正解 <input type="radio" name="A1" value="3">3.不正解 </div> <div id="Q2"> <p><span>問題2：なんじゃもんじゃいってみろ</span><br> 回答： <input type="radio" name="A2" value="1">1.不正解 <input type="radio" name="A2" value="2">2.不正解 <input type="radio" name="A2" value="3">3.正解 </div> <p><input type="submit" value="回答する" onclick="return hoge()"> </form> </body> </html>
その他の回答 (2)
- ProKaseifu
- ベストアンサー率51% (98/192)
参考までに1問だけの簡易版を作ってみました。 <head> <title>Untitled</title> <script type="text/javascript"> <!-- function quiz(){ var ans = 0//答え for ( var i = 0 ; i < form1.q1.length ; i ++ ){ if ( form1.q1[i].checked && i == ans ){ location.href = "next.html"; } } document.getElementById('divq1').style.backgroundColor = 'red'; return false; } //--> </script> </head> <body> <form id="form1" method="" action=""> <div id='divq1'> <input name="q1" type="radio" value="">aaaaaaaaaa <input name="q1" type="radio" value="">bbbbbbbbbb <input name="q1" type="radio" value="">cccccccccc </div> </div> <p><input type="button" onclick="quiz()" value="回答する" /></p> </form> </body> ※hrefをbuttonに変えています。
補足
ありがとうございます！Firefoxだとなぜかエラーが出ますが、 IEだと動作しますね！ さらに複数問題があった場合の、 「全問正解ならリンク移動」って可能なんでしょうか？ あと正解でも一瞬bgcolorが変わってしまうのも気になります・・・ これは仕方がないですかね・・・
- ProKaseifu
- ベストアンサー率51% (98/192)
>HP上で簡単なクイズのページを作りたいのですが、 >私はjavascript初心者なのでさっぱり分かりません。。。 では、どこまでは理解できているのでしょうか？ javascriptを組み込んでいない現時点のhtmlファイルの内容を教えてください。内容をみて回答のアドバイスをしたいと思います。
補足
失礼いたしました。 簡略化するとhtmlはこんな感じです。 不正解のdivのエリアのみ色が変わるイメージです <body> <form name="form1" method="" action=""> <div> <input name="q1" type="radio" value="">aaaaaaaaaa <input name="q1" type="radio" value="">bbbbbbbbbb <input name="q1" type="radio" value="">cccccccccc </div> <div> <input name="q2" type="radio" value="">aaaaaaaaaa <input name="q2" type="radio" value="">bbbbbbbbbb <input name="q2" type="radio" value="">cccccccccc </div> <div> <input name="q3" type="radio" value="">aaaaaaaaaa <input name="q3" type="radio" value="">bbbbbbbbbb <input name="q3" type="radio" value="">cccccccccc </div> <div> <input name="q4" type="radio" value="">aaaaaaaaaa <input name="q4" type="radio" value="">bbbbbbbbbb <input name="q4" type="radio" value="">cccccccccc </div> <div> <input name="q5" type="radio" value="">aaaaaaaaaa <input name="q5" type="radio" value="">bbbbbbbbbb <input name="q5" type="radio" value="">cccccccccc </div> <p><a href="#">回答する</a></p> </form> </body>
お礼
完璧ですね！これです！ありがとうございました！