shunito/kakezan.html

## kakezan.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>かけざんチャレンジ</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<style>
#header{ margin:0; padding: 10px 20px; background-color: #EEE; }
#main {margin:0; padding: 2em; display:none;}
#input {margin:0; padding: 2em;}
#result table { border: 1px solid #CCC; }
#result th { border: 1px solid #CCC; padding: 5px; line-height:1.4; background-color: #EEE; }
#result td { border: 1px solid #CCC; padding: 5px; line-height:1.4; }
.question td { padding: 5px; font-size: 300%; }
tr.fail td { background-color: #ffd2d2;}
tr.ok td { background-color:#e3ffe7;}
.cn { text-align:center; }
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$( document ).ready(function() {

  var mondai = [];
  var result;
  var count = 0;
  var score = 0;
  var max = 20; // 問題数
  var i , x1 , x2;

  var PassSec , PassageID; // 秒数カウント用変数

  $("#max").html(max +"問");

  // 繰り返し処理の中身
  function showPassage() {
     PassSec++; // カウントアップ
     var msg = "時間 " + PassSec + " 秒"; // 表示文作成
     document.getElementById("PassageArea").innerHTML = msg; // 表示更新
  }

  // 繰り返し処理の開始
  function startShowing() {
     PassSec = 0; // カウンタのリセット
     PassageID = setInterval(showPassage,1000); // タイマーをセット(1000ms間隔)
  }

  // 繰り返し処理の中止
  function stopShowing() {
     clearInterval( PassageID ); // タイマーのクリア
  }


  function initMondai(){
    count = score = 0;
    PassSec = 0;
    for(i=0;i<max;i++){
      x1 = Math.floor (Math.random () * 9) + 1
      x2 = Math.floor (Math.random () * 9) + 1
      mondai[i] = [ x1, x2, x1*x2 ];
    }
  }


  function upMondai( num ){
    var qu = mondai[num];

    $("#x1").text( qu[0] );
    $("#x2").text( qu[1] );
    $("#ans").val("");
    $("#ans").focus();

  }

  $("#ans").keydown(function(e){
    var key = e.keyCode;
    var ans;
    var qu = mondai[count];
    var r;

    // Hit Return
    if( key === 13){
        console.log( "check" );
        ans = parseInt( $("#ans").val(),10);

        console.log( ans , qu[2] );
        r = ['<td>', qu[0],' × ', qu[1] , ' = ', ans ,'</td><td class="cn">' , qu[2], '</td></tr>' ].join("");

        if( ans === qu[2] ){
          result += '<tr class="ok"><td class="cn">' +(count+1)+ '</td><td class="cn">◯</td>' + r;
          $("#score").text( $("#score").text( ) + "◯" );
          score++;
        }
        else{
          result += '<tr class="fail"><td class="cn">' +(count+1)+ '</td><td class="cn">×</td>' + r;
          $("#score").text( $("#score").text( ) + "×" );
        }
        count++;

        if(count >= max){
          stopShowing();
          $("#score").text( $("#score").text( ) + "　終了！" + score + "点でした。" );
          $("#qu").hide();
          showResult();
          $("#start").show();
        }
        else{
          upMondai( count );
        }
    }

  });

  function showResult(){
    var table = "<table>";
    table += '<tr><th>問題</th><th>採点</th><th>問題と回答</th><th>正解</th></tr>';
    table += result + "</table>";

    $("#result").html(table);
    $("#result").show();

  }

  function startMondai(){
    result = "";
    initMondai();
    upMondai(0);
    $("#result").html("").hide();
    $("#main").show();
    $("#qu").show();
    $("#PassageArea").html("-");
    $("#score").html("採点 ");
    startShowing();
    $("#ans").focus();
  }

  $("#start").on("click",function(){
    startMondai();
    $("#start").hide();

  });

});

</script>
</head>
<body>
<div id="header">かけざんチャレンジ　<span id="max"></span></div>
<div id="main">
  <div id="PassageArea">時間経過</div>
  <div id="score">採点 </div>
  <div id="qu">
    <table class="question">
      <tbody>
        <tr>
          <td><span id="x1" class="mondai">1</span></td>
          <td><span class="mondai">×</span></td>
          <td><span id="x2" class="mondai">1</span></td>
          <td><span class="mondai">=</span></td>
          <td><input type="text" name="ans" id="ans" /></td>
          </tr>
      </tbody>
    </table>
  </div>
  <div id="result"></div>
</div>
<div id="input">
  <button id="start">問題スタート</button>
</div>

<div id="footer"><p></p></div>
</body>
</html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>かけざんチャレンジ</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
	<style>
	#header{ margin:0; padding: 10px 20px; background-color: #EEE; }
	#main {margin:0; padding: 2em; display:none;}
	#input {margin:0; padding: 2em;}
	#result table { border: 1px solid #CCC; }
	#result th { border: 1px solid #CCC; padding: 5px; line-height:1.4; background-color: #EEE; }
	#result td { border: 1px solid #CCC; padding: 5px; line-height:1.4; }
	.question td { padding: 5px; font-size: 300%; }
	tr.fail td { background-color: #ffd2d2;}
	tr.ok td { background-color:#e3ffe7;}
	.cn { text-align:center; }
	</style>

	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">

	$( document ).ready(function() {

	var mondai = [];
	var result;
	var count = 0;
	var score = 0;
	var max = 20; // 問題数
	var i , x1 , x2;

	var PassSec , PassageID; // 秒数カウント用変数

	$("#max").html(max +"問");

	// 繰り返し処理の中身
	function showPassage() {
	PassSec++; // カウントアップ
	var msg = "時間 " + PassSec + " 秒"; // 表示文作成
	document.getElementById("PassageArea").innerHTML = msg; // 表示更新
	}

	// 繰り返し処理の開始
	function startShowing() {
	PassSec = 0; // カウンタのリセット
	PassageID = setInterval(showPassage,1000); // タイマーをセット(1000ms間隔)
	}

	// 繰り返し処理の中止
	function stopShowing() {
	clearInterval( PassageID ); // タイマーのクリア
	}


	function initMondai(){
	count = score = 0;
	PassSec = 0;
	for(i=0;i<max;i++){
	x1 = Math.floor (Math.random () * 9) + 1
	x2 = Math.floor (Math.random () * 9) + 1
	mondai[i] = [ x1, x2, x1*x2 ];
	}
	}


	function upMondai( num ){
	var qu = mondai[num];

	$("#x1").text( qu[0] );
	$("#x2").text( qu[1] );
	$("#ans").val("");
	$("#ans").focus();

	}

	$("#ans").keydown(function(e){
	var key = e.keyCode;
	var ans;
	var qu = mondai[count];
	var r;

	// Hit Return
	if( key === 13){
	console.log( "check" );
	ans = parseInt( $("#ans").val(),10);

	console.log( ans , qu[2] );
	r = ['<td>', qu[0],' × ', qu[1] , ' = ', ans ,'</td><td class="cn">' , qu[2], '</td></tr>' ].join("");

	if( ans === qu[2] ){
	result += '<tr class="ok"><td class="cn">' +(count+1)+ '</td><td class="cn">◯</td>' + r;
	$("#score").text( $("#score").text( ) + "◯" );
	score++;
	}
	else{
	result += '<tr class="fail"><td class="cn">' +(count+1)+ '</td><td class="cn">×</td>' + r;
	$("#score").text( $("#score").text( ) + "×" );
	}
	count++;

	if(count >= max){
	stopShowing();
	$("#score").text( $("#score").text( ) + "　終了！" + score + "点でした。" );
	$("#qu").hide();
	showResult();
	$("#start").show();
	}
	else{
	upMondai( count );
	}
	}

	});

	function showResult(){
	var table = "<table>";
	table += '<tr><th>問題</th><th>採点</th><th>問題と回答</th><th>正解</th></tr>';
	table += result + "</table>";

	$("#result").html(table);
	$("#result").show();

	}

	function startMondai(){
	result = "";
	initMondai();
	upMondai(0);
	$("#result").html("").hide();
	$("#main").show();
	$("#qu").show();
	$("#PassageArea").html("-");
	$("#score").html("採点 ");
	startShowing();
	$("#ans").focus();
	}

	$("#start").on("click",function(){
	startMondai();
	$("#start").hide();

	});

	});

	</script>
	</head>
	<body>
	<div id="header">かけざんチャレンジ　<span id="max"></span></div>
	<div id="main">
	<div id="PassageArea">時間経過</div>
	<div id="score">採点 </div>
	<div id="qu">
	<table class="question">
	<tbody>
	<tr>
	<td><span id="x1" class="mondai">1</span></td>
	<td><span class="mondai">×</span></td>
	<td><span id="x2" class="mondai">1</span></td>
	<td><span class="mondai">=</span></td>
	<td><input type="text" name="ans" id="ans" /></td>
	</tr>
	</tbody>
	</table>
	</div>
	<div id="result"></div>
	</div>
	<div id="input">
	<button id="start">問題スタート</button>
	</div>

	<div id="footer"><p></p></div>
	</body>
	</html>