Skip to content

Instantly share code, notes, and snippets.

@shunito
Created December 7, 2014 04:30
Show Gist options
  • Save shunito/135cf7a5ae867e9700e1 to your computer and use it in GitHub Desktop.
Save shunito/135cf7a5ae867e9700e1 to your computer and use it in GitHub Desktop.
かけざんチャレンジ
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment