So here we have a little grapher that solves quadratic equations visually. Just enter the coefficients in the equation.

[inline]

Quadratic Equation:       y = a x² + b x + c

Enter:                              
y =
x² +
x +

Your browser does not support the canvas element.

Solution:

Analytical solution by factoring (with a little help from the quadratic equation if necessary).

[script type=”text/javascript”]
var width=500;
var height=500;
var xrange=10;
var yrange=10;

mx = width/(2.0*xrange);
bx = width/2.0;
my = -height/(2.0*yrange);
by = height/2.0;

function draw_9114(ctx, polys) {
t_9114=t_9114+dt_9114;
//ctx.fillText (“t=”+t, xp(5), yp(5));
ctx.clearRect(0,0,width,height);

polys[0].drawAxes(ctx);
ctx.lineWidth=2;
polys[0].draw(ctx);
polys[0].write_eqn(ctx);

//polys[0].y_intercepts(ctx);
polys[0].x_intercepts(ctx);
//write intercepts on graph

ctx.fillText (‘x intercepts: (when y=0)’, xp(9), yp(8));
if (polys[0].x_intcpts.length > 0) {
line = “0 = “;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
line = line + “(x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ “)”;
}
ctx.fillText (line, xp(9), yp(7));
// if (polys[0].order == 2 ) {
// if (polys[0].x_intcpts[0] > 0.0) { sign1=”-“;} else {sign1=”+”;}
// if (polys[0].x_intcpts[1] > 0.0) { sign2=”-“;} else {sign2=”+”;}
// ctx.fillText (‘0 = (x ‘+sign1+” “+Math.abs(polys[0].x_intcpts[0])+”) (x “+sign2+Math.abs(polys[0].x_intcpts[1])+”)”, xp(9), yp(7));
// }
for (var i=0; i2 “+polys[0].bsign+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;

solution = solution + ‘Factoring:      ‘;

if (polys[0].x_intcpts.length > 0) {
solution = solution + ‘0 = ‘;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
solution = solution + “(x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ “)”;
}
solution = solution + ‘

‘;
solution = solution + ‘Set each factor equal to zero:
     ‘;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
solution = solution + “x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ ” = 0           “;
}
solution = solution + ‘

and solve for x:
     ‘;
for (var i=0; i‘;
}
document.getElementById(‘equation_9114’).innerHTML = solution;
}

else if (polys[0].order == 1) {
solution = solution + ‘
     ‘;
solution = solution + “y = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;
solution = solution + ‘

Set y=0 and solve for x:
     ‘;
solution = solution + ” 0 = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;
solution = solution + ‘     ‘;
solution = solution + (-1.0*polys[0].c).toPrecision(2) +” = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+”

“;
solution = solution + ‘     ‘;
solution = solution + (-1.0*polys[0].c).toPrecision(2)+”/”+polys[0].b.toPrecision(2)+” = “+” x “+”

“;
solution = solution + ‘     ‘;
solution = solution + “x = “+ (-1.0*polys[0].c/polys[0].b).toPrecision(4)+”

“;

document.getElementById(‘equation_9114’).innerHTML = solution;
}

}

//init_mouse();

var c_9114=document.getElementById(“myCanvas_9114”);
var ctx_9114=c_9114.getContext(“2d”);

var change = 0.0001;

function create_lines_9114 () {
//draw line
//document.write(“hello world! “);
var polys = [];
polys.push(addPoly(1,6, 5));

// polys.push(addPoly(0.25, 1, 0));
// polys[1].color = ‘#8C8’;

return polys;
}

var polys_9114 = create_lines_9114();

var x1=xp(-10);
var y1=yp(1);
var x2=xp(10);
var y2=yp(1);
var dc_9114=0.05;

var t_9114 = 0;
var dt_9114 = 100;
//end_ct = 0;
var st_pt_x_9114 = 2;
var st_pt_y_9114 = 1;

var move_dir_9114 = 1.0; // 1 for up

var a_coeff_9114 = document.getElementById(“a_coeff_9114″);
a_coeff_9114.value = polys_9114[0].a+””;
var b_coeff_9114 = document.getElementById(“b_coeff_9114″);
b_coeff_9114.value = polys_9114[0].b+””;
var c_coeff_9114 = document.getElementById(“c_coeff_9114″);
c_coeff_9114.value = polys_9114[0].c+””;

//document.write(“test= “+c_coeff_9114.value+” “+polys_9114[0].c);
//setInterval(“draw_9114(ctx_9114, polys_9114)”, dt_9114);
draw_9114(ctx_9114, polys_9114);

a_coeff_9114.onchange = function() {
polys_9114[0].set_a(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}
b_coeff_9114.onchange = function() {
polys_9114[0].set_b(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}
c_coeff_9114.onchange = function() {
polys_9114[0].set_c(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}

[/script]

[/inline]

Hopefully, this can help students learn about factoring and quadratics in a more graphical way.

Notes:

This is my first interactive post. I use Javascript in combination with HTML5. Now I need to figure out how to interact with the image itself, instead of the textboxes.