feat(blog): add subtraction and multi-digit worksheet blog posts
Add two comprehensive blog posts introducing subtraction and multi-digit worksheet features with visual examples: **Subtraction Worksheets Post:** - 7 progressive scaffolding levels (no-borrowing through cascading borrows) - Side-by-side comparisons showing impact of borrow notation - Teaching progression guide (7+ week curriculum) - 9 SVG examples demonstrating different scaffolding options - Focus on borrow notation boxes and place value colors **Multi-Digit Worksheets Post:** - Support for 1-5 digit arithmetic problems - 6-color place value system across all digit ranges - Mixed problem sizes within single worksheet - Adaptive scaffolding based on digit count - 6 SVG examples (2-digit baseline through 5-digit advanced) **Code Fixes:** - Fix typstGenerator.ts: Pass showBorrowNotation instead of showCarryBoxes to subtraction-problem-stack function (line 220) - Simplify hint text rendering in borrowBoxes.ts (remove nested text elements) **Generated Assets:** - 9 subtraction examples in public/blog/subtraction-examples/ - 6 multi-digit examples in public/blog/multi-digit-examples/ - New generation scripts: generateSubtractionExamples.ts, generateMultiDigitExamples.ts Note: Borrowing hints feature (arrows with calculations) needs additional debugging in Typst rendering layer. Current blog posts focus on working features: borrow notation boxes, place value colors, and progressive scaffolding. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
parent
99ec5eae5e
commit
dd9587f8cd
|
|
@ -0,0 +1,289 @@
|
|||
// Typst document generator for addition worksheets
|
||||
|
||||
import type { WorksheetProblem, WorksheetConfig } from '@/app/create/worksheets/types'
|
||||
import {
|
||||
generateTypstHelpers,
|
||||
generateProblemStackFunction,
|
||||
generateSubtractionProblemStackFunction,
|
||||
generatePlaceValueColors,
|
||||
} from './typstHelpers'
|
||||
import { analyzeProblem, analyzeSubtractionProblem } from './problemAnalysis'
|
||||
import { resolveDisplayForProblem } from './displayRules'
|
||||
|
||||
/**
|
||||
* Chunk array into pages of specified size
|
||||
*/
|
||||
function chunkProblems(problems: WorksheetProblem[], pageSize: number): WorksheetProblem[][] {
|
||||
const pages: WorksheetProblem[][] = []
|
||||
for (let i = 0; i < problems.length; i += pageSize) {
|
||||
pages.push(problems.slice(i, i + pageSize))
|
||||
}
|
||||
return pages
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate maximum number of digits in any problem on this page
|
||||
* Returns max digits across all operands (handles both addition and subtraction)
|
||||
*/
|
||||
function calculateMaxDigits(problems: WorksheetProblem[]): number {
|
||||
let maxDigits = 1
|
||||
for (const problem of problems) {
|
||||
if (problem.operator === 'add') {
|
||||
const digitsA = problem.a.toString().length
|
||||
const digitsB = problem.b.toString().length
|
||||
const maxProblemDigits = Math.max(digitsA, digitsB)
|
||||
maxDigits = Math.max(maxDigits, maxProblemDigits)
|
||||
} else {
|
||||
// Subtraction
|
||||
const digitsMinuend = problem.minuend.toString().length
|
||||
const digitsSubtrahend = problem.subtrahend.toString().length
|
||||
const maxProblemDigits = Math.max(digitsMinuend, digitsSubtrahend)
|
||||
maxDigits = Math.max(maxDigits, maxProblemDigits)
|
||||
}
|
||||
}
|
||||
return maxDigits
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate Typst source code for a single page
|
||||
*/
|
||||
function generatePageTypst(
|
||||
config: WorksheetConfig,
|
||||
pageProblems: WorksheetProblem[],
|
||||
problemOffset: number,
|
||||
rowsPerPage: number
|
||||
): string {
|
||||
// Calculate maximum digits for proper column layout
|
||||
const maxDigits = calculateMaxDigits(pageProblems)
|
||||
|
||||
// Enrich problems with display options based on mode
|
||||
const enrichedProblems = pageProblems.map((p, index) => {
|
||||
if (config.mode === 'smart' || config.mode === 'mastery') {
|
||||
// Smart & Mastery modes: Per-problem conditional display based on problem complexity
|
||||
// Both modes use displayRules for conditional scaffolding
|
||||
const meta =
|
||||
p.operator === 'add'
|
||||
? analyzeProblem(p.a, p.b)
|
||||
: analyzeSubtractionProblem(p.minuend, p.subtrahend)
|
||||
|
||||
// Choose display rules based on operator (for mastery+mixed mode)
|
||||
let rulesForProblem = config.displayRules as any
|
||||
|
||||
if (config.mode === 'mastery') {
|
||||
const masteryConfig = config as any
|
||||
// If we have operator-specific rules (mastery+mixed), use them
|
||||
if (p.operator === 'add' && masteryConfig.additionDisplayRules) {
|
||||
rulesForProblem = masteryConfig.additionDisplayRules
|
||||
console.log(
|
||||
`[TYPST PROBLEM ${index}] Using additionDisplayRules for ${p.a} + ${p.b}`,
|
||||
rulesForProblem
|
||||
)
|
||||
} else if (p.operator === 'sub' && masteryConfig.subtractionDisplayRules) {
|
||||
rulesForProblem = masteryConfig.subtractionDisplayRules
|
||||
console.log(
|
||||
`[TYPST PROBLEM ${index}] Using subtractionDisplayRules for ${p.minuend} - ${p.subtrahend}`,
|
||||
rulesForProblem
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const displayOptions = resolveDisplayForProblem(rulesForProblem, meta)
|
||||
|
||||
if (p.operator === 'sub') {
|
||||
console.log(`[TYPST PROBLEM ${index}] Subtraction resolved display:`, {
|
||||
problem: `${p.minuend} - ${p.subtrahend}`,
|
||||
meta,
|
||||
rulesUsed: rulesForProblem,
|
||||
resolved: displayOptions,
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...p,
|
||||
...displayOptions, // Now includes showBorrowNotation and showBorrowingHints from resolved rules
|
||||
}
|
||||
} else {
|
||||
// Manual mode: Per-problem conditional display using displayRules (same as Smart/Mastery)
|
||||
const meta =
|
||||
p.operator === 'add'
|
||||
? analyzeProblem(p.a, p.b)
|
||||
: analyzeSubtractionProblem(p.minuend, p.subtrahend)
|
||||
|
||||
const displayOptions = resolveDisplayForProblem(config.displayRules as any, meta)
|
||||
|
||||
return {
|
||||
...p,
|
||||
...displayOptions,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Generate Typst problem data with per-problem display flags
|
||||
const problemsTypst = enrichedProblems
|
||||
.map((p) => {
|
||||
if (p.operator === 'add') {
|
||||
return ` (operator: "+", a: ${p.a}, b: ${p.b}, showCarryBoxes: ${p.showCarryBoxes}, showAnswerBoxes: ${p.showAnswerBoxes}, showPlaceValueColors: ${p.showPlaceValueColors}, showTenFrames: ${p.showTenFrames}, showProblemNumbers: ${p.showProblemNumbers}, showCellBorder: ${p.showCellBorder}, showBorrowNotation: ${p.showBorrowNotation}, showBorrowingHints: ${p.showBorrowingHints}),`
|
||||
} else {
|
||||
return ` (operator: "−", minuend: ${p.minuend}, subtrahend: ${p.subtrahend}, showCarryBoxes: ${p.showCarryBoxes}, showAnswerBoxes: ${p.showAnswerBoxes}, showPlaceValueColors: ${p.showPlaceValueColors}, showTenFrames: ${p.showTenFrames}, showProblemNumbers: ${p.showProblemNumbers}, showCellBorder: ${p.showCellBorder}, showBorrowNotation: ${p.showBorrowNotation}, showBorrowingHints: ${p.showBorrowingHints}),`
|
||||
}
|
||||
})
|
||||
.join('\n')
|
||||
|
||||
// DEBUG: Show Typst problem data for first problem
|
||||
console.log('[TYPST DEBUG] First problem Typst data:', problemsTypst.split('\n')[0])
|
||||
|
||||
// Calculate actual number of rows on this page
|
||||
const actualRows = Math.ceil(pageProblems.length / config.cols)
|
||||
|
||||
// Use smaller margins to maximize space
|
||||
const margin = 0.4
|
||||
const contentWidth = config.page.wIn - margin * 2
|
||||
const contentHeight = config.page.hIn - margin * 2
|
||||
|
||||
// Calculate grid spacing based on ACTUAL rows on this page
|
||||
const headerHeight = 0.35 // inches for header
|
||||
const availableHeight = contentHeight - headerHeight
|
||||
const problemBoxHeight = availableHeight / actualRows
|
||||
const problemBoxWidth = contentWidth / config.cols
|
||||
|
||||
// Calculate cell size assuming MAXIMUM possible embellishments
|
||||
// Check if ANY problem on this page might show ten-frames
|
||||
const anyProblemMayShowTenFrames = enrichedProblems.some((p) => p.showTenFrames)
|
||||
|
||||
// Calculate cell size to fill the entire problem box
|
||||
// Base vertical stack: carry row + addend1 + addend2 + line + answer = 5 rows
|
||||
// With ten-frames: add 0.8 * cellSize row
|
||||
// Total with ten-frames: ~5.8 rows
|
||||
//
|
||||
// Horizontal constraint: maxDigits columns + 1 for + sign
|
||||
// Cell size must fit: (maxDigits + 1) * cellSize <= problemBoxWidth
|
||||
const maxCellSizeForWidth = problemBoxWidth / (maxDigits + 1)
|
||||
const maxCellSizeForHeight = anyProblemMayShowTenFrames
|
||||
? problemBoxHeight / 6.0
|
||||
: problemBoxHeight / 4.5
|
||||
|
||||
// Use the smaller of width/height constraints
|
||||
const cellSize = Math.min(maxCellSizeForWidth, maxCellSizeForHeight)
|
||||
|
||||
return String.raw`
|
||||
// addition-worksheet-page.typ (auto-generated)
|
||||
|
||||
#set page(
|
||||
width: ${config.page.wIn}in,
|
||||
height: ${config.page.hIn}in,
|
||||
margin: ${margin}in,
|
||||
fill: white
|
||||
)
|
||||
#set text(size: ${config.fontSize}pt, font: "New Computer Modern Math")
|
||||
|
||||
// Single non-breakable block to ensure one page
|
||||
#block(breakable: false)[
|
||||
|
||||
#let heavy-stroke = 0.8pt
|
||||
#let show-ten-frames-for-all = ${
|
||||
config.mode === 'manual'
|
||||
? config.showTenFramesForAll
|
||||
? 'true'
|
||||
: 'false'
|
||||
: config.displayRules.tenFrames === 'always'
|
||||
? 'true'
|
||||
: 'false'
|
||||
}
|
||||
|
||||
${generatePlaceValueColors()}
|
||||
|
||||
${generateTypstHelpers(cellSize)}
|
||||
|
||||
${generateProblemStackFunction(cellSize, maxDigits)}
|
||||
|
||||
${generateSubtractionProblemStackFunction(cellSize, maxDigits)}
|
||||
|
||||
#let problem-box(problem, index) = {
|
||||
// Extract per-problem display flags
|
||||
let grid-stroke = if problem.showCellBorder { (thickness: 1pt, dash: "dashed", paint: gray.darken(20%)) } else { none }
|
||||
|
||||
box(
|
||||
inset: 0pt,
|
||||
width: ${problemBoxWidth}in,
|
||||
height: ${problemBoxHeight}in,
|
||||
stroke: grid-stroke
|
||||
)[
|
||||
#align(center + horizon)[
|
||||
#if problem.operator == "+" {
|
||||
problem-stack(
|
||||
problem.a, problem.b, index,
|
||||
problem.showCarryBoxes,
|
||||
problem.showAnswerBoxes,
|
||||
problem.showPlaceValueColors,
|
||||
problem.showTenFrames,
|
||||
problem.showProblemNumbers
|
||||
)
|
||||
} else {
|
||||
subtraction-problem-stack(
|
||||
problem.minuend, problem.subtrahend, index,
|
||||
problem.showBorrowNotation, // show-borrows (whether to show borrow boxes)
|
||||
problem.showAnswerBoxes,
|
||||
problem.showPlaceValueColors,
|
||||
problem.showTenFrames,
|
||||
problem.showProblemNumbers,
|
||||
problem.showBorrowNotation, // show-borrow-notation (scratch work boxes in minuend)
|
||||
problem.showBorrowingHints // show-borrowing-hints (hints with arrows)
|
||||
)
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
#let problems = (
|
||||
${problemsTypst}
|
||||
)
|
||||
|
||||
// Compact header - name on left, date on right
|
||||
#grid(
|
||||
columns: (1fr, 1fr),
|
||||
align: (left, right),
|
||||
text(size: 0.75em, weight: "bold")[${config.name}],
|
||||
text(size: 0.65em)[${config.date}]
|
||||
)
|
||||
#v(${headerHeight}in - 0.25in)
|
||||
|
||||
// Problem grid - exactly ${actualRows} rows × ${config.cols} columns
|
||||
#grid(
|
||||
columns: ${config.cols},
|
||||
column-gutter: 0pt,
|
||||
row-gutter: 0pt,
|
||||
..for r in range(0, ${actualRows}) {
|
||||
for c in range(0, ${config.cols}) {
|
||||
let idx = r * ${config.cols} + c
|
||||
if idx < problems.len() {
|
||||
(problem-box(problems.at(idx), ${problemOffset} + idx),)
|
||||
} else {
|
||||
(box(width: ${problemBoxWidth}in, height: ${problemBoxHeight}in),)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
] // End of constrained block
|
||||
`
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate Typst source code for the worksheet (returns array of page sources)
|
||||
*/
|
||||
export function generateTypstSource(
|
||||
config: WorksheetConfig,
|
||||
problems: WorksheetProblem[]
|
||||
): string[] {
|
||||
// Use the problemsPerPage directly from config (primary state)
|
||||
const problemsPerPage = config.problemsPerPage
|
||||
const rowsPerPage = problemsPerPage / config.cols
|
||||
|
||||
// Chunk problems into discrete pages
|
||||
const pages = chunkProblems(problems, problemsPerPage)
|
||||
|
||||
// Generate separate Typst source for each page
|
||||
return pages.map((pageProblems, pageIndex) =>
|
||||
generatePageTypst(config, pageProblems, pageIndex * problemsPerPage, rowsPerPage)
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
// Borrow boxes row rendering for subtraction problems
|
||||
// This row shows where borrows occur (FROM higher place TO lower place)
|
||||
|
||||
import type { CellDimensions } from '../shared/types'
|
||||
import { TYPST_CONSTANTS } from '../shared/types'
|
||||
|
||||
/**
|
||||
* Generate Typst code for the borrow boxes row
|
||||
*
|
||||
* Borrow boxes indicate where a borrow operation occurs:
|
||||
* - Source: The place value we're borrowing FROM (giving)
|
||||
* - Destination: The place value we're borrowing TO (receiving)
|
||||
*
|
||||
* Design decision: Borrow boxes NEVER use place value colors (always stroke-only)
|
||||
* to avoid arrow layering issues where arrows get covered by adjacent cell backgrounds.
|
||||
*
|
||||
* @param cellDimensions - Cell sizing information
|
||||
* @returns Typst code for borrow boxes row
|
||||
*/
|
||||
export function generateBorrowBoxesRow(cellDimensions: CellDimensions): string {
|
||||
const { cellSize, cellSizeIn, cellSizePt } = cellDimensions
|
||||
|
||||
const hintTextSize = (cellSizePt * TYPST_CONSTANTS.HINT_TEXT_SIZE_FACTOR).toFixed(1)
|
||||
const arrowheadSize = (cellSizePt * TYPST_CONSTANTS.ARROWHEAD_SIZE_FACTOR).toFixed(1)
|
||||
|
||||
const arrowStartDx = (cellSize * TYPST_CONSTANTS.ARROW_START_DX).toFixed(2)
|
||||
const arrowStartDy = (cellSize * TYPST_CONSTANTS.ARROW_START_DY).toFixed(2)
|
||||
const arrowEndX = (cellSize * 0.24).toFixed(2)
|
||||
const arrowEndY = (cellSize * 0.7).toFixed(2)
|
||||
const arrowControlX = (cellSize * 0.11).toFixed(2)
|
||||
const arrowControlY = (cellSize * -0.5).toFixed(2)
|
||||
const arrowheadDx = (cellSize * TYPST_CONSTANTS.ARROWHEAD_DX).toFixed(2)
|
||||
const arrowheadDy = (cellSize * TYPST_CONSTANTS.ARROWHEAD_DY).toFixed(2)
|
||||
|
||||
return String.raw`
|
||||
// Borrow boxes row (shows borrows FROM higher place TO lower place)
|
||||
[], // Empty cell for operator column
|
||||
..for i in range(0, grid-digits).rev() {
|
||||
// Check if we need to borrow FROM this place (to give to i-1)
|
||||
// We borrow when m-digit < s-digit at position i-1
|
||||
let shows-borrow = show-borrows and i > 0 and (m-digits.at(i - 1) < s-digits.at(i - 1))
|
||||
|
||||
if shows-borrow {
|
||||
// This place borrowed FROM to give to lower place
|
||||
let source-color = place-colors.at(i) // This place (giving)
|
||||
let dest-color = place-colors.at(i - 1) // Lower place (receiving)
|
||||
|
||||
// When showing hints, determine what to display based on cascading
|
||||
if show-borrowing-hints and i <= m-highest {
|
||||
// Determine the actual value to show in the hint
|
||||
// For cascading: if this digit is 0, it received 10 from left and gives 1 to right
|
||||
// So it shows "10 - 1". Otherwise it shows "original - 1"
|
||||
let original-digit = m-digits.at(i)
|
||||
|
||||
// Check if this is part of a cascade (is it 0 and needs to borrow?)
|
||||
let is-cascade = original-digit == 0
|
||||
|
||||
// The display value is either the original digit or 10 (if cascading)
|
||||
let display-value = if is-cascade { 10 } else { original-digit }
|
||||
|
||||
// Borrow boxes never use place value colors (always stroke-only)
|
||||
// to avoid arrow layering issues
|
||||
(box(width: ${cellSizeIn}, height: ${cellSizeIn}, stroke: ${TYPST_CONSTANTS.CELL_STROKE_WIDTH}pt)[
|
||||
#place(
|
||||
top + center,
|
||||
dy: 2pt,
|
||||
text(size: ${hintTextSize}pt, fill: gray.darken(30%), weight: "bold")[
|
||||
#display-value#h(0.1em)−#h(0.1em)1
|
||||
]
|
||||
)
|
||||
// Draw curved line using Typst bezier with control point
|
||||
#place(
|
||||
top + left,
|
||||
dx: ${arrowStartDx}in,
|
||||
dy: ${arrowStartDy}in,
|
||||
path(
|
||||
stroke: (paint: gray.darken(30%), thickness: ${TYPST_CONSTANTS.ARROW_STROKE_WIDTH}pt),
|
||||
// Start vertex (near the "1" in borrow box)
|
||||
(0pt, 0pt),
|
||||
// End vertex adjusted up and left to align with arrowhead (vertex, relative-control-point)
|
||||
((${arrowEndX}in, ${arrowEndY}in), (${arrowControlX}in, ${arrowControlY}in)),
|
||||
)
|
||||
)
|
||||
// Arrowhead pointing down at the top edge of borrowed 10s box
|
||||
#place(
|
||||
top + left,
|
||||
dx: ${arrowheadDx}in,
|
||||
dy: ${arrowheadDy}in,
|
||||
text(size: ${arrowheadSize}pt, fill: gray.darken(30%))[▼]
|
||||
)
|
||||
],)
|
||||
} else {
|
||||
// No hints - just show stroke box
|
||||
(box(width: ${cellSizeIn}, height: ${cellSizeIn}, stroke: ${TYPST_CONSTANTS.CELL_STROKE_WIDTH}pt)[],)
|
||||
}
|
||||
} else {
|
||||
// No borrow from this position
|
||||
(box(width: ${cellSizeIn}, height: ${cellSizeIn})[
|
||||
#v(${cellSizeIn})
|
||||
],)
|
||||
}
|
||||
},
|
||||
`
|
||||
}
|
||||
Loading…
Reference in New Issue