antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(worksheets): use scaffolding summary for all preset descriptions

Browse Source 
Replace abstract preset descriptions with concrete, actionable summaries:

Before:
- Beginner: 'Full scaffolding with no regrouping...'
- Early Learner: 'Scaffolds appear when needed...'
- Intermediate: 'Reduced scaffolding with regular regrouping...'

After:
- Beginner: '0% regrouping, carry boxes, answer boxes, place value colors'
- Early Learner: '25% regrouping, carry boxes, answer boxes, place value colors, ten-frames'
- Intermediate: '75% regrouping, carry boxes, answer boxes, place value colors, ten-frames'
- Advanced: '90% regrouping, place value colors'
- Expert: '90% regrouping, no scaffolding'

Benefits:
- Immediately shows what you get with each preset
- Same format for presets and custom configs
- No need to mentally translate 'reduced scaffolding' into concrete features
- Easier to compare presets and understand differences
This commit is contained in:
Thomas Hallock
2025-11-07 17:29:15 -06:00
parent 0b8b0d21c5
commit 23f0f1dc21
1 changed files with 50 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx
View File

@@ -34,6 +34,27 @@ interface ConfigPanelProps {
onChange: (updates: Partial<WorksheetFormState>) => void
}
/**
* Generate a human-readable summary of enabled scaffolding aids
*/
function getScaffoldingSummary(displayRules: any): string {
const scaffoldingParts: string[] = []
if (displayRules.carryBoxes === 'always' || displayRules.carryBoxes === 'whenRegrouping') {
scaffoldingParts.push('carry boxes')
}
if (displayRules.answerBoxes === 'always' || displayRules.answerBoxes === 'whenRegrouping') {
scaffoldingParts.push('answer boxes')
}
if (displayRules.placeValueColors === 'always' || displayRules.placeValueColors === 'whenRegrouping') {
scaffoldingParts.push('place value colors')
}
if (displayRules.tenFrames === 'always' || displayRules.tenFrames === 'whenRegrouping') {
scaffoldingParts.push('ten-frames')
}
return scaffoldingParts.length > 0 ? scaffoldingParts.join(', ') : 'no scaffolding'
}
interface ToggleOptionProps {
checked: boolean
onChange: (checked: boolean) => void
@@ -415,26 +436,7 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
// Generate custom description
const regroupingPercent = Math.round(currentRegrouping * 10)
// Summarize which scaffolding is enabled
const scaffoldingParts: string[] = []
if (displayRules.carryBoxes === 'always' || displayRules.carryBoxes === 'whenRegrouping') {
scaffoldingParts.push('carry boxes')
}
if (displayRules.answerBoxes === 'always' || displayRules.answerBoxes === 'whenRegrouping') {
scaffoldingParts.push('answer boxes')
}
if (displayRules.placeValueColors === 'always' || displayRules.placeValueColors === 'whenRegrouping') {
scaffoldingParts.push('place value colors')
}
if (displayRules.tenFrames === 'always' || displayRules.tenFrames === 'whenRegrouping') {
scaffoldingParts.push('ten-frames')
}
const scaffoldingSummary = scaffoldingParts.length > 0
? scaffoldingParts.join(', ')
: 'no scaffolding'
const scaffoldingSummary = getScaffoldingSummary(displayRules)
customDescription = `${regroupingPercent}% regrouping, ${scaffoldingSummary}`
}
@@ -587,11 +589,23 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
lineHeight: '1.3',
})}
>
{isCustom
? customDescription
: currentProfile
? DIFFICULTY_PROFILES[currentProfile].description
: 'Scaffolds appear when needed. Introduces occasional regrouping.'}
{isCustom ? (
customDescription
) : currentProfile ? (
(() => {
const preset = DIFFICULTY_PROFILES[currentProfile]
const regroupingPercent = Math.round(
calculateRegroupingIntensity(
preset.regrouping.pAnyStart,
preset.regrouping.pAllStart
) * 10
)
const scaffoldingSummary = getScaffoldingSummary(preset.displayRules)
return `${regroupingPercent}% regrouping, ${scaffoldingSummary}`
})()
) : (
'25% regrouping, carry boxes, answer boxes, place value colors, ten-frames'
)}
</div>
</div>
<span className={css({ fontSize: 'xs', color: 'gray.400', flexShrink: 0 })}>▼</span>
@@ -618,6 +632,16 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
const preset = DIFFICULTY_PROFILES[presetName]
const isSelected = currentProfile === presetName && !isCustom
// Generate preset description
const regroupingPercent = Math.round(
calculateRegroupingIntensity(
preset.regrouping.pAnyStart,
preset.regrouping.pAllStart
) * 10
)
const scaffoldingSummary = getScaffoldingSummary(preset.displayRules)
const presetDescription = `${regroupingPercent}% regrouping, ${scaffoldingSummary}`
return (
<DropdownMenu.Item
key={presetName}
@@ -665,7 +689,7 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
lineHeight: '1.3',
})}
>
{preset.description}
{presetDescription}
</div>
</DropdownMenu.Item>
)