2進・16進相互練習

制作意図

こちらも、親しんでもらうことだけです。文字コードやファイルのダンプ、カラーコード、IPv6など16進数は2進よりも目にすることが多くなっています。2進に加えて16進もと思われがちですが、2進を扱いやすくするものです。

プログラムなど

「2進から10進練習」とほとんど同じです。出題数の選択の代わりに方向を選択します

初期化部分

相変わらずq,aで配列の宣言方法がアンバランスですがどちらでもいいということを示しています。

function init(d,n){
  var m=16;
  q = [];
  a = new Array(); //same with []
  if(d==16){
    for (var i = 0; m > i ; i++) {
      q.push(i.toString(16));
      a.push(i.toString(2));
    }
  }else{
    for (var i = 0; m > i ; i++) {
      q.push(i.toString(2));
      a.push(i.toString(16));
    }
  }
  ran = -1; //-1 will be never used
  toiwaku = document.getElementById("toiwaku");
  answers = document.getElementById("answers");
  toiPelement = document.createElement("p"); //dummy
  //toitextnode = document.createTextNode("");
  for (var i = 0; a.length > i ; i++) {
     var text = document.createTextNode(a[i]);
     var sentakushi = document.createElement("button");
     sentakushi.appendChild(text);
     sentakushi.setAttribute("type","button");
     sentakushi.setAttribute("onclick","answer("+i+")");
     answers.appendChild(sentakushi);
     //if(i==7) answers.appendChild(document.createElement("br"));
  }
  document.getElementById("replay").setAttribute("style","display:none;");
  document.getElementById("start").setAttribute("style","display:none;");
  toimax = n; //kurikaeshi suu
  toiNo = 1;
  seikaict=0;
  gotouct =0;
  answers.setAttribute("style","display:block;");
    spanelement = document.createElement("span");
    spanelement.appendChild(document.createTextNode(" "));
    spanelement.setAttribute("style","font-size:150%;");
  putmondai();
}

spanelementは問題の文字列のフォントサイズを大きくして目立たせるためにここで枠だけ作っています。createElement("span")はここで一回だけ行います。ということは、このspanをずっと使いまわしているのです。

innerHTMLを使えば不要な工夫ですが、当時IEでしか使えないものでしたので未だに使用を避けています。

ただ、このように一つのnodeをappendChild()を繰り返すことで、nodeが移動するということは覚えておくべきことだと思います。

再挑戦の入り口

「2進から10進練習」と全く同じです。全問解答したあとに、再挑戦するには、onclick="location.reload();" を使ってもいいのです。しかし、removeChild()を使ってみたくでこのようにしました。一度に全部削除できないので、whileを使っています。これさえしてしまえばinit()を呼び出しても大丈夫です。

function restart(m,n){
  while (toiwaku.firstChild) {
    toiwaku.removeChild(toiwaku.firstChild);
  }
  while (answers.firstChild) {
    answers.removeChild(answers.firstChild);
  }
  init(m,n);
}

1つの問題を出題

「2進から10進練習」と同じでいいのですが、問題を目立たせたくて、文字サイズを大きくしています。

function putmondai(){    
    ran = Math.floor( Math.random() *q.length );
    var text = document.createTextNode(
        "第"+toiNo+"問 : ");   // + q[ran]); move to spanelement
    toiPelement = document.createElement("p");
    toiPelement.appendChild(text);
    spanelement.firstChild.nodeValue = q[ran]; //moved here
    toiPelement.appendChild(spanelement);
    toiwaku.appendChild(toiPelement);
}

正誤判定

「2進から10進練習」とほとんど同じですが、問題を目立たせたくて文字サイズを大きくした部分spanelementについての記述が増えています。

appendChild()していたspanelementをここでremoveChild()しないと、最後の「誤答数はX」の後ろに残ってしまいます。

function answer(ans){
  if (ans == ran){
    seikaict++;
    toiPelement.firstChild.nodeValue = "第"+toiNo+"問 : 正解です。"
         +" 正解数は"+seikaict+" ,誤答数は"+gotouct;
  }
  else{
    gotouct++;
    toiPelement.firstChild.nodeValue = "第"+toiNo+"問 : 違います。"
         +" 正解数は"+seikaict+" ,誤答数は"+gotouct; 
  }
  if (toimax>toiNo){
    toiNo++;
    putmondai();
  }
  else{
    toiPelement.removeChild(spanelement);
    var text = document.createTextNode(
        "正答率は "+seikaict/(seikaict+gotouct)*100 +" % でした。");
    var pnode = document.createElement("p");
    pnode.appendChild(text);
    toiwaku.appendChild(pnode);
    answers.setAttribute("style","display:none;");
    document.getElementById("replay").setAttribute("style","display:block;");
  }
}

HTML

「2進から10進練習」とほとんど同じです。出題数の選択の代わりに方向を選択します

<div id="start">
<p>どちらかを選んでください</p>
<p><button type="button" onclick="init(16,16)">F</button> 0からFまで16問出題します</p>
<p><button type="button" onclick="init(2,16)">1111</button> 0から1111まで16問出題します </p>
</div>

<div id="toiwaku"></div>

<div id="answers"></div>

<div id="replay">
<p>再挑戦しますか?</p>
<p><button type="button" onclick="restart(16,16)">F</button> 0からFまで16問出題します</p>
<p><button type="button" onclick="restart(2,16)">1111</button> 0から1111まで16問出題します </p>
</div>