Quadratic practice sheet

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:

  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;
 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)];
 47:      // Constants
 48:      var c1 = Math.floor(Math.random()*9 + 1);
 49:      var c2 = Math.floor(Math.random()*9 + 1);
 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:      }
 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 '
 67:      // Determine the operators.
 68:      if (C < 0) {
 69:        opC = '&#8722;';
 70:        C = -C;
 71:      }
 73:      if (B < 0) {
 74:        opB = '&#8722;';
 75:        B = -B;
 76:      }
 77:      else if (B == 0) {
 78:        opB = '';
 79:        B = '';
 80:        lin = '';
 81:      }
 83:      // Don't show coefficients that are 1.
 84:      if (A == 1) A = '';
 85:      if (B == 1) B = '';
 87:      term = A + quad + opB + ' ' + B + lin + opC + ' ' + C;
 89:      if (eqn) return term + ' = 0';
 90:      else return term;
 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>
109:  </body>
110:  </html>

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

[(a_1 x + c_1)(a_2 x + c_2)]

and then multiply the two binomials to get the quadratic expression

[A 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 [a_1] and [a_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 [A] 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.

7 Responses to “Quadratic practice sheet”

  1. Ryan Gray says:

    These practice sheets are great! I printed some out for my daughter for summer practice and didn’t get much interest, so I proposed we try to modify it to let you type in an answer and have it checked. That got more interest, so I set about to do it as she (sort of) watched. I put the result (the addition and subtraction one) in my Dropbox public folder so I could iterate while she tried it on her iPod touch. These also print nicely via AirPrint.

    When you move out of the answer box, it checks it and turns the box green or red. The CSS makes empty boxes not print, so you can still print out a plain practice sheet but also print out the results of a filled-out sheet. The inputs are type “tel” to make iOS bring up the keypad for easy entry.

    Obviously, this fill-in version doesn’t allow you to work in steps, so only seems to make sense for the simpler problem types. I suppose a work area box could be provided separate from the answer box, and maybe a monospaced font to help line things up.

  2. Dr. Drang says:

    The flexibility to allow printing without the answer boxes is a nice touch, Ryan.

    My reasons for focusing on printed sheets were:

    1. It gets me more involved because I have to check them, and I can then see where my son gets things wrong.
    2. It better matches what he’ll be doing in school. There’s a value in learning how to line up columns of numbers and print neatly.
    3. As you say, multi-step solutions don’t lend themselves to fill-in-the-blank answers.

    But I can’t argue with success. If your daughter was more interested in the doing problems on the Touch, that’s the right way for you to go.

  3. Rameez says:

    Whatever happened to good ol pen and paper solving of equations? Using a device to solve the problems without understanding the methodology behind the solution is a bit concerning.

    Back in my days, my father never allowed me to use pen and paper. Imagine the numbers and watch them mold themselves into solutions, he used to say… :)

    Very nice code… Love the print-friendly touch! :)

  4. Jeremy Thomson says:

    Never written Javascript, nor much HTML. The string constant…

    opB = ‘−’;

    Took some googling to figure out.

    You could have used

    opB = ‘−’;

    Seems to work just fine in Chrome and IE, can’t speak for Mozilla or Safari.

  5. Jeremy Thomson says:

    Arggh! And OF COURSE, my comments dont get escaped by the comment submission. Lets see.

    You’ve used opB = opB=’−’; you might have used opB=’&minus;’;

    Lets see if that gets through

  6. Jeremy Thomson says:

    I don’t believe it. Using the && escapes things nicely in HTML but doesnt work heres. I was saying ‘ampersand hash 8722 semi’ dcould be replaces with the more transparent ‘ampersand minus semi’

    Be nice if I was able to edit comments rather than submit and repost.

  7. Abdullahi Tijjani Ringim says:

    I have much interest to learn HTML. The code you provided will help me to improve my understanding of the concept. It was really an educative program that will help younger ones improve their skills. Keep up!