ラジオボタンの選択で解答・点数を表示する

解決済

質問者：machaleo
質問日時：2007/12/13 14:04
回答数：1件

10問のテストを作成しています。
(1)選択肢はラジオボタンで3択（正解は10点、その他0点）
(2)採点をクリックすると、テキストボックスに○×の結果を出し、もう一つ別のテキストボックスに×の場合は正しし解答を表示
(3)アラートで「あなたの点数は～～点」と出す
(4)FORM1.2のSCOREに点数を表示
以上のようにしたいと思い、下記のように作りました。
まだ初心者のため、長々と同じことを書くことしか分からないので、もっと簡単にまとめられる方法がありましたら、教えてください。
よろしくお願いいたします。

function dispscore() {
var score=0;

if (document.form1.q0[0].checked) {
score += 10;
document.form1.r0.value = "○";
}
else{
document.form1.r0.value = "×";
document.form1.a0.value = "ナイル川";
}

if (document.form1.q1[2].checked) {
score += 10;
document.form1.r1.value = "○";
}
else{
document.form1.r1.value = "×";
document.form1.a1.value = "バチカン市国";
}

alert("点数は "　+ score + "　点です ");
document.form1.score.value=score
document.form2.score.value=score
}
------------------------------------------------------------
<INPUT type=radio name="q1" value="10">ナイル川
<INPUT type=radio name="q1" value="0">ミシシッピー川
<INPUT type=radio name="q1 value="0">アマゾン川>
<INPUT size="3" name="r1" type="text">
<INPUT size="25" name="a1" type="text">

<INPUT type=radio name="q2" value="0">バルカン市国
<INPUT type=radio name="q2" value="0">バルタン市国
<INPUT type=radio name="q2" value="10">バチカン市国
<INPUT size="3" name="r2" type="text">
<INPUT size="25" name="a2" type="text">

通報する

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

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： yambejp
回答日時：2007/12/14 17:38

http://oshiete1.goo.ne.jp/qa3558102.html
ちょっと前に書いたのを改良してこんな感じでどうでしょう？

<html>
<head>
<script language=javascript>
var obj=new Array(10);
for(var i=0;i<obj.length;i++){
obj[i]=new Object;
obj[i].setObj=setObj;
}

//setObj(問題文,回答の選択肢をArrayでかく,正解番号、1項目目=0,配点);
obj[0].setObj("世界一長い川は？",Array("ナイル川","ミシシッピー川","アマゾン川"),0,10);
obj[1].setObj("実在するのは？",Array("バルカン市国","バルタン市国","バチカン市国"),2,10);
obj[2].setObj("省略:答えは0",Array("0","1","2"),0,10);
obj[3].setObj("省略:答えは0",Array("0","1","2"),0,10);
obj[4].setObj("省略:答えは0",Array("0","1","2"),0,10);
obj[5].setObj("省略:答えは0",Array("0","1","2"),0,10);
obj[6].setObj("省略:答えは0",Array("0","1","2"),0,10);
obj[7].setObj("省略:答えは0",Array("0","1","2"),0,10);
obj[8].setObj("省略:答えは0",Array("0","1","2"),0,10);
obj[9].setObj("省略:答えは0",Array("0","1","2"),0,10);

function setObj(question,answers,correct,point){
this.question=question;
this.answers=answers;
this.correct=correct;
this.point=point;
}
function check(f){
var point=0;
for(var i=0;i<obj.length;i++){
var num=getNumber(f["q-"+i]);
if(num >=0) point +=parseInt(f["q-"+i][num].value);
f["r-"+i].value =((obj[i].correct==num)?"○":"×");
f["a-"+i].value =obj[i].answers[obj[i].correct];
}
alert("あなたの点数は"+point+"点")
f.score.value=point;
}
function getNumber(radio){
for(var i=0;i<radio.length;i++){
if(radio[i].checked) return i;
}
return -1;
}
</script>
</head>
<body>
<form>
<script>
for(var i=0;i<obj.length;i++){
document.write("質問"+(i+1)+":"+obj[i].question+"("+obj[i].point+"点)"+"<br>")
for(var j in obj[i].answers){
document.write("<input type='radio' name='q-"+i+"' id='q-"+i+"-"+j+"' value='"+(j==obj[i].correct?obj[i].point:0)+"'><label for='q-"+i+"-"+j+"'>"+obj[i].answers[j]+"</label>")
}
document.write("<br><input size='3' type='text' name='r-"+i+"'><input type='text' name='a-"+i+"'>");
document.write("<br>")
}

</script>
<hr>
<input type="button" value="採点" onClick="check(this.form)"><br>
SCORE:<input type="text" name="score"><br>
</form>
</body>
</html>