@khanacademy/perseus 19.0.0 → 19.1.0

package/dist/mixins/changeable.d.ts

@@ -26,5 +26,5 @@ export declare const propTypes: {
 export type ChangeableProps = {
     onChange: (values: {
         [key: string]: any;
-    }, callback?: () => unknown | null | undefined, silent?: boolean) => unknown;
+    }, callback?: (() => unknown) | null | undefined, silent?: boolean) => unknown;
 };

package/dist/perseus-api.d.ts

@@ -93,6 +93,7 @@ export declare const ApiOptions: {
         inModal?: boolean | undefined;
         crossOutEnabled?: boolean | undefined;
         editorChangeDelay?: number | undefined;
+        onWidgetStartProps?: ((widgets: import("./types").PerseusWidgetMap) => import("./types").PerseusWidgetMap) | undefined;
     }> & {
         GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
         baseElements: {

package/dist/renderer.d.ts

@@ -4,7 +4,7 @@ import TranslationLinter from "./translation-linter";
 import WidgetContainer from "./widget-container";
 import type { DependenciesContext } from "./dependencies";
 import type { PerseusRenderer, PerseusWidget, PerseusWidgetOptions } from "./perseus-types";
-import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, PerseusScore, WidgetProps } from "./types";
+import type { APIOptions, APIOptionsWithDefaults, FilterCriterion, FocusPath, PerseusScore, PerseusWidgetMap, WidgetProps } from "./types";
 import type { LinterContextProps } from "@khanacademy/perseus-linter";
 import "./styles/perseus-renderer.less";
 type WidgetState = {
@@ -117,9 +117,7 @@ declare class Renderer extends React.Component<Props, State> {
     _getAllWidgetsInfo: (props: Props) => {
         [key: string]: PerseusWidget;
     };
-    _getAllWidgetsStartProps: (allWidgetInfo: {
-        [key: string]: PerseusWidget;
-    }, props: Props) => any;
+    _getAllWidgetsStartProps: (allWidgetInfo: PerseusWidgetMap, props: Props) => PerseusWidgetMap;
     _getDefaultWidgetInfo: (widgetId: string) => any;
     _getWidgetInfo: (widgetId: string) => PerseusWidget;
     renderWidget: (impliedType: string, id: string, state: WidgetState) => null | React.ReactNode;

package/dist/server-item-renderer.d.ts

@@ -136,6 +136,7 @@ declare const ref: React.ForwardRefExoticComponent<Omit<Pick<OwnProps & HOCProps
         inModal?: boolean | undefined;
         crossOutEnabled?: boolean | undefined;
         editorChangeDelay?: number | undefined;
+        onWidgetStartProps?: ((widgets: import("./types").PerseusWidgetMap) => import("./types").PerseusWidgetMap) | undefined;
     }> | undefined;
     onRendered?: ((isRendered: boolean) => void) | undefined;
 } & {}, "onRendered"> & React.RefAttributes<ServerItemRenderer>>;

package/dist/types.d.ts

@@ -103,6 +103,7 @@ export type APIOptions = Readonly<{
     inModal?: boolean;
     crossOutEnabled?: boolean;
     editorChangeDelay?: number;
+    onWidgetStartProps?: (widgets: PerseusWidgetMap) => PerseusWidgetMap;
 }>;
 type TeXProps = {
     children: string;
@@ -242,6 +243,9 @@ export type WidgetExports<T extends React.ComponentType<any> = React.ComponentTy
     };
     widget: T;
 }>;
+export type PerseusWidgetMap = {
+    [key: string]: PerseusWidget;
+};
 export type FilterCriterion = string | ((id: string, widgetInfo: PerseusWidget, widget?: Widget | null | undefined) => boolean);
 export type WidgetProps<RenderProps, Rubric, TrackingExtraArgs = Empty> = RenderProps & {
     widgetId: string;

package/dist/util/geometry.d.ts

@@ -15,6 +15,8 @@ export declare function ccw(a: Coord, b: Coord, c: Coord): number;
 export declare function collinear(a: Coord, b: Coord, c: Coord): boolean;
 export declare function intersects(ab: Line, cd: Line): boolean;
 export declare function vector(a: any, b: any): number[];
+export declare function reverseVector(vector: Coord): Coord;
+export declare function clockwise(points: Coord[]): boolean;
 export declare function magnitude(v: ReadonlyArray<Coord>): number;
 export declare function angleMeasures(coords: ReadonlyArray<Coord>): ReadonlyArray<number>;
 export declare function similar(coords1: ReadonlyArray<Coord>, coords2: ReadonlyArray<Coord>, tolerance: number): boolean;

package/dist/util/graphie.d.ts

@@ -1,4 +1,110 @@
+import type { Interval } from "./interval";
 import type { Coord } from "../interactive2/types";
-export declare function polar(r: number | Coord, th: number): number[];
+export declare function polar(r: number | Coord, th: number): Coord;
+interface RaphaelElement {
+    type: string;
+    attrs: Record<string, any>;
+    node: {
+        style: {
+            shapeRendering: "crispEdges" | "geometricPrecision";
+        };
+    };
+}
+type PositionedShape = {
+    wrapper: HTMLDivElement;
+    visibleShape: RaphaelElement;
+};
+export type StyleParams = {
+    fill?: string;
+    labelDistance?: number;
+    opacity?: number;
+    step?: Coord;
+    stroke?: string;
+    strokeWidth?: number;
+};
+type LabelPosition = "center" | "above" | "below" | "right" | "left" | "above right" | "above left" | "below right" | "below left";
+interface LabelMethod {
+    (point: Coord, text: string, position: LabelPosition): any;
+    (point: Coord, text: string, position: LabelPosition, renderTex: boolean): any;
+    (point: Coord, text: string, position: LabelPosition, style: StyleParams): any;
+    (point: Coord, text: string, position: LabelPosition, renderTex: boolean, style: StyleParams): any;
+}
+export declare class Graphie {
+    #private;
+    el: HTMLElement;
+    raphael?: any;
+    isMobile: boolean;
+    currentStyle: any;
+    range?: [Interval, Interval];
+    scale?: Coord;
+    dimensions?: Coord;
+    xpixels?: number;
+    ypixels?: number;
+    constructor(el: HTMLElement);
+    init(options: {
+        range?: [Interval, Interval];
+        scale?: number | Coord;
+        isMobile?: boolean;
+    }): this;
+    graphInit(options: {
+        range?: [Interval, Interval] | Coord;
+        grid?: boolean;
+        gridRange?: [Interval, Interval] | Coord;
+        scale: Coord | number;
+        axes?: true;
+        axisArrows?: "<->" | "->" | true | "";
+        axisOpacity?: number;
+        axisCenter?: Coord;
+        axisLabels?: [string, string] | false;
+        gridOpacity?: number;
+        gridStep?: Coord | number;
+        ticks?: boolean;
+        tickStep?: Coord | number;
+        tickLen?: Coord | number;
+        tickOpacity?: number;
+        labels?: boolean;
+        labelStep?: number;
+        labelOpacity?: number;
+        labelFormat?: (a: number) => string;
+        yLabelFormat?: (y: number) => string;
+        xLabelFormat?: (x: number) => string;
+        unityLabels?: boolean | [boolean, boolean];
+        isMobile?: boolean;
+    }): void;
+    private drawingTransform;
+    private bounds;
+    style(attrs: any, fn: any): any;
+    grid(xr: Interval, yr: Interval, style?: StyleParams): unknown;
+    arc(center: Coord, radius: Coord, startAngle: number, endAngle: number, sector: boolean, style?: StyleParams): RaphaelElement;
+    circle(center: Coord, radius: number, style?: StyleParams): any;
+    rect(x: any, y: any, width: any, height: any, style?: StyleParams): any;
+    ellipse(center: any, radii: any, style?: StyleParams): any;
+    fixedEllipse(center: number | Coord, radii: number | [number, number], maxScale: number, padding: number, style?: StyleParams): PositionedShape;
+    private unstyledPath;
+    path(points: Coord[], style?: StyleParams): RaphaelElement;
+    fixedPath(points: Coord[], center: Coord | null, createPath: (scaledPoints: Coord[]) => string): PositionedShape;
+    scaledPath(points: Coord[], style?: StyleParams): RaphaelElement;
+    line(start: Coord, end: Coord, style?: StyleParams): RaphaelElement;
+    parabola(a: number, b: number, c: number, style?: StyleParams): RaphaelElement;
+    fixedLine(start: Coord, end: Coord, thickness: number): PositionedShape;
+    sinusoid(a: number, b: number, c: number, d: number, style?: StyleParams): RaphaelElement;
+    label: LabelMethod;
+    plotParametric(fn: (t: number) => Coord, range: Interval, style?: StyleParams): RaphaelElement;
+    plot(fn: (x: number) => number, range: Interval, style?: StyleParams): RaphaelElement;
+    svgPath: (points: (Coord | true)[], alreadyScaled?: boolean) => string;
+    svgParabolaPath: (a: any, b: any, c: any) => string;
+    svgSinusoidPath: (a: number, b: number, c: number, d: number) => string;
+    private withStyle;
+    private postprocessDrawingResult;
+    private addArrowheads;
+    scalePoint: (point: number | Coord) => Coord;
+    scaleVector: (point: number | Coord) => any;
+    unscalePoint: (point: Coord) => any;
+    unscaleVector: (point: Coord) => any;
+    private processAttributes;
+}
+type RangeSpecifier = [Interval, Interval] | Coord | number;
+export declare function normalizeRange(range: RangeSpecifier): [Interval, Interval];
+export declare function normalizeRange(range: RangeSpecifier | undefined): [Interval, Interval] | undefined;
 declare const GraphUtils: any;
 export default GraphUtils;

package/dist/util/math.d.ts

@@ -25,4 +25,6 @@ declare const KhanMath: {
     readonly getNumericFormat: (text: string) => MathFormat | null | undefined;
     readonly toNumericString: (number: number, format?: MathFormat) => string;
 };
+export declare function sum(array: number[]): number;
+export declare function add(a: number, b: number): number;
 export default KhanMath;

package/dist/util/parse-perseus-json.d.ts

@@ -1,10 +1,10 @@
 import type { PerseusItem } from "../perseus-types";
 /**
- * Helper to parse Perseus JSON
+ * Helper to parse PerseusItem JSON
  * Why not just use JSON.parse? We want:
  * - To make sure types are correct
  * - To give us a central place to validate/transform output if needed
- * @param {string} input - the stringified Perseus JSON
+ * @param {string} json - the stringified PerseusItem JSON
  * @returns {PerseusItem} the parsed PerseusItem object
  */
-export default function parsePerseusJSON(input: string): PerseusItem;
+export declare function parsePerseusItem(json: string): PerseusItem;

package/dist/widgets/expression.d.ts

@@ -121,6 +121,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -184,6 +185,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -247,6 +249,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -321,6 +324,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -384,6 +388,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {
@@ -447,6 +452,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }> & {
             GroupMetadataEditor: NonNullable<React.ComponentType<any> | undefined>;
             baseElements: {

package/dist/widgets/label-image.d.ts

@@ -120,6 +120,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }>;
         choices: readonly string[];
         imageAlt: string;
@@ -179,6 +180,7 @@ declare const _default: Readonly<{
             inModal?: boolean | undefined;
             crossOutEnabled?: boolean | undefined;
             editorChangeDelay?: number | undefined;
+            onWidgetStartProps?: ((widgets: import("../types").PerseusWidgetMap) => import("../types").PerseusWidgetMap) | undefined;
         }>;
         choices: readonly string[];
         imageAlt: string;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "19.0.0",
+    "version": "19.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,8 +23,8 @@
     },
     "dependencies": {
         "@khanacademy/kas": "^0.3.7",
-        "@khanacademy/kmath": "^0.1.8",
-        "@khanacademy/math-input": "^16.5.1",
+        "@khanacademy/kmath": "^0.1.9",
+        "@khanacademy/math-input": "^17.0.0",
         "@khanacademy/perseus-core": "1.4.1",
         "@khanacademy/perseus-linter": "^0.3.10",
         "@khanacademy/pure-markdown": "^0.2.13",
@@ -63,7 +63,6 @@
         "jquery": "^2.1.1",
         "katex": "^0.11.1",
         "lodash.debounce": "^4.0.8",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#48410e80d760bbd5105544d4a4ab459a28dc2cbc",
         "perseus-build-settings": "^0.3.0",
         "prop-types": "^15.6.1",
         "react": "16.14.0",

package/src/__testdata__/renderer.testdata.ts

@@ -4,6 +4,7 @@ import type {
     InputNumberWidget,
     PerseusRenderer,
 } from "../perseus-types";
+import type {RenderProps} from "../widgets/radio/widget";
 
 export const dropdownWidget: DropdownWidget = {
     type: "dropdown",
@@ -120,3 +121,154 @@ export const mockedItem: PerseusRenderer = {
         },
     },
 } as PerseusRenderer;
+
+// Note that if this item is used, you _must_ first register the MockWidget
+export const mockedRandomItem: PerseusRenderer = {
+    content: "Mock widgets ==> [[\u2603 radio 1]] [[\u2603 radio 2]]",
+    images: {},
+    widgets: {
+        "radio 1": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            numCorrect: 1,
+            hasNoneOfTheAbove: false,
+            multipleSelect: false,
+            countChoices: false,
+            deselectEnabled: false,
+            type: "radio",
+            options: {
+                static: false,
+                countChoices: false,
+                deselectEnabled: false,
+                displayCount: null,
+                hasNoneOfTheAbove: false,
+                multipleSelect: false,
+                randomize: true,
+                choices: [
+                    {
+                        content: "Content 1",
+                        correct: true,
+                    },
+                    {
+                        content: "Content 2",
+                        correct: false,
+                    },
+                    {
+                        content: "Content 3",
+                        correct: false,
+                    },
+                    {
+                        content: "Content 4",
+                        correct: false,
+                    },
+                ],
+            },
+            alignment: "default",
+        },
+        "radio 2": {
+            graded: true,
+            version: {major: 0, minor: 0},
+            static: false,
+            numCorrect: 1,
+            hasNoneOfTheAbove: false,
+            multipleSelect: false,
+            countChoices: false,
+            deselectEnabled: false,
+            type: "radio",
+            options: {
+                static: false,
+                countChoices: false,
+                deselectEnabled: false,
+                displayCount: null,
+                hasNoneOfTheAbove: false,
+                multipleSelect: false,
+                randomize: true,
+                choices: [
+                    {
+                        content: "Content 1",
+                        correct: true,
+                    },
+                    {
+                        content: "Content 2",
+                        correct: false,
+                    },
+                    {
+                        content: "Content 3",
+                        correct: false,
+                    },
+                    {
+                        content: "Content 4",
+                        correct: false,
+                    },
+                ],
+            },
+            alignment: "default",
+        },
+    },
+} as PerseusRenderer;
+
+export const mockedShuffledRadioProps: {[key in string]: RenderProps} = {
+    "radio 1": {
+        numCorrect: 1,
+        countChoices: false,
+        deselectEnabled: false,
+        hasNoneOfTheAbove: false,
+        multipleSelect: false,
+        choices: [
+            {
+                content: "Content 4",
+                correct: false,
+                originalIndex: 3,
+            },
+            {
+                content: "Content 2",
+                correct: false,
+                originalIndex: 1,
+            },
+            {
+                content: "Content 1",
+                correct: true,
+                originalIndex: 0,
+            },
+
+            {
+                content: "Content 3",
+                correct: false,
+                originalIndex: 2,
+            },
+        ],
+        selectedChoices: [false, false, true, false],
+    },
+    "radio 2": {
+        numCorrect: 1,
+        countChoices: false,
+        deselectEnabled: false,
+        hasNoneOfTheAbove: false,
+        multipleSelect: false,
+        choices: [
+            {
+                content: "Content 4",
+                correct: false,
+                originalIndex: 3,
+            },
+            {
+                content: "Content 2",
+                correct: false,
+                originalIndex: 1,
+            },
+            {
+                content: "Content 1",
+                correct: true,
+                originalIndex: 0,
+            },
+
+            {
+                content: "Content 3",
+                correct: false,
+                originalIndex: 2,
+            },
+        ],
+        selectedChoices: [false, false, true, false],
+    },
+};

package/src/__tests__/renderer.test.tsx

@@ -14,6 +14,8 @@ import {
     question1,
     question2,
     mockedItem,
+    mockedRandomItem,
+    mockedShuffledRadioProps,
 } from "../__testdata__/renderer.testdata";
 import * as Dependencies from "../dependencies";
 import {Errors} from "../logging/log";
@@ -29,6 +31,7 @@ import type {
     PerseusImageWidgetOptions,
     PerseusInputNumberWidgetOptions,
 } from "../perseus-types";
+import type {APIOptions} from "../types";
 
 // NOTE(jeremy): We can't use an automatic mock for the translation linter,
 // because one of it's "instance" methods is created using `debounce` and Jest
@@ -287,6 +290,20 @@ describe("renderer", () => {
                 /^less than or equal to$/,
             );
         });
+
+        it("should call the onWidgetStartProps callback if provided in apiOptions", () => {
+            // Arrange
+            const onWidgetStartProps = jest.fn();
+            const apiOptions: APIOptions = {onWidgetStartProps};
+
+            // Act
+            renderQuestion(mockedRandomItem, apiOptions);
+
+            // Assert
+            expect(onWidgetStartProps).toHaveBeenCalledWith(
+                mockedShuffledRadioProps,
+            );
+        });
     });
 
     describe("rendering", () => {

package/src/components/math-input.tsx

@@ -157,7 +157,7 @@ class MathInput extends React.Component<Props, State> {
                 (baseConfig) => ({
                     ...baseConfig,
                     handlers: {
-                        edit: (mathField) => {
+                        edit: (mathField: MathFieldInterface) => {
                             // This handler is guaranteed to be called on change, but
                             // unlike React it sometimes generates false positives.
                             // One of these is on initialization (with an empty string
@@ -184,11 +184,9 @@ class MathInput extends React.Component<Props, State> {
                                 // directly, instead of waiting for `.latex()` to be
                                 // called in `componentDidUpdate()`.
                                 const left =
-                                    mathField.__controller.cursor[
-                                        mathQuillInstance.L
-                                    ];
+                                    mathField.cursor()[mathQuillInstance.L];
                                 if (left && left.ctrlSeq === "\\cdot ") {
-                                    mathField.__controller.backspace();
+                                    mathField.controller().backspace();
                                     mathField.cmd("\\times");
                                 }
                             } else {
@@ -214,7 +212,7 @@ class MathInput extends React.Component<Props, State> {
                                 $(this.__mathFieldWrapperRef).submit();
                             }
                         },
-                        upOutOf: (mathField) => {
+                        upOutOf: (mathField: MathFieldInterface) => {
                             // This handler is called when the user presses the up
                             // arrow key, but there is nowhere in the expression to go
                             // up to (no numerator or exponent). For ease of use,

package/src/index.ts

@@ -83,7 +83,7 @@ export {
     getAnswersFromWidgets,
     injectWidgets,
 } from "./util/extract-perseus-data";
-export {default as parsePerseusJSON} from "./util/parse-perseus-json";
+export {parsePerseusItem} from "./util/parse-perseus-json";
 
 /**
  * Mixins
@@ -123,11 +123,16 @@ export type {
 } from "./types";
 export type {ParsedValue} from "./util";
 export type {
-    InputNumberWidget,
-    MathFormat,
     PerseusAnswerArea,
     PerseusExpressionWidgetOptions,
+    // Utility types
+    Range,
+    Size,
+    MathFormat,
+    InputNumberWidget, // TODO(jeremy): remove?
+    // Widget configuration types
     PerseusImageBackground,
+    PerseusInputNumberWidgetOptions,
     PerseusInteractiveGraphWidgetOptions,
     PerseusItem,
     PerseusPlotterWidgetOptions,

package/src/mixins/changeable.ts

@@ -127,7 +127,7 @@ export type ChangeableProps = {
         values: {
             [key: string]: any;
         },
-        callback?: () => unknown | null | undefined,
+        callback?: (() => unknown) | null | undefined,
         silent?: boolean,
     ) => unknown;
 };

package/src/renderer.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/no-unsafe */
 import * as PerseusLinter from "@khanacademy/perseus-linter";
+import {entries} from "@khanacademy/wonder-stuff-core";
 import classNames from "classnames";
 import $ from "jquery";
 import * as React from "react";
@@ -41,6 +42,7 @@ import type {
     FilterCriterion,
     FocusPath,
     PerseusScore,
+    PerseusWidgetMap,
     WidgetProps,
 } from "./types";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
@@ -485,18 +487,22 @@ class Renderer extends React.Component<Props, State> {
     };
 
     _getAllWidgetsStartProps: (
-        allWidgetInfo: {
-            [key: string]: PerseusWidget;
-        },
+        allWidgetInfo: PerseusWidgetMap,
         props: Props,
-    ) => any = (allWidgetInfo, props) => {
-        // @ts-expect-error - TS2345 - Argument of type '{ [key: string]: PerseusWidget; }' is not assignable to parameter of type 'Partial<Record<string, CategorizerWidget>>'.
-        return mapObject(allWidgetInfo, (widgetInfo) => {
-            return Widgets.getRendererPropsForWidgetInfo(
+    ) => PerseusWidgetMap = (allWidgetInfo, props) => {
+        const {apiOptions, problemNum} = props;
+        const widgetsStartProps: PerseusWidgetMap = {};
+        entries(allWidgetInfo).forEach(([key, widgetInfo]) => {
+            widgetsStartProps[key] = Widgets.getRendererPropsForWidgetInfo(
                 widgetInfo,
-                props.problemNum,
+                problemNum,
             );
         });
+
+        // Call the onWidgetStartProps callback if it exists
+        apiOptions?.onWidgetStartProps?.(widgetsStartProps);
+
+        return widgetsStartProps;
     };
 
     // This is only used in _getWidgetInfo as a fallback if widgetId

package/src/types.ts

@@ -223,6 +223,11 @@ export type APIOptions = Readonly<{
     // keystroke caused text typed in the text area to appear in it
     // only after a good few seconds.
     editorChangeDelay?: number;
+    // This is a callback function that returns all of the Widget props
+    // after they have been transformed by the widget's transform function.
+    // This is useful for when we need to know how a widget has shuffled its
+    // the available choices.
+    onWidgetStartProps?: (widgets: PerseusWidgetMap) => PerseusWidgetMap;
 }>;
 
 type TeXProps = {
@@ -448,6 +453,10 @@ export type WidgetExports<
     widget: T;
 }>;
 
+export type PerseusWidgetMap = {
+    [key: string]: PerseusWidget;
+};
+
 export type FilterCriterion =
     | string
     | ((