- 締切済み
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% (153/388)
- 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)
せっかく作ったのでカキコしておきます(２)(笑) フレームワークは「jQuery、PIE.js」を使用しています。 「IE8、Firefox」だけでしかチェックしてません。 前に作成した「CheckQuestion028」では IE8 以下(多分 IE6～IE8)でも角が丸い立体的(グラデーション)なボタンが表示できると思われますが、 IE8 以下の場合 最初の一瞬だけボタンはフラットで ただの四角で表示されてしまいましたが、「CheckQuestion029」では IE8 以下の場合でも最初の一瞬にボタンがフラットで ただの四角に表示されないようにしています。 動的に表示位置が変更されると正常に表示できないので、動的に表示位置が変更されないように注意する必要があります。 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+sara/&bid+00000020&tsn+00000037&bts+2016/05/01%2012%3A11%3A41&
- 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)
誠にもって恥ずかしい限り。 function check (e) { var fieldset = e.parentNode; var hidden = fieldset.querySelector ('input[type="hidden"]'); var seikai = fieldset.querySelectorAll ('input[type="checkbox"][value="true"]'); var kaitou = fieldset.querySelectorAll ('input[type="checkbox"]:checked'); var matigai = fieldset.querySelectorAll ('input[type="checkbox"][value="false"]:checked'); if (matigai.length || kaitou.length !== seikai.length) { hidden.value = ''; kotae = Array.prototype.map.call (seikai, function (e) { return e.parentNode.textContent; }).join (', '); alert ([ '不正解です。', '答えは、'+ kotae + 'です。' ].join ('\n')); } else { hidden.value = 'true'; alert ('正解です。'); } } -- 正解の判定をあえて逆の考え方にしました。 htmlの中にスプリクトをおくときは、「&&」 は本来使えないので… fieldsetの中のcheckbox を拾い出すのに、querySelectorAll を連発するのは、 自分でも好くないと思います。
- 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)
正解の回答数 って言い方が不明瞭でした。 value="true" になっているチェックボックスの数（チェックが入ってるかどうかは関係ない） と ユーザーがチェックをいれたチェックボックスの数 を比較 なのでとりあえず６個チェックを入れたら正解になるような
- muuming2001
- ベストアンサー率23% (202/847)
複雑な手順踏まなくとも６個適当に回答にチェック入れれば正解になりませんか？ if (seikai.length === kaitou.length) { 正解の回答数と回答されているチェックボックスの数を比較してません？
補足
すみません! 私が言いたいのはなぜかvalue="false">山形</label> で通常は山形はfalseなので不正解にならなければいけないのに 山形にチェックを入れても正解になるのです。
お礼
ありがとうございました。 助かりました。