- 締切済み
JavaScriptで選択問題作成(3)
お世話になります。 以前ここで質問をさせてもらった件で不具合が出来たのでまた質問をさせてもらいます。 以前のスレはこれです。 http://okwave.jp/qa/q9170301.html ここで教えてもらった通りに作成していたのですが、以下のような感じです。 <!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="false">山形</label> <li><label><input type="checkbox" name="q1" value="true">長崎</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="false">山口</label> <li><label><input type="checkbox" name="q1" value="true">鹿児島</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> <li><label><input type="checkbox" name="q1" value="false">千葉</label> </ul> <input type="button" value="解答"> <input type="hidden" name="q1" 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> ここでなぜか 福岡 長崎 熊本 鹿児島 佐賀 宮崎にチェックを入れて解答したら もちろん正解になります。 その後に長崎のチェックを外してかわりに山形にチェックを入れて解答したらなぜか正解になります。もちろん山形はfalseにしています。 しかし福岡 山形 長崎 熊本 鹿児島 佐賀 宮崎にチェックを入れた状態で 解答をすると不正解になります。 何故でしょうか? 教えてください
- takeharu11
- お礼率39% (156/392)
- JavaScript
- 回答数8
- ありがとう数3
- みんなの回答 （8）
- 専門家の回答
みんなの回答
- amanojaku1
- ベストアンサー率54% (265/488)
下記「CheckQuestion031」はフレームワークを使用していません、フレームワークなんぞ良くワカランと言う場合にもオススメです。 前に作成した「CheckQuestion026」では IE8 以下だとボタンはフラットで ただの四角になってしまいますが、「CheckQuestion029」では IE8 以下(多分 IE6～IE8)でも角が丸い立体的(グラデーション)なボタンが表示できると思われますが、動的に表示位置が変更されると正常に表示できないと言う問題点がありました。 「CheckQuestion031」では IE8 以下は IE 独自のグラデーション(角は丸くできない)を使用する事により、動的に表示位置が変更されても正常にできます。 CheckQuestion031 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+sara/&bid+00000020&tsn+00000039&bts+2016/05/01%2012%3A11%3A41&
- amanojaku1
- ベストアンサー率54% (265/488)
- amanojaku1
- ベストアンサー率54% (265/488)
せっかく作ったのでカキコしておきます(笑) フレームワークは「jQuery、PIE.js」を使用しています。 「IE8、Firefox」だけでしかチェックしてません。 IE8 以下(多分 IE6～IE8)でも角が丸い立体的(グラデーション)なボタンが表示できると思われます。 動的に表示位置が変更されると正常に表示できないので、動的に表示位置が変更されないように注意する必要があります。 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+sara/&bid+00000020&tsn+00000035&bts+2016/05/01%2012%3A11%3A41&
- babu_baboo
- ベストアンサー率51% (268/525)
- muuming2001
- ベストアンサー率23% (202/847)
var kaitou = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]:checked'); これじゃ 正解の６つにチェックが入ってるかどうかだけ確認してるから 正解の６つにチェックが入っていれば、山口とか他にチェックが入っていても正解と判断しちゃいますね。 必要部分だけ記載します。何をやってるか理解いただければ幸いです。 -------------------------------------------------------------------- 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; //正解チェック数 var okcnt = 0; //不正解チェック数 var ngcnt = 0; for(var p=0;p<kaitou.length;p++){ if(kaitou[p].value === "true"){ okcnt++; }else{ ngcnt++; } } if (seikai.length === okcnt && ngcnt === 0) { hidden.value = 'true'; alert ('正解です。'); ---------------------------------------------------------------
お礼
ありがとうございました。 今日は仕事なので、休みの時に確認をしたいと思います。
- babu_baboo
- ベストアンサー率51% (268/525)
誠にもって申し訳ございません。 訂正します。 var kaitou = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]:checked');
補足
今試しに var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked'); を var kaitou = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]:checked'); に変更してみました。 でも結果は改善されません。 やはり山形や岡山にチェックを入れても正解になります。 たびたびすみません。 私も自分で色々調べたりしながらしているのですが 分からないのでお願いします。
- muuming2001
- ベストアンサー率23% (202/847)
- muuming2001
- ベストアンサー率23% (202/847)
複雑な手順踏まなくとも６個適当に回答にチェック入れれば正解になりませんか？ if (seikai.length === kaitou.length) { 正解の回答数と回答されているチェックボックスの数を比較してません？
補足
すみません! 私が言いたいのはなぜかvalue="false">山形</label> で通常は山形はfalseなので不正解にならなければいけないのに 山形にチェックを入れても正解になるのです。
お礼
ありがとうございました。 助かりました。