Monday, August 24, 2009

Quadratic Factoring with HTML/JS/CSS/DOM

So I dusted off my old javascript/css/DOM reference and created a tool for exploring factoring of quadratics of the form x2+bx+c, where b and c are non-negative integers. The tool, called Quadratic Grid, is made using a mix of html, javascript, CSS, and DOM. My previous attempt at quadratic factoring visualization using Processing had limited interactivity (it had none), not a good learning tool. It didn't help that it was visually disappointing. I am happier about this end product. I did quickly so it's not the most efficient solution. This was also done before I learned of canvas in html5.

Here are some screenshots. Play around with the presets first, then try out the settings. Columns represent coefficient b and rows represent coefficient c. Clicking on the squares will show quadratics that are factorable over the rationals with the same b on the left and same c on the right.

Here I zoom out a bit. Notice how for non-negative coefficients b and c, most quadratics are factorable over reals. Few are factorable over rationals. The factoring practice that we do in class focus on questions marked by the yellow pixels. Click on the pixel to update the quadratics with same b/c as the "Current Quadratic" listed on top left. I didn't click before I took the screenshot so it still had the previous b/c.

Here's the chart above without the UI controls.

I apologize in advance for any browser/computer crash this tool may cause.

UPDATE: Reposted here. Edited most of text out from the old post.

No comments:

Post a Comment