refactor: simplify borrowed 10s box UI and add place value colors
- Convert "Borrowed 10s Box" from sub-option to peer toggle for clarity - Remove confusing parent/child relationship with "Borrow Boxes" - Fix preview not updating when toggling borrowed 10s box (default was false, should be true) - Add place value color from source digit to borrowed 10s box background - Fix missing operator field in defaultAdditionConfig and V3→V4 migration - Simplify description to "Box for adding 10 to borrowing digit" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
parent
41b5c057ed
commit
42c9c9dd7e
|
|
@ -2361,16 +2361,16 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
|
|||
? 'Help students track regrouping (carrying in addition, borrowing in subtraction)'
|
||||
: 'Help students track regrouping during addition'
|
||||
}
|
||||
>
|
||||
{(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
|
||||
<SubOption
|
||||
checked={!(formState.showBorrowNotation ?? true)}
|
||||
onChange={(checked) => onChange({ showBorrowNotation: !checked })}
|
||||
label="Hide Borrowed 10s Box"
|
||||
parentEnabled={formState.showCarryBoxes ?? true}
|
||||
/>
|
||||
)}
|
||||
</ToggleOption>
|
||||
/>
|
||||
|
||||
{(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
|
||||
<ToggleOption
|
||||
checked={formState.showBorrowNotation ?? true}
|
||||
onChange={(checked) => onChange({ showBorrowNotation: checked })}
|
||||
label="Borrowed 10s Box"
|
||||
description="Box for adding 10 to borrowing digit"
|
||||
/>
|
||||
)}
|
||||
|
||||
<ToggleOption
|
||||
checked={formState.showTenFrames ?? false}
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export function DisplayOptionsPreview({ formState }: DisplayOptionsPreviewProps)
|
|||
showCellBorder: formState.showCellBorder ?? true,
|
||||
showTenFrames: formState.showTenFrames ?? false,
|
||||
showTenFramesForAll: formState.showTenFramesForAll ?? false,
|
||||
showBorrowNotation: formState.showBorrowNotation ?? false,
|
||||
showBorrowNotation: formState.showBorrowNotation ?? true,
|
||||
operator,
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ function generatePageTypst(
|
|||
showTenFrames: config.showTenFrames,
|
||||
showProblemNumbers: config.showProblemNumbers,
|
||||
showCellBorder: config.showCellBorder,
|
||||
showBorrowNotation: 'showBorrowNotation' in config ? config.showBorrowNotation : false,
|
||||
showBorrowNotation: 'showBorrowNotation' in config ? config.showBorrowNotation : true,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -467,6 +467,13 @@ export function generateSubtractionProblemStackFunction(
|
|||
if i <= m-highest {
|
||||
if show-borrow-notation and column-has-borrow {
|
||||
if needs-borrow {
|
||||
// Get the color from the place we're borrowing FROM (one position to the left, i.e., i+1)
|
||||
let borrow-source-color = if show-colors and (i + 1) < place-colors.len() {
|
||||
place-colors.at(i + 1)
|
||||
} else {
|
||||
color-none
|
||||
}
|
||||
|
||||
// Show digit with visible scratch box to the left for modified value (e.g., "12")
|
||||
(box(width: ${cellSizeIn}, height: ${cellSizeIn}, fill: fill-color)[
|
||||
#align(center + horizon)[
|
||||
|
|
@ -474,10 +481,12 @@ export function generateSubtractionProblemStackFunction(
|
|||
dir: ltr,
|
||||
spacing: 3pt,
|
||||
// Visible dotted box for student to write modified digit (same height as cell)
|
||||
// Background color is from the place we're borrowing FROM
|
||||
box(
|
||||
width: ${cellSizeIn} * 0.45,
|
||||
height: ${cellSizeIn} * 0.95,
|
||||
stroke: (dash: "dotted", thickness: 1pt, paint: gray)
|
||||
stroke: (dash: "dotted", thickness: 1pt, paint: gray),
|
||||
fill: borrow-source-color
|
||||
)[],
|
||||
// Original digit
|
||||
text(size: ${cellSizePt.toFixed(1)}pt, font: "New Computer Modern Math")[#str(digit)]
|
||||
|
|
|
|||
|
|
@ -367,6 +367,7 @@ export const defaultAdditionConfig: AdditionConfigV4Smart = {
|
|||
orientation: 'landscape',
|
||||
name: '',
|
||||
digitRange: { min: 2, max: 2 }, // V4: Default to 2-digit problems (backward compatible)
|
||||
operator: 'addition',
|
||||
pAnyStart: 0.25,
|
||||
pAllStart: 0,
|
||||
interpolate: true,
|
||||
|
|
@ -471,7 +472,7 @@ function migrateAdditionV2toV3(v2: AdditionConfigV2): AdditionConfigV3 {
|
|||
* Adds digitRange field with default of { min: 2, max: 2 } for backward compatibility
|
||||
*/
|
||||
function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
|
||||
// V3 configs didn't have digitRange, so default to 2-digit problems
|
||||
// V3 configs didn't have digitRange or operator, so default to 2-digit addition problems
|
||||
const baseFields = {
|
||||
version: 4 as const,
|
||||
problemsPerPage: v3.problemsPerPage,
|
||||
|
|
@ -481,6 +482,7 @@ function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
|
|||
name: v3.name,
|
||||
fontSize: v3.fontSize,
|
||||
digitRange: { min: 2, max: 2 }, // V4: Default to 2-digit for backward compatibility
|
||||
operator: 'addition' as const, // V4: Default to addition for backward compatibility
|
||||
pAnyStart: v3.pAnyStart,
|
||||
pAllStart: v3.pAllStart,
|
||||
interpolate: v3.interpolate,
|
||||
|
|
@ -504,6 +506,7 @@ function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
|
|||
showProblemNumbers: v3.showProblemNumbers,
|
||||
showCellBorder: v3.showCellBorder,
|
||||
showTenFramesForAll: v3.showTenFramesForAll,
|
||||
showBorrowNotation: true, // V4: Default to true for backward compatibility
|
||||
manualPreset: v3.manualPreset,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue