Use MathDisplay for problem header in flowchart walker

- Render problem header with MathDisplay component for consistent math formatting
- Fix type error in validateCheckpoint for two-numbers input

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2026-01-16 14:43:23 -06:00
parent ad70040b46
commit 14d86e179b
2 changed files with 11 additions and 8 deletions

View File

@@ -617,10 +617,11 @@ export function FlowchartWalker({
)}
{/* Problem display */}
<div data-testid="problem-header" className={css({ fontSize: 'sm' })}>
<span className={css({ color: { base: 'gray.500', _dark: 'gray.500' } })}>
{problemDisplay}
</span>
<div
data-testid="problem-header"
className={css({ color: { base: 'gray.500', _dark: 'gray.500' } })}
>
<MathDisplay expression={problemDisplay} size="sm" />
</div>
{/* Change problem link (when not at start) */}

View File

@@ -298,14 +298,12 @@ export function validateCheckpoint(
if (!node || node.definition.type !== 'checkpoint') return null
const def = node.definition
const context: EvalContext = {
...createContextFromState(state),
input: userInput,
}
try {
// Handle two-numbers input type with array of expected expressions
if (def.inputType === 'two-numbers' && Array.isArray(def.expected)) {
// For two-numbers, we don't use `input` in expressions - we validate against problem values
const context: EvalContext = createContextFromState(state)
const expected1 = evaluate(def.expected[0], context) as number
const expected2 = evaluate(def.expected[1], context) as number
const expectedArray: [number, number] = [expected1, expected2]
@@ -323,6 +321,10 @@ export function validateCheckpoint(
}
// Original single-value validation
const context: EvalContext = {
...createContextFromState(state),
input: userInput as ProblemValue,
}
const expected = evaluate(def.expected as string, context)
const tolerance = def.tolerance ?? 0