feat(LEMS-3070): Add IDs to radio choices (#2762)

## Summary:
Adds IDs as a required field for radio choices
- Legacy content's IDs are formatted `radio-choice-{index}`
- New content's IDs are UUIDs

Issue: LEMS-3070

## Test plan:
~ ZND Incoming ~

## Screenshots

https://github.com/user-attachments/assets/9c745f0a-9efc-4e7d-9180-6e33e2065d5a

Author: anakaren-rojas

Reviewers: anakaren-rojas, handeyeco, SonicScrewdriver, benchristel, ivyolamit, mark-fitzgerald, nishasy

Required Reviewers:

Approved By: handeyeco, SonicScrewdriver, benchristel

Checks: ✅ 10 checks were successful

Pull Request URL: #2762

Author: anakaren-rojas

.changeset/ten-adults-count.md

@@ -0,0 +1,8 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-core": minor
+"@khanacademy/perseus-editor": minor
+"@khanacademy/perseus-score": minor
+---
+
+adds choice id as a required field to Radio Widget

config/test/crypto-polyfill.js

@@ -0,0 +1,11 @@
+/**
+ * Polyfill crypto.randomUUID for Jest test environment
+ * This runs before all test files to ensure crypto is available during module imports
+ */
+Object.defineProperty(global, "crypto", {
+    value: {
+        randomUUID: () => "0-0-0-0-0",
+    },
+    writable: true,
+    configurable: true,
+});

config/test/test.config.js

@@ -49,6 +49,7 @@ swcrc.jsc.experimental.plugins.push(["swc_mut_cjs_exports", {}]);
 /** @type {import('jest').Config} */
 module.exports = {
     rootDir: path.join(__dirname, "../../"),
+    setupFiles: [],
     transform: {
         "^.+\\.(j|t)sx?$": ["@swc/jest", swcrc],
         // Compile .svg files using a custom transformer that returns the
@@ -73,6 +74,7 @@ module.exports = {
     setupFilesAfterEnv: [
         "<rootDir>/config/test/test-setup.ts",
         "<rootDir>/config/test/custom-matchers.ts",
+        "<rootDir>/config/test/crypto-polyfill.js",
     ],
     moduleNameMapper: {
         ...pkgMap,

packages/perseus-core/src/accessibility.test.ts

@@ -86,8 +86,16 @@ describe("isItemAccessible", () => {
                             type: "radio",
                             options: {
                                 choices: [
-                                    {content: "Option 1", correct: true},
-                                    {content: "Option 2", correct: false},
+                                    {
+                                        id: "0-0-0-0-0",
+                                        content: "Option 1",
+                                        correct: true,
+                                    },
+                                    {
+                                        id: "1-1-1-1-1",
+                                        content: "Option 2",
+                                        correct: false,
+                                    },
                                 ],
                             },
                         },

packages/perseus-core/src/data-schema.ts

@@ -1378,6 +1378,11 @@ export type PerseusRadioWidgetOptions = {
 export type PerseusRadioChoice = {
     // Translatable Markdown; The label for this choice
     content: string;
+    /**
+     * An opaque string that uniquely identifies this choice within
+     * the radio widget. The format of this ID is subject to change.
+     */
+    id: string;
     // Translatable Markdown; Rationale to give the user when they get it wrong
     rationale?: string;
     // Whether this option is a correct answer or not

packages/perseus-core/src/parse-perseus-json/general-purpose-parsers/array.test.ts

@@ -1,6 +1,8 @@
 import {assertFailure, success} from "../result";
 
-import {array} from "./array";
+import {array, arrayWithIndex} from "./array";
+import {defaulted} from "./defaulted";
+import {object} from "./object";
 import {string} from "./string";
 import {anyFailure, ctx, parseFailureWith} from "./test-helpers";
 
@@ -11,11 +13,11 @@ describe("array", () => {
         expect(arrayOfStrings([], ctx())).toEqual(success([]));
     });
 
-    it("accepts a array of one element", () => {
+    it("accepts an array of one element", () => {
         expect(arrayOfStrings(["hi"], ctx())).toEqual(success(["hi"]));
     });
 
-    it("accepts a array of multiple elements", () => {
+    it("accepts an array of multiple elements", () => {
         expect(arrayOfStrings(["a", "b", "c"], ctx())).toEqual(
             success(["a", "b", "c"]),
         );
@@ -25,11 +27,11 @@ describe("array", () => {
         expect(arrayOfStrings("blah", ctx())).toEqual(anyFailure);
     });
 
-    it("rejects a array with one element of the wrong type", () => {
+    it("rejects an array with one element of the wrong type", () => {
         expect(arrayOfStrings([99], ctx())).toEqual(anyFailure);
     });
 
-    it("rejects a array with multiple elements if any has the wrong type", () => {
+    it("rejects an array with multiple elements if any has the wrong type", () => {
         expect(arrayOfStrings(["ok", 99, "ok"], ctx())).toEqual(anyFailure);
     });
 
@@ -107,3 +109,159 @@ describe("array", () => {
         );
     });
 });
+
+describe("arrayWithIndex ", () => {
+    // Test using object with defaulted field that uses index
+    const arrayOfItemsWithIndexedIds = arrayWithIndex((index) =>
+        object({
+            name: string,
+            id: defaulted(string, () => `item-${index}`),
+        }),
+    );
+
+    it("accepts an empty array", () => {
+        expect(arrayOfItemsWithIndexedIds([], ctx())).toEqual(success([]));
+    });
+
+    it("accepts an array of one element", () => {
+        const input = [{name: "first"}];
+        expect(arrayOfItemsWithIndexedIds(input, ctx())).toEqual(
+            success([{name: "first", id: "item-0"}]),
+        );
+    });
+
+    it("accepts an array of multiple elements", () => {
+        const input = [
+            {name: "first"},
+            {name: "second", id: "custom"},
+            {name: "third"},
+        ];
+        expect(arrayOfItemsWithIndexedIds(input, ctx())).toEqual(
+            success([
+                {name: "first", id: "item-0"},
+                {name: "second", id: "custom"},
+                {name: "third", id: "item-2"},
+            ]),
+        );
+    });
+
+    it("rejects a string", () => {
+        expect(arrayOfItemsWithIndexedIds("blah", ctx())).toEqual(anyFailure);
+    });
+
+    it("rejects an array with one element of the wrong type", () => {
+        expect(arrayOfItemsWithIndexedIds([99], ctx())).toEqual(anyFailure);
+    });
+
+    it("rejects an array with multiple elements if any has the wrong type", () => {
+        expect(
+            arrayOfItemsWithIndexedIds([{name: "ok"}, 99, {name: "ok"}], ctx()),
+        ).toEqual(anyFailure);
+    });
+
+    it("indicates the bad element in the failure message", () => {
+        const theArray = [
+            {name: "ok"},
+            {name: "ok"},
+            99, // index 2
+        ];
+
+        const result = arrayOfItemsWithIndexedIds(theArray, ctx());
+
+        expect(result).toEqual(
+            parseFailureWith({
+                expected: ["object"],
+                badValue: 99,
+                path: [2],
+            }),
+        );
+    });
+
+    it("lists all mismatches", () => {
+        const theArray = [{name: "ok"}, 4, 99];
+
+        const result = arrayOfItemsWithIndexedIds(theArray, ctx());
+
+        assertFailure(result);
+
+        expect(result.detail).toEqual([
+            {
+                expected: ["object"],
+                badValue: 4,
+                path: [1],
+            },
+            {
+                expected: ["object"],
+                badValue: 99,
+                path: [2],
+            },
+        ]);
+    });
+
+    it("uses the index to generate default IDs", () => {
+        const input = [
+            {name: "first"}, // Should get id: "item-0"
+            {name: "second"}, // Should get id: "item-1"
+            {name: "third"}, // Should get id: "item-2"
+        ];
+
+        const result = arrayOfItemsWithIndexedIds(input, ctx());
+
+        expect(result).toEqual(
+            success([
+                {name: "first", id: "item-0"},
+                {name: "second", id: "item-1"},
+                {name: "third", id: "item-2"},
+            ]),
+        );
+    });
+
+    it("pinpoints mismatches in nested arrays", () => {
+        const arrayOfArrayOfItems = arrayWithIndex(() =>
+            array(object({name: string})),
+        );
+        const theArray = [
+            [{name: ""}],
+            [{name: ""}],
+            [],
+            [{name: ""}, 99, {name: ""}],
+        ];
+
+        const result = arrayOfArrayOfItems(theArray, ctx());
+
+        expect(result).toEqual(parseFailureWith({path: [3, 1]}));
+    });
+
+    it("lists multiple mismatches in nested arrays", () => {
+        const arrayOfArrayOfItems = arrayWithIndex(() =>
+            array(object({name: string})),
+        );
+        const theArray = [
+            [{name: ""}, {name: ""}, 4],
+            [9, {name: ""}],
+            [],
+            [{name: ""}, 99, {name: ""}],
+        ];
+
+        const result = arrayOfArrayOfItems(theArray, ctx());
+
+        assertFailure(result);
+
+        expect(result.detail.map((d) => d.path)).toEqual([
+            [0, 2],
+            [1, 0],
+            [3, 1],
+        ]);
+    });
+
+    it("describes the problem if given a non-array", () => {
+        const result = arrayOfItemsWithIndexedIds(99, ctx());
+
+        expect(result).toEqual(
+            parseFailureWith({
+                expected: ["array"],
+                badValue: 99,
+            }),
+        );
+    });
+});

packages/perseus-core/src/parse-perseus-json/general-purpose-parsers/array.ts

@@ -14,6 +14,27 @@ export function array<T>(elementParser: Parser<T>): Parser<T[]> {
     };
 }
 
+/**
+ * Like the standard `array` parser, but passes the array index to a parser factory function.
+ * This allows element parsers to generate index-based default values.
+ */
+export function arrayWithIndex<T>(
+    elementParserFactory: (index: number) => Parser<T>,
+): Parser<T[]> {
+    return (rawValue: unknown, ctx: ParseContext) => {
+        if (!Array.isArray(rawValue)) {
+            return ctx.failure("array", rawValue);
+        }
+
+        const elementResults = rawValue.map((elem, index) => {
+            const elementParser = elementParserFactory(index);
+            return elementParser(elem, ctx.forSubtree(index));
+        });
+
+        return Result.all(elementResults, concat);
+    };
+}
+
 function concat<T>(a: T[], b: T[]): T[] {
     return [...a, ...b];
 }

packages/perseus-core/src/parse-perseus-json/perseus-parsers/radio-widget.mockData.ts

@@ -119,9 +119,7 @@ export const v2Widget = {
                 clue: "I am some rationale for a choice",
                 isNoneOfTheAbove: false,
             },
-            {
-                content: "I am a choice with only content",
-            },
+            {content: "I am a choice with only content"},
         ],
         numCorrect: 1,
         hasNoneOfTheAbove: false,
@@ -145,29 +143,32 @@ export const v3Widget = {
     options: {
         choices: [
             {
+                id: "radio-choice-0",
                 content: "I am a correct choice",
                 correct: true,
                 rationale: "I am some rationale for a choice",
                 isNoneOfTheAbove: true,
             },
             {
+                id: "radio-choice-1",
                 content: "I am an incorrect choice",
                 correct: false,
                 rationale: "I am some rationale for a choice",
+                widgets: undefined,
             },
             {
+                id: "radio-choice-2",
                 content: "I am an incorrect choice",
                 correct: false,
                 isNoneOfTheAbove: false,
             },
             {
+                id: "radio-choice-3",
                 content: "I am content for a choice",
                 rationale: "I am some rationale for a choice",
                 isNoneOfTheAbove: false,
             },
-            {
-                content: "I am a choice with only content",
-            },
+            {id: "radio-choice-4", content: "I am a choice with only content"},
         ],
         numCorrect: 1,
         hasNoneOfTheAbove: false,