• //var n=1; //initial settings var min1=1; var max1=1; var min2=12; var max2=50; var GONews; function setHTML(id,text){ var e=document.getElementById(id); if (e==null) return; e.innerHTML=text; } class Movable { static DOWN=1; static UP=2; static mouse=2; static x1=0; static y1=0; static ctx; static list=new Array(); static list1=new Array(); static list2=new Array(); static selected=null; constructor(x,y){ this.x0=x; this.y0=y; } inside(x,y){ return true; } draw (ctx1){ ; } move (e){ var dx=e.offsetX-Movable.x1; var dy=e.offsetY-Movable.y1; this.x0+=dx; this.y0+=dy; Movable.x1=e.offsetX; Movable.y1=e.offsetY; this.draw(Movable.ctx); } static mouseUp() { Movable.mouse=Movable.UP; } static mouseDown(e) { Movable.mouse=Movable.DOWN; Movable.x1=e.offsetX; Movable.y1=e.offsetY; } static isMouseDown() { if (Movable.mouse==Movable.DOWN) return true; return false; } static isInside (e){ for (var i=0;i=0 && x<=this.w && y>=0 &&y<=this.h) return true; return false; } draw (ctx){ ctx.fillStyle="blue"; ctx.fillRect(this.x0, this.y0, this.w, this.h); ; } } class MyCircle extends Movable { constructor (xx,y,r,id){ super (xx,y); this.r=r; //this.h=h; this.id=id; } setlocation (x,y){ this.x0=x; this.y0=y; } inside(x,y){ x-=this.x0; y-=this.y0; var r=this.r; if((x*x+y*y)<(r*r)) return true; return false; } /*move (e){ super.move(e); var newx0=this.x0-300; var newy0=this.y0-200; var angleP=Math.atan2(newy0,newx0); this.x0=300+75*Math.cos(angleP); this.y0=200+75*Math.sin(angleP); }*/ draw (ctx){ ctx.strokeStyle="brown"; ctx.beginPath(); //ctx.lineTo(this.x0+20,this.y0+20); var newx0=this.x0-300; var newy0=this.y0-200; var angleP=Math.atan2(newy0,newx0); var d=Math.sqrt(newx0*newx0+newy0*newy0); var newx=300+(d+this.r)*Math.cos(angleP); var newy=200+(d+this.r)*Math.sin(angleP); var newx1=300+(d-this.r)*Math.cos(angleP); var newy1=200+(d-this.r)*Math.sin(angleP); //this.x0=300+75*Math.cos(angleP); //this.y0=200+75*Math.sin(angleP); //ctx.moveTo(newx1,newy1); //ctx.lineTo(newx,newy); //ctx.arc(this.x0, this.y0, this.r,0,2*Math.PI); ctx.fillStyle="red"; ctx.font="30px Arial"; ctx.textAlign = "center"; ctx.fillText(""+this.id,this.x0, this.y0+7); if (angleP<0)angleP+=Math.PI*2; angleP=angleP*180/Math.PI; angleP=360-angleP; angleP=angleP-90; if (angleP<0)angleP=angleP+360; //if (angleP<0) angleP=-angleP; //ctx.fillText(""+(angleP).toFixed(0),this.x0, this.y0+7); //ctx.moveTo(0, 0); //ctx.lineTo(this.x0, this.y0) ctx.stroke(); } } class MyContainer { constructor (x,y,r,type, color){ //constructor (x,y,w, h,color){ this.x0=x; this.y0=y; this.r=r; this.type=type; this.color=color; } inside(x,y){ x-=this.x0; y-=this.y0; var r=this.r; if((x*x+y*y)<(r*r)) return true; return false; } draw (ctx){ ctx.strokeStyle=this.color; ctx.beginPath(); ctx.arc(this.x0, this.y0, this.r,0,2*Math.PI); ctx.stroke(); } isOK(n){ if (this.inside(n.x0,n.y0)==false) return 0; var re=0; switch (this.type) { case 1: if (n.id%2==1) re= 1; break; case 2: if (n.id%2==0) re= 1; break; case 3: if (n.id%3==0) re= 1; break; } } } function doMouseDown(event) { //alert("mouse is down"); //var m=document.getElementById("mouseInfo"); //m.innerHTML="mouse is down"; Movable.mouseDown(event); Movable.isInside(event); } function doMouseUp(event) { //alert("mouse is up"); //var m=document.getElementById("mouseInfo"); //m.innerHTML="mouse is up"; Movable.mouseUp(); //Movable.positionOK(); CheckAnsow(n); } function doMouseMove(event) { //alert("mouse is up"); //var m=document.getElementById("mouseInfo"); //m.innerHTML="mouse is moving: ("+event.offsetX+", "+event.offsetY+")"; if (Movable.isMouseDown() && Movable.moveSelected(event)) { redraw(Movable.ctx); } } function doMouseWheel(event) { //alert("mouse is up"); //var m=document.getElementById("mouseInfo"); //m.innerHTML="mouse is wheeling: ("+event.offsetX+", "+event.offsetY+")"; } function initCanvas(canvasName) { var canvas = document.getElementById(canvasName); canvas.addEventListener('mousedown',doMouseDown,false); canvas.addEventListener('mouseup',doMouseUp,false); canvas.addEventListener('mousemove',doMouseMove,false); canvas.addEventListener('mousewheel',doMouseWheel,false); //document.addEventListener('keydown',doKeyDown); //document.addEventListener('keyup', doKeyUp); return canvas; } function redraw(ctx) { var n=getRndInteger(min1,max1); ctx.fillStyle="white"; ctx.fillRect(0,0,canvas.width,canvas.height); //ctx.arc(0,0,50,0,2*Math.PI); Movable.redraw(); if (lang==0){ if (n==1){ setHTML("c1","Place the six numbers below into the empty circles, "); setHTML("c2","so that both operations give the correct results."); //setHTML("c3","Please remenber: Use each number once and only once."); }else if (n==2){ setHTML("c1","The odd numbers go in the blue circle"); } }else{ if (n==1){ setHTML("c1","将下面的六个数字放入空圆圈中, "); setHTML("c2","以便这两个等式成立。"); //setHTML("c3","请记住每个数字使用一次且仅一次。"); }else if (n==2){ setHTML("c1","奇数进入蓝色圆圈"); } } Movable.redraw(); /* Container1.draw(ctx); Container2.draw(ctx); Container3.draw(ctx); Container4.draw(ctx); Container5.draw(ctx); Container6.draw(ctx); */ /*if (GONews==1){ if (lang==0){ Movable.ctx.fillText ("Good job!!! Try next quesiton?",500,50); }else{ ctx.fillText("恭喜成功!!尝试下一个问题?",500, 50); } }*/ ctx.fillStyle="red"; ctx.font="50px Arial"; ctx.textAlign = "center"; ctx.fillText("+",300, 220); ctx.fillText("=",500, 220); ctx.fillText("-",300, 320); ctx.fillText("=",500, 320); //drawNumbers(ctx, 300,200,radius); } function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; } function getRandomPara(){ /*n=getRndInteger(min1,max1); randomNum=getRndInteger(min2,max2); var id=new Array(); var x=0; var err; for (i=0;i<13;i++){ id[i]=x; } for (i=0;i<12;i++){ for (k=1;k<100;k++){ err=0; var ik=Math.floor(Math.random() * randomNum)+2; for (j=0;j<12;j++){ if(id[j]==ik) err=1; } if (err==0) break; } id[i]=ik; }*/ //============================ } //======= initializing ======== var radius=100; var canvas=initCanvas("myCanvas"); var ctx = canvas.getContext("2d"); var paraStr=window.location.search; Movable.ctx=ctx; var min1 = 1; var max1 = 1; var min2 = 12; var max2 = 24; var n=0; var nPosition; var randomNum = 0; function getURLpara() { var para=window.location.search; var i; if ( (i=para.indexOf("&p="))<0 && (i=para.indexOf("?p="))<0) return []; var tok=para.substring(i+3).split(/[=,]+/); return tok; } var ss=getURLpara(); //=paraStr.substring(3).split(/[=,]+/); if (ss.length==4) { //N=parseInt(ss[0]); min1=parseInt(ss[0]); max1=parseInt(ss[1]); min2=parseInt(ss[2]); max2=parseInt(ss[3]); } //var n=getRndInteger(min1,max1); //var randomNum=getRndInteger(min2,max2); var Container1=new MyContainer(200,200,30,1,"blue"); var Container2=new MyContainer(400,200,30,2,"red"); var Container3=new MyContainer(600,200,30,3,"green"); var Container4=new MyContainer(200,300,30,4,"purple"); var Container5=new MyContainer(400,300,30,5,"navy"); var Container6=new MyContainer(600,300,30,6,"maroon"); Movable.list1.push(Container1); Movable.list1.push(Container2); Movable.list1.push(Container3); Movable.list1.push(Container4); Movable.list1.push(Container5); Movable.list1.push(Container6); var i,k=1; for (i=1;i<6;i++) Movable.add(new MyCircle((i)*50,50,20,k++)); Movable.add(new MyCircle(6*50,50,20,7)); getRandomPara(); redraw(ctx); showOrHide('foot',lang); showOrHide('title1',lang); showOrHide('title2',lang); ) processed by MyLexV4 -->
    end of file