JavaScriptで選択問題作成(3)

JavaScript OKWave

それにしても、やっちまったなぁ〜

JavaScriptで選択問題作成(3)
http://okwave.jp/qa/q9174815.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 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 ('正解です。');
  
  }
}

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>