Create stories for Assessment's 5 scorable widgets that use answerless data #2329

Myranae · 2025-03-26T17:06:00Z

Summary:

In order to confirm Assessment's main widgets can render with answerless data and then still score after that, we are adding stories for each of the widgets to test rendering them with answerless data.

Issue: LEMS-2869

Test plan:

Confirm all answerless stories start out with answerless data and then switch to answerful data in order to score.
Confirm Radio Controls work for answerful right away and for answerless after receiving answerful data.
Confirm the widgets in the stories score correctly.
Confirm story behavior has no regressions and is as expected.
Confirm all checks pass.

…teractive graphs

This is required for the check button to still work correctly

…estion

… data It was using data without answers before. Although this is what we want, it's not how all the other answerless stories are

…2869/INER-widgets-stories

…enderer Migrate dropdown stories to ServerItemRendererWithDebugUI instead of RendererWithDebugUI. Also renames the answerless stories and creates PerseusItems from the previously available question objects.

…eusRenderers Some of the test data is also used in tests, so new PerseusItem objects were created in addition to the PerseusRenderer objects for those.

…emRenderer ServerItemRenderer requires PerseusItem objects whereas Renderer just requires PerseusRenderer. Creating PerseusItem objects from the available data for Interactive Graph widget

…ServerItemRenderer Also rename the stories for consistency and ease of locating in storybook.

…erless stories Update the stories to use ServerItemRenderWithDebugUI. Since we need answerless stories to use this, we have to update all the stories since they all use the same render logic.

…swerless prop

… style issues

…tories where Dropdown, Interactive Graph, Numeric Input, Expression, and Radio widgets render using answerless data

…2869/INER-widgets-stories

…ithDebugUI Updates the numeric-input answerless story specifically

…e with radio story

…2869/INER-widgets-stories

github-actions · 2025-03-26T17:07:54Z

Size Change: 0 B

Total Size: 734 kB

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	39.1 kB
`packages/keypad-context/dist/es/index.js`	760 B
`packages/kmath/dist/es/index.js`	10.5 kB
`packages/math-input/dist/es/index.js`	77.1 kB
`packages/math-input/dist/es/strings.js`	1.79 kB
`packages/perseus-core/dist/es/index.js`	31.7 kB
`packages/perseus-editor/dist/es/index.js`	135 kB
`packages/perseus-linter/dist/es/index.js`	22.3 kB
`packages/perseus-score/dist/es/index.js`	20.7 kB
`packages/perseus-utils/dist/es/index.js`	809 B
`packages/perseus/dist/es/index.js`	371 kB
`packages/perseus/dist/es/strings.js`	6.72 kB
`packages/pure-markdown/dist/es/index.js`	3.58 kB
`packages/simple-markdown/dist/es/index.js`	12.6 kB

_{compressed-size-action}

github-actions · 2025-03-26T17:08:00Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (b49e6bd) and published it to npm. You
can install it using the tag PR2329.

Example:

pnpm add @khanacademy/perseus@PR2329

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2329

…or non answerless Will do a switch to ServerItemRenderWithDebugUI for all stories at some point in the future, perhaps after this PR

…sage

…sed on usage" This reverts commit a3104a2.

jeremywiebe

Thanks for adding these. I have a few comments, but nothing major. :)

jeremywiebe · 2025-03-27T00:43:46Z

packages/perseus/src/widgets/interactive-graphs/interactive-graph.testdata.ts


 // Data for the interactive graph widget

+const createInteractiveGraphItem = (question: PerseusRenderer): PerseusItem => {


This seems similar to the createDropdownItem. Could we have a single createPerseusItem(question: PerseusRenderer) instead?

jeremywiebe · 2025-03-27T00:44:11Z

packages/perseus/src/widgets/numeric-input/numeric-input.stories.tsx

@@ -180,6 +182,29 @@ const updateWidgetOptions = (
    };
 };

+const createNumericInputItem = (question: PerseusRenderer): PerseusItem => {


Same note as above about unifying this with the other createXyzItem functions.

These functions should now be gone in favor of using the previously created utility that Matthew pointed out.

jeremywiebe · 2025-03-27T00:51:51Z

packages/perseus/src/widgets/radio/__tests__/radio.testdata.ts

-    images: {
-        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/4613e0d9c906b3053fb5523eed83d4f779fdf6bb":
-            {
-                width: 428,
-                height: 428,
-            },
-    },


For test data and stories this is likely ok. The images key in a perseus renderer object is used to explicitly set the width and the height of an image (using the image URL as the key into images).

perseus/packages/perseus/src/renderer.tsx

Lines 1259 to 1266 in 5e7a608

// We need to add width and height to images from our

// props.images mapping.

// We do a _.has check here to avoid weird things like

// 'toString' or '__proto__' as a url.

const extraAttrs = _.has(this.props.images, node.target)

? this.props.images[node.target]

: null;

… use shared util

Myranae · 2025-03-27T15:29:07Z

packages/perseus/src/widgets/__testutils__/test-data-util.ts

+ * Creates a Perseus item with the provided question/PerseusRenderer data.
+ * Useful for converting test data used with RendererWithDebugUI to test data
+ * for ServerItemRendererWithDebugUI.
+ *
+ * @param {PerseusRenderer} question - The question to be included in the Perseus item.
+ * @returns {PerseusItem} The created Perseus item.
+ */
+export const createPerseusItem = (question: PerseusRenderer): PerseusItem => {
+    return {
+        question: question,
+        answer: null,
+        itemDataVersion: {
+            major: 0,
+            minor: 1,
+        },
+        hints: [],
+        answerArea: {
+            calculator: false,
+            chi2Table: false,
+            financialCalculatorMonthlyPayment: false,
+            financialCalculatorTotalAmount: false,
+            financialCalculatorTimeToPayOff: false,
+            periodicTable: false,
+            periodicTableWithKey: false,
+            tTable: false,
+            zTable: false,
+        },
+    };
+};


@jeremywiebe How does this look for a shared test util? I think I put it in a good place, but wasn't sure on the file naming. Also, tbh, tried having copilot write the doc string. Not sure the parameter and return needs to be listed in the comment 🤔

We also have generateTestPerseusItem in the perseus package. LEMS needs to devote a sprint or two to combining our test utils.

Also might be worth looking into how Ned handled answerArea:

answerArea: Object.fromEntries( ItemExtras.map((extra) => [extra, false]), ) as PerseusAnswerArea,

I think this also points to something Matthew brought up to me in conversation recently, that we have the ServerItemRenderer UI and Renderer UI... they overlap alot and I think we could get away with only the Renderer UI component. I'll look into that this week yet.

Ah, yea when I talked about this with Matthew, we thought we were leaning towards keeping the ServerItemRenderer and moving away from the Renderer one. We can definitely make things work either way, but that's why the answerless stories are using the ServerItemRenderer component.

Removed this duplicate utility function creation and used the one that was already defined.

we thought we were leaning towards keeping the ServerItemRenderer and moving away from the Renderer one

That would be my vote anyway, let's get close to what consumers are mostly using which is ServerItemRenderer

handeyeco · 2025-03-27T16:23:11Z

.changeset/ninety-wasps-love.md

+"@khanacademy/perseus": minor
+---
+
+Update and add stories where Dropdown, Interactive Graph, Numeric Input, Expression, and Radio widgets render using answerless data


For future PRs, it would be beneficial to have separate PRs. In this case it could have been 5 PRs.

For sure. I thought each was small enough to be combined into one, but I can still separate them out if you think that would be useful?

The main goal (IMO) of small PRs is to make review easier. Since you already have the reviews, I don't think it'd be worth the trouble.

handeyeco · 2025-03-27T16:28:00Z

packages/perseus/src/widgets/__testutils__/test-data-util.ts

+ * Creates a Perseus item with the provided question/PerseusRenderer data.
+ * Useful for converting test data used with RendererWithDebugUI to test data
+ * for ServerItemRendererWithDebugUI.
+ *
+ * @param {PerseusRenderer} question - The question to be included in the Perseus item.
+ * @returns {PerseusItem} The created Perseus item.
+ */
+export const createPerseusItem = (question: PerseusRenderer): PerseusItem => {
+    return {
+        question: question,
+        answer: null,
+        itemDataVersion: {
+            major: 0,
+            minor: 1,
+        },
+        hints: [],
+        answerArea: {
+            calculator: false,
+            chi2Table: false,
+            financialCalculatorMonthlyPayment: false,
+            financialCalculatorTotalAmount: false,
+            financialCalculatorTimeToPayOff: false,
+            periodicTable: false,
+            periodicTableWithKey: false,
+            tTable: false,
+            zTable: false,
+        },
+    };
+};


We also have generateTestPerseusItem in the perseus package. LEMS needs to devote a sprint or two to combining our test utils.

Also might be worth looking into how Ned handled answerArea:

answerArea: Object.fromEntries( ItemExtras.map((extra) => [extra, false]), ) as PerseusAnswerArea,

handeyeco · 2025-03-27T16:33:22Z

packages/perseus/src/widgets/dropdown/dropdown.stories.tsx

+): React.ReactElement => {
+    return (
+        <ServerItemRendererWithDebugUI
+            item={basicDropdownItem}


I think it's a little overkill to duplicate each story (really we just needed one interactive answerless story per widget). Having a bunch of stories that are nearly identical might be confusing to people especially in a couple of months when all stories should start answerless. Not too worried about this, but maybe we need a post-SSS ticket to come back and simplify the stories.

What I think is definitely overkill is exporting/importing what is essentially the same test data. Rather than redeclare the test data, just wrap the existing test data.

Suggested change

item={basicDropdownItem}

item={createPerseusItem(basicDropdownItem)}

Updated the stories to do inline item creation and reduced the overall number of stories, though I kept one for each type of interactive graph.

handeyeco · 2025-03-27T16:35:51Z

packages/perseus/src/widgets/interactive-graphs/interactive-graph.testdata.ts

@@ -29,6 +35,8 @@ export const angleQuestion: PerseusRenderer = interactiveGraphQuestionBuilder()
    })
    .build();

+export const angleItem: PerseusItem = createPerseusItem(angleQuestion);


Same here, we don't need to be redeclaring a bunch of test data when we could just be wrapping the existing test data in createPerseusItem

handeyeco · 2025-03-27T16:42:00Z

packages/perseus/src/widgets/radio/__stories__/answerlessRadio.stories.tsx

@@ -0,0 +1,90 @@
+// NOTE(Tamara): ServerItemRenderWithDebugUI does not work with the same props


Rather than make a new file, we need to update radio.stories.tsx to use ServerItemRendererWithDebugUI. The problem isn't that we need stories for both ServerItemRendererWithDebugUI and RendererWithDebugUI, the problem is that RendererWithDebugUI needs to be deprecated and replaced with ServerItemRendererWithDebugUI

I wanted to preserve Controls functionality for the answerful stories and wasn't sure how to do that with ServerItemRendererWithDebugUI. So I changed it from converting all stories to ServerItem to just the answerless stories in the new file. Just took a second attempt and was able to preserve the Controls functionality for all stories. The answerless ones just need to turn startAnswerless off or click the Check button first to get full data. Removed this additional Radio stories page.

handeyeco · 2025-03-27T16:45:06Z

packages/perseus/src/widgets/radio/__tests__/radio.testdata.ts

-    images: {
-        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/4613e0d9c906b3053fb5523eed83d4f779fdf6bb":
-            {
-                width: 428,
-                height: 428,
-            },
-    },


This style issue is unrelated to LEMS-2948, likely just a problem with styling in the fake Perseus Chrome we use in SB. Removing the image only sweeps the issue under the rug, we need a separate ticket to look into the styles causing this.

handeyeco · 2025-03-27T16:46:17Z

packages/perseus/src/widgets/radio/__tests__/radio.testdata.ts

@@ -126,6 +129,9 @@ export const questionWithPassage: PerseusRenderer = {
    },
 };

+export const questionWithPassageItem: PerseusItem =


Same here, don't need a new declaration.

handeyeco · 2025-03-27T16:48:00Z

testing/server-item-renderer-with-debug-ui.tsx

@@ -15,7 +15,7 @@ import * as Perseus from "../packages/perseus/src/index";
 import {keScoreFromPerseusScore} from "../packages/perseus/src/util/scoring";

 import KEScoreUI from "./ke-score-ui";
-import SideBySide from "./split-view";
+import SplitView from "./split-view";


jeremywiebe · 2025-03-27T18:16:22Z

packages/perseus/src/widgets/__testutils__/test-data-util.ts

+/**
+ * Creates a Perseus item with the provided question/PerseusRenderer data.
+ * Useful for converting test data used with RendererWithDebugUI to test data
+ * for ServerItemRendererWithDebugUI.
+ *
+ * @param {PerseusRenderer} question - The question to be included in the Perseus item.
+ * @returns {PerseusItem} The created Perseus item.
+ */


Regarding docs. For things that are self-evident, I prefer to avoid adding a doc comment. So I think I'd just recommend this (as the question param is quite obvious as is the return value):

Suggested change

/**

* Creates a Perseus item with the provided question/PerseusRenderer data.

* Useful for converting test data used with RendererWithDebugUI to test data

* for ServerItemRendererWithDebugUI.

*

* @param {PerseusRenderer} question - The question to be included in the Perseus item.

* @returns {PerseusItem} The created Perseus item.

*/

/**

* Creates a Perseus item with the provided question/PerseusRenderer data.

* Useful for converting test data used with RendererWithDebugUI to test data

* for ServerItemRendererWithDebugUI.

*/

Thanks! Ended up removing this file, but glad to know my thought to remove the parameter definitions was correct.

…ng for IG

Update the component to take more props to keep the Controls panel working in Storybook

…nd revert original Bring the original back to using ServerItemRendererWithDebugUI for all radio stories. Fixes Controls for all stories.

handeyeco

The only blocker is the change to ServerItemRenderer, otherwise it's looking good

handeyeco · 2025-03-28T14:43:11Z

packages/perseus/src/server-item-renderer.tsx

@@ -46,7 +46,7 @@ type OwnProps = {
    item: PerseusItem;
    score?: KEScore | null;
    problemNum?: number;
-    reviewMode?: boolean;
+    reviewMode?: boolean | null | undefined;


Curious about this change. It's a change to our external API (ServerItemRenderer is production code, not test code), so I think this needs to be reverted.

For sure! That makes sense. Instead, I updated the props for ServerItemRendererWithDebugUI to be in alignment with reviewMode?: boolean;.

handeyeco · 2025-03-28T14:46:22Z

packages/perseus/src/widgets/radio/__stories__/radio.stories.tsx

+    // Renderer Options
+    startAnswerless: boolean;


This is more "Testing Options" because this flag doesn't actually get passed down to the renderer, it just affects the code that gets passed to the renderer.

handeyeco · 2025-03-28T14:52:09Z

packages/perseus/src/widgets/radio/__stories__/radio.stories.tsx

+// NOTE(Tamara): The answerless radio stories currently lose the user's input
+// upon switching to answerless data initially. It will remember the user's
+// input after clicking the Check button a second time.
+// TODO(LEMS-2948): After investigating a solution, confirm this issue is fixed
+
+export const AnswerlessSingleSelect = {


Suggested change

// NOTE(Tamara): The answerless radio stories currently lose the user's input

// upon switching to answerless data initially. It will remember the user's

// input after clicking the Check button a second time.

// TODO(LEMS-2948): After investigating a solution, confirm this issue is fixed

export const AnswerlessSingleSelect = {

// TODO(LEMS-2948): The answerless radio stories currently lose the user's input

// upon switching to answerless data initially. It loses the user's

// input after clicking the Check button a second time.

export const AnswerlessSingleSelect = {

I thought we confirmed that it doesn't remember the user input when clicking Check twice?

I think the way I wrote this was confusing. I updated the comment. User input is lost with the first click. If the user selects an option after that and then clicks Check again, it will remember the input. It's just that first time when it switches to answerful data.

handeyeco · 2025-03-28T15:03:21Z

testing/server-item-renderer-with-debug-ui.tsx

+    reviewMode?: boolean | null | undefined;
+    showSolutions?: ShowSolutions;


I'm guessing you added this to verify that rationales/solutions/etc still work; I think that's a great idea.

The problem is that those, by definition, require answerful data. We should never be in a state where static, reviewMode, or showSolutions are true while using answerless data.

🤔 I think short-term maybe we could add some semi-hacky but well commented code to make this work:

// `reviewMode` and `showSolutions` require answerful data by definition, // so only use answerless data if those are not enabled const shouldUseAnswerless = useAnswerless && !reviewMode && showSolutions === "none"; const renderedQuestion: PerseusRenderer = shouldUseAnswerless ? splitPerseusItem(item.question) : item.question;

It might also be beneficial to let people who are using the stories know which version of the data they're rendering with, but that could be a small follow-up ticket.

This only works with Radio because showSolutions is undefined with other widgets. I updated it a bit so that it works with other widgets and also so that the startAnswerless toggle actually toggles between the data! Not sure how to make the static toggle do this though since it's not in the props and seems to be added by default. Would love to change startAnswerless to answerless and have the toggle update based on the status of the other toggles and the answerless status of the question.

handeyeco · 2025-03-28T15:04:51Z

testing/server-item-renderer-with-debug-ui.tsx

@@ -79,10 +88,13 @@ export const ServerItemRendererWithDebugUI = ({
                        item={renderedItem}
                        dependencies={storybookDependenciesV2}
                        keypadElement={keypadElement}
+                        reviewMode={reviewMode}
+                        {...rest}


This is just a personal nit, but I try to avoid ...rest for component props because I think it obfuscates usage.

For sure. Pulled out the last prop I know was needed and removed the rest spread.

…2869/INER-widgets-stories

…pecificity

… better

handeyeco

startAnswerless should be removed from the shouldUseAnswerless, but otherwise looks good

handeyeco · 2025-03-28T17:07:48Z

testing/server-item-renderer-with-debug-ui.tsx

+    // `reviewMode` and `showSolutions` require answerful data by definition,
+    // so only use answerless data if those are not enabled. Also updates the
+    // startAnswerless toggle so it actually switches between answerless and answerful.
+    const shouldUseAnswerless =
+        useAnswerless &&
+        !reviewMode &&
+        (showSolutions === "none" || !showSolutions) &&
+        startAnswerless;
+
+    const renderedQuestion: PerseusRenderer = shouldUseAnswerless


Suggested change

// `reviewMode` and `showSolutions` require answerful data by definition,

// so only use answerless data if those are not enabled. Also updates the

// startAnswerless toggle so it actually switches between answerless and answerful.

const shouldUseAnswerless =

useAnswerless &&

!reviewMode &&

(showSolutions === "none" || !showSolutions) &&

startAnswerless;

const renderedQuestion: PerseusRenderer = shouldUseAnswerless

// `reviewMode` and `showSolutions` require answerful data by definition,

// so only use answerless data if those are not enabled.

const shouldUseAnswerless =

useAnswerless &&

!reviewMode &&

(showSolutions === "none" || !showSolutions);

const renderedQuestion: PerseusRenderer = shouldUseAnswerless

You don't want to directly use startAnswerless because useAnswerless is the stateful version of startAnswerless. This also doesn't update startAnswerless so the comment is a little confusing.

Just realizing useAnswerless should probably be renamed so it's not confused with a hook 🤦 That was my bad. Maybe just answerless/setAnswerless or something. This is getting a little confusing, probably due to bad design decisions on my part...but it's test code, so we can always fix it later.

@handeyeco Okay, I renamed startAnswerless to answerless/setAnswerless.

Regarding startAnswerless being there (on L77 of the highlighted code), when it is there, toggling startAnswerless in the Controls for answerless stories immediately changes the data from answerless to answerful. It actually acts as a functioning toggle. It doesn't seem to work if startAnswerless starts out being false though. Those need a page refresh. Should I still take startAnswerless out from here though?

Also remove reference to startAnswerless

…ondition

Myranae added 23 commits March 19, 2025 13:09

[tb/LEMS-2869/INER-widgets-stories] Add answerless stories for all in…

565521d

…teractive graphs

[tb/LEMS-2869/INER-widgets-stories] Update to use answerless prop

1dccd13

This is required for the check button to still work correctly

[tb/LEMS-2869/INER-widgets-stories] Update widgets prop to renderedQu…

88d7a9f

…estion

[tb/LEMS-2869/INER-widgets-stories] Update answerless polygon story's…

307f306

… data It was using data without answers before. Although this is what we want, it's not how all the other answerless stories are

[tb/LEMS-2869/INER-widgets-stories] Add story for numeric-input

7e787aa

[tb/LEMS-2869/INER-widgets-stories] Merge branch 'main' into tb/LEMS-…

1177f4a

…2869/INER-widgets-stories

[tb/LEMS-2869/INER-widgets-stories] Update stories to use ServerItemR…

ef00b02

…enderer Migrate dropdown stories to ServerItemRendererWithDebugUI instead of RendererWithDebugUI. Also renames the answerless stories and creates PerseusItems from the previously available question objects.

[tb/LEMS-2869/INER-widgets-stories] Create PerseusItems from the Pers…

eccefe7

…eusRenderers Some of the test data is also used in tests, so new PerseusItem objects were created in addition to the PerseusRenderer objects for those.

[tb/LEMS-2869/INER-widgets-stories] Update to handle answerless data

9ce8399

[tb/LEMS-2869/INER-widgets-stories] Update answerless naming convention

5551005

[tb/LEMS-2869/INER-widgets-stories] Add a temporary console log

0b3f2c5

[tb/LEMS-2869/INER-widgets-stories] Add testdata to use with ServerIt…

92469e3

…emRenderer ServerItemRenderer requires PerseusItem objects whereas Renderer just requires PerseusRenderer. Creating PerseusItem objects from the available data for Interactive Graph widget

[tb/LEMS-2869/INER-widgets-stories] Update answerless stories to use …

a2753e8

…ServerItemRenderer Also rename the stories for consistency and ease of locating in storybook.

[tb/LEMS-2869/INER-widgets-stories] Update radio stories and add answ…

5c45b2b

…erless stories Update the stories to use ServerItemRenderWithDebugUI. Since we need answerless stories to use this, we have to update all the stories since they all use the same render logic.

[tb/LEMS-2869/INER-widgets-stories] Rename for consistency and add an…

38b17f2

…swerless prop

[tb/LEMS-2869/INER-widgets-stories] Fix lint errors

144ef6f

[tb/LEMS-2869/INER-widgets-stories] Update snap for a story with some…

49dada3

… style issues

[tb/LEMS-2869/INER-widgets-stories] docs(changeset): Update and add s…

5712f92

…tories where Dropdown, Interactive Graph, Numeric Input, Expression, and Radio widgets render using answerless data

[tb/LEMS-2869/INER-widgets-stories] Merge branch 'main' into tb/LEMS-…

6da0f7b

…2869/INER-widgets-stories

[tb/LEMS-2869/INER-widgets-stories] Update to use ServerItemRendererW…

ad3f3c2

…ithDebugUI Updates the numeric-input answerless story specifically

[tb/LEMS-2869/INER-widgets-stories] Add comment related to state issu…

4a1d8ab

…e with radio story

[tb/LEMS-2869/INER-widgets-stories] Merge branch 'main' into tb/LEMS-…

f7ad895

…2869/INER-widgets-stories

[tb/LEMS-2869/INER-widgets-stories] Remove console log

205e3da

Myranae self-assigned this Mar 26, 2025

Myranae added 4 commits March 26, 2025 14:26

[tb/LEMS-2869/INER-widgets-stories] Revert change to ServerRenderer f…

ff3325f

…or non answerless Will do a switch to ServerItemRenderWithDebugUI for all stories at some point in the future, perhaps after this PR

[tb/LEMS-2869/INER-widgets-stories] Simplify radio stories based on u…

a3104a2

…sage

[tb/LEMS-2869/INER-widgets-stories] Remove unneeded changes

ac47da5

Revert "[tb/LEMS-2869/INER-widgets-stories] Simplify radio stories ba…

73a88fa

…sed on usage" This reverts commit a3104a2.

jeremywiebe approved these changes Mar 27, 2025

View reviewed changes

Myranae added 3 commits March 27, 2025 10:21

[tb/LEMS-2869/INER-widgets-stories] Add a shared createPerseusItem

3a56026

[tb/LEMS-2869/INER-widgets-stories] Refactor test data and stories to…

21dd5e9

… use shared util

[tb/LEMS-2869/INER-widgets-stories] Fix linter issue

8b9fc27

Myranae commented Mar 27, 2025

View reviewed changes

handeyeco reviewed Mar 27, 2025

View reviewed changes

jeremywiebe reviewed Mar 27, 2025

View reviewed changes

Myranae added 11 commits March 27, 2025 14:54

[tb/LEMS-2869/INER-widgets-stories] Simplify answerless dropdown stories

d4614b5

[tb/LEMS-2869/INER-widgets-stories] Remove added imports by refactori…

515b25f

…ng for IG

[tb/LEMS-2869/INER-widgets-stories] Use previously defined util

f4b471f

[tb/LEMS-2869/INER-widgets-stories] Remove unneeded test data

c40847f

[tb/LEMS-2869/INER-widgets-stories] Simplify answerless radio stories

4ae0846

[tb/LEMS-2869/INER-widgets-stories] Remove duplicate util function

5a9439e

[tb/LEMS-2869/INER-widgets-stories] Fix linter issue

4d35bc0

[tb/LEMS-2869/INER-widgets-stories] Update ServerItemRendererWithDebugUI

4360de7

Update the component to take more props to keep the Controls panel working in Storybook

[tb/LEMS-2869/INER-widgets-stories] Remove added radio stories page a…

7a74536

…nd revert original Bring the original back to using ServerItemRendererWithDebugUI for all radio stories. Fixes Controls for all stories.

[tb/LEMS-2869/INER-widgets-stories] Update import

fd4e2eb

[tb/LEMS-2869/INER-widgets-stories] Update import

7dd7bbd

Myranae requested review from jeremywiebe and handeyeco March 27, 2025 21:25

handeyeco reviewed Mar 28, 2025

View reviewed changes

Myranae added 6 commits March 28, 2025 10:32

[tb/LEMS-2869/INER-widgets-stories] Update import

8319581

[tb/LEMS-2869/INER-widgets-stories] Update type to not change prod code

3571888

[tb/LEMS-2869/INER-widgets-stories] Merge branch 'main' into tb/LEMS-…

e2bd3fb

…2869/INER-widgets-stories

[tb/LEMS-2869/INER-widgets-stories] Update comments

f223eca

[tb/LEMS-2869/INER-widgets-stories] Removed rest spread in favor of s…

67558a1

…pecificity

[tb/LEMS-2869/INER-widgets-stories] Add a check to make Controls work…

af9dbb7

… better

handeyeco approved these changes Mar 28, 2025

View reviewed changes

Myranae added 2 commits March 28, 2025 15:29

[tb/LEMS-2869/INER-widgets-stories] Update naming of state variable

ebd4240

Also remove reference to startAnswerless

[tb/LEMS-2869/INER-widgets-stories] Update comment and return extra c…

b49e6bd

…ondition


		// Data for the interactive graph widget

		const createInteractiveGraphItem = (question: PerseusRenderer): PerseusItem => {

	// We need to add width and height to images from our
	// props.images mapping.

	// We do a _.has check here to avoid weird things like
	// 'toString' or '__proto__' as a url.
	const extraAttrs = _.has(this.props.images, node.target)
	? this.props.images[node.target]
	: null;

	item={basicDropdownItem}
	item={createPerseusItem(basicDropdownItem)}

		@@ -0,0 +1,90 @@
		// NOTE(Tamara): ServerItemRenderWithDebugUI does not work with the same props

		reviewMode?: boolean \| null \| undefined;
		showSolutions?: ShowSolutions;

Create stories for Assessment's 5 scorable widgets that use answerless data #2329

Are you sure you want to change the base?

Create stories for Assessment's 5 scorable widgets that use answerless data #2329

Conversation

Myranae commented Mar 26, 2025 • edited Loading

Summary:

Test plan:

github-actions bot commented Mar 26, 2025 • edited Loading

github-actions bot commented Mar 26, 2025 • edited Loading

npm Snapshot: Published

jeremywiebe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Myranae Mar 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

handeyeco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Myranae Mar 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

handeyeco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Myranae commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading

Myranae Mar 27, 2025 •

edited

Loading

Myranae Mar 28, 2025 •

edited

Loading