- 締切済み
答えを○か×か表示するソースを教えて下さい。
JavaScript初心者で、3択問題を作成しています。 問題文や、採点、解答（解説）のソースは記述で来たのですが、クイズに答えてくれた方に問題の正誤が分かりやすいように、正解した問題文の枠の色が青になったり、枠の横に「○」が表示されるようにしたいと考えています。 質問が分かりにくくてすみません！どうか回答をよろしくお願いします！ <html> <head> <title>問題3</title> <script language="JavaScript"> <!-- var msg1,msg2,msg3,msg4,msg5,msg6,msg7,msg8,msg9,msg10; function MakeArray(n){this.Length=n;} var cont=new MakeArray(11); function KUIZU1(fm,nn){msg1=fm.value;cont[1]=nn;} function KUIZU2(fm,nn){msg2=fm.value;cont[2]=nn;} function KUIZU3(fm,nn){msg3=fm.value;cont[3]=nn;} function KUIZU4(fm,nn){msg4=fm.value;cont[4]=nn;} function KUIZU5(fm,nn){msg5=fm.value;cont[5]=nn;} function KUIZU6(fm,nn){msg6=fm.value;cont[6]=nn;} function KUIZU7(fm,nn){msg7=fm.value;cont[7]=nn;} function KUIZU8(fm,nn){msg8=fm.value;cont[8]=nn;} function KUIZU9(fm,nn){msg9=fm.value;cont[9]=nn;} function KUIZU10(fm,nn){msg10=fm.value;cont[10]=nn;} function SUM(fm){n1=0; for (i=1;i<11;i++){ n1=n1+cont[i];} if (isNaN(n1)) {alert("入力されてない項目があります。");}else false; fm.answer1.value=n1; } function disp(){document.MyForm.Result.value="第一問："+msg1+"\n"+"第二問:"+msg2+"\n"+"第三問："+msg3+"\n"+"第四問："+msg4+"\n"+"第五問:"+msg5+"\n"+"第六問:"+msg6+"\n"+"第七問:"+msg7+"\n"+"第八問:"+msg8+"\n"+"第九問:"+msg9+"\n"+"第十問:"+msg10; } //--> </script> </head> <body bgcolor="ivory"> <form name="timer"> <input type="text" value="">分 <input type="text" value="">秒<br> <input type="button" value="スタート" onclick="Start()"> <input type="button" value="ストップ" onclick="Stop()"> <input type="button" value="クリア" onclick="ReSet()"> </form> <center> <span>問題3</span> <hr> <h2>ヒント付きテスト （択一問題×10 各1点）</h2> </center> <table border=4> <form method="POST"><tr><td> １．Microsoft社が開発した表計算ソフトの名前は？<br> </td><td> <input type="radio" name="back" value="不正解（パワーポイント(PowerPoint)は、会議や発表用のスライドを作成する時に使います。）" onClick="KUIZU1(this,0)">パワーポイント<br> </td><td> <input type="radio" name="back" value="不正解（ワード(Word)は、報告書やレポートの文書を作成する時に使います。）" onClick="KUIZU1(this,0)">ワード<BR> </td><td> <input type="radio" name="back" value="正解（正解）" onClick="KUIZU1(this,1)">エクセル<BR> </td><td> <input type="button" value="ヒント" span onClick="document.all.item('moji1').style.visibility='visible'"></span> <div ID="moji1" style="visibility:hidden;">この教材で学習しているのは?</div> </td></tr> </form><form method="POST"> <tr><td> ２．Excelで出来ることは？<br> </td><td> <input type="radio" name="back" value="不正解（Wordの解説。）" onClick="KUIZU2(this,0)">報告書や原稿の文書を作成すること<br> </td><td> <input type="radio" name="back" value="不正解（PowerPointの解説。）" onClick="KUIZU2(this,0)">プレゼンテーション用のスライドを作成すること<BR> </td><td> <input type="radio" name="back" value="正解（正解）" onClick="KUIZU2(this,1)">作成した表の数値からグラフを作成すること<BR> </td><td> <input type="button" value="ヒント" span onClick="document.all.item('moji2').style.visibility='visible'"></span> <div ID="moji2" style="visibility:hidden;"></div> </td></tr> </form><form method="POST"> <tr><td> １０．開いているExcelのファイル名はどこに表示されている？<br> </td><td> <input type="radio" name="back" value="不正解（操作対象となっているセルの位置や、名前を表示しています。。）" onClick="KUIZU10(this,0)">名前ボックス<br> </td><td> <input type="radio" name="back" value="不正解（ワークシートの見出しです。）" onClick="KUIZU10(this,0)">シート見出し<br> </td><td> <input type="radio" name="back" VALUE="正解（正解）" onClick="KUIZU10(this,1)">タイトルバー<br> </td><td> <input type="button" value="ヒント" span onClick="document.all.item('moji10').style.visibility='visible'"></span> <div ID="moji10" style="visibility:hidden;">ヒント</div> </td></tr> </form><form method="POST"><tr><td> </table> </form> <form method="POST" name="MyForm"> 確認の上，採点ボタンを押して下さい。<br> <input type="button" value="採点" onClick="SUM(this.form)"><br> <input type="text" size=6 name="answer1">点<br> 解答ボタンを押して下さい。解答がでます。<br> <input type="button" value="解答" onClick="disp()"><br> <textarea name="Result" rows=10 cols=100></textarea><br> </form> </body> </html>
- Chausaito
- お礼率0% (0/3)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
ていせい。 document.addEventListener('click', function (event) { var e = event.target; var n; に。 ごめん。
- babu_baboo
- ベストアンサー率51% (268/525)
ぐだぐだになってしまった。ごめんなさい。さんこうにもならないね。 ぜんかくくうはくは、はんかくで、かなりあたらしいぶらうざで！ <!DOCTYPE html> <html lang="ja"> <head> <title>問題3</title> <meta charset="utf-8"> <title>MyNote</title> <style> body { background : ivory; } table { border : 4px gray solid; } td, th { border:1px gray solid; } tbody td:last-of-type { text-decoration: underline; cursor :pointer; white-space: nowrap; } </style> </head> <body> <h1>問題3</h1> <form id="hoge" onsubmit="return false"> <table> <caption>ヒント付きテスト （択一問題×10 各1点）</caption> <thead> <tr> <th>問題 <th colspan="3">回答 <th>正誤 <th>ヒント </thead> <tbody> <tr> <th>Microsoft社が開発した表計算ソフトの名前は？ <td>パワーポイント <td>ワード <td>エクセル <td> <td>ヒント <tr> <th>Excelで出来ることは？ <td>報告書や原稿の文書を作成すること <td>プレゼンテーション用のスライドを作成すること <td>作成した表の数値からグラフを作成すること <td> <td>ヒント </tbody> </table> </form> <form id="huga"> <p> 確認の上，採点ボタンを押して下さい。 <p> <input type="button" value="採点"><br> <input type="text" size="6" name="answer">点 <p> <input type="button" value="解答"><br> <textarea name="result" rows="10" cols="100">解答ボタンを押して下さい。解答がでます。</textarea> </form> <script> function getp(a,b,c){return a?c==a[b]?a:arguments.callee(a.parentNode,b,c):null}; var Answer = [ { 'answer' : 2, 'aid' : [ '不正解（パワーポイント(PowerPoint)は、会議や発表用のスライドを作成する時に使います。）', '不正解（ワード(Word)は、報告書やレポートの文書を作成する時に使います。）', '正解（正解）' ], 'hint' : '似たようなものでマルチプランというのもありました' }, { 'answer' : 2, 'aid' : [ '不正解（Wordの解説。）', '不正解（PowerPointの解説。）', '正解（正解）' ], 'hint' : 'この教材で学習しているのは?' } ]; (function () { var doc = document; var tbody = doc.querySelector ('#hoge tbody'); var radio = doc.createElement ('input'); radio.type = 'radio'; Array.prototype.forEach.call (tbody.rows, function (row, i) { var cell = row.cells; radio.name = 'Qu_' + i; radio.value = '0'; cell[1].insertBefore (radio.cloneNode (false), cell[1].firstChild); radio.value = '1'; cell[2].insertBefore (radio.cloneNode (false), cell[2].firstChild); radio.value = '2'; cell[3].insertBefore (radio.cloneNode (false), cell[3].firstChild); }); this.saiten = function () { var point = 0; Array.prototype.map.call (tbody.rows, function (row, i) { var radio = row.querySelector ('input[type="radio"]:checked'); if (! radio) return alert ('選択されていない項目' + (i+1) + 'があります'); point += +(radio.value === String (Answer[i].answer)); }); doc.querySelector ('#huga input[name="answer"]').value = point; }; this.kaitou = function () { var mess = []; Array.prototype.map.call (tbody.rows, function (row, i) { var radio = row.querySelector ('input[type="radio"]:checked'); if (! radio) return alert ('選択されていない項目' + (i+1) + 'があります'); if (radio.value === String (Answer[i].answer)) { row.cells[4].firstChild.nodeValue="●"; row.cells[1+Answer[i].answer].style.border = '2px blue solid'; } else { row.cells[4].firstChild.nodeValue=""; row.cells[1+Answer[i].answer].style.border = '1px gray solid'; } mess.push ('第'+ (1+i) + '問:' + Answer[i].aid[Number (radio.value)]); }); doc.querySelector ('#huga textarea[name="result"]').value = mess.join ('\n'); }; })(); function Goto (v) { if ('採点' === v) saiten (); else if ('解答' === v) kaitou (); } document.addEventListener('click', function (event) { var e = event./*@if (1) srcElement @else@*/ target /*@end@*/; var n; if ('TD' === e.nodeName && getp (e, 'id', 'hoge')) { n = e.cellIndex; if (5 == n) { alert (Answer[e.parentNode.rowIndex-1].hint); } } else if ('INPUT' === e.nodeName) Goto (e.value); }, false); </script> </body> うっ！ もじすうせいげんがきつい！
- babu_baboo
- ベストアンサー率51% (268/525)
こんにちは。おいそぎでなければ、HTMLのぶんぽうちぇっかーがあります。それをためしましょう。 あなたなら、１００点とれるとおもいます。 Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html <table>のすぐしたに<form>があるなんてまちがいです。
補足
回答ありがとうございます。参考サイト様でチェックしていただいた所、<table>にSUMMARY 属性を指定した方が良いとのことで99点でした。 画像は変更していませんが、ご指摘通りに<form>タグを消しました。<tr><td>タグも一緒に消していたため、枠が消えてしまうことに気がつきました。ありがとうございます。 現在も試行錯誤しているのですが、解答した問題の正誤（○×ないし色がつく）が表示できません。 javascript解説サイト様を参考に作っていますが、なかなか上手くいかないですね…。