@khanacademy/perseus 20.8.1 → 21.1.0

package/dist/es/index.js

@@ -7,7 +7,7 @@ import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef } from 'react';
+import React__default, { useState, useEffect, useRef, createContext } from 'react';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
@@ -1921,7 +1921,7 @@ const KhanAnswerTypes = {
   }
 };
 
-const _excluded$4 = ["scoring"];
+const _excluded$5 = ["scoring"];
 const ERROR_TITLE = i18n._("Oops!");
 const ERROR_MESSAGE = i18n._("Sorry, I don't understand that!");
 
@@ -2009,7 +2009,7 @@ class Expression extends React.Component {
       let {
           scoring
         } = _ref,
-        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$5);
       const score = Expression.validate(this.getUserInput(), rubric, onInputError || function () {});
 
       // "scoring" is a flag that indicates when we are checking answers.
@@ -18832,7 +18832,7 @@ const isAccessible = widgetInfo => {
   }
   return !!accessible;
 };
-const getAllWidgetTypes$1 = () => {
+const getAllWidgetTypes = () => {
   return _.keys(widgets);
 };
 const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
@@ -19101,7 +19101,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   getVersionVector: getVersionVector,
   getPublicWidgets: getPublicWidgets,
   isAccessible: isAccessible,
-  getAllWidgetTypes: getAllWidgetTypes$1,
+  getAllWidgetTypes: getAllWidgetTypes,
   upgradeWidgetInfoToLatestVersion: upgradeWidgetInfoToLatestVersion,
   getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
   traverseChildWidgets: traverseChildWidgets$3,
@@ -19339,6 +19339,9 @@ class Renderer extends React.Component {
         if (!widgetInfo.type || !widgetInfo.alignment) {
           const newValues = {};
           if (!widgetInfo.type) {
+            // TODO: why does widget have no type?
+            // We don't want to derive type from widget ID
+            // see: LEMS-1845
             newValues.type = widgetId.split(" ")[0];
           }
           if (!widgetInfo.alignment) {
@@ -21428,7 +21431,7 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-const _excluded$3 = ["keypadElement", "onFocus", "value"];
+const _excluded$4 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21467,7 +21470,7 @@ class SimpleKeypadInput extends React.Component {
         onFocus,
         value
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
     return (
       /*#__PURE__*/
       // @ts-expect-error - TS2769 - No overload matches this call.
@@ -23298,14 +23301,14 @@ var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.
   forwardedRef: ref
 })));
 
-const _excluded$2 = ["showContent", "content", "forwardedRef"];
+const _excluded$3 = ["showContent", "content", "forwardedRef"];
 const ChoiceNoneAbove = function ChoiceNoneAbove(props) {
   const {
       showContent,
       content,
       forwardedRef
     } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$3);
   const choiceProps = _extends({}, rest, {
     content: showContent ? content :
     /*#__PURE__*/
@@ -24898,9 +24901,22 @@ class Explanation extends React.Component {
     // Special styling is needed to fit the button in a block of text without throwing off the line spacing.
     // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
     const buttonStyleOverrides = {
-      height: "22px",
+      height: "auto",
       marginLeft: "-2px",
-      padding: "0 2px"
+      // transfer space on the left side to the padding
+      marginRight: "2px",
+      // adds space between the right border and any text that follows
+      paddingLeft: "2px" // adds space between the left border and the button text
+    };
+
+    const labelStyle = {
+      fontSize: "18px",
+      lineHeight: "20px",
+      // The following property adjusts the large space between the button text and the caret icon.
+      // Since we are unable to adjust the styling of the icon (where the extra space exists),
+      //      we are adjusting it on the text label by using a negative margin.
+      marginRight: "-6px",
+      "white-space": "normal"
     };
     const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
     return /*#__PURE__*/React.createElement(UniqueIDProvider, {
@@ -24911,8 +24927,9 @@ class Explanation extends React.Component {
       "aria-controls": ids.get("content"),
       endIcon: caretIcon,
       kind: "tertiary",
+      labelStyle: labelStyle,
       onClick: this._onClick,
-      size: "large",
+      size: "small",
       style: buttonStyleOverrides
     }, promptText), /*#__PURE__*/React.createElement(View, {
       id: ids.get("content"),
@@ -28187,6 +28204,14 @@ const moveAll = delta => ({
   type: MOVE_ALL,
   delta
 });
+const MOVE_POINT = "move-point";
+function movePoint(index, destination) {
+  return {
+    type: MOVE_POINT,
+    index,
+    destination
+  };
+}
 
 /**
  * 44 is touch best practice and AAA compliant for WCAG
@@ -28261,6 +28286,10 @@ const getRayIntersectionCoords = (collinearPoint, extendFrom, range) => {
       return [xMax, yAtXMax];
   }
 };
+const getLines = points => points.map((point, i) => {
+  const next = points[(i + 1) % points.length];
+  return [point, next];
+});
 
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
@@ -28405,7 +28434,9 @@ const SegmentGraph = props => {
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
+    onMovePoint: (endpointIndex, destination) => {
+      dispatch(moveControlPoint(endpointIndex, destination, i));
+    },
     "data-testid": "segment" + i
   })));
 };
@@ -28521,11 +28552,52 @@ const RayGraph = props => {
   }));
 };
 
+/**
+ * Wrapper with Mafs transform styles for SVG elements.
+ * Scales and translates the SVG element to match the Mafs view.
+ * Use if you do not need/want to use the hook in `use-transform.ts`.
+ */
+const MafsCssTransformWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("g", {
+  style: {
+    transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
+  }
+}, children);
+
+const _excluded$2 = ["children"];
+const TextLabel = _ref => {
+  let {
+      children
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(Text$1, _extends({
+    size: 16,
+    svgTextProps: {
+      filter: "url(#background)",
+      fontWeight: "bold"
+    }
+  }, rest), children);
+};
+const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+  id: "background",
+  x: "-5%",
+  width: "110%",
+  y: "0%",
+  height: "100%"
+}, /*#__PURE__*/React__default.createElement("feFlood", {
+  floodColor: "#FFF",
+  floodOpacity: "0.64"
+}), /*#__PURE__*/React__default.createElement("feComposite", {
+  operator: "over",
+  in: "SourceGraphic"
+})));
+
 const Angle = ({
   centerPoint,
   endPoints,
   range,
-  polygonPoints,
+  polygonLines,
   showAngles
 }) => {
   const [centerX, centerY] = centerPoint;
@@ -28547,7 +28619,7 @@ const Angle = ({
   // Used to calculate the inside of the angle and to create square
   const [x3, y3] = vec.add(centerPoint, vec.add(vec.sub([x1, y1], centerPoint), vec.sub([x2, y2], centerPoint)));
   if (!showAngles) {
-    return isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleArc, {
+    return isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
       start: [x1, y1],
       vertex: [x2, y2],
       end: [x3, y3]
@@ -28555,13 +28627,13 @@ const Angle = ({
   }
 
   // Midpoint betwen ends of arc
-  const isInside = shouldDrawArcInside([x3, y3], centerPoint, range, polygonPoints);
-  const largeArcFlag = isInside ? 1 : 0;
-  const sweepFlag = isInside ? 1 : 0;
+  const isOutside = shouldDrawArcOutside([x3, y3], centerPoint, range, polygonLines);
+  const largeArcFlag = isOutside ? 1 : 0;
+  const sweepFlag = isOutside ? 1 : 0;
   const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
   let angleInDegrees = angle * (180 / Math.PI);
   // If we have triggered "largArcFlag", the angle should be greater than 180
-  if (isInside) {
+  if (isOutside) {
     angleInDegrees = 360 - angleInDegrees;
   }
   const angleLabelNumber = parseFloat(angleInDegrees.toFixed(1));
@@ -28578,80 +28650,54 @@ const Angle = ({
   }), /*#__PURE__*/React.createElement("feComposite", {
     operator: "over",
     in: "SourceGraphic"
-  }))), !isInside && isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleArc, {
+  }))), !isOutside && isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
     start: [x1, y1],
     vertex: [x2, y2],
     end: [x3, y3]
-  }) : /*#__PURE__*/React.createElement("g", {
-    style: {
-      transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
-    }
-  }, /*#__PURE__*/React.createElement("path", {
+  }) : /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
     d: arc,
     strokeWidth: 0.02,
     fill: "none"
-  })), /*#__PURE__*/React.createElement(Text$1, {
+  })), /*#__PURE__*/React.createElement(TextLabel, {
     x: x3,
     y: y3,
-    size: 15,
-    svgTextProps: {
-      filter: "url(#background)",
-      fontWeight: "bold"
-    }
-    // Shift position if text is too close to movable point
-    ,
     attach: y3 - centerY > 0 ? "s" : "n",
     attachDistance: Math.abs(y3 - centerY) < 0.2 || vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
   }, angleLabel, "\xB0"));
 };
-const RightAngleArc = ({
+
+/**
+ * This is broken out into its own component so that it can be used for an early return
+ * (see line 55 or https://github.com/Khan/perseus/blob/84bbd882b11d16871e1b813a0b901f3b903d5479/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle.tsx#L53-L57)
+ */
+const RightAngleSquare = ({
   start: [x1, y1],
   vertex: [x2, y2],
   end: [x3, y3]
-}) => /*#__PURE__*/React.createElement("g", {
-  style: {
-    transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
-  }
-}, /*#__PURE__*/React.createElement("path", {
+}) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
   d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
   strokeWidth: 0.02,
   fill: "none"
 }));
 const isRightAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
-const shouldDrawArcInside = (midPoint, vertex, range, polygonPoints) => {
-  const rangeIntersectionPoint = getRayIntersectionCoords(vertex, midPoint, range);
-  const lines = getLines(polygonPoints);
-  let lineIntersections = 0;
-  lines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersections++);
-
-  // The intersection check will sometimes return false if it intersects with
-  // another vertex, so in the case we get 0 intersections, we check for points.
-  if (lineIntersections === 0) {
-    // find point in array
-    const midpointIndex = polygonPoints.findIndex(([x, y]) => x === midPoint[0] && y === midPoint[1]);
-    // get array sans point and adjacent points
-    const [prev, next] = [(midpointIndex - 1 + polygonPoints.length) % polygonPoints.length, (midpointIndex + 1) % polygonPoints.length];
-    const [[lineAx, lineAy], [lineBx, lineBy]] = [midPoint, rangeIntersectionPoint];
-    for (let i = 0; i < polygonPoints.length; i++) {
-      if ([prev, midpointIndex, next].includes(i)) {
-        continue;
-      }
-      const [x, y] = polygonPoints[i];
-      const intersectsPoint = (y - lineAy) * (lineBx - lineAx) === (lineBy - lineAy) * (x - lineAx);
-      if (intersectsPoint) {
-        return false;
-      }
-    }
-    return true;
-  }
+
+/**
+ * Determines if an angle is an inside (false) or outside (true) angle.
+ * They way, we know to flip the `largeArc` and `sweepArc` flags.
+ * Uses the priciple that a ray from a point inside a polygon will intersect
+ * with an odd number of lines, while a ray from a point outside the polygon
+ * will intersect with an even number of lines.
+ * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
+ */
+const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
+  // Create a ray from the midpoint (inside angle) to the edge of the range
+  const rangeIntersectionPoint = getRayIntersectionCoords(midpoint, vertex, range);
+  let lineIntersectionCount = 0;
+  polygonLines.forEach(line => linesIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
 
   // If the number of intersections is even, the angle is inside the polygon
-  return isEven(lineIntersections);
+  return !isEven(lineIntersectionCount);
 };
-const getLines = points => points.map((point, i) => {
-  const next = points[(i + 1) % points.length];
-  return [point, next];
-});
 
 // https://stackoverflow.com/a/24392281/7347484
 // The "intersects" function in geometry doesn't seem to work for this use case
@@ -28678,6 +28724,7 @@ const PolygonGraph = props => {
     coords,
     type,
     showAngles,
+    showSides,
     range
   } = props.graphState;
   const points = coords != null ? coords : [[0, 0]];
@@ -28696,6 +28743,7 @@ const PolygonGraph = props => {
     constrain: p => p
   });
   const active = hovered || focused || dragging;
+  const lines = getLines(points);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
@@ -28714,9 +28762,17 @@ const PolygonGraph = props => {
       endPoints: [pt1, pt2],
       active: active,
       range: range,
-      polygonPoints: points,
+      polygonLines: lines,
       showAngles: !!showAngles
     });
+  }), showSides && lines.map(([start, end], i) => {
+    const [x, y] = vec.midpoint(start, end);
+    const length = parseFloat(vec.dist(start, end).toFixed(1));
+    return /*#__PURE__*/React.createElement(TextLabel, {
+      key: "side-" + i,
+      x: x,
+      y: y
+    }, !Number.isInteger(length) && "≈ ", length);
   }), /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "transparent",
@@ -28736,11 +28792,73 @@ const PolygonGraph = props => {
   }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
     point: point,
-    onMove: destination => dispatch(moveControlPoint(i, destination)),
+    onMove: destination => dispatch(movePoint(i, destination)),
     "data-testid": type + i
   })));
 };
 
+function PointGraph(props) {
+  const {
+    dispatch
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(movePoint(i, destination))
+  })));
+}
+
+const GraphStateContext = /*#__PURE__*/createContext({
+  state: {},
+  dispatch: () => {}
+});
+function useGraphState() {
+  return React__default.useContext(GraphStateContext);
+}
+
+function Arrow(props) {
+  const {
+    userTransform,
+    viewTransform
+  } = useTransformContext();
+  const point = [props.x, props.y];
+  const userTransformedPoint = vec.transform(point, userTransform);
+  const viewTransformedPoint = vec.transform(userTransformedPoint, viewTransform);
+  return /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${viewTransformedPoint[0]} ${viewTransformedPoint[1]}) rotate(${props.rotate}) scale(1.25)`
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-1)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4",
+    fill: "none"
+  })));
+}
+function AxisArrows() {
+  const {
+    state
+  } = useGraphState();
+  const range = state.range;
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Arrow, {
+    x: xMax,
+    y: 0,
+    rotate: 0
+  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    x: 0,
+    y: yMin,
+    rotate: 90
+  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    x: xMin,
+    y: 0,
+    rotate: 180
+  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    x: 0,
+    y: yMax,
+    rotate: 270
+  }));
+}
+
 const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
 const axisOptions = (props, index) => ({
   axis: props.markings === "graph",
@@ -28748,10 +28866,10 @@ const axisOptions = (props, index) => ({
   subdivisions: props.step[index] / props.gridStep[index],
   labels: n => renderLineLabel(n, props.range[index]) ? n : ""
 });
-const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
+const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
   xAxis: axisOptions(props, 0),
   yAxis: axisOptions(props, 1)
-});
+}), props.markings === "graph" && /*#__PURE__*/React.createElement(AxisArrows, null));
 
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
@@ -29448,22 +29566,32 @@ const LegacyGrid = ({
   return null;
 };
 
-/** Determine if coords is type CollinearTuple[] */
-const isCollinearTuples = coords => Array.isArray(coords[0][0]);
-
-// Generic type makes returned state match input state
 function interactiveGraphReducer(state, action) {
+  switch (action.type) {
+    case MOVE_CONTROL_POINT:
+      return doMoveControlPoint(state, action);
+    case MOVE_LINE:
+      return doMoveLine(state, action);
+    case MOVE_ALL:
+      return doMoveAll(state, action);
+    case MOVE_POINT:
+      return doMovePoint(state, action);
+    default:
+      throw new UnreachableCaseError(action);
+  }
+}
+function doMoveControlPoint(state, action) {
   const {
     snapStep,
     range
   } = state;
-  if (!state.coords) {
-    throw new Error("Graph state must have been initialized with coords");
-  }
-  switch (action.type) {
-    case MOVE_CONTROL_POINT:
+  switch (state.type) {
+    case "segment":
+    case "linear":
+    case "linear-system":
+    case "ray":
       {
-        const newCoords = action.itemIndex !== undefined && state.coords && isCollinearTuples(state.coords) ? updateAtIndex({
+        const newCoords = updateAtIndex({
           array: state.coords,
           index: action.itemIndex,
           update: tuple => setAtIndex({
@@ -29478,23 +29606,9 @@ function interactiveGraphReducer(state, action) {
               })
             })
           })
-        }) : setAtIndex({
-          array: state.coords,
-          index: action.pointIndex,
-          newValue: snap({
-            snapStep,
-            point: bound$1({
-              snapStep,
-              range,
-              point: action.destination
-            })
-          })
         });
-
-        // Cannot type narrow both conditions within function parameters,
-        // so this may seem redundant, but it's necessary for type safety.
-        const coordsToCheck = isCollinearTuples(newCoords) && action.itemIndex !== undefined ? newCoords[action.itemIndex] : newCoords;
-        if (!isCollinearTuples(coordsToCheck) && coordsOverlap(coordsToCheck)) {
+        const coordsToCheck = newCoords[action.itemIndex];
+        if (coordsOverlap(coordsToCheck)) {
           return state;
         }
         return _extends({}, state, {
@@ -29502,16 +29616,30 @@ function interactiveGraphReducer(state, action) {
           coords: newCoords
         });
       }
-    case MOVE_LINE:
+    case "circle":
+      throw new Error("FIXME implement circle reducer");
+    case "point":
+    case "polygon":
+      throw new Error(`Don't use moveControlPoint for ${state.type} graphs. Use movePoint instead!`);
+    default:
+      throw new UnreachableCaseError(state);
+  }
+}
+function doMoveLine(state, action) {
+  const {
+    snapStep,
+    range
+  } = state;
+  switch (state.type) {
+    case "segment":
+    case "linear":
+    case "linear-system":
+    case "ray":
       {
-        var _state$coords;
-        if (!isCollinearTuples(state.coords)) {
-          throw new Error("Cannot call this action unless coords is array of CollinearTuple.");
-        }
         if (action.itemIndex === undefined) {
           throw new Error("Please provide index of line to move");
         }
-        const currentLine = (_state$coords = state.coords) == null ? void 0 : _state$coords[action.itemIndex];
+        const currentLine = state.coords[action.itemIndex];
         if (!currentLine) {
           throw new Error("No line to move");
         }
@@ -29532,15 +29660,25 @@ function interactiveGraphReducer(state, action) {
           newValue: newLine
         });
         return _extends({}, state, {
+          type: state.type,
           hasBeenInteractedWith: true,
           coords: newCoords
         });
       }
-    case MOVE_ALL:
+    default:
+      // The MoveLine action doesn't make sense for other graph types;
+      // ignore it if it somehow happens
+      return state;
+  }
+}
+function doMoveAll(state, action) {
+  const {
+    snapStep,
+    range
+  } = state;
+  switch (state.type) {
+    case "polygon":
       {
-        if (isCollinearTuples(state.coords)) {
-          throw new Error("Cannot call this action unless coords is array of vectors.");
-        }
         const change = getChange(state.coords, action.delta, {
           snapStep,
           range
@@ -29555,7 +29693,33 @@ function interactiveGraphReducer(state, action) {
         });
       }
     default:
-      throw new UnreachableCaseError(action);
+      // MoveAll is not supported for other state types; just ignore it.
+      return state;
+  }
+}
+function doMovePoint(state, action) {
+  switch (state.type) {
+    case "point":
+    case "polygon":
+      {
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          coords: setAtIndex({
+            array: state.coords,
+            index: action.index,
+            newValue: snap({
+              snapStep: state.snapStep,
+              point: bound$1({
+                snapStep: state.snapStep,
+                range: state.range,
+                point: action.destination
+              })
+            })
+          })
+        });
+      }
+    default:
+      throw new Error("The movePoint action is only for point and polygon graphs");
   }
 }
 const getChange = (coords, delta, constraintOpts) => {
@@ -29636,7 +29800,7 @@ function clamp(value, min, max) {
 const coordsOverlap = coords => coords.some((coord, i) => coords.some((c, j) => i !== j && vector$1.equal(coord, c)));
 function updateAtIndex(args) {
   const {
-    array = [],
+    array,
     index,
     update
   } = args;
@@ -29649,13 +29813,12 @@ function updateAtIndex(args) {
 }
 function setAtIndex(args) {
   const {
-    array = [],
+    array,
     index,
     newValue
   } = args;
   const copy = [...array];
   copy[index] = newValue;
-  // restoring readonly to array
   return copy;
 }
 
@@ -29696,19 +29859,32 @@ function initializeGraphState(params) {
         })
       };
     case "polygon":
-      return _extends({
+      return {
+        type: "polygon",
         hasBeenInteractedWith: false,
         range,
-        snapStep
-      }, graph, {
+        snapStep,
+        showAngles: Boolean(graph.showAngles),
+        showSides: Boolean(graph.showSides),
         coords: getPolygonCoords({
           graph,
           range,
           step
         })
-      });
-    case "angle":
+      };
     case "point":
+      return {
+        type: graph.type,
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        coords: getDefaultPoints({
+          graph,
+          step,
+          range
+        })
+      };
+    case "angle":
     case "circle":
     case "sinusoid":
     case "quadratic":
@@ -29717,34 +29893,86 @@ function initializeGraphState(params) {
       throw new UnreachableCaseError(graph);
   }
 }
+const getDefaultPoints = ({
+  graph,
+  range,
+  step
+}) => {
+  var _graph$coords;
+  const numPoints = graph.numPoints || 1;
+  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
+  if (coords) {
+    return coords;
+  }
+  switch (numPoints) {
+    case 1:
+      // Back in the day, one point's coords were in graph.coord
+      coords = [graph.coord || [0, 0]];
+      break;
+    case 2:
+      coords = [[-5, 0], [5, 0]];
+      break;
+    case 3:
+      coords = [[-5, 0], [0, 0], [5, 0]];
+      break;
+    case 4:
+      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
+      break;
+    case 5:
+      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
+      break;
+    case 6:
+      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
+      break;
+    default:
+      coords = [];
+      break;
+  }
+  // Transform coords from their -10 to 10 space to 0 to 1
+  // because of the old graph.coord, and also it's easier.
+  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  return normalizePoints(range, step, newCoords);
+};
 
 // TS v4 doesn't narrow return types, while v5 does.
 // Instead of updating to v5, using generic type to relate input and output types.
 function getGradableGraph(state, initialGraph) {
-  var _state$coords;
   if (!state.hasBeenInteractedWith) {
-    return initialGraph;
+    return {
+      type: initialGraph.type
+    };
   }
-  switch (true) {
-    // coords: Array of CollinearTuple
-    case state.type === "linear-system" && initialGraph.type === "linear-system":
-    case state.type === "segment" && initialGraph.type === "segment":
-      return _extends({}, initialGraph, {
-        coords: state.coords
-      });
-    // coords: CollinearTuple
-    case state.type === "linear" && initialGraph.type === "linear":
-    case state.type === "ray" && initialGraph.type === "ray":
-      return _extends({}, initialGraph, {
-        coords: (_state$coords = state.coords) == null ? void 0 : _state$coords[0]
-      });
-    case state.type === "polygon" && initialGraph.type === "polygon":
-      return _extends({}, initialGraph, {
-        coords: state.coords
-      });
-    default:
-      throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "segment" && initialGraph.type === "segment") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "linear" && initialGraph.type === "linear") {
+    return _extends({}, initialGraph, {
+      coords: state.coords[0]
+    });
+  }
+  if (state.type === "ray" && initialGraph.type === "ray") {
+    return _extends({}, initialGraph, {
+      coords: state.coords[0]
+    });
+  }
+  if (state.type === "polygon" && initialGraph.type === "polygon") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "point" && initialGraph.type === "point") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
   }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
 const getDefaultSegments = ({
   graph,
@@ -29781,10 +30009,10 @@ const getLineCoords = ({
   range,
   step
 }) => {
-  var _graph$coords;
+  var _graph$coords2;
   return (
     // Return two lines for a linear system, one for a ray or linear
-    ((_graph$coords = graph.coords) != null ? _graph$coords : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
+    ((_graph$coords2 = graph.coords) != null ? _graph$coords2 : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
   );
 };
 const getPolygonCoords = ({
@@ -29792,7 +30020,8 @@ const getPolygonCoords = ({
   range,
   step
 }) => {
-  let coords = graph.coords;
+  var _graph$coords3;
+  let coords = (_graph$coords3 = graph.coords) == null ? void 0 : _graph$coords3.slice();
   if (coords) {
     return coords;
   }
@@ -29846,6 +30075,13 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "point":
+      return /*#__PURE__*/React.createElement(PointGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "circle":
+      throw new Error("the circle graph type is not yet implemented");
     default:
       return new UnreachableCaseError(type);
   }
@@ -29853,10 +30089,24 @@ const renderGraph = props => {
 const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [width, height] = props.box;
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
+  const prevState = useRef(state);
+  useEffect(() => {
+    if (prevState.current !== state) {
+      props.onChange({
+        graph: state
+      });
+    }
+    prevState.current = state;
+  }, [props, state]);
   React.useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
   }));
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(GraphStateContext.Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
       width,
       height,
@@ -29882,12 +30132,12 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, /*#__PURE__*/React.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+  }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures
   }), renderGraph({
     state,
     dispatch
-  }))));
+  })))));
 });
 
 const {
@@ -31024,6 +31274,7 @@ class LegacyInteractiveGraph extends React.Component {
       $(this.angle).on("move", () => {
         var _this$angle;
         this.onChange({
+          // @ts-expect-error Type '{ coords: any; type: "angle"; showAngles?: boolean | undefined; allowReflexAngles?: boolean | undefined; angleOffsetDeg?: number | undefined; snapDegrees?: number | undefined; match?: "congruent" | undefined; }' is not assignable to type 'InteractiveGraphState | undefined'.
           graph: _extends({}, graph, {
             coords: (_this$angle = this.angle) == null ? void 0 : _this$angle.getClockwiseCoords()
           })
@@ -31536,18 +31787,18 @@ class InteractiveGraph extends React.Component {
     const angle = GraphUtils.findAngle(coords[2], coords[0], coords[1]);
     return angle.toFixed(0) + "\u00B0 angle" + " at (" + coords[1].join(", ") + ")";
   }
-  static validate(
-  // TODO(kevinb): rename state to userInput
-  // state === userInput
-  state, rubric, component) {
+  static validate(userInput, rubric, component) {
     // When nothing has moved, there will neither be coords nor the
     // circle's center/radius fields. When those fields are absent, skip
     // all these checks; just go mark the answer as empty.
-    // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'center' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
-    const hasValue = !!(state.coords || state.center && state.radius);
-    if (state.type === rubric.correct.type && hasValue) {
-      if (state.type === "linear" && rubric.correct.type === "linear" && state.coords != null) {
-        const guess = state.coords;
+    const hasValue = Boolean(
+    // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
+    userInput.coords ||
+    // @ts-expect-error - TS2339 - Property 'center' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
+    userInput.center && userInput.radius);
+    if (userInput.type === rubric.correct.type && hasValue) {
+      if (userInput.type === "linear" && rubric.correct.type === "linear" && userInput.coords != null) {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
 
         // If both of the guess points are on the correct line, it's
@@ -31564,8 +31815,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "linear-system" && rubric.correct.type === "linear-system" && state.coords != null) {
-        const guess = state.coords;
+      } else if (userInput.type === "linear-system" && rubric.correct.type === "linear-system" && userInput.coords != null) {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
         if (collinear(correct[0][0], correct[0][1], guess[0][0]) && collinear(correct[0][0], correct[0][1], guess[0][1]) && collinear(correct[1][0], correct[1][1], guess[1][0]) && collinear(correct[1][0], correct[1][1], guess[1][1]) || collinear(correct[0][0], correct[0][1], guess[1][0]) && collinear(correct[0][0], correct[0][1], guess[1][1]) && collinear(correct[1][0], correct[1][1], guess[0][0]) && collinear(correct[1][0], correct[1][1], guess[0][1])) {
           return {
@@ -31575,9 +31826,9 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "quadratic" && rubric.correct.type === "quadratic" && state.coords != null) {
+      } else if (userInput.type === "quadratic" && rubric.correct.type === "quadratic" && userInput.coords != null) {
         // If the parabola coefficients match, it's correct.
-        const guessCoeffs = this.getQuadraticCoefficients(state.coords);
+        const guessCoeffs = this.getQuadraticCoefficients(userInput.coords);
         const correctCoeffs = this.getQuadraticCoefficients(
         // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
         rubric.correct.coords);
@@ -31589,8 +31840,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "sinusoid" && rubric.correct.type === "sinusoid" && state.coords != null) {
-        const guessCoeffs = this.getSinusoidCoefficients(state.coords);
+      } else if (userInput.type === "sinusoid" && rubric.correct.type === "sinusoid" && userInput.coords != null) {
+        const guessCoeffs = this.getSinusoidCoefficients(userInput.coords);
         const correctCoeffs = this.getSinusoidCoefficients(
         // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
         rubric.correct.coords);
@@ -31605,8 +31856,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "circle" && rubric.correct.type === "circle") {
-        if (deepEq$1(state.center, rubric.correct.center) && eq(state.radius, rubric.correct.radius)) {
+      } else if (userInput.type === "circle" && rubric.correct.type === "circle") {
+        if (deepEq$1(userInput.center, rubric.correct.center) && eq(userInput.radius, rubric.correct.radius)) {
           return {
             type: "points",
             earned: 1,
@@ -31614,10 +31865,9 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "point" && rubric.correct.type === "point" && state.coords != null) {
-        var _state$coords;
+      } else if (userInput.type === "point" && rubric.correct.type === "point" && userInput.coords != null) {
         let correct = InteractiveGraph.getPointCoords(rubric.correct, component);
-        const guess = (_state$coords = state.coords) == null ? void 0 : _state$coords.slice();
+        const guess = userInput.coords.slice();
         correct = correct.slice();
         // Everything's already rounded so we shouldn't need to do an
         // eq() comparison but _.isEqual(0, -0) is false, so we'll use
@@ -31634,9 +31884,9 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "polygon" && rubric.correct.type === "polygon" && state.coords != null) {
-        var _state$coords2, _rubric$correct$coord;
-        const guess = (_state$coords2 = state.coords) == null ? void 0 : _state$coords2.slice();
+      } else if (userInput.type === "polygon" && rubric.correct.type === "polygon" && userInput.coords != null) {
+        var _userInput$coords, _rubric$correct$coord;
+        const guess = (_userInput$coords = userInput.coords) == null ? void 0 : _userInput$coords.slice();
         // @ts-expect-error - TS2322 - Type 'Coord[] | undefined' is not assignable to type 'Coord[]'.
         const correct = (_rubric$correct$coord = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord.slice();
         let match;
@@ -31660,9 +31910,9 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "segment" && rubric.correct.type === "segment" && state.coords != null) {
+      } else if (userInput.type === "segment" && rubric.correct.type === "segment" && userInput.coords != null) {
         var _rubric$correct$coord2;
-        let guess = state.coords.slice();
+        let guess = userInput.coords.slice();
         let correct = (_rubric$correct$coord2 = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord2.slice();
         guess = _.invoke(guess, "sort").sort();
         // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
@@ -31675,8 +31925,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "ray" && rubric.correct.type === "ray" && state.coords != null) {
-        const guess = state.coords;
+      } else if (userInput.type === "ray" && rubric.correct.type === "ray" && userInput.coords != null) {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
         if (
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
@@ -31690,8 +31940,8 @@ class InteractiveGraph extends React.Component {
             message: null
           };
         }
-      } else if (state.type === "angle" && rubric.correct.type === "angle") {
-        const guess = state.coords;
+      } else if (userInput.type === "angle" && rubric.correct.type === "angle") {
+        const guess = userInput.coords;
         const correct = rubric.correct.coords;
         let match;
         if (rubric.correct.match === "congruent") {
@@ -31730,7 +31980,7 @@ class InteractiveGraph extends React.Component {
 
     // The input wasn't correct, so check if it's a blank input or if it's
     // actually just wrong
-    if (!hasValue || _.isEqual(state, rubric.graph)) {
+    if (!hasValue || _.isEqual(userInput, rubric.graph)) {
       // We're where we started.
       return {
         type: "invalid",
@@ -41931,7 +42181,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.8.1";
+const libVersion = "21.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44183,6 +44433,140 @@ const registerAllWidgetsForTesting = () => {
   replaceDeprecatedWidgets();
 };
 
+// These are all the current widgets that require user-input and are supported for automatic scoring
+const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
+
+/**
+ * Regex for widget placeholders in a string.
+ *
+ * First capture group is the widget ID (ex. 'radio 1')
+ * Second capture group is the widget type (ex. "radio)
+ * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
+ */
+function getWidgetRegex() {
+  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
+}
+
+/**
+ * Add a widget placeholder using the widget ID.
+ * ex. addWidget("radio 1") => "[[☃ radio 1]]"
+ *
+ * @param {string} id
+ * @returns {string}
+ */
+function addWidget(id) {
+  return `[[☃ ${id}]]`;
+}
+
+/**
+ * Get a widget type by a widget's ID
+ * (please don't derive type from ID)
+ *
+ * @param {string} widgetId the ID of the widget
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {string} the widget type (ie "radio")
+ */
+function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
+  var _widget$type;
+  const widget = widgetMap[WidgetId];
+  return (_widget$type = widget == null ? void 0 : widget.type) != null ? _widget$type : null;
+}
+
+/**
+ * Does the content have a specific type of widget?
+ *
+ * @param {string} type the type of the widget in question (ie "radio")
+ * @param {string} content the string to search through
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {boolean} if the content includes the widget type
+ */
+function contentHasWidgetType(type, content, widgetMap) {
+  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
+}
+
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {ReadonlyArray<string>} widgetIds
+ */
+function getWidgetIdsFromContent(content) {
+  const widgets = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    widgets.push(match[1]);
+    match = localWidgetRegex.exec(content);
+  }
+  return widgets;
+}
+
+/**
+ * Get a list of widget IDs from content,
+ * but only for specific widget types
+ *
+ * @param {string} type the type of widget (ie "radio")
+ * @param {string} content the string to parse
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {ReadonlyArray<string>} the widget type (ie "radio")
+ */
+function getWidgetIdsFromContentByType(type, content, widgetMap) {
+  const rv = [];
+  const widgetIdsInContent = getWidgetIdsFromContent(content);
+  widgetIdsInContent.forEach(widgetId => {
+    const widget = widgetMap[widgetId];
+    if ((widget == null ? void 0 : widget.type) === type) {
+      rv.push(widgetId);
+    }
+  });
+  return rv;
+}
+
+/**
+ * Pull the widget map out of ItemData
+ *
+ * @param {PerseusItem} PerseusItem containing a widgetMap
+ * @returns {WidgetMap} the widget map in the PerseusItem
+ */
+function getWidgetsMapFromItemData(itemData) {
+  return itemData.question.widgets;
+}
+
+/**
+ * Get the widget information from a WidgetMap
+ *
+ * @param {string} widgetId the ID of the widget
+ * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
+ */
+function getWidgetFromWidgetMap(widgetId, widgetMap) {
+  var _widgetMap$widgetId;
+  return (_widgetMap$widgetId = widgetMap[widgetId]) != null ? _widgetMap$widgetId : null;
+}
+
+/**
+ * Get select widgets from a widget map.
+ * Useful for multi-items that needs to split
+ * one PerseusItem into several
+ *
+ * @param {ReadonlyArray<string>} widgetIds to extract
+ * @param {PerseusWidgetsMap} widgetMap to extract from
+ * @return {PerseusWidgetsMap} a new widget map with requested widgets
+ */
+function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
+  const widgets = {};
+  widgetIds.forEach(widgetId => {
+    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
+    if (widget) {
+      widgets[widgetId] = widget;
+    }
+  });
+  return widgets;
+}
+
 /**
  * This function extracts the answers from the widgets.
  *
@@ -44307,7 +44691,7 @@ function getAnswersFromWidgets(widgets) {
         // E.g. 'item 1\nitem 2\nitem 3'
         const orderer = widget;
         if ((_orderer$options = orderer.options) != null && _orderer$options.correctOptions) {
-          answers.push(orderer.options.correctOptions.map(option => option.content).join("\n"));
+          answers.push(joinOptionContents(orderer.options.correctOptions));
         }
         break;
       case "sorter":
@@ -44366,6 +44750,28 @@ function getAnswersFromWidgets(widgets) {
   return answers;
 }
 
+/**
+ * Join the content of the options together.
+ * @param {Array<{content: string}>} options
+ * @returns {string}
+ */
+const joinOptionContents = options => options.map(({
+  content
+}) => content).join("\n");
+
+/**
+ * Convert an index to an option letter.
+ * @param {number} index
+ * @returns {string}
+ * @example
+ * toOptionLetter(0) // 'A'
+ * toOptionLetter(1) // 'B'
+ * toOptionLetter(25) // 'Z'
+ * // Once the index goes past 25, it will start returning special characters
+ * toOptionLetter(26) // '['
+ */
+const toOptionLetter = index => String.fromCharCode("A".charCodeAt(0) + index);
+
 /**
  * Inject a string equivalent of the widgets into the content.
  *
@@ -44376,7 +44782,7 @@ function getAnswersFromWidgets(widgets) {
  * @param {PerseusRenderer["widgets"]} widgets
  * @returns
  */
-function injectWidgets(content, widgets) {
+function injectWidgets(content, widgets, widgetProps) {
   // The types for taskProgress.itemData are not well defined,
   // so there is a chance that widgets or content could be undefined.
   // In that scenario, simply exit early and return the content as is.
@@ -44396,12 +44802,20 @@ function injectWidgets(content, widgets) {
     switch (widget.type) {
       case "radio":
         // Replace radio with the radio options
-        // '[[☃ Radio 1]]' -> 'option 1\noption 2\noption 3'
+        // '[[☃ Radio 1]]' -> 'choice 1\nchoice 2\nchoice 3'
+        // or if the current widget state is available with proper order,
+        // '[[☃ Radio 1]]' ->
+        //   'Option A: choice 1\nOption B: choice 2\nOption C: choice 3'
         const radio = widget;
+        const radioProps = widgetProps == null ? void 0 : widgetProps[widgetID];
         if ((_radio$options = radio.options) != null && (_radio$options = _radio$options.choices) != null && _radio$options.length) {
           var _radio$options2;
-          let radioContext = radio.options.choices.map(choice => choice.content).join("\n");
-          if ((_radio$options2 = radio.options) != null && _radio$options2.randomize) {
+          let radioContext = joinOptionContents(radioProps ? radioProps.choices.map(({
+            content
+          }, i) => ({
+            content: `Option ${toOptionLetter(i)}: ${content}`
+          })) : radio.options.choices);
+          if (!radioProps && (_radio$options2 = radio.options) != null && _radio$options2.randomize) {
             radioContext += "\nThose options are displayed in a different order to the user. If the user says the letter, number, or ordinal number, always ask them clarify which option they are referring to.\n";
           }
           context = context.replace(`[[☃ ${widgetID}]]`, radioContext);
@@ -44510,7 +44924,7 @@ function injectWidgets(content, widgets) {
         // '[[☃ Orderer 1]]' -> 'option 1\noption 2\noption 3'
         const orderer = widget;
         if ((_orderer$options2 = orderer.options) != null && _orderer$options2.options) {
-          context = context.replace(`[[☃ ${widgetID}]]`, orderer.options.options.map(option => option.content).join("\n"));
+          context = context.replace(`[[☃ ${widgetID}]]`, joinOptionContents(orderer.options.options));
         }
         break;
       case "sorter":
@@ -44593,18 +45007,15 @@ const INDIVIDUAL_ANSWER_WIDGETS = ["interactive-graph", "categorizer", "grapher"
 
 /* Widgets that are supported for automatic scoring */
 const SUPPORTED_WIDGETS = ["radio", "numeric-input", "input-number", "expression", ...INDIVIDUAL_ANSWER_WIDGETS];
-const getWidgetTypeFromWidgetKey = widgetKey => {
-  return widgetKey.split(" ")[0];
-};
 
 /* Verify if the perseus item has supported widgets for automatic scoring */
-const isWrongAnswerSupported = widgetKeys => {
-  return widgetKeys.length !== 0 && widgetKeys.every(widgetKey => SUPPORTED_WIDGETS.includes(getWidgetTypeFromWidgetKey(widgetKey)));
+const isWrongAnswerSupported = (widgetIds, widgetMap) => {
+  return widgetIds.length !== 0 && widgetIds.every(widgetId => SUPPORTED_WIDGETS.includes(getWidgetTypeByWidgetId(widgetId, widgetMap)));
 };
 
-/* Verify if the widget key has an individual answer for the coach report view  */
-const shouldHaveIndividualAnswer = widgetKey => {
-  return INDIVIDUAL_ANSWER_WIDGETS.includes(getWidgetTypeFromWidgetKey(widgetKey));
+/* Verify if the widget ID has an individual answer for the coach report view  */
+const shouldHaveIndividualAnswer = (widgetId, widgetMap) => {
+  return INDIVIDUAL_ANSWER_WIDGETS.includes(getWidgetTypeByWidgetId(widgetId, widgetMap));
 };
 
 /* Returns the answer userInput submission for currently supported widgets */
@@ -44623,29 +45034,30 @@ const getAnswerFromUserInput = (widgetType, userInput) => {
   return userInput;
 };
 
-/* Returns the correct answer for a given widget key and Perseus Item */
+/* Returns the correct answer for a given widget ID and Perseus Item */
 // TODO (LEMS-1835): We should fix the resonse type from getWidget to be specific.
 // TODO (LEMS-1836): We should also consider adding the getOneCorrectAnswerFromRubric method to all widgets.
-const getCorrectAnswerForWidgetKey = (widgetKey, itemData) => {
-  const rubric = itemData.question.widgets[widgetKey].options;
-  const widgetType = getWidgetTypeFromWidgetKey(widgetKey);
+const getCorrectAnswerForWidgetId = (widgetId, itemData) => {
+  const rubric = itemData.question.widgets[widgetId].options;
+  const widgetMap = getWidgetsMapFromItemData(itemData);
+  const widgetType = getWidgetTypeByWidgetId(widgetId, widgetMap);
   const widget = getWidget(widgetType);
 
   // @ts-expect-error - TS2339 - Property 'getOneCorrectAnswerFromRubric' does not exist on type 'ComponentType<any>'.
   return widget == null || widget.getOneCorrectAnswerFromRubric == null ? void 0 : widget.getOneCorrectAnswerFromRubric(rubric);
 };
 
-/* Verify if the widget key exists in the content string of the Perseus Item */
-const isWidgetKeyInContent = (perseusItem, widgetKey) => {
-  return perseusItem.question.content.indexOf(widgetKey) !== -1;
+/* Verify if the widget ID exists in the content string of the Perseus Item */
+const isWidgetIdInContent = (perseusItem, widgetId) => {
+  return perseusItem.question.content.indexOf(widgetId) !== -1;
 };
 
-/* Return an array of all the widget keys that exist in the content string of a Perseus Item */
-const getValidWidgetKeys = perseusItem => {
+/* Return an array of all the widget IDs that exist in the content string of a Perseus Item */
+const getValidWidgetIds = perseusItem => {
   const {
     widgets
   } = perseusItem.question;
-  return keys(widgets).filter(key => isWidgetKeyInContent(perseusItem, key));
+  return keys(widgets).filter(id => isWidgetIdInContent(perseusItem, id));
 };
 
 /**
@@ -44693,12 +45105,113 @@ const genericPerseusItemData = {
  * uses a basic Perseus object and updates it with custom values as needed.
  *
  * @param {Partial<PerseusItem>} customFields
- * @returns PerseusItem
+ * @returns {PerseusItem}
  */
 function generateTestPerseusItem(customFields = {}) {
   return _extends({}, genericPerseusItemData, customFields);
 }
 
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed RadioWidget
+ *
+ * @returns {RadioWidget} skeleton RadioWidget for testing
+ */
+function generateTestRadioWidget() {
+  return {
+    type: "radio",
+    options: {
+      choices: []
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed InteractiveGraphWidget
+ *
+ * @returns {InteractiveGraphWidget} skeleton InteractiveGraphWidget for testing
+ */
+function generateTestInteractiveGraphWidget() {
+  return {
+    type: "interactive-graph",
+    options: {
+      step: [1, 1],
+      gridStep: [1, 1],
+      snapStep: [1, 1],
+      markings: "graph",
+      labels: ["x", "y"],
+      showProtractor: false,
+      showRuler: false,
+      rulerLabel: "mm",
+      rulerTicks: 2,
+      range: [[-10, 10], [-10, 10]],
+      graph: {
+        type: "angle"
+      },
+      correct: {
+        type: "angle"
+      }
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed InteractiveGraphWidget
+ *
+ * @returns {InteractiveGraphWidget} skeleton InteractiveGraphWidget for testing
+ */
+function generateTestCategorizerWidget() {
+  return {
+    type: "categorizer",
+    options: {
+      items: [],
+      categories: [],
+      randomizeItems: false,
+      static: false,
+      values: []
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed ExpressionWidget
+ *
+ * @returns {ExpressionWidget} skeleton ExpressionWidget for testing
+ */
+function generateTestExpressionWidget() {
+  return {
+    type: "expression",
+    options: {
+      answerForms: [],
+      buttonSets: ["basic"],
+      functions: [],
+      times: false
+    }
+  };
+}
+
+/**
+ * Creates an object with the bare amount
+ * of data to be a properly typed NumericInputWidget
+ *
+ * @returns {NumericInputWidget} skeleton NumericInputWidget for testing
+ */
+function generateTestNumericInputWidget() {
+  return {
+    type: "numeric-input",
+    options: {
+      answers: [],
+      labelText: "",
+      size: "normal",
+      coefficient: false,
+      static: false
+    }
+  };
+}
+
 /**
  * Some helpers for CEDAR logging. CEDAR convention dictates
  * that enum values should be upper case. Ex: for the
@@ -44753,162 +45266,6 @@ function convertWidgetNameToEnum(name) {
   }
   return widgetEnum;
 }
-function getWidgetTypeFromWidgetId(widgetId) {
-  const [widgetType, widgetNumber] = widgetId.split(" ");
-  if (!widgetNumber) {
-    throw new Error(`Incorrect format for widget ID: ${widgetId}`);
-  }
-  if (!widgetNameToEnum[widgetType]) {
-    throw new Error(`Unknown widget type (${widgetType}) in widget ID: ${widgetId}`);
-  }
-  return widgetType;
-}
-
-let WidgetType = /*#__PURE__*/function (WidgetType) {
-  WidgetType["Categorizer"] = "categorizer";
-  WidgetType["CSProgram"] = "cs-program";
-  WidgetType["Definition"] = "definition";
-  WidgetType["Dropdown"] = "dropdown";
-  WidgetType["Explanation"] = "explanation";
-  WidgetType["Expression"] = "expression";
-  WidgetType["GradedGroup"] = "graded-group";
-  WidgetType["GradedGroupAnswerBar"] = "graded-group-answer-bar";
-  WidgetType["GradedGroupSet"] = "graded-group-set";
-  WidgetType["Grapher"] = "grapher";
-  WidgetType["Group"] = "group";
-  WidgetType["Iframe"] = "iframe";
-  WidgetType["Image"] = "image";
-  WidgetType["InputNumber"] = "input-number";
-  WidgetType["Interaction"] = "interaction";
-  WidgetType["InteractiveGraph"] = "interactive-graph";
-  WidgetType["InteractiveNumberLine"] = "interactive-number-line";
-  WidgetType["LabelImage"] = "label-image";
-  WidgetType["Matcher"] = "matcher";
-  WidgetType["Matrix"] = "matrix";
-  WidgetType["Measurer"] = "measurer";
-  WidgetType["Molecule"] = "molecule";
-  WidgetType["NumberLine"] = "number-line";
-  WidgetType["NumericInput"] = "numeric-input";
-  WidgetType["Orderer"] = "orderer";
-  WidgetType["Passage"] = "passage";
-  WidgetType["PassageRef"] = "passage-ref";
-  WidgetType["PassageRefTarget"] = "passage-ref-target";
-  WidgetType["Plotter"] = "plotter";
-  WidgetType["Protractor"] = "protractor";
-  WidgetType["PythonProgram"] = "python-program";
-  WidgetType["Radio"] = "radio";
-  WidgetType["Sorter"] = "sorter";
-  WidgetType["Table"] = "table";
-  WidgetType["Unit"] = "unit";
-  WidgetType["Video"] = "video";
-  WidgetType["VideoTranscriptLink"] = "video-transcript-link";
-  return WidgetType;
-}({});
-// These are all the current widgets that require user-input and are supported for automatic scoring
-const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
-
-/**
- * Regex for widget placeholders in a string.
- *
- * First capture group is the widget ID (ex. 'radio 1')
- * Second capture group is the widget type (ex. "radio)
- * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
- */
-function getWidgetRegex() {
-  return /\[\[☃ (([a-z-]+) \d+)\]\]/g;
-}
-
-/**
- * Add a widget placeholder using the widget ID.
- * ex. addWidget("radio 1") => "[[☃ radio 1]]"
- *
- * @param {string} id
- * @returns {string}
- */
-function addWidget(id) {
-  return `[[☃ ${id}]]`;
-}
-
-/**
- * Extract all widget IDs, which includes the widget type and instance number.
- * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns {Array<WidgetId>} widgets
- */
-function getAllWidgetIds(content) {
-  const widgets = [];
-  const localWidgetRegex = getWidgetRegex();
-  let match = localWidgetRegex.exec(content);
-  while (match !== null) {
-    widgets.push(match[1]);
-    match = localWidgetRegex.exec(content);
-  }
-  return widgets;
-}
-
-/**
- * Check if a specific widget is an actual widget type using its name.
- * The widget name should include a widget type, without an instance number,
- * as a string. ex. 'radio'
- *
- * @param {string} widgetName
- * @returns {boolean}
- */
-function isWidgetType(widgetName) {
-  return Object.values(WidgetType).includes(widgetName);
-}
-
-/**
- * Extract all widget types from a Perseus JSON content string.
- * This does not include the instance number and prevents duplicates.
- * example output: ['radio', 'categorizer']
- *
- * @param {string} content
- * @returns {Array<WidgetId>}
- */
-function getAllWidgetTypes(content) {
-  const widgetTypes = [];
-  const localWidgetRegex = getWidgetRegex();
-  let match = localWidgetRegex.exec(content);
-  while (match !== null) {
-    const matchType = match[2];
-    if (!widgetTypes.includes(matchType) && isWidgetType(matchType)) {
-      widgetTypes.push(matchType);
-    }
-    match = localWidgetRegex.exec(content);
-  }
-  return widgetTypes;
-}
-
-/**
- * Check if a specific widget is a question widget type using its ID.
- * The widget ID includes the widget type and the instance number.
- *
- * @param {WidgetId} widgetId
- * @returns {boolean}
- */
-function isQuestionWidgetType(widgetId) {
-  return QUESTION_WIDGETS.includes(widgetId.split(" ")[0]);
-}
-
-/**
- * Extract the widget IDs of all widgets considered question widgets. Widget IDs
- * include widget type and instance number.
- * example output: ['radio 1', 'categorizer 1']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns Array<WidgetId>
- */
-function getQuestionWidgetIds(content) {
-  return getAllWidgetIds(content).filter(isQuestionWidgetType);
-}
 
 const EditorJsonify = {
   serialize: function () {
@@ -44918,5 +45275,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, WidgetType, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, convertWidgetNameToEnum, displaySigFigs, generateTestPerseusItem, genericPerseusItemData, getAllWidgetIds, getAllWidgetTypes, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetKey, getQuestionWidgetIds, getValidWidgetKeys, getWidgetTypeFromWidgetId, getWidgetTypeFromWidgetKey, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetKeyInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAnswerFromUserInput, getAnswersFromWidgets, getCorrectAnswerForWidgetId, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map