- ベストアンサー
クイズの正解（○×）をテキストボックスに出す方法は・・・
- ラジオボタンの隣にテキストボックスを設置して、正解なら「○」、不正解なら「×」と表示する方法について教えてください。
- クイズ作成では、ラジオボタンで２択の選択肢を表示しています。最後に計算ボタンを押すと点数が表示されます。
- 質問者は、正解の選択肢にテキストボックスを併設し、正解なら「○」、不正解なら「×」と表示したいと考えています。
- machaleo
- お礼率41% (10/24)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （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>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
たぶんこんなことがしたいのじゃないかと。 <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>
お礼
私には全然分からなかったので大変助かりました。参考にさせていただきます。ありがとうございました。
補足
先日はありがとうございました。更にお聞きしてもいいでしょうか？「○×」が出た横に、正しい答え「Ａ」とかを出したいのですが・・・ぜひぜひ教えてください。よろしくお願いいたします。
お礼
素人の私には全然わからなかったので、大変助かりました。 ありがとうございました。参考にさせていただきます。