計算地獄(子供用) - 釣り。IT屋。毎日爆釣。(2013-10-01)

2013-10-01 [長年日記]

_ [つくる][Web] 計算地獄(子供用)

ひたすら計算をする。デモ
問題の式をクリックあるいはタッチすると答が出る。採点機能はない。

iPadとかはマルチタッチがあるのでe[0]...e[n]とあるらしい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>
</title>
<style type="text/css">
article,aside,figure,footer,header,hgroup,menu,nav,section { display: block; }
</style>
<link rel="stylesheet" type="text/css" href="dr.css" media="all" />
<script type="text/javascript">
	var ua =navigator.userAgent;
	if(ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('iPod')  > -1)
		var start = "touchstart";
	else
		var start = "click";


window.addEventListener(start,function(e){
	if(e[0]) e=e[0]; // for iPad
	var src=e.srcElement || e.target;
	if(src.tagName.toLowerCase()=="span" && src.className=="q"){
	  src.nextSibling.className="open";
	}
  });
</script>
</head>
<?php
$max=isset($_GET["level"]) ? intval($_GET["level"]) : 15;
?>
<body>
<p><form>レベル<input type="number" name="level" value="<?=htmlspecialchars($max,ENT_QUOTES)?>"/>
<input type="submit" value="変更" /></form></p>
<hr />
<table>
<?php
for($j=0;$j<40;$j++){
  echo "<tr>";
  for($i=0;$i<4;$i++){
    $a=mt_rand(1,$max);
    while(($b=mt_rand(-$a,$max))==0);
    $c=$a+$b;
	$op=$b>0 ? "+" : "-";
        echo "<td>";
	$q=$a.$op.abs($b)."=";
	$ans=$c;
	echo "<span class=\"q\">$q</span><span class=\"ans\">$ans</span>";
    echo "</td>";
  }
  echo "</tr>";
}
?>
</table>
</body>
</html>

cssはデモからパクって。

[ツッコミを入れる]