- ベストアンサー
JavaScriptで選択問題作成(2) - 複数選択問題を同じページに作成する方法
- JavaScriptを使用して複数選択問題を同じページに作成する方法について教えてください。
- 問題1と問題2が連動してしまい、解答した問題2で問題1も解答されてしまう問題が発生しています。
- 現在、自分でプログラムを変更して修正しようとしていますが、解決できません。どのように修正すればいいでしょうか？
- takeharu11
- お礼率39% (156/391)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
では、いつものように ていせい。 function reset () { var es = document.querySelectorAll ('fieldset.q input[type="hidden"]'); Array.prototype.forEach.call (es, function (e) { e.value = ''; }); es = document.querySelectorAll ('fieldset.q input[type="checkbox"]'); Array.prototype.forEach.call (es, function (e) { e.checked = false; }); } -- '問題数は、'+ es0.length + 'です。', を '問題数は、'+ es0.length + '問です。', に。 -- <legend>Q1. 東北の県は次のうちどれですか?</legend> を <legend>Q2. 東北の県は次のうちどれですか?</legend> に。 -- ><meta charset="utf-8">だと文字化け おもうに、ほぞんするときにutf-8でほぞんしてないだけ。 -- あまりにも しつもんの れいが ちゅうしょうてきで えすぱる
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
ていじされた こーどが めんどうなので りかいする きに なりませんでした。 ぜんかくくうはくもじは、はんかくくうはくもじに ちかんしてください。 <!DOCTYPE html> <meta charset="utf-8"> <style> fieldset.q ul { list-style: none; } </style> <body> <h1>問題</h1> <fieldset class="q"> <legend>Q1. 九州の県は次のうちどれですか?</legend> <ul> <li><label><input type="checkbox" name="q1" value="true">福岡</label> <li><label><input type="checkbox" name="q1" value="false">広島</label> <li><label><input type="checkbox" name="q1" value="true">熊本</label> <li><label><input type="checkbox" name="q1" value="false">山梨</label> <li><label><input type="checkbox" name="q1" value="true">長崎</label> </ul> <input type="button" value="解答"> <input type="hidden" name="q1" value=""> </fieldset> <fieldset class="q"> <legend>Q1. 東北の県は次のうちどれですか?</legend> <ul> <li><label><input type="checkbox" name="q2" value="false">北海道</label> <li><label><input type="checkbox" name="q2" value="true">青森</label> <li><label><input type="checkbox" name="q2" value="true">岩手</label> <li><label><input type="checkbox" name="q2" value="false">新潟</label> <li><label><input type="checkbox" name="q2" value="true">秋田</label> </ul> <input type="button" value="解答"> <input type="hidden" name="q2" value=""> </fieldset> <p> <input type="button" value="リセット"> <input type="button" value="終了"> <script> function check (e) { var fieldset = e.parentNode; var seikai = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]'); var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked'); var hidden = fieldset.querySelector ('input[type="hidden"]'); var kotae; if (seikai.length === kaitou.length) { hidden.value = 'true'; alert ('正解です。'); } else { hidden.value = ''; kotae = Array.prototype.map.call (seikai, function (e) { return e.parentNode.textContent; }).join (', '); alert ([ '不正解です。', '答えは、'+ kotae + 'です。' ].join ('\n')); } } function ending () { var es0 = document.querySelectorAll ('fieldset.q input[type="hidden"]'); var es1 = document.querySelectorAll ('fieldset.q input[type="hidden"][value=""]'); alert ([ '問題数は、'+ es0.length + 'です。', '間違いは、' + es1.length + '問あります。' ].join ('\n')); } function reset () { var es = document.querySelectorAll ('fieldset.q input[type="hidden"]'); Array.prototype.forEach.call (es, function (e) { e.value = ''; }); } function listener (event) { var e = event.target; if ('button' === e.type) switch (e.value) { case '解答' : check (e); break; case 'リセット' : reset (); break; case '終了' : ending (); break; } } reset (); document.addEventListener ('click', listener, false); </script>
補足
早速ありがとうございます。 私が作りたかったのはまさしくこんな感じです。 ただリセットをクリックしてもリセットできないのですが それと、<meta charset="utf-8">だと文字化けするのですが