Adding Fractions

In this tutorial we will put together an entire Flash movie which interactively helps students add fractions. Your goal in reading this tutorial is to understand how it works and to modify in some way that suits your needs.

First of all here is what it looks like. If you are viewing this on the Web and have the Flash 5+ player installed, it is fully active.

The features of this Flash movie include:

1. Randomly creating a fraction addition problem.
2. Helping the student get the least common denominator.
3. Showing the entire solution.
4. Checking the answer

The program is not "bulletproof" in the sense that not all possible checks have been made. For example, the student can check the answer that was requested to be shown and it will score correct. Also students can input various characters instead of numbers.

The data boxes

There are three parts to this movie, the input/output data boxes, the action buttons, and the code itself. We consider these in three sections following and begin right here with the data boxes.

First of all the entire movie is set on frame one of the timeline. We have placed the text boxes and graphics in various layers and the code that "does stuff" in a separate layer. In addition there is a single button used four times to evoke the actions. The timeline looks like this:

There are four layers, the "bar-a" and "bar-b" layers contain the two large rectangles, the data boxes layer contains the directions and the input boxes, and the code layer contains the four functions that perform the work. Much of this is the "window-dressing" to make the presentation look nice. The important parts are the input boxes, the buttons, and the code to process the functions.

The data boxes

On the stage the movie looks as shown below

Two boxes - one fraction. You can see that there are seven input boxes. Use the Text Tool and select the Input Text button on the Properties bar Now draw just two boxes and line them up so that they appear to be a fraction (without the bar). Select both boxes by holding the shift key and selecting them with the mouse in turn, and choosing Modify+align, you may align them from the left. You can draw in the bar by selecting the line tool . Selecting the boxes in turn, enter numbers in your boxes.

Tip: You may find it much easier to make just one box above and then duplicate the box by selecting it and pressing CTLR+D. Then move it where you need it to be with the mouse.

A couple of finishing touches to consider is choosing the point size for the type in the text box and the font itself. Note that we are using the Arial font at 14pt. The color typeface is black and the numbers are aligned at the center.

What you should have on your stage at this time is something like what is shown below.

Don't worry if you don't have the blue lines around it. That merely means the boxes have been selected. In fact that is what you want to do now. Select the Arrow tool and draw an imaginary rectangle around your entire fraction. You should see something very nearly like the image just above. Choose the CTLR+D tool six times - but just once at a time. You may have something like the first screen shot below.

Now very carefully select the lower right-hand edge of the duplicated fraction and position on the right of the first fraction, leaving room for the plus (+) sign. Choose the Text tool and make the plus (+) sign. If all has worked well your stage should look something like the image at the far right

Labeling variables

Since you will want to put numbers into these boxes you will want to given them names. This must be done, one by one. The procedure is this: (1) Select the box. (2) In the properties box enter the variable name in the "Var:" box as shown below.

Note that we have given as the name of the first numerator the variable name "n1." If you plan to use the code below you should give your input box the same name. Label the first denominator as "d1." The next two input boxes are labeled "n2" and "d2" in correspondence with the first fraction.

Finishing the input/output boxes

If you have reached this point, the hard work of part one is over. Choose the Arrow tool. Select both fractions together with the plus sign by drawing an imaginary rectangle around it and then duplicate it (CTLR+D). Carefully select just the lower right part of the duplicated fraction pair and move it to the right of the first fraction pair. The sequence of images showing this process is just below.

In exact correspondence with the first fraction pair, label the four new boxes as "n3", "d3", "n4", and "d4." It is in these boxes that the faction with the least common denominator will be written. Place an equal (=) sign between the sets of fraction pairs. Finally select just the right most fraction, duplicate it (CTLR+D) and move it to the right once again. This is where the answer will written (by the movie or the user). Label the numerator at "an" and the denominator as "ad." Insert another equal (=) sign.

Outlining the boxes

By selecting each box, one by one you can place a box outline around it so that the student knows where to enter the answers. As you can see the box "n3" which is outlined shows the outline highlighted to the right (next to "var"). By leaving it blank it will not be very clear where numbers should be entered. In our model below, we've outlined every box that the user may wish to fill in. The original fraction boxes on the left are not outlined. But on the stage they appear outline with a dotted line.

Tip: When placing the "+" and "=" signs and other similar math notation, it is helpful to make the font size somewhat larger. The makes if more readable. Also leave plenty of room between the operands and the variables for clarity.

Though nothing is working at this point, your stage should look like this:

Notice how neatly align these final boxes are. This was achieved by selecting all of the numerator boxes as described above and then choosing Modify+Align+bottom. Ditto for the bottom boxes, and ditto for the fraction lines. It takes time but the neat professional appearance it worth it.

The Buttons

Let's make a "plain-Jane" button. No fancy stuff.

Step 1. This is important: Create a new layer by selecting Insert+Layer.

Step 2. Select the circle tool and draw a small circle on the stage. The size if available in the info panel. About 15 pixels will do it. But size doesn't matter at this point. Also the color doesn't matter. In the illustration below, I've shown a green circle with a black border placed to the left of the first fraction on my stage.

Step 3. Choose the Arrow tool and draw an imaginary rectangle around the circle. You should see the whole button highlighted as show below in first two images two images below.

Circle as drawn

Circle selected

Converted to button

With the circle selected choose Insert+Convert and select the Button button - as shown to the right. You can give it any name, but that feature will not be used in this example. You can place the registration point at the top-left or center, but that is not to be used here either.

Step 4. Deselect and then select the button again. Open the Actions panel (F9) and type in the following code. Alternatively, just copy the three lines below and paste them into the Actions panel. This is shown below. This creates the "Make Problem" button above. For the other buttons a different middle line will be typed.

on (release) {
make_problem()
}

You are almost done. Just select the button, and duplicate it three times and arrange the buttons as shown in the completed movie or as you would like them arranged. In the Action panel for each of the buttons type respectively the following three lines of code

You should now have your four buttons. Here is what we've done this time. Please explore the alignment options fully; you can align from the top or left but you can also distribute widths or heights, which is very difficult to do by hand-mouse movements. You can add text boxes to identify them, line them all up and all we need to do now is add the code.

The Code

It is time to put in the code.

Step 1. The first order of business is to put in a new layer. Recall, choose Insert+Layer.

Step 2. Open the actions panel and copy the code below and paste it into the Actions panel at line 1. The Flash movie code is where it should be, and the movie is ready to run.

Step 3. Select Control+Test Movie. It should run just as the example above. If you have made a glaring mistake somewhere
Flash will probably tell you in the Output panel (F2). If you've made some little error, Flash won't tell you where it is, it will just run incorrectly or not at all. So it pays at this point to be extra careful that you've pasted everything just the way it should be. Below we will decribe the code function by function.

Understanding the code

If you have programmed just about any language from Fortran to C++ to JavaScript, you will note that many of the lines above look familiar. If you have never programmed at all, take heart because for the most part Action Script - that's what this code is called - is fairly straightforward and well designed for just about anyone from amateur to professional to use. Let's take a look at the code pieces. Our code is written almost completely in functions. Functions, like subroutines, in other programming languages are used as subprograms that contain important parts of the program in self-contained modules. Bear in mind that we have defined ten variables, the input and output variables of the fractions. We can and do refer to those variables in this pieces of code below. Note by using function, the code is parsed into simple manageable pieces.

Making the fraction

The first subprogram is call "make_problem". Its purpose is to make the pair of fractions to be displayed to the user. The main generator of numbers if the native random number generator. The command Math.random() generates a random number between 0 and 1. So we multiply it by 8 for the denominator and then applied the Math.ceil() function, the ceiling function that rounds up to the next integer. As you can see we create two denominators (d1 and d2) and two numerators ( n1 and n2). The other statements are bookkeeping statements designed to clean up and remove fraction elements from the previous problem. For example the statement d1="" (two double quotes) sets the variable d1 to nothing. The variable response is what appears when the user asks for a check of the answer.

Find the Least Common Multiple

The function applies the Euclidean algorithm to find the greatest common denominator to determine the least common multiple. The only really special command here is one of the form b%a, which returns the remainder of b divided by a. We leave it to the reader to interpret the code, as that is well beyond the scope of this brief tutorial.

Make the answer

This function computes the answer of the fraction addition and then calls the reduce function that reduces it to lowest terms.

Check the answer

Here we check whether the input answer is correct. It is straight function evaluation and then comparison with input answer. If it is correct it displays the message "Correct." If the answer is incorrect it displays the message "Incorrect."

Project ideas

1. Convert this to a "toolbox" where students enter the fraction and the output is the sum, or difference, or product, all reduced all produced by a button.
2. Convert the code to a subtract fractions problem.
3. Add a degree of difficulty button to make fraction problems more challenging
4. Convert the code to a add and subtract problem, either random switching or at the user's request.
5. Solve a linear equation. This will require code changes. Perhaps you randomize the coefficients in ax+b or you give ordered pairs and ask for the slope. With the input boxes already created you merely make small changes in the code.
6. Give a function such as a quadratic with randomly chosed coefficient. Ask the student to find the roots. Again a small code change is needed.