javascriptでクイズ

解決済

質問者：noname#81985
質問日時：2009/02/03 13:00
回答数：3件

HP上で簡単なクイズのページを作りたいのですが、
私はjavascript初心者なのでさっぱり分かりません。。。

--内容としてはこんな感じです-----------

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2009/02/03 15:14

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>

- 0
- 件

通報する

この回答へのお礼

完璧ですね！これです！ありがとうございました！

通報する

お礼日時：2009/02/03 15:35

No.2

回答者： ProKaseifu
回答日時：2009/02/03 14:54

参考までに1問だけの簡易版を作ってみました。

<head>
<title>Untitled</title>
<script type="text/javascript">

</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が変わってしまうのも気になります・・・
これは仕方がないですかね・・・

補足日時：2009/02/03 15:05

通報する

- 0
- 件

通報する

No.1

回答者： ProKaseifu
回答日時：2009/02/03 13:14

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