hw-gen icon indicating copy to clipboard operation
hw-gen copied to clipboard

Add maximum digit constraint for multiplication worksheets

Open ezuk opened this issue 1 month ago โ€ข 0 comments

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 โœ… or 5 ร— 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.html lines 217-227

Core Logic (src/js/hw-gen.js)

  • Added maxDigit parameter 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 problems
  • multiplication-vis-1 - Grid-based visual problems (2-6 range)
  • multiplication-11-13 - Problems with 11-13

Deployment

  • Added /docs folder for GitHub Pages deployment
  • Enables easy preview and testing of the feature

๐Ÿงช How to Test

  1. Navigate to the Multiplication category
  2. Select any multiplication worksheet (e.g., "Multiplication 1-digit Equations")
  3. On the print config page, you'll see "Maximum Digit for Multiplication" dropdown
  4. Select "5 - Tables up to 5"
  5. Click "Preview Worksheets"
  6. Verify that in every problem, at least one number is โ‰ค 5

๐Ÿ“Š Files Changed

  • src/index.html - Added UI control
  • src/js/hw-gen.js - Core generation logic updates
  • src/js/hw-sets.js - Updated worksheet generators
  • src/js/util.js - New helper function
  • docs/ - Added for GitHub Pages deployment (mirrors src/)

โœ… 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.

ezuk avatar Nov 05 '25 19:11 ezuk