Add maximum digit constraint for multiplication worksheets
This is all just me playing with Claude Code but the new feature does appear to work, so I figured I'd share. This is useful for my kid as we're working on the times table while also doing these multiplication worksheets, but some of the exercises would be for numbers he doesn't know yet (like, the times table for 9 or whatever).
I guess the other big structural change which might be a dealbreaker for you is moving the code to /docs, this is just so that GitHub Pages lets us deploy the app (free and simple hosting).
๐ฏ Preview Build
Try the new feature here: https://ezuk.github.io/hw-gen/
๐ What This PR Does
This PR adds a maximum digit constraint feature for multiplication worksheets. When generating multiplication problems, users can now specify a maximum digit value (5, 6, 7, or 8) to ensure that at least one operand in each problem is less than or equal to that value.
๐ค Why This Feature?
This feature is designed for children who are progressively learning their multiplication tables. For example:
- If a child only knows multiplication tables up to 5, setting max digit to 5 ensures they can solve every problem
- Problems like
3 ร 8โ or5 ร 9โ are included (one operand โค 5) - Problems like
7 ร 8โ are excluded (both operands > 5)
This helps build confidence and allows focused practice on specific multiplication ranges.
๐ง Changes Made
User Interface
- Added a dropdown control in the print configuration view
- Options: No limit (default), or constraint to tables up to 5, 6, 7, or 8
- Control only appears when selecting multiplication worksheets
- Located in
src/index.htmllines 217-227
Core Logic (src/js/hw-gen.js)
- Added
maxDigitparameter to application state - Updated
genEquation()to respect max digit constraint for multiplication - Updated
generate()to filter/constrain equation generation - Added visibility toggle logic for the max digit control
Helper Functions (src/js/util.js)
- Added
randRangeByDigitsWithMax()function - Generates random numbers within digit ranges while respecting the maximum digit constraint
Worksheet Generators (src/js/hw-sets.js)
Updated custom generators to accept and apply maxDigit parameter:
multiplication-vis-emoji- Visual emoji-based problemsmultiplication-vis-1- Grid-based visual problems (2-6 range)multiplication-11-13- Problems with 11-13
Deployment
- Added
/docsfolder for GitHub Pages deployment - Enables easy preview and testing of the feature
๐งช How to Test
- Navigate to the Multiplication category
- Select any multiplication worksheet (e.g., "Multiplication 1-digit Equations")
- On the print config page, you'll see "Maximum Digit for Multiplication" dropdown
- Select "5 - Tables up to 5"
- Click "Preview Worksheets"
- Verify that in every problem, at least one number is โค 5
๐ Files Changed
src/index.html- Added UI controlsrc/js/hw-gen.js- Core generation logic updatessrc/js/hw-sets.js- Updated worksheet generatorssrc/js/util.js- New helper functiondocs/- Added for GitHub Pages deployment (mirrorssrc/)
โ Testing Done
- โ JavaScript syntax validation passed on all modified files
- โ Logic tested for proper constraint application
- โ UI control shows/hides correctly based on worksheet type
- โ All existing worksheet types remain functional
Note: This feature only affects multiplication worksheets and has no impact on addition, subtraction, or division problems.