Next post Previous post

Quadratic practice sheet

May 26, 2013 at 10:38 PM by Dr. Drang

My younger son could use some algebra practice. There are only so many problems in his book and making up new ones that have simple integer answers is harder and more time-consuming than you’d think. So, as with elementary math, I made up an HTML/JavaScript page that generates a new set of problems every time it’s (re)loaded. I print some out, have him do one or two, and go over them with him.

The sheets look like this:

Quadratic practice sheet

I use a pretty big font and provide plenty of space below each problem to work out the solution. This same sheet can be used to practice factoring, completing the square, and using the quadratic formula. There’s a Boolean flag you can set if you just want quadratic expressions, not equations.

Here’s the source code:

xml:
  1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2:    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3:  <html>
  4:  <!--
  5:  A math practice sheet for factoring quadratic expressions and
  6:  solving quadratic equations.
  7:  Released under the Creative Commons Attribution-Share Alike 3.0
  8:  Unported License (http://creativecommons.org/licenses/by-sa/3.0/)
  9:  by Dr. Drang (http://www.leancrew.com).
 10:  -->
 11:  <head>
 12:    <title>Math Practice</title>
 13:    <style type="text/css">
 14:    h1 {
 15:      text-align: center;
 16:      font-family: Sans-Serif;
 17:      font-weight: bold;
 18:      font-size: 36px;
 19:      margin: 20px 0 30px 0;
 20:      padding: 0;
 21:    }
 22:    table {
 23:      width: 100%;
 24:      margin-left: auto;
 25:      margin-right: auto;
 26:      font-family: Sans-Serif;
 27:      font-size: 28px;
 28:    }
 29:    td {
 30:      height: 9.5em;
 31:      width: 15em;
 32:      vertical-align: top;
 33:      text-align: center;
 34:    }
 35:    </style>
 36:    <script>
 37:    function single_problem() {
 38:      // Set to true for equations, false for expressions.
 39:      var eqn = true;
 40:  
 41:      // Construct the parts of the binomial (a1*x + c1)(a2*x + c2)
 42:      // Coefficients. Small numbers, usually 1.
 43:      var coeffs = [1, 1, 1, 2, 3, 4]
 44:      var a1 = coeffs[Math.floor(Math.random()*6)];
 45:      var a2 = coeffs[Math.floor(Math.random()*6)];
 46:      
 47:      // Constants
 48:      var c1 = Math.floor(Math.random()*9 + 1);
 49:      var c2 = Math.floor(Math.random()*9 + 1);
 50:      
 51:      // Change the signs of the constants at random.
 52:      if (Math.random() < .5) {
 53:        c1 = -c1;
 54:      }
 55:      if (Math.random() < .5) {
 56:        c2 = -c2;
 57:      }
 58:      
 59:      // Put in standard form
 60:      var A = a1*a2;
 61:      var B = a1*c2 + a2*c1;
 62:      var C = c1*c2;
 63:      var opB = opC = '+';
 64:      var quad = 'x<sup>2</sup> '
 65:      var lin = 'x '
 66:      
 67:      // Determine the operators.
 68:      if (C < 0) {
 69:        opC = '&#8722;';
 70:        C = -C;
 71:      }
 72:      
 73:      if (B < 0) {
 74:        opB = '&#8722;';
 75:        B = -B;
 76:      }
 77:      else if (B == 0) {
 78:        opB = '';
 79:        B = '';
 80:        lin = '';
 81:      }
 82:      
 83:      // Don't show coefficients that are 1.
 84:      if (A == 1) A = '';
 85:      if (B == 1) B = '';
 86:  
 87:      term = A + quad + opB + ' ' + B + lin + opC + ' ' + C;
 88:      
 89:      if (eqn) return term + ' = 0';
 90:      else return term;
 91:      
 92:    }
 93:    </script>
 94:  </head>
 95:  <body>
 96:    <h1>Math Practice</h1>
 97:    <table id="whole">
 98:      <script>
 99:      for (i=0; i<3; i++){
100:        document.write("<tr>");
101:        for (j=0; j<2; j++) {
102:          document.write('<td>' + single_problem() + '</td>');
103:        }
104:        document.write('</tr>');
105:      }
106:      </script>
107:    </table>
108:    
109:  </body>
110:  </html>

The logic is fairly straightforward. I start by using a random number generator to set the constants in the expression

(a1x+c1)(a2x+c2)(a_1 x + c_1)(a_2 x + c_2)

and then multiply the two binomials to get the quadratic expression

Ax2+Bx+CA x^2 + B x + C

That’s all pretty much handled in Lines 41–62. The rest of the code is concerned with making the problems look the way a teacher or textbook would present them: with real minus signs instead of hyphens, suppressing the coefficient when it’s one, eliminating a term entirely if its coefficient is zero. A couple of things you may want to change:

  1. As I said earlier, there’s a Boolean flag that determines whether the output is a set of expressions or a set of equations. That’s set on Line 39.
  2. The a1a_1 and a2a_2 coefficients are generated on Lines 43-45. By choosing the coefficients randomly from the array [1, 1, 1, 2, 3, 4], I’m keeping the leading AA coefficient small, with one being the most common value. I did it this way because it makes the equations look more like those you see in books and on tests, but you can change to whatever you like by fiddling with the array.

This will print on a single sheet of paper if you open it in Safari or Chrome on a Mac. You’ll have to turn off the printing of headers and footers, and you’ll probably have to set the margins to Minimal in Chrome to keep it from bleeding over onto another page. I think I could get it to print on a single page in Firefox, but I don’t know (and really don’t want to know) how to suppress headers and footers there. If you can’t get it to fit on one page, adjust the top and bottom header margins in Line 19 and/or the height of the <td> cells in Line 30.

I think you’re best off with your own local copy of the page, but you can also just point your browser to the copy on my server. Every time you reload, you’ll get a new set of problems.

If, by the way, you’re interested in similar practice sheets for more elementary math, I have a page with links to several others.

Next post Previous post