<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>