diff --git a/.changeset/rich-moons-hear.md b/.changeset/rich-moons-hear.md new file mode 100644 index 0000000000..4bd977f432 --- /dev/null +++ b/.changeset/rich-moons-hear.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Update ServerItemRendererWithDebugUI to optionally use answerless data for rendering diff --git a/packages/perseus/src/widgets/expression/expression.stories.tsx b/packages/perseus/src/widgets/expression/expression.stories.tsx index b8d2c9a1bf..973e845192 100644 --- a/packages/perseus/src/widgets/expression/expression.stories.tsx +++ b/packages/perseus/src/widgets/expression/expression.stories.tsx @@ -23,12 +23,14 @@ type WrappedKeypadContextProps = { item: PerseusItem; customKeypad: boolean; isMobile?: boolean; + answerless?: boolean; }; const WrappedKeypadContext = ({ item, customKeypad, isMobile = false, + answerless = false, }: WrappedKeypadContextProps) => { return ( @@ -37,6 +39,7 @@ const WrappedKeypadContext = ({ return ( { ); }; +export const AnswerlessExpression = (args: StoryArgs): React.ReactElement => { + return ( + + ); +}; + export default { title: "Perseus/Widgets/Expression", argTypes: {customKeypad: {control: "boolean"}}, diff --git a/packages/perseus/src/widgets/expression/expression.testdata.ts b/packages/perseus/src/widgets/expression/expression.testdata.ts index 18b6149348..5e359c98c8 100644 --- a/packages/perseus/src/widgets/expression/expression.testdata.ts +++ b/packages/perseus/src/widgets/expression/expression.testdata.ts @@ -1,14 +1,14 @@ import { ItemExtras, type PerseusExpressionWidgetOptions, - type Version, type PerseusItem, type PerseusAnswerArea, + expressionLogic, } from "@khanacademy/perseus-core"; const createItemJson = ( widgetOptions: PerseusExpressionWidgetOptions, - version: Version, + widgetVersion = expressionLogic.version, ): PerseusItem => { return { question: { @@ -19,7 +19,7 @@ const createItemJson = ( type: "expression", graded: true, options: widgetOptions, - version: version, + version: widgetVersion, }, }, }, @@ -36,62 +36,55 @@ const createItemJson = ( }; export const expressionItemWithAnswer = (answer: string): PerseusItem => { - return createItemJson( - { - answerForms: [ - { - considered: "correct", - form: false, - simplify: false, - value: answer, - }, - ], - times: false, - buttonSets: ["basic"], - functions: [], - buttonsVisible: "always", - }, - {major: 1, minor: 0}, - ); -}; - -export const expressionItemWithLabels = createItemJson( - { - answerForms: [], - times: false, - buttonSets: ["basic"], - functions: [], - buttonsVisible: "always", - ariaLabel: "Test aria label", - visibleLabel: "Test visible label", - }, - {major: 1, minor: 0}, -); - -export const expressionItem2: PerseusItem = createItemJson( - { + return createItemJson({ answerForms: [ { considered: "correct", form: false, simplify: false, - value: "123-x", - }, - { - considered: "correct", - form: false, - simplify: false, - value: "x-123", + value: answer, }, ], times: false, buttonSets: ["basic"], - functions: ["f", "g", "h"], + functions: [], buttonsVisible: "always", - extraKeys: ["x"], - }, - {major: 1, minor: 0}, -); + extraKeys: [], + }); +}; + +export const expressionItemWithLabels = createItemJson({ + answerForms: [], + times: false, + buttonSets: ["basic"], + functions: [], + buttonsVisible: "always", + ariaLabel: "Test aria label", + visibleLabel: "Test visible label", + extraKeys: [], +}); + +export const expressionItem2: PerseusItem = createItemJson({ + answerForms: [ + { + considered: "correct", + form: false, + simplify: false, + value: "123-x", + }, + { + considered: "correct", + form: false, + simplify: false, + value: "x-123", + }, + ], + times: false, + buttonSets: ["basic"], + functions: ["f", "g", "h"], + buttonsVisible: "always", + extraKeys: ["x"], +}); const expressionItem3Options: PerseusExpressionWidgetOptions = { answerForms: [ @@ -126,12 +119,9 @@ const expressionItem3Options: PerseusExpressionWidgetOptions = { buttonsVisible: "focused", visibleLabel: "number of cm", ariaLabel: "number of centimeters", + extraKeys: ["z", "a"], }; export const expressionItem3: PerseusItem = createItemJson( expressionItem3Options, - { - major: 1, - minor: 0, - }, ); diff --git a/testing/server-item-renderer-with-debug-ui.tsx b/testing/server-item-renderer-with-debug-ui.tsx index 4a99f4102b..7038816359 100644 --- a/testing/server-item-renderer-with-debug-ui.tsx +++ b/testing/server-item-renderer-with-debug-ui.tsx @@ -3,6 +3,12 @@ import {View} from "@khanacademy/wonder-blocks-core"; import {Strut} from "@khanacademy/wonder-blocks-layout"; import * as React from "react"; +import { + type PerseusItem, + type KEScore, + type PerseusRenderer, + splitPerseusItem, +} from "@khanacademy/perseus-core"; import {scorePerseusItem} from "@khanacademy/perseus-score"; import * as Perseus from "../packages/perseus/src/index"; @@ -14,18 +20,19 @@ import {storybookDependenciesV2} from "./test-dependencies"; import type {APIOptions} from "../packages/perseus/src/types"; import type {KeypadAPI} from "@khanacademy/math-input"; -import type {PerseusItem, KEScore} from "@khanacademy/perseus-core"; type Props = { item: PerseusItem; apiOptions?: APIOptions; keypadElement?: KeypadAPI | null | undefined; + answerless?: boolean; }; export const ServerItemRendererWithDebugUI = ({ item, apiOptions, keypadElement, + answerless = false, }: Props): React.ReactElement => { const ref = React.useRef(null); const [state, setState] = React.useState(null); @@ -51,6 +58,15 @@ export const ServerItemRendererWithDebugUI = ({ ); }; + const renderedQuestion: PerseusRenderer = answerless + ? splitPerseusItem(item.question) + : item.question; + + const renderedItem: PerseusItem = { + ...item, + question: renderedQuestion, + }; + return ( @@ -87,7 +103,7 @@ export const ServerItemRendererWithDebugUI = ({ } - jsonObject={item} + jsonObject={renderedItem} /> ); };