Your browser does not support canvas.
Fraction 1:

Fraction 2:


How to use the Fraction Multiplication Area Model App

This Fraction Multiplication App is an interactive teaching aid to illustrate fraction multiplication concepts using the Area Model.

Main Grid Area

The main grid area shows the fraction multiplication area model for two fractional values. The shaded rows represents the first fraction (F1), while the shaded columns represents the second fraction (F2). The overlap area represents the result of multiplying the two fraction values. Selecting different fraction settings changes the grid configuration and shaded area automatically.

Fraction Values and Settings

For each of the two fractions, we can change three different configuration settings using the pair of fraction control boxes.

Fraction Multiplication Area Model App - Fraction value control areas
Fraction values control

The app supports a maximum of 3 units (or wholes) for each fraction value. To change the number of units (#units) for each fraction, select the corresponding value under “Units/Wholes”.

Changing the denominator (D) value of a fraction changes the number of segments each unit square is divided into (rows for F1 and columns for F2). A maximum denominator value of 20 is supported at this time.

Changing the numerator (N) value of a fraction changes the number of segments that is shaded (rows for F1 and columns for F2). This can only go as high as there are visible segments, i.e. #units x D.

Use the color boxes to change the default colors used for shading (may not be supported on some browsers).

Finally, the opacity slider changes the opacity used for the shading so that the blended region representing the product of the two fractions can be distinguished.

Presentation Buttons

The four presentation buttons overlays information about the fraction values on the main grid area.

Fraction Multiplication Area Model App - Presentation Buttons
Presentation buttons

These buttons correspond to the following:

  • C – Clear all information and show the main grid,
  • 1 – Show Fraction value for F1,
  • 2 – Show Fraction value for F2,
  • X – Show the resulting fraction value when we mulitply F1 x F2.

With each overlay screen, the corresponding unit value (or one whole) is shown in white. This is the unit which the fraction is defined for, e.g. the following shows an orange area that represents a fraction value 3/14 of the area of the white square.

Fraction Multiplication Area Model - example of product presentation overlay.
Example of an overlay for presentation information


We can change a few option settings to fit the instruction needs. These are found under the “Options” box.

Fraction Multiplication Area Model App - options settings
Options Settings

The “Show simplified” settings toggles the simplified fraction shown in each of the presentation overlays. By default, the simplified values are shown along with the values that corresponds to the picture, as in the example above.

The “Spacing” settings allow a teacher to set the spacing between each unit (whole) on the main grid when more than one unit is configured. Depending on what you want to explain, the grid may be shown with or without gaps separating the units. These gaps are highlighted in yellow below.

Fraction Multiplication Area Model App - grid spacings
Spacing or gaps between unit squares

Suggestions and Comments

This app is a work in progress. If you have any suggestions, comments or bugs to report, please send us an email using the contact form. Thank you!

More Fraction Resources

For more fraction resources, refer to our main fractions page.

Scroll to Top