A few days ago my wife asked me to print out some math worksheets for our child who is moving on to 2nd grade.
This would allow her to practice her math during the summer break.
I found some on Google, but realized that most websites only had a few set of sheets—meaning there is a limited variety.
So, being the engineer that I am, I decided to write my own math worksheet generator.
The motivation behind the project was actually to get more familiar with building something in React.
I learn better when I have an actual project to work on so, this was my motivation.
The setup
I knew the set up would be pretty straight forward.
I’d have a component for the “worksheet” itself.
Then child-components for each of the problems.
For the data set, it would need to be an array of number pairs.
Then I could take each pair and generate a problem.
Challenges
While the idea was simple enough, I ran into a few challenges.
First, since I’m new to React, understanding the life-cycle of a component and how to update the state of a component was the first challenge.
At first I had each of the problems created and the values for each value was being stored into the component’s state.
This was causing all sorts of rendering issues.
So I then generated all the problems in an array in the beginning and that would be the initial state of the component.
Anytime I wanted a new set of problems, just generate the new array and replace the old one in the state.
The second challenge I ran into was calculating combinations.
By design, I made it so that you can define the upper number and the lower number of a problem and the app would generate variations of it so you have a mixed math worksheet.
The reason I had to do this was because I had determined I can generate 42 problems from the range of numbers.
42 problems is about the number of problems I can fit onto a printed sheet.
So if the upper and lower numbers are too close in range, I wouldn’t have enough combinations to generate 42 problems.
I also needed to determine possibilities because, I also gave the option to have the large number in a problem to always be on top.
Doing some research, I found two math formulas to solve the issue.
The first formula was to figure out the number of combinations without repitition, since I didn’t want any problem repeating itself on the worksheet.
The second formula was to determine unique combinations based on two numbers—which happens to the be possible numbers multiplied by itself—or the possible numbers squared.
The last challenge I ran into was recursion.
I don’t often write recursions and it was one of the concepts that took forever for it to click in my head when learning to program.
In the worksheets app, I knew that I wanted unique combos only. To do this, I have a function that generates the problem. I then have another function that checks to see if the problem already exists in the set.
If it doesn’t exist, it’ll add it to the set.
If it does, that’s where the recursion happens, it’ll keep creating and checking until it finds another unique combo.
Design
I intentionally kept the look and feel of it super minimal.
I didn’t want to focus on the design of the worksheet generator so that I can focus on the features.
After all, most worksheets of this nature are simple looking.
The bulk of the design was getting the placement of the math elements correctly using CSS grid and flexbox.
I also added some media queries so that only the problems will show when printing.
Since the worksheet has all the inputs from the generator as a state, I’ll likely be adding a dropdown with preconfigured settings that updates the state.
This is so that teachers and parents alike can quickly generate worksheets that they would like to print out (e.g. single-digit multiplication, triple-digit addition).
I’d like to also bake in the ability to change the orientation of the problems. Currently it is a vertical layout, but I’ve seen worksheets where the problem is in a horizontal layout.
Improvements
While the math worksheets generator is a pretty simple application, there’s still room for improvements that I haven’t made yet.
For example for divisions, currently it generates problems which would yield decimals. I think this is pretty advanced for elementary students, so I’d like to come up with a way to only generate division problems without remainders.
Share your feedback
If you see improvements or have feedback please let me know.
If you’re a parent or educator and have some suggestions, please reach out.
I’d love to know how I can improve the worksheets generator.