重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

ラジオボタンで2択のクイズを作成しています。最後に「計算」ボタンを押すと点数は出ます。あと!ラジオボタンの横にテキストボックスを設置して、正解なら「○」、不正解なら「×」と出るようにしたいのですが・・・
ぜひ教えてください。
よろしくお願いいたします。

<SCRIPT language="JavaScript">
<!--
function displayScore() {
var score = 0;
for(i=0;i<=20;i++){
if(document.form1.elements[i].checked){
score += parseInt(document.form1.elements[i].value);
}
}
document.form2.SCORE.value=score
window.alert(" あなたの点数は " + score + " 点です");

}

A 回答 (2件)

HTMLの方も見てみないとなんともいえませんが…



以下は適当に作ったもんで多少、やろうとしている事とは違いもありますが、
解析して参考にするなり、そのまま使うなりお好きにそうぞ。

<html>
<head>
<title>クイズ</title>
<style type="text/css">
label,input{cursor:pointer;}
fieldset {margin:1em 0;}
fieldset input{margin-left:1em;}
.goodanswer {
text-decoration:underline;
}
.badanswer {
color:red;
text-decoration:underline;
}
</style>
<script type="text/javascript">
// ラベル:{Q:問題文,S1..Sn:選択肢,A:正解,P:得点}
var Quiz = {
'Q1':{'Q':'パンダの体毛は黒と何色?',
'S1':'緑','S2':'白',
'A':'S2','P':10},
'Q2':{'Q':'SMAPを脱退したメンバーは?',
'S1':'伊藤君','S2':'森君','S3':'和田君',
'A':'S2','P':20}
}


function init(){
var BLOCK = document.getElementById('QUIZ');
for(var x in Quiz){
var FS = document.createElement('fieldset');
var LG = document.createElement('legend');
LG.appendChild(document.createTextNode(Quiz[x]['Q']+'('+Quiz[x]['P']+'点)'));
FS.appendChild(LG);
for(var i=1;Quiz[x]['S'+i];i++){
var SPAN = document.createElement('span');
SPAN.innerHTML = '<input type="radio" name="'+ x +'" id="'+x+'_S'+i+'">' +
'<label for="'+x+'_S'+i+'">'+Quiz[x]['S'+i]+'</label>'
FS.appendChild(SPAN);
}
BLOCK.appendChild(FS);
}

}
function calc(){
var point = 0;
for(var x in Quiz){
var S = document.getElementById(x+'_'+Quiz[x]['A']);
S.parentNode.appendChild(
document.createTextNode(S.checked?'【○】':'【×】')
);
if(S.checked)point += Quiz[x]['P'];
S.parentNode.className = S.checked?'goodanswer':'badanswer';
}
var RES = document.getElementById('RESULT');
RES.replaceChild(
document.createTextNode('結果:'+point+'点'),RES.firstChild)
}
</script>
</head>
<body onload="init()">
<div id="QUIZ"></div>
<p id="RESULT"><input type="button" value="答え合わせ" onclick="calc()"></p>
</body>
</html>
    • good
    • 0
この回答へのお礼

素人の私には全然わからなかったので、大変助かりました。
ありがとうございました。参考にさせていただきます。

お礼日時:2007/10/01 10:33

たぶんこんなことがしたいのじゃないかと。



<html>
<head>
<style type="text/css">
.maru{
display:inline;
width:20px;
border:0px solid ;
color:red;
}
</style>
<script language=javascript>
function displayScore(f){
var score = 0;
var radios=new Object();
for(i =0 ; i<f.length;i++){
if(f[i].type=="radio"){
if(!radios[f[i].name]){
radios[f[i].name]=new Object()
radios[f[i].name].flg=false;
radios[f[i].name].name=f[i].name;
}
if(f[i].checked == true){
radios[f[i].name].flg=true;
radios[f[i].name].score=parseInt(f[i].value);
}
}
}
for(var i in radios){
if(radios[i].flg==false){
alert(radios[i].name+"のチェックが抜けてるよ");
return false;
}
score+=radios[i].score;
f["maru_"+i].value=radios[i].score==0?"×":"○";
}
alert(" あなたの点数は " + score + " 点です");
}
</script>
</head>
<body>
<form>
Q1.答えはA(5点)<br>
<input type="text" name="maru_q1" class="maru">
<input type="radio" name="q1" value="5" id="q1_1"><label for="q1_1">A</label>
<input type="radio" name="q1" value="0" id="q1_2"><label for="q1_2">B</label>
<input type="radio" name="q1" value="0" id="q1_3"><label for="q1_3">C</label>
<br>
Q2.答えはA(5点)<br>
<input type="text" name="maru_q2" class="maru">
<input type="radio" name="q2" value="5" id="q2_1"><label for="q2_1">A</label>
<input type="radio" name="q2" value="0" id="q2_2"><label for="q2_2">B</label>
<input type="radio" name="q2" value="0" id="q2_3"><label for="q2_3">C</label>
<br>

Q3.答えはA(5点)<br>
<input type="text" name="maru_q3" class="maru">
<input type="radio" name="q3" value="5" id="q3_1"><label for="q3_1">A</label>
<input type="radio" name="q3" value="0" id="q3_2"><label for="q3_2">B</label>
<input type="radio" name="q3" value="0" id="q3_3"><label for="q3_3">C</label>
<input type="radio" name="q3" value="0" id="q3_4"><label for="q3_4">D</label>
<br>

Q4.答えはA(5点)<br>
<input type="text" name="maru_q4" class="maru">
<input type="radio" name="q4" value="5" id="q4_1"><label for="q4_1">A</label>
<input type="radio" name="q4" value="0" id="q4_2"><label for="q4_2">B</label>
<input type="radio" name="q4" value="0" id="q4_3"><label for="q4_3">C</label>
<input type="radio" name="q4" value="0" id="q4_4"><label for="q4_4">D</label>
<br>

Q5.答えはA(10点)<br>
<input type="text" name="maru_q5" class="maru">
<input type="radio" name="q5" value="10" id="q5_1"><label for="q5_1">A</label>
<input type="radio" name="q5" value="0" id="q5_2"><label for="q5_2">B</label>
<br>

Q6.答えはA(10点)<br>
<input type="text" name="maru_q6" class="maru">
<input type="radio" name="q6" value="10" id="q6_1"><label for="q6_1">A</label>
<input type="radio" name="q6" value="0" id="q6_2"><label for="q6_2">B</label>
<br>

Q7.答えはA(10点)<br>
<input type="text" name="maru_q7" class="maru">
<input type="radio" name="q7" value="10" id="q7_1"><label for="q7_1">A</label>
<input type="radio" name="q7" value="0" id="q7_2"><label for="q7_2">B</label>
<br>

Q8.答えはA(10点)<br>
<input type="text" name="maru_q8" class="maru">
<input type="radio" name="q8" value="10" id="q8_1"><label for="q8_1">A</label>
<input type="radio" name="q8" value="0" id="q8_2"><label for="q8_2">B</label>
<br>

Q9.答えはA(20点)<br>
<input type="text" name="maru_q9" class="maru">
<input type="radio" name="q9" value="20" id="q9_1"><label for="q9_1">A</label>
<input type="radio" name="q9" value="0" id="q9_2"><label for="q9_2">B</label>
<br>

Q10.答えはA(20点)<br>
<input type="text" name="maru_q10" class="maru">
<input type="radio" name="q10" value="20" id="q10_1"><label for="q10_1">A</label>
<input type="radio" name="q10" value="0" id="q10_2"><label for="q10_2">B</label>
<input type="radio" name="q10" value="0" id="q10_3"><label for="q10_3">C</label>
<input type="radio" name="q10" value="0" id="q10_4"><label for="q10_4">D</label>
<br>

<input type="button" value="答え合わせ" onClick="displayScore(this.form)">
</form>
</body>
</html>

この回答への補足

先日はありがとうございました。更にお聞きしてもいいでしょうか?「○×」が出た横に、正しい答え「A」とかを出したいのですが・・・ぜひぜひ教えてください。よろしくお願いいたします。

補足日時:2007/10/02 15:42
    • good
    • 0
この回答へのお礼

私には全然分からなかったので大変助かりました。参考にさせていただきます。ありがとうございました。

お礼日時:2007/10/01 10:32

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!