//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
(2*50+500)&&x1<3*50+500)&&(y1>(3*50+100)&&y1<4*50+100))NUM1=1;
if ((x2>(3*50+500)&&x2<4*50+500)&&(y2>(1*50+100)&&y2<2*50+100))NUM2=1;
if ((x3>(3*50+500)&&x3<4*50+500)&&(y3>(2*50+100)&&y3<3*50+100))NUM3=1;
if ((x4>(3*50+500)&&x4<4*50+500)&&(y4>(3*50+100)&&y4<4*50+100))NUM4=1;
if ((x5>(3*50+500)&&x5<4*50+500)&&(y5>(4*50+100)&&y5<5*50+100))NUM5=1;
if ((x6>(4*50+500)&&x6<5*50+500)&&(y6>(2*50+100)&&y6<3*50+100))NUM6=1;
if ((x7>(4*50+500)&&x7<5*50+500)&&(y7>(3*50+100)&&y7<4*50+100))NUM7=1;
ctx.fillStyle="red";
ctx.font="25px Arial";
if (lang==0){
if (NUM1==1&&NUM2==1&&NUM3==1&&NUM4==1&&NUM5==1&&NUM6==1&&NUM7==1)
ctx.fillText("Good Job!",500, 50);
}else{
if (NUM1==1&&NUM2==1&&NUM3==1&&NUM4==1&&NUM5==1&&NUM6==1&&NUM7==1)
ctx.fillText("恭喜成功!",500, 50);
}
}
class MyRect extends Movable {
constructor (x,y,w,h){
super (x,y);
this.w=w;
this.h=h;
//this.id=id;
}
inside(x,y){
x-=this.x0;
y-=this.y0;
if(x>=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="green";
ctx.font="20px 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","Magic Sum");
setHTML("c2","Move numbers to fill into empty squares in such way that");
setHTML("c3","the rows, columns,and the two diagonals all add up to the same number.");
}else if (n==2){
setHTML("c1","Small difference");
setHTML("c2","To place the digits 2,4,6,7 into the circles, ");
setHTML("c3","so that the difference between two two-digit numbers is as small as possible.");
}
}else{
if (n==1){
setHTML("c1","魔幻总和");
setHTML("c2","移动数字填充空方格");
setHTML("c3","使行、列和两条对角线加起来是相同的数字.");
}else if (n==2){
setHTML("c1","差别不大");
setHTML("c2","要将数字 2,4,6,7 放入圆圈中，");
setHTML("c3","使两个两位数之间的差异尽可能小.");
}
}
/*Container1.draw(ctx);
Container2.draw(ctx);
Container3.draw(ctx);
Container4.draw(ctx);*/
if (GONews==1){
if (lang==0){
Movable.ctx.fillText ("Good job!!! Try next quesiton?",500,50);
}else{
Movable.ctx.fillText ("恭喜成功!!! 尝试下一个问题?",500,50);
}
}
ctx.font="20px Arial";
ctx.textAlign = "center";
ctx.beginPath();
ctx.fillStyle="black";
ctx.fillText("32",575,185);
ctx.fillText("10",575,235);
ctx.fillText("9",575,285);
ctx.fillText("35",575,335);
//===========================
ctx.fillText("19",625,185);
ctx.fillText("25",625,235);
ctx.fillText("16",625,335);
//==========================
ctx.fillText("8",725,185);
ctx.fillText("11",725,335);
for (i=1;i<5;i++)
for (j=1;j<5;j++)
ctx.rect(50*i+500, 50*j+100, 50,50);
//ctx.moveTo (300,350);
//ctx.lineTo (550,350);
ctx.stroke();
}
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;
}*/
//============================
Movable.list=new Array();
var k=1;
for (i=1;i<11;i++)
for (j=1;j<11;j++)
Movable.add(new MyCircle(j*35,i*30,15,k++));
//====
}
//======= initializing ========
var radius=100;
var canvas=initCanvas("myCanvas");
var ctx = canvas.getContext("2d");
Movable.ctx=ctx;
/*
var min1 = 1;
var max1 = 1;
var min2 = 12;
var max2 = 24;
*/
var n=0;
var nPosition;
var randomNum = 0;
var s=getURLpara();
if (s.length==2) {
//N=parseInt(s[0]);
min1=parseInt(s[0]);
max1=parseInt(s[1]);
//min2=parseInt(s[2]);
//max2=parseInt(s[3]);
}
//var n=getRndInteger(min1,max1);
//var randomNum=getRndInteger(min2,max2);
/*var Container1=new MyContainer(400,200,30,1,"blue");
var Container2=new MyContainer(470,200,30,2,"red");
var Container3=new MyContainer(400,300,30,3,"green");
var Container4=new MyContainer(470,300,30,4,"purple");*/
getRandomPara();
redraw(ctx);
showOrHide('foot',lang);
showOrHide('title1',lang);
showOrHide('title2',lang);
) processed by MyLexV4 -->