<html>
<head>
<title>Areas - RJM Programming - May, 2014</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>

var ideas = ["circle", "sector", "square", "rectangle", "triangle", "parallelogram", "kite", "trapezium", "rhombus", "rectangle_hsector", "rectangle_lsector", "parallelogram_rectangle_cutout"];
var rnum = Math.floor(Math.random() * 1000) + 1;
var hint = 'Hint: A = ' + Math.PI + ' * r * r';
var score = 0;
var goes = 0;
var done = 0;
var snum = Math.floor(Math.random() * ideas.length) + 0;
if (snum == 2) { snum=3; }

var elem=null;
var context=null;
var cwidth=0;
var cheight=0;
var factor=1.0;
var cf = "12px Verdana";
var path=null;


function getFactor(wis, lis) {
var proposedfactor=eval(Math.max(cwidth, cheight) / Math.max(wis, lis));
if (eval(Math.min(cwidth, cheight) / Math.min(wis, lis)) < proposedfactor) {
proposedfactor=eval(-1 * eval(Math.min(cwidth, cheight) / Math.min(wis, lis)));
}
if (proposedfactor > 0.0) {
if (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) > cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) > cheight) {
while (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) > cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) > cheight) {
proposedfactor*=0.8;
}
proposedfactor=-proposedfactor;
}
// alert('normal');
} else {
if (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) > cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) > cheight) {
proposedfactor=-proposedfactor;
while (eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('l').value)))) > cwidth || eval(25 + eval(Math.abs(proposedfactor) * Math.round(eval('' + document.getElementById('w').value)))) > cheight) {
proposedfactor*=0.8;
}
}

// alert('abnormal');
}
return proposedfactor;
}

function checkarea(whichone) {
var xdiff = 999.0, areais = 0.0, extrabits = "";
var theanswer = document.getElementById('answer').value;
if (theanswer.length > 0) {
for (var i=0; i<ideas.length; i++) {
try {
if (ideas[i] == whichone) {
if (whichone == "circle") {
areais = eval(Math.PI * document.getElementById('r').value * document.getElementById('r').value);
extrabits = " (radius = " + document.getElementById('r').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "sector") {
areais = eval(Math.PI * document.getElementById('sr').value * document.getElementById('sr').value * (document.getElementById('arc').value / 360.0));
extrabits = " (radius = " + document.getElementById('sr').value + " and arc (degrees) = " + document.getElementById('arc').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "rectangle") {
areais = eval(document.getElementById('l').value * document.getElementById('w').value);
extrabits = " (length = " + document.getElementById('l').value + " and width = " + document.getElementById('w').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "triangle") {
areais = eval(0.5 * document.getElementById('b').value * document.getElementById('h').value);
extrabits = " (base = " + document.getElementById('b').value + " and height = " + document.getElementById('h').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "parallelogram") {
areais = eval(document.getElementById('pb').value * document.getElementById('ph').value);
extrabits = " (base = " + document.getElementById('pb').value + " and height = " + document.getElementById('ph').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "kite") {
areais = eval(0.5 * document.getElementById('y').value * document.getElementById('x').value);
extrabits = " (long = " + document.getElementById('y').value + " and short = " + document.getElementById('x').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "trapezium") {
areais = eval(0.5 * (document.getElementById('a').value + document.getElementById('tb').value) * document.getElementById('th').value);
extrabits = " (long = " + document.getElementById('a').value + " and short = " + document.getElementById('tb').value + " and height = " + document.getElementById('th').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "rhombus") {
areais = eval(0.5 * document.getElementById('ry').value * document.getElementById('rx').value);
extrabits = " (long = " + document.getElementById('ry').value + " and short = " + document.getElementById('rx').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "rectangle_lsector") {
areais = eval((0.25 * Math.PI * document.getElementById('rll').value * document.getElementById('rll').value) + (document.getElementById('rll').value * document.getElementById('rlw').value));
extrabits = " (length = " + document.getElementById('rll').value + " and width = " + document.getElementById('rlw').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "rectangle_hsector") {
areais = eval((0.25 * Math.PI * document.getElementById('rhw').value * document.getElementById('rhw').value) + (document.getElementById('rhl').value * document.getElementById('rhw').value));
extrabits = " (length = " + document.getElementById('rll').value + " and width = " + document.getElementById('rlw').value + ")";
xdiff = eval(theanswer - areais);
} else if (whichone == "parallelogram_rectangle_cutout") {
areais = eval((document.getElementById('pcb').value * document.getElementById('pch').value) - (document.getElementById('pcl').value * document.getElementById('pcw').value));
extrabits = " (base = " + document.getElementById('pcb').value + " and height = " + document.getElementById('pch').value + " and cutout length = " + document.getElementById('pcl').value + " and cutout width = " + document.getElementById('pcw').value + ")";
xdiff = eval(theanswer - areais);
}
}
} catch (ex) {
}
}
if (Math.abs(xdiff) < 0.01) {
score = score + 1;
} else {
alert("Area of " + whichone.replace("parallelogram_rectangle_cutout","Parallelogram with Rectangle Cutout").replace("rectangle_lsector","Rectangle and Quarter Length Sector").replace("rectangle_hsector","Rectangle and Quarter Width Sector") + extrabits + " is " + areais);
}
goes = goes + 1;
document.getElementById('score').style.display = 'block';
document.getElementById('score').innerHTML = "Score: " + score + " from " + goes + " goes";
snum = Math.floor(Math.random() * ideas.length) + 0;
if (snum == 2) { snum=3; }
if (context) { context.clearRect(0,0,elem.width,elem.height); }

done = 0;
//alert(ideas[snum]);
makevisible(ideas[snum]);
document.getElementById('sarea').value = ideas[snum];
}
}

function makevisible(whichone) {
var px=0, py=0, pxx=0;
if (done == 0) {
done = 1;
document.getElementById('sarea').value = whichone;
elem=document.getElementById('ourcanvas');
context=elem.getContext('2d');
cwidth=eval(-70 + eval(('' + elem.width).replace('px','')));
cheight=eval(-90 + eval(('' + elem.height).replace('px','')));
//alert('' + cwidth + ',' + cheight);
}
var smaller = 0;
for (var i=0; i<ideas.length; i++) {
try {
if (ideas[i] == whichone) {
document.getElementById(ideas[i]).style.display = 'block';
if (whichone == "circle") {
rnum = Math.floor(Math.random() * 1000) + 1;
document.getElementById('r').value = rnum;
hint = 'Hint: A = ' + Math.PI + ' * r * r';
factor=getFactor(eval(2 * eval('' + document.getElementById('r').value)), eval(2 * eval('' + document.getElementById('r').value)));
context.font = cf;
context.beginPath();
context.arc(Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)), 0, eval(2 * Math.PI));
context.strokeStyle = '#000000';
context.stroke();
context.fillStyle = '#00FF00';
context.fill();
context.fillStyle = "#000000";
context.fillText("" + document.getElementById('r').value + " -------->", Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));
} else if (whichone == "sector") {
rnum = Math.floor(Math.random() * 1000) + 1;
document.getElementById('sr').value = rnum;
rnum = Math.floor(Math.random() * 359) + 1;
document.getElementById('arc').value = rnum;
hint = 'Hint: A = ' + Math.PI + ' * r * r * (a / 360.0)';


factor=getFactor(eval(2 * eval('' + document.getElementById('sr').value)), eval(2 * eval('' + document.getElementById('sr').value)));
context.font = cf;
context.strokeStyle = '#FF0000';
context.beginPath();

context.moveTo(Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))));
context.lineTo(Math.round(eval(25 + eval(cwidth / 2))) + eval(rnum * Math.abs(factor)), Math.round(eval(25 + eval(cheight / 2))));

context.arc(Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)), 0, eval(eval(eval(document.getElementById('arc').value) / 180) * Math.PI));
context.lineTo(Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))));
//context.stroke();
//context.stroke();
context.fillStyle = '#40FF20';
context.fill();
context.fillStyle = "#000000";
context.fillText("" + document.getElementById('sr').value + " -------->", Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));



} else if (whichone == "rectangle") {
rnum = Math.floor(Math.random() * 1000) + 5;
document.getElementById('l').value = rnum;
rnum = Math.floor(Math.random() * (rnum - 4)) + 1;
document.getElementById('w').value = rnum;
hint = 'Hint: A = l * w';
factor=getFactor(document.getElementById('w').value, document.getElementById('l').value);
context.font = cf;
context.fillStyle = "#FF0000";
if (factor > 0.0) {
context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('l').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('w').value)))));
context.fillStyle = "#000000";
context.fillText("" + document.getElementById('l').value + " -------->", 40, 40);
} else {
context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('w').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('l').value)))));
context.fillStyle = "#000000";
context.fillText("" + document.getElementById('w').value + " -------->", 40, 40);
}
//context.stroke();
} else if (whichone == "triangle") {
rnum = Math.floor(Math.random() * 1000) + 1;
document.getElementById('b').value = rnum;
rnum = Math.floor(Math.random() * 1000) + 1;
document.getElementById('h').value = rnum;
hint = 'Hint: A = 0.5 * b * h';

factor=getFactor(document.getElementById('b').value, document.getElementById('h').value);
context.font = cf;
context.fillStyle = "#AAAAAA";
if (factor > 0.0) { // eval(25 + eval(Math.abs(factor) *
factor/=6;
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('h').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('b').value)))));
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('h').value)) / 1);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('b').value)) / 1);
path=new Path2D();
path.moveTo(eval((cwidth/2)+25) + px,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25));
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25) + px,(cheight/2)+25);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('b').value + " --->", Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(45 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));
} else {
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('b').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('h').value)))));
factor/=6;
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('h').value)) / 1);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('b').value)) / 1);
path=new Path2D();
path.moveTo(eval((cwidth/2)+25) + px,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25));
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25) + px,(cheight/2)+25);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('b').value + " --->", Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(45 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));
}
//context.stroke();



} else if (whichone == "parallelogram") {
rnum = Math.floor(Math.random() * 1000) + 1;
document.getElementById('pb').value = rnum;
rnum = Math.floor(Math.random() * 1000) + 1;
document.getElementById('ph').value = rnum;
hint = 'Hint: A = b * h';

factor=getFactor(document.getElementById('pb').value, document.getElementById('ph').value);
context.font = cf;
context.fillStyle = "#999999";
if (factor > 0.0) { // eval(25 + eval(Math.abs(factor) *
factor/=3;
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('ph').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('pb').value)))));
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('ph').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('pb').value)) / 2);
pxx=px; //eval(eval(Math.abs(factor) * eval('' + document.getElementById('a').value)) / 2);
path=new Path2D();
path.moveTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
path.lineTo(eval((cwidth/2)+25 + px),eval((cheight/2)+25) + py);

path.lineTo(eval((cwidth/2)+25 + 40 + pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 + 40 - pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('pb').value + " --->", Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(45 + eval(cheight / 2)))); //, eval(rnum * Math.abs(factor)));
} else {
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('pb').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('ph').value)))));
factor/=3;
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('ph').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('pb').value)) / 2);
pxx=px; //eval(eval(Math.abs(factor) * eval('' + document.getElementById('a').value)) / 2);
path=new Path2D();
path.moveTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
path.lineTo(eval((cwidth/2)+25 + px),eval((cheight/2)+25) + py);

path.lineTo(eval((cwidth/2)+25 + 40 + pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 + 40 - pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('pb').value + " --->", Math.round(eval(25 + eval(cwidth / 2))), Math.round(eval(45 + eval(cheight / 2)))); //, eval(rnum * Math.abs(factor)));
}
//context.stroke();




} else if (whichone == "kite") {
rnum = Math.floor(Math.random() * 1000) + 5;
document.getElementById('y').value = rnum;
rnum = Math.floor(Math.random() * (rnum - 4)) + 1;
document.getElementById('x').value = rnum;
hint = 'Hint: A = 0.5 * y * x';
factor=getFactor(document.getElementById('x').value, document.getElementById('y').value);
context.font = cf;
context.fillStyle = "#DDDDDD";
if (factor > 0.0) { // eval(25 + eval(Math.abs(factor) *
factor/=3;
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('y').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('x').value)))));
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('y').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('x').value)) / 2);
path=new Path2D();
path.moveTo((cwidth/2)+25,eval((cheight/2)+25) + py);
path.lineTo(eval((cwidth/2)+25) + px,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25) - px,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) + py);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('x').value + " --->", Math.round(eval(25 - px/2 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));
} else {
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('x').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('y').value)))));
factor/=3;
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('y').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('x').value)) / 2);
path=new Path2D();
path.moveTo((cwidth/2)+25,eval((cheight/2)+25) + px);
path.lineTo(eval((cwidth/2)+25) + py,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) - px);
path.lineTo(eval((cwidth/2)+25) - py,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) + px);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('y').value + " --->", Math.round(eval(25 - py/2 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));
}
//context.stroke();
} else if (whichone == "trapezium") {
rnum = Math.floor(Math.random() * 1000) + 8;
document.getElementById('a').value = rnum;
rnum = Math.floor(Math.random() * (rnum - 4)) + 1;
document.getElementById('tb').value = rnum;
rnum = Math.floor(Math.random() * 1000) + 1;
document.getElementById('th').value = rnum;
hint = 'Hint: A = 0.5 * (a + b) * h';
factor=getFactor(document.getElementById('a').value, document.getElementById('th').value);
context.font = cf;
context.fillStyle = "#BBBBBB";
if (factor > 0.0) { // eval(25 + eval(Math.abs(factor) *
factor/=3;
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('th').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('tb').value)))));
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('th').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('tb').value)) / 2);
pxx=eval(eval(Math.abs(factor) * eval('' + document.getElementById('a').value)) / 2);
path=new Path2D();
path.moveTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
path.lineTo(eval((cwidth/2)+25 + px),eval((cheight/2)+25) + py);

path.lineTo(eval((cwidth/2)+25 + pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 - pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('tb').value + " --->", Math.round(eval(25 - px/2 + eval(cwidth / 2))), Math.round(eval(45 + eval(cheight / 2)))); //, eval(rnum * Math.abs(factor)));
context.fillText("<--- " + document.getElementById('a').value + " --->", Math.round(eval(25 - px/2 + eval(cwidth / 2))), Math.round(eval(15 + eval(cheight / 2)))); //, eval(eval(125 + rnum) * Math.abs(factor)));
} else {
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('tb').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('th').value)))));
factor/=3;
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('th').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('tb').value)) / 2);
pxx=eval(eval(Math.abs(factor) * eval('' + document.getElementById('a').value)) / 2);
path=new Path2D();
if (1 == 1) {
path.moveTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
path.lineTo(eval((cwidth/2)+25 + px),eval((cheight/2)+25) + py);

path.lineTo(eval((cwidth/2)+25 + pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 - pxx),eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25 - px),eval((cheight/2)+25) + py);
} else {
path.moveTo(eval((cwidth/2)+25 - py),eval((cheight/2)+25) + px);
path.lineTo(eval((cwidth/2)+25 + py),eval((cheight/2)+25) + px);

path.lineTo(eval((cwidth/2)+25 + pxx),eval((cheight/2)+25) - px);
path.lineTo(eval((cwidth/2)+25 - pxx),eval((cheight/2)+25) - px);
path.lineTo(eval((cwidth/2)+25 - py),eval((cheight/2)+25) + px);
}
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('tb').value + " --->", Math.round(eval(25 - py/2 + eval(cwidth / 2))), Math.round(eval(45 + eval(cheight / 2)))); //, eval(rnum * Math.abs(factor)));
context.fillText("<--- " + document.getElementById('a').value + " --->", Math.round(eval(25 - px/2 + eval(cwidth / 2))), Math.round(eval(15 + eval(cheight / 2)))); //, eval(eval(125 + rnum) * Math.abs(factor)));
}
//context.stroke();
} else if (whichone == "rhombus") {
rnum = Math.floor(Math.random() * 1000) + 5;
document.getElementById('ry').value = rnum;
//rnum = Math.floor(Math.random() * (rnum - 4)) + 1;
document.getElementById('rx').value = rnum;
hint = 'Hint: A = 0.5 * y * x';
factor=getFactor(document.getElementById('rx').value, document.getElementById('ry').value);
context.font = cf;
context.fillStyle = "#DD00DD";
if (factor > 0.0) { // eval(25 + eval(Math.abs(factor) *
factor/=3;
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('ry').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('rx').value)))));
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('ry').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('rx').value)) / 2);
path=new Path2D();
path.moveTo((cwidth/2)+25,eval((cheight/2)+25) + py);
path.lineTo(eval((cwidth/2)+25) + px,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) - py);
path.lineTo(eval((cwidth/2)+25) - px,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) + py);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('rx').value + " --->", Math.round(eval(25 - px/2 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));
} else {
//context.fillRect(25, 25, eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('rx').value)))), eval(25 + eval(Math.abs(factor) * Math.round(eval('' + document.getElementById('ry').value)))));
factor/=3;
py=eval(eval(Math.abs(factor) * eval('' + document.getElementById('ry').value)) / 2);
px=eval(eval(Math.abs(factor) * eval('' + document.getElementById('rx').value)) / 2);
path=new Path2D();
path.moveTo((cwidth/2)+25,eval((cheight/2)+25) + px);
path.lineTo(eval((cwidth/2)+25) + py,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) - px);
path.lineTo(eval((cwidth/2)+25) - py,(cheight/2)+25);
path.lineTo((cwidth/2)+25,eval((cheight/2)+25) + px);
context.fill(path);
context.fillStyle = "#000000";
context.fillText("<--- " + document.getElementById('ry').value + " --->", Math.round(eval(25 - py/2 + eval(cwidth / 2))), Math.round(eval(25 + eval(cheight / 2))), eval(rnum * Math.abs(factor)));
}
//context.stroke();
} else if (whichone == "rectangle_hsector") {
rnum = Math.floor(Math.random() * 1000) + 5;
document.getElementById('rhl').value = rnum;
rnum = Math.floor(Math.random() * (rnum - 4)) + 1;
document.getElementById('rhw').value = rnum;
hint = 'Hint: A = l * w + ' + Math.PI + ' * w * w / 4.0';
} else if (whichone == "rectangle_lsector") {
rnum = Math.floor(Math.random() * 1000) + 5;
document.getElementById('rll').value = rnum;
rnum = Math.floor(Math.random() * (rnum - 4)) + 1;
document.getElementById('rlw').value = rnum;
hint = 'Hint: A = l * w + ' + Math.PI + ' * l * l / 4.0';
} else if (whichone == "parallelogram_rectangle_cutout") {
rnum = Math.floor(Math.random() * 1000) + 201;
document.getElementById('pcb').value = rnum;
smaller = rnum;
rnum = Math.floor(Math.random() * 1000) + 201;
document.getElementById('pch').value = rnum;
if (rnum < smaller) smaller = rnum;
rnum = Math.floor(Math.random() * (smaller - 50)) + 31;
document.getElementById('pcl').value = rnum;
rnum = Math.floor(Math.random() * (rnum - 12)) + 1;
document.getElementById('pcw').value = rnum;
hint = 'Hint: A = (b * h) - (l * w)';
}
document.getElementById('sarea').title = hint;
} else {
document.getElementById(ideas[i]).style.display = 'none';
}
} catch (ex) {
}
}
}

</script>
</head>
<body align="center" style="background-color: lightblue;" onload=" makevisible(ideas[snum]);">
<h1 align="center">Areas</h1>
<h3 align="center" style='display: none;' id='score'>Score: 0 from 0 goes</h3>
<table align="center">
<tbody>
<tr id='circle' style='display: block;'><td>
<form id='fcircle' name='fcircle' action="#">
Circle: Radius <input type='number' step=any id='r' name='r' value='0'></input>
</form>
</td></tr>
<tr id='sector' style='display: none;'><td>
<form id='fsector' name='fsector' action="#">
Sector: Radius <input type='number' step=any id='sr' name='sr' value='0'></input> Arc <input type='number' step=any id='arc' name='arc' value='0'></input> (degrees)
</form>
</td></tr>
<tr id='rectangle' style='display: none;'><td>
<form id='frectangle' name='frectangle' action="#">
Rectangle: Length <input type='number' step=any id='l' name='l' value='0'></input> Width <input type='number' step=any id='w' name='w' value='0'></input>
</form>
</td></tr>
<tr id='triangle' style='display: none;'><td>
<form id='ftriangle' name='ftriangle' action="#">
Triangle: Base <input type='number' step=any id='b' name='b' value='0'></input> Height <input type='number' step=any id='h' name='h' value='0'></input>
</form>
</td></tr>
<tr id='parallelogram' style='display: none;'><td>
<form id='fparallelogram' name='fparallelogram' action="#">
Parallelogram: Base <input type='number' step=any id='pb' name='pb' value='0'></input> Height <input type='number' step=any id='ph' name='ph' value='0'></input>
</form>
</td></tr>
<tr id='kite' style='display: none;'><td>
<form id='fkite' name='fkite' action="#">
Kite: Long Diagonal <input type='number' step=any id='y' name='y' value='0'></input> Short Diagonal <input type='number' step=any id='x' name='x' value='0'></input>
</form>
</td></tr>
<tr id='trapezium' style='display: none;'><td>
<form id='ftrapezium' name='ftrapezium' action="#">
Trapezium: Long Side <input type='number' step=any id='a' name='a' value='0'></input> Short Side <input type='number' step=any id='tb' name='tb' value='0'></input> Height <input type='number' step=any id='th' name='th' value='0'></input>
</form>
</td></tr>
<tr id='rhombus' style='display: none;'><td>
<form id='frhombus' name='frhombus' action="#">
Rhombus: <span style='display:none;'>Long </span>Diagonal <input onblur="document.getElementById('rx').value=this.value;" type='number' step=any id='ry' name='ry' value='0'></input> <div style='display:none;'>Short Diagonal <input type='number' step=any id='rx' name='rx' value='0'></input></div>
</form>
</td></tr>
<tr id='rectangle_lsector' style='display: none;'><td>
<form id='frectangle_lsector' name='frectangle_lsector' action="#">
Rectangle and Quarter Length Sector: Length <input type='number' step=any id='rll' name='rll' value='0'></input> Width <input type='number' step=any id='rlw' name='rlw' value='0'></input>
</form>
</td></tr>
</td></tr>
<tr id='rectangle_hsector' style='display: none;'><td>
<form id='frectangle_hsector' name='frectangle_hsector' action="#">
Rectangle and Quarter Width Sector: Length <input type='number' step=any id='rhl' name='rhl' value='0'></input> Width <input type='number' step=any id='rhw' name='rhw' value='0'></input>
</form>
</td></tr>
<tr id='parallelogram_rectangle_cutout' style='display: none;'><td>
<form id='fparallelogram_rectangle_cutout' name='fparallelogram_rectangle_cutout' action="#">
Parallelogram with Rectangle Cutout: Base <input type='number' step=any id='pcb' name='pcb' value='0'></input> Height <input type='number' step=any id='pch' name='pch' value='0'></input> Length <input type='number' step=any id='pcl' name='pcl' value='0'></input> Width <input type='number' step=any id='pcw' name='pcw' value='0'></input>
</form>
</td></tr>

<tr><td>
<input type='submit' onclick="checkarea(document.getElementById('sarea').value);" style="background-color: yellow;" id='submit' name='submit' value='Check if Area'></input> of <select id='sarea' onchange='makevisible(this.value);' title=''><option value='circle'>Circle</option><option value='sector'>Sector</option><option value='rectangle'>Rectangle</option><option value='triangle'>Triangle</option><option value='parallelogram'>Parallelogram</option><option value='kite'>Kite</option><option value='trapezium'>Trapezium</option><option value='rhombus'>Rhombus</option><option value='rectangle_lsector'>Rectangle and Quarter Length Sector</option><option value='rectangle_hsector'>Rectangle and Quarter Width Sector</option><option value='parallelogram_rectangle_cutout'>Parallelogram with Rectangle Cutout</option></select> is <input id='answer' name='answer' value='' type='number'></input>
</td></tr>
</tbody>
</table>
<script type='text/javascript'>
document.write('<br><br><canvas id=ourcanvas width=' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','').replace('px','') + ' height=580 style="width:' + ('' + eval(-15 + (window.orientation == 0 ? window.screen.height: window.screen.width)) + 'px').replace('pxpx','px') + ';height:580px;border:1px solid red;background-color:white;"></canvas>');
</script>
</body>
</html>