<html>
<head>
 <meta charset='utf-8'>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
   <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
     <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
     <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
     <!-- QQ强制竖屏 -->
     <meta name="x5-orientation" content="portrait">
     <!-- UC强制全屏 -->
     <meta name="full-screen" content="yes">
     <!-- QQ强制全屏 -->
     <meta name="x5-fullscreen" content="true">
     <!-- UC应用模式 -->
     <meta name="browsermode" content="application">
     <!-- QQ应用模式 -->
     <meta name="x5-page-mode" content="app">
	<title>图形计算与推理</title>
	    <style type="text/css">
    tr:hover{background-color:#DDECF3;}      /* 通过CSS实现鼠标悬停高亮色 */
    .contentTitle{
    background-color:beige;padding:15px;font-size:18px;
    }
    .contentRow{
    padding:5px;font-family:Courier;letter-spacing:2px;text-indent:20px;display: inline-block;vertical-align:middle;
    }
    td{
    height: 51px;
    }
    </style>
	<script type="text/javascript">



function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; 
}

function getExpressions(){
m=[];
m[0]="A";
m[1]="B";
m[2]="C";
n=[];
n[0]="+";
n[1]="+";
n[2]="-";
var maxA=10;
var maxB=10;
var maxN=3;
var A=getRandomInt(1, maxA);

var B=getRandomInt(1, maxB);

var C=getRandomInt(1, maxB);


var na=3;//getRandomInt(2, maxN);
ex="";
for(var i=1;i<=na-1;i++){ ex+=m[getRandomInt(0,3)]+n[getRandomInt(0,3)];}
ex+=m[getRandomInt(0,3)];


ex2="";
for(var i=1;i<=na-1;i++){ ex2+=m[getRandomInt(0,3)]+n[getRandomInt(0,3)];}
ex2+=m[getRandomInt(0,3)];

ex3="";
for(var i=1;i<=na-1;i++){ ex3+=m[getRandomInt(0,3)]+n[getRandomInt(0,3)];}
ex3+=m[getRandomInt(0,3)];


while(eval(ex)<0 
||eval(ex2)<0 
||eval(ex3)<0 
|| eval(ex)==eval(ex2) 
|| eval(ex)==eval(ex3) 
|| eval(ex2)==eval(ex3) 
|| ex.indexOf("A")==-1 
||	ex.indexOf("B")==-1
||	ex.indexOf("C")==-1
|| ex2.indexOf("A")==-1 
||	ex2.indexOf("B")==-1
||	ex2.indexOf("C")==-1
|| ex3.indexOf("A")==-1 
||	ex3.indexOf("B")==-1
||	ex3.indexOf("C")==-1){
	A=getRandomInt(1, maxA);

	B=getRandomInt(1, maxB);
 	C=getRandomInt(1, maxB);
 	//na=3;//getRandomInt(2, maxN);
	ex="";
	for(var i=1;i<=na-1;i++){ ex+=m[getRandomInt(0,3)]+n[getRandomInt(0,3)];}
	ex+=m[getRandomInt(0,3)];


	ex2="";
	for(var i=1;i<=na-1;i++){ ex2+=m[getRandomInt(0,3)]+n[getRandomInt(0,3)];}
	ex2+=m[getRandomInt(0,3)];	

	ex3="";
	for(var i=1;i<=na-1;i++){ ex3+=m[getRandomInt(0,3)]+n[getRandomInt(0,3)];}
	ex3+=m[getRandomInt(0,3)];
	}
 return {"ex":ex+"="+eval(ex),"ex2":ex2+"="+eval(ex2),"ex3":ex3+"="+eval(ex3),"A":A,"B":B,"C":C};
}

function createRow(que,i){
	var pics=getABCPics();
	var picA=pics.A;
	var picB=pics.B;
	var picC=pics.C;
	addNewTr("<div class='contentTitle' >"+"第 "+i+" 题"+"</div>");
	addNewTr("<div class='contentRow' >"+que.ex.replace(new RegExp('A','g'),picA).replace(new RegExp('B','g'),picB).replace(new RegExp('C','g'),picC)+"</div>");
	addNewTr("<div class='contentRow'>"+que.ex2.replace(new RegExp('A','g'),picA).replace(new RegExp('B','g'),picB).replace(new RegExp('C','g'),picC)+"</div>");
	addNewTr("<div class='contentRow'>"+que.ex3.replace(new RegExp('A','g'),picA).replace(new RegExp('B','g'),picB).replace(new RegExp('C','g'),picC)+"</div>");
	var rowId=i;
	var answer = "A="+que.A+" , B="+que.B+" , C="+que.C;
	addNewTr("<div  class='contentRow'>"+picA+"=<input id=A"+rowId+" type='text' style='width:30px'/>,"+picB+"=<input id=B"+rowId+" type='text'  style='width:30px'/>,"+picC+"=<input id=C"+rowId+" type='text'  style='width:30px'/>"+"</div>");
	addNewTr("<div  class='contentRow'>"+"<input  type='button' value='提交' onclick='check(\""+rowId+"\",\""+que.A+"\",\""+que.B+"\",\""+que.C+"\");'/>"+"<span id='mark"+rowId+"'></span></div>");
	//addNewTr("");
}
function addNewTr(str){
	var editTable=document.getElementById("tbody");
	var tr4=document.createElement("tr");
	var td4=document.createElement("td");
	td4.innerHTML=str;
	tr4.appendChild(td4);
	editTable.appendChild(tr4);
}
function loadQuo(){
	
	var s="";
for(var i=1;i<11;i++){
s+="第 "+i+" 题:\r\n";
var a=getExpressions();
s+=a.ex+"\r\n";
s+=a.ex2+"\r\n";
s+=a.ex3+"\r\n";
s+="A=(  ), B=(  ), C=(  )"+"\r\n";
s+="-------------------------\r\n";
 createRow(a,i);
}
console.log(s);
}
function check(rowId,answerA,answerB,answerC){
	var answerAVal = document.getElementById("A"+rowId).value;
	var answerBVal = document.getElementById("B"+rowId).value;
	var answerCVal = document.getElementById("C"+rowId).value;
	if (answerA==answerAVal && answerB==answerBVal&& answerC==answerCVal) {
		document.getElementById("mark"+rowId).innerHTML="<span style='color:green;font-size:14px'> √ 恭喜你回答正确!</span>"
		+changeLevel("http://zxs731.github.io/index4_1.html","升一级");
	}else{
		document.getElementById("mark"+rowId).innerHTML="<span style='color:red;font-size:14px'> X 错误,再试一次吧!</span>"
			+changeLevel("http://zxs731.github.io/index3_5.html","简单点");
	}
}
function changeLevel(url,level){
	return "<a href='"+url+"' style='color:green;font-size:14px'>"+level+"</a>";
};
function getPicDiv(str){
	var numx = getRandomInt(0, 10)*40;
	var numy = getRandomInt(0, 10)*40;
	var bordercolor="deepskyblue";
	if (str=="A") 
		bordercolor="darkorange";
	else if (str=="C") {
		bordercolor="red";
	};
	var div ='<div style="display: inline-block;background: transparent url(2.jpg) no-repeat scroll -'+numx+'px -'+numy+'px;height: 40px;width: 40px;border-radius: 30px;vertical-align: middle;border-style:outset;border-color:'+bordercolor+'"></div>';
	return div;
}
function getABCPics(){
	var picA=getPicDiv("A");
	var picB=getPicDiv("B");
	var picC=getPicDiv("C");
	while (picA==picB || picA==picC || picB==picC) {
	 picA=getPicDiv("A");
	 picB=getPicDiv("B");
	 picC=getPicDiv("C");
	};
	return {"A":picA,"B":picB,"C":picC};
}
	</script>
</head>
<body onload="loadQuo();">
	 <table id="editTable"  width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="gray" style="border-collapse:collapse;">
		 <tr>
			<th><div style='padding:5px;font-size: 18px'>图形推理计算</div></th>
		 </tr>
		 <tbody id="tbody">
 
		 </tbody>
	</table>
</body>
</html>