- ベストアンサー
正解の答えを表示する方法について
- ラジオボタンで解答を選択し、採点ボタンを押すと正答が表示される方法について教えてください。
- 「○×」表示の横に、×の場合に正しい答えを（A）と表示するようにしたいです。
- どのように実装すればよいか、詳細な手順を教えてください。
- machaleo
- お礼率41% (10/24)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
最初から答えを書いておいて、非表示にしておき、 それをボタンを押したときに表示に切り替えてやればよいでしょう。 ソースがごちゃっとしていたので、html、css、jsは切り分けて処理した方がよいと思います。 以下のようにするとよいでしょう。 //qanda.htm <html> <head> <link rel="stylesheet" type="text/css" href="qanda.css"> <script type="text/javascript" src="qanda.js"></script> <title>qanda</title> </head> <body> <form> <table id="table1"> <col class="w193" /> <col class="w151" /> <col class="w44" /> <col class="w38" /> <tbody> <tr> <td> Q1：あいうえお</td> <td><input type="radio" name="q1" value="10" 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></FONT></td> <td class="alignCenter"><input type="text" name="maru_q1" class="maru" readonly></td> <td class="alignCenter"><span class="answerHidden">A</span></td> </tr> <tr> <td> Q2：かきくけこ</td> <td><input type="radio" name="q2" value="10" 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></FONT></td> <td class="alignCenter"><input type="text" name="maru_q2" class="maru" readonly></td> <td class="alignCenter"><span class="answerHidden">A</span></td> </tr> </tbody> </table> <div class="marginBottm1em"><input type="button" value=" 採 点 " id="saiten"></div> <table id="table2"> <tbody> <tr> <td> あなたの点数 <input type="text" id="score" name="score" readonly> 点</td> </tr> </tbody> </table> </form> </body> </html> //qanda.css .maru{ display:inline; width:20px; border:0px solid ; color:red; font-weight:600; } table{ border-collapse:collapse; } td{ vartical-align:middle; font-size:0.8em; text-align:left; color:#000000; height:25px; } #table1 td{ border:1px solid #999999; background-Color:1px solid #ffffff; } #table2 td{ border:0px solid; background-color:#ffff66; font-weight:bold; padding:0px; } #score{ text-align : center; width:50px; } .answerVisible{ visibility:visible; color:red; font-weight:600; } .answerHidden{ visibility:hidden; } .w193{width:193px;} .w151{width:151px;} .w44{width:44px;} .w38{width:38px;} .marginBottm1em{margin-bottom:1em;} .alignCenter{text-align:center;} //qanda.js window.onload=function(){ document.getElementById("saiten").onclick=function(){displayScore(this.form)} } 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 + " 点 です"); f.score.value=score; displayAnser(); } function displayAnser(){ var spans=document.getElementsByTagName("span"); for(var i in spans){ if(spans[i].className=="answerHidden"){ spans[i].className="answerVisible"; } } }
お礼
どうもありがとうございます。まだまだ初心者で高度なワザで私には難しいですが、頑張って勉強していきたいと思います！