JavaScriptで作る、リロードごとに問題がシャッフルされるクイズ。

11646 ワード
JavaScript クイズ HTML ラジオボタン HTML テキストリンク

　JavaScriptでリロードごとに問題がシャッフルされるクイズを作った。

See the Pen Untitled by mkunu (@m-kunugi) on CodePen.

quiz.html
<html>
<head>
  <title>損益計算書クイズ</title>
  <script type="text/javascript">
  // 配列（問題と答えの選択肢）
  var array1 = [['販売手数料', 0], ['広告宣伝費', 0],
                ['受取利息', 1],
                ['支払利息', 2],
                ['固定資産売却益', 3],
                ['固定資産売却損', 4]];
  function answer(){
    for (const element of array1) {
      var choices = document.getElementsByName(element[0]) ;
      if(choices[element[1]].checked) document.getElementById('color'+ element[0]).style.color="blue"
      else document.getElementById('color'+ element[0]).style.color="red"
    }
  }
  </script>

</head>
<body>
  損益計算書クイズ
  （リロードするとランダムに表示されます。）
  <form name="f">
    <!--答え合わせのボタンの配置-->
    <input type="button" value="答え合わせ" onclick="answer()">
    <div id="order_list">
  <script type="text/javascript">
  var d1 = document.getElementById('order_list');
  // 配列をシャッフル　https://teratail.com/questions/81199
  function arrayShuffle (array) {
    var k, t, len;
    len = array.length;
    if (len < 2) {
      return array;
    }
    while (len) {
      k = Math.floor(Math.random() * len--);
      t = array[k];
      array[k] = array[len];
      array[len] = t;
    }
    return array;
    }
  arrayShuffle(array1);
  
  for (const element of array1) { // 問題の作成
    d1.insertAdjacentHTML('afterend', '<div class="order">\
      <b><p id="color'+ element[0] +'">\
      '+ element[0] +'</b><br>\
      <input type="radio" name="'+ element[0] +'" > 販売費及び一般管理費\
      <input type="radio" name="'+ element[0] +'" > 営業外収益\
      <input type="radio" name="'+ element[0] +'" > 営業外費用\
      <input type="radio" name="'+ element[0] +'" > 特別利益\
      <input type="radio" name="'+ element[0] +'" > 特別損失\
    </p></div>');
  }
  </script>
    </div>
    <!--答え合わせのボタンの配置-->
    <input type="button" value="答え合わせ" onclick="answer()">
  </form>
</body>
</html>

参考サイト

ラジオボタン式クイズの作り方
http://www2.kuma.u-tokai.ac.jp/~kfuji/hp/JavaScript/index.html

配列シャッフルの仕方
https://teratail.com/questions/81199