//var n=1;
//initial settings
var color=["green","blue","red"];
var colorIndex=0;
var colorNum="green";
var probIndex=0;
var PI2=Math.PI*2.0;
var R2D=360/PI2;
var D2R=PI2/360;
var min1=1;
var max1=5;
var min2=12;
var max2=50;
var GONews;
var listNum=[];
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=Math.floor(0.5+x);
this.y0=Math.floor(0.5+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
360)
ang-=360;
if (ang1<=ang && ang<=ang2)
return true;
if (ang2<=360)
return false;
ang+=360;
if (ang1<=ang && ang<=ang2)
return true;
return false;
}
function CheckAnsow (n){
var i, max=0, mB=-1, bar, newx0, newy0;
for (i=0;iPI2)
bar.ang-=PI2;
bar.ang=Math.floor(bar.ang*R2D+0.5);
if (bar.ang>max) {
max=bar.ang;
mB=i;
}
}
listBar[listBar.length-1].ang=listBar[mB].ang+1;
listBar=listBar.sort(function (a, b) { return a.ang - b.ang; });
// sorted in assending order
listBar[listBar.length-1].ang=listBar[0].ang+359;
i=listNum.length;
var j, num, sum, ang1, ang2;
for (i=0;i0) {
for (i=1;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 MyBar extends Movable {
constructor (xx,y,r,id){
super (xx,y);
this.ang=0.0;
this.r=r;
//this.h=h;
this.id=id;
this.visible=true;
this.moved=false;
}
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);
this.moved=true;
}
draw (ctx){
if (this.visible===false)
return;
ctx.strokeStyle="brown";
ctx.beginPath();
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);
ctx.moveTo(newx1,newy1);
ctx.lineTo(newx,newy);
ctx.fillStyle="black";
ctx.font="20px Arial";
ctx.textAlign = "center";
if (angleP<0)angleP+=Math.PI*2;
angleP=angleP*180/Math.PI;
angleP=360-angleP;
angleP=angleP-90;
if (angleP<0)angleP=angleP+360;
ctx.stroke();
}
}
class MyNumber extends Movable {
constructor (xx,y,r,id, ang){
super (xx,y);
this.r=r;
//this.h=h;
this.id=id;
if (ang>360)
ang-=360;
this.ang=ang;
this.ang=Math.floor(this.ang*R2D+0.5);
}
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.fillStyle="blue";
ctx.font="20px Arial";
ctx.textAlign = "center";
ctx.fillText(""+this.id,this.x0,this.y0);
}
}
/*class MyContainer {
//constructor (x,y,r,type, color){
constructor (x,y,w, h,color){
this.x0=x;
this.y0=y;
this.w=w;
this.h=h;
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();
}
draw (ctx){
ctx.strokeStyle=this.color;
ctx.beginPath();
ctx.rect(this.x0, this.y0,this.w,this.h);
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 drawNumbers(ctx, x0,y0,radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillStyle="black";
for(num = 1; num < 10; num++){
ang = num * Math.PI / 4.5;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
Movable.list1.push(360-ang*180/Math.PI);
ctx.fillStyle="black";
ctx.font="20px Arial";
ctx.textAlign = "center";
var angleP=(360-ang*180/Math.PI);
//ctx.fillText(""+(angleP).toFixed(0),x0,y0+7);
ctx.fillStyle="green";
ctx.fillText(num.toString(), x0, y0);
/*
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x0+10, y0);
ctx.stroke()
*/
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
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();
var str="";
if (lang==0){
if (probIndex==1){
str="The number 1 through 9 are arranged in a circle. ";
}else {
str="Nine numbers are arranged in a circle. ";
}
str+="
Please move the three brown lines to divide the numbers";
str+="
into three group with the same sums.";
}else{
if (probIndex==1){
str="数字 1 到 9 排列成一个圆圈. ";
}else {
str="九个数字排成一圈. ";
}
str+="
请移动三个棕色线来划分数字";
str+="
分成三组，总和相同.";
}
setHTML("c1",str);
/*
//Container1.draw(ctx);
//Container2.draw(ctx);
//Container3.draw(ctx);
if (GONews==1){
Movable.ctx.fillText ("Good job!!! Try next quesiton?",500,50);
}
drawNumbers(ctx, 300,200,radius);
*/
}
function getRndInteger(min, max, n=1) {
if (n==1)
return Math.floor(Math.random() * (max - min + 1) ) + min;
var num=[], nn, cnt;
for (var i=0;i100)
break;
}
num[i]=nn;
}
return num;
}
function fillNumbers(list, x0,y0,radius) {
var num;
var da=Math.PI*2/list.length;
var ang=Math.PI*1.5+da;
for(var n = 0; n< list.length; n++){
num = new MyNumber(x0+radius*Math.cos(ang),y0+radius*Math.sin(ang),radius, list[n], ang);
listNum[n]=num; //.push(360-ang*180/Math.PI);
ang += da;
}
}
function para432() {
var x1=getRndInteger(1,6);
var x4=getRndInteger(x1+1,10);
if (x4%2 !=0)
x4++;
var x7=1+3*(x4>>1);
var x9=3*(x4-x1);
var lst=[];
lst[0]=[x1, x1+1, x1+2, x9];
lst[1]=[x4, x4+1, x4+2];
lst[2]=[x7,x7+1];
var itp;
for (i=0;i>1);
var x9=3*(x4-x1);
var p=pat[sum];
var ii=getRndInteger(0,p.length-1,3);
var i1=ii[0];
var i2=ii[1];
var i3=ii[2];
var lst=[];
lst[0]=p[i1];
lst[1]=p[i2];
lst[2]=p[i3];
var itp;
for (i=0;i=color.length)
colorIndex=0;
//============================
listBar=new Array();
var j, k=1;
for (i=1;i<4;i++)
Movable.add(new MyBar((i)*50,50,25,k++));
Movable.add(new MyBar((i)*50,50,25,k++));
listBar[3].visible=false;
var list=[];
if (probIndex==0) {
for (i=0;i<9;i++)
list[i]=i+1;
} else {
k=getRndInteger(1,2);
switch(k) {
case 1:
list=para432();
// list=para333();
break;
case 2:
list=para333();
break;
}
}
fillNumbers(list, 300,200, 100);
probIndex++;
//====
redraw(ctx);
}
//======= 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]);
}
getRandomPara();
showOrHide('foot',lang);
showOrHide('title',lang);
) processed by MyLexV4 -->