@khanacademy/perseus 41.4.0 → 42.0.0

package/dist/es/index.js

@@ -241,9 +241,10 @@ const mockStrings = {
   removePoint: "Remove Point",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
   srPointAtCoordinates: ({
+    num,
     x,
     y
-  }) => `Point at ${x} comma ${y}`,
+  }) => `Point ${num} at ${x} comma ${y}`,
   srInteractiveElements: ({
     elements
   }) => `Interactive elements: ${elements}`,
@@ -2591,7 +2592,7 @@ const keypadConfigurationForProps = widgetOptions => {
     times: widgetOptions.times
   };
 };
-const propUpgrades$2 = {
+const propUpgrades$3 = {
   /* c8 ignore next */
   "1": v0props => ({
     times: v0props.times,
@@ -2651,7 +2652,7 @@ var Expression$1 = {
     major: 1,
     minor: 0
   },
-  propUpgrades: propUpgrades$2,
+  propUpgrades: propUpgrades$3,
   // For use by the editor
   isLintable: true,
   scorer: scoreExpression,
@@ -18673,6 +18674,140 @@ class QuestionParagraph extends React.Component {
   }
 }
 
+// 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;
+}
+
 const DEFAULT_ALIGNMENT$1 = "block";
 // NOTE(kevinb): "default" is not one in `validAlignments`.
 const DEFAULT_SUPPORTED_ALIGNMENTS = ["default"];
@@ -18723,6 +18858,9 @@ const replaceDeprecatedWidgets = () => {
   replaceWidget("sequence", "deprecated-standin");
   replaceWidget("simulator", "deprecated-standin");
   replaceWidget("unit-input", "deprecated-standin");
+
+  // Input-Number is a special case as it is being replaced by Numeric-Input
+  replaceWidget("input-number", "numeric-input");
 };
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
@@ -18757,6 +18895,11 @@ const replaceDeprecatedEditors = () => {
   replaceEditor("sequence", "deprecated-standin");
   replaceEditor("simulator", "deprecated-standin");
   replaceEditor("unit-input", "deprecated-standin");
+
+  // We're replacing the input-number editor with the numeric-input editor here,
+  // but we're also modifying the JSON content to convert input-number into the
+  // numeric-input format over in editor-page.tsx on line 92.
+  replaceEditor("input-number", "numeric-input");
 };
 const getWidget = name => {
   var _widgets$name;
@@ -18807,10 +18950,8 @@ const getVersionVector = () => {
 const getPublicWidgets = () => {
   // TODO(alex): Update underscore.js so that _.pick can take a function.
   // @ts-expect-error - TS2740 - Type 'Pick<{ [key: string]: Readonly<{ name: string; displayName: string; getWidget?: (() => ComponentType<any>) | undefined; accessible?: boolean | ((props: any) => boolean) | undefined; hidden?: boolean | undefined; ... 10 more ...; widget: ComponentType<...>; }>; }, string>' is missing the following properties from type 'readonly Readonly<{ name: string; displayName: string; getWidget?: (() => ComponentType<any>) | undefined; accessible?: boolean | ((props: any) => boolean) | undefined; hidden?: boolean | undefined; ... 10 more ...; widget: ComponentType<...>; }>[]': length, concat, join, slice, and 18 more.
-  return _.pick(widgets,
-  // @ts-expect-error - TS2345 - Argument of type '(name: string) => boolean | undefined' is not assignable to parameter of type 'Iteratee<string[], boolean, string>'.
-  _.reject(_.keys(widgets), function (name) {
-    return widgets[name].hidden;
+  return _.pick(widgets, _.reject(_.keys(widgets), function (name) {
+    return widgets[name].hidden || name === "input-number";
   }));
 };
 const isAccessible = widgetInfo => {
@@ -19128,6 +19269,20 @@ widgetIds, userInputMap, strings, locale) {
     }
   });
 }
+
+// TODO: combine scorePerseusItem with scoreWidgetsFunctional
+// once scorePerseusItem is the only one calling scoreWidgetsFunctional
+function scorePerseusItem(perseusRenderData, userInputMap,
+// TODO(LEMS-2461,LEMS-2391): these probably
+// need to be removed before we move this to the server
+strings, locale) {
+  // There seems to be a chance that PerseusRenderer.widgets might include
+  // widget data for widgets that are not in PerseusRenderer.content,
+  // so this checks that the widgets are being used before scoring them
+  const usedWidgetIds = getWidgetIdsFromContent(perseusRenderData.content);
+  const scores = scoreWidgetsFunctional(perseusRenderData.widgets, usedWidgetIds, userInputMap, strings, locale);
+  return Util.flattenScores(scores);
+}
 function scoreWidgetsFunctional(widgets,
 // This is a port of old code, I'm not sure why
 // we need widgetIds vs the keys of the widgets object
@@ -19148,7 +19303,7 @@ widgetIds, userInputMap, strings, locale) {
     const userInput = userInputMap[id];
     const scorer = getWidgetScorer(widget.type);
     if (widget.type === "group") {
-      const scores = scoreWidgetsFunctional(widget.options.widgets, Object.keys(widget.options.widgets), userInputMap[id], strings, locale);
+      const scores = scoreWidgetsFunctional(widget.options.widgets, getWidgetIdsFromContent(widget.options.content), userInputMap[id], strings, locale);
       widgetScores[id] = Util.flattenScores(scores);
     } else if (scorer) {
       widgetScores[id] = scorer(userInput, widget.options, strings, locale);
@@ -19980,7 +20135,7 @@ class Renderer extends React.Component {
         // Instead, we center them with css magic in styles.less
         // /cry(aria)
         this._foundTextNodes = true;
-        if (_.contains(this.widgetIds, node.id)) {
+        if (this.widgetIds.includes(node.id)) {
           // We don't want to render a duplicate widget key/ref,
           // as this causes problems with react (for obvious
           // reasons). Instead we just notify the
@@ -20284,7 +20439,7 @@ class Renderer extends React.Component {
     };
     this.getInputPaths = () => {
       const inputPaths = [];
-      _.each(this.widgetIds, widgetId => {
+      this.widgetIds.forEach(widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         if (widget && widget.getInputPaths) {
           // Grab all input paths and add widgetID to the front
@@ -20292,7 +20447,7 @@ class Renderer extends React.Component {
           // Prefix paths with their widgetID and add to collective
           // list of paths.
           // @ts-expect-error - TS2345 - Argument of type '(inputPath: string) => void' is not assignable to parameter of type 'CollectionIterator<FocusPath, void, readonly FocusPath[]>'.
-          _.each(widgetInputPaths, inputPath => {
+          widgetInputPaths.forEach(inputPath => {
             const relativeInputPath = [widgetId].concat(inputPath);
             inputPaths.push(relativeInputPath);
           });
@@ -20421,12 +20576,20 @@ class Renderer extends React.Component {
     this.getWidgetIds = () => {
       return this.widgetIds;
     };
+    /**
+     * @deprecated use scorePerseusItem
+     */
+    this.guessAndScore = () => {
+      const totalGuess = this.getUserInput();
+      const totalScore = this.score();
+      return [totalGuess, totalScore];
+    };
     this.examples = () => {
       const widgetIds = this.widgetIds;
-      const examples = _.compact(_.map(widgetIds, widgetId => {
+      const examples = widgetIds.map(widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         return widget != null && widget.examples ? widget.examples() : null;
-      }));
+      }).filter(Boolean);
 
       // no widgets with examples
       if (!examples.length) {
@@ -20681,27 +20844,15 @@ class Renderer extends React.Component {
   }
 
   /**
-   * Returns an object mapping from widget ID to perseus-style score.
-   * The keys of this object are the values of the array returned
-   * from `getWidgetIds`.
-   */
-  scoreWidgets() {
-    return scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
-  }
-
-  /**
-   * Grades the content.
+   * Scores the content.
+   *
+   * @deprecated use scorePerseusItem
    */
   score() {
-    const scores = this.scoreWidgets();
+    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
     const combinedScore = Util.flattenScores(scores);
     return combinedScore;
   }
-  guessAndScore() {
-    const totalGuess = this.getUserInput();
-    const totalScore = this.score();
-    return [totalGuess, totalScore];
-  }
   render() {
     const apiOptions = this.getApiOptions();
     if (this.reuseMarkdown) {
@@ -22150,7 +22301,7 @@ class NumericInput extends React.Component {
         height: "auto"
       }
     });
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputWithExamples, {
+    return /*#__PURE__*/React.createElement(InputWithExamples, {
       ref: ref => this.inputRef = ref,
       value: this.props.currentValue,
       onChange: this.handleChange,
@@ -22162,7 +22313,7 @@ class NumericInput extends React.Component {
       id: this.props.widgetId,
       disabled: this.props.apiOptions.readOnly,
       style: styles.input
-    }));
+    });
   }
 }
 
@@ -22231,13 +22382,67 @@ const propsTransform = function propsTransform(widgetOptions) {
   });
   return rendererProps;
 };
+
+// This function is being used to replace the input-number widget
+// with the numeric-input widget
+const propUpgrades$2 = {
+  /* c8 ignore next */
+  "1": initialProps => {
+    // If the initialProps has a value, it means we're upgrading from
+    // input-number to numeric-input. In this case, we need to upgrade
+    // the widget options accordingly.
+    if (initialProps.value) {
+      // If the answerType is not number or percent, we need to provide
+      // the answer form for the numeric-input widget
+      const provideAnswerForm = initialProps.answerType !== "number" && initialProps.answerType !== "percent";
+
+      // We need to determine the mathFormat for the numeric-input widget
+      const mathFormat = initialProps.answerType === "rational" ? "proper" // input-number uses "rational" for proper fractions
+      : initialProps.answerType; // Otherwise, we can use the answerType directly
+
+      // If adjusting this logic, also adjust the logic in the convertInputNumberWidgetOptions
+      // function in input-number.ts in the Perseus Editor package's util folder
+      const answers = [{
+        value: initialProps.value,
+        simplify: initialProps.simplify,
+        answerForms: provideAnswerForm ? [mathFormat] : undefined,
+        strict: initialProps.inexact,
+        // We only want to set maxError if the inexact prop is true
+        maxError: initialProps.inexact ? initialProps.maxError : 0,
+        status: "correct",
+        // Input-number only allows correct answers
+        message: ""
+      }];
+      return {
+        answers,
+        size: initialProps.size,
+        coefficient: false,
+        // input-number doesn't have a coefficient prop
+        labelText: "",
+        // input-number doesn't have a labelText prop
+        static: false,
+        // static is always false for numeric-input
+        rightAlign: initialProps.rightAlign || false
+      };
+    } else {
+      // Otherwise simply return the initialProps as there's no differences
+      // between v0 and v1 for numeric-input
+      return initialProps;
+    }
+  }
+};
 var NumericInput$1 = {
   name: "numeric-input",
   displayName: "Numeric input",
   defaultAlignment: "inline-block",
   accessible: true,
   widget: NumericInput,
+  version: {
+    major: 1,
+    minor: 0
+  },
   transform: propsTransform,
+  propUpgrades: propUpgrades$2,
   isLintable: true,
   scorer: scoreNumericInput,
   getOneCorrectAnswerFromRubric(rubric) {
@@ -29197,6 +29402,9 @@ class Group extends React.Component {
         this.change("widgets", this.rendererRef.props.widgets);
       }
     };
+
+    // TODO(LEMS-2391): replace this when there's a separate check
+    // for valid/invalid state
     const score = (_this$rendererRef12 = this.rendererRef) == null ? void 0 : _this$rendererRef12.score();
     const isValid = score && score.type !== "invalid";
     const isInvalid = score && score.type === "invalid";
@@ -31015,6 +31223,107 @@ function AxisArrows() {
   })));
 }
 
+/**
+ * 44 is touch best practice and AAA compliant for WCAG
+ * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+ */
+const TARGET_SIZE = 44;
+const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
+
+// same as pointsFromNormalized in interactive-graph.tsx
+const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
+// maps over [x, y]
+coords.map((coord, i) => {
+  const axisRange = range[i];
+  if (noSnap) {
+    return axisRange[MIN] + size(axisRange) * coord;
+  }
+  const axisStep = step[i];
+  const nSteps = Math.floor(size(axisRange) / axisStep);
+  const tick = Math.round(coord * nSteps);
+  return axisRange[MIN] + axisStep * tick;
+}));
+
+// same as normalizeCoords in interactive-graph.tsx
+const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
+  return (coord + ranges[i][1]) / size(ranges[i]);
+}));
+
+// Returns the closest point to the given `point` that is within the graph
+// bounds given in `state`.
+function bound$1({
+  snapStep,
+  range,
+  point
+}) {
+  const boundingBox = inset(snapStep, range);
+  return clampToBox(boundingBox, point);
+}
+function isUnlimitedGraphState(state) {
+  return state.type === "point" && state.numPoints === "unlimited" || state.type === "polygon" && state.numSides === "unlimited";
+}
+
+/**
+ * Replace all text outside of the $ TeX blocks with `\\text{...}`
+ * This way, the entire resulting string can be rendered within <TeX>
+ * and the text outside of the $ blocks will be non-TeX text.
+ */
+function replaceOutsideTeX(mathString) {
+  // All the information we need is in the first section,
+  // whether it's typed as "blockmath" or "paragraph"
+  const firstSection = SimpleMarkdown.parse(mathString)[0];
+
+  // If it's blockMath, the outer level has the full math content.
+  if (firstSection.type === "blockMath") {
+    return firstSection.content;
+  }
+
+  // If it's a paragraph, we need to iterate through the sections
+  // to look for individual math blocks.
+  const condensedNodes = condenseTextNodes(firstSection.content);
+  let result = "";
+  for (const piece of condensedNodes) {
+    piece.type === "math" ? result += piece.content : result += `\\text{${escapeSpecialChars(piece.content)}}`;
+  }
+  return result;
+}
+// Helper function for replaceOutsideTeX()
+// Condense adjacent text nodes into a single text node
+function condenseTextNodes(nodes) {
+  const result = [];
+  if (!nodes) {
+    return result;
+  }
+  let currentText = "";
+  for (const node of nodes) {
+    if (node.type === "math") {
+      if (currentText) {
+        result.push({
+          type: "text",
+          content: currentText
+        });
+        currentText = "";
+      }
+      result.push(node);
+    } else {
+      currentText += node.content;
+    }
+  }
+  if (currentText) {
+    result.push({
+      type: "text",
+      content: currentText
+    });
+  }
+  return result;
+}
+
+// Helper function for replaceOutsideTeX()
+function escapeSpecialChars(str) {
+  // Escape $, \, {, and } characters
+  return str.replace(/([$\\{}])/g, "\\$1");
+}
+
 function AxisLabels() {
   const {
     range,
@@ -31046,7 +31355,7 @@ function AxisLabels() {
       fontSize: "14px",
       transform: "translate(7px, -50%)"
     }
-  }, /*#__PURE__*/React__default.createElement(TeX, null, xAxisLabelText)), /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default.createElement("span", {
     style: {
       position: "absolute",
       left: x2,
@@ -31054,7 +31363,7 @@ function AxisLabels() {
       fontSize: "14px",
       transform: "translate(-50%, 0px)"
     }
-  }, /*#__PURE__*/React__default.createElement(TeX, null, yAxisLabelText)));
+  }, /*#__PURE__*/React__default.createElement(TeX, null, replaceOutsideTeX(yAxisLabelText))));
 }
 
 // The size of the ticks and labels in pixels
@@ -31957,17 +32266,12 @@ const ItemExtras = [
 // prettier-ignore
 
 // prettier-ignore
-
+// While this widget is deprecated, we still need the type for conversion purposes
 // prettier-ignore
-
 // prettier-ignore
-
 // prettier-ignore
-
 //prettier-ignore
-
 // A background image applied to various widgets.
-
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
 
 // 2D range: xMin, xMax, yMin, yMax
@@ -31993,107 +32297,6 @@ const lockedFigureFillStyles = {
 
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
-/**
- * 44 is touch best practice and AAA compliant for WCAG
- * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
- */
-const TARGET_SIZE = 44;
-const REMOVE_BUTTON_ID = "perseus_mafs_remove_button";
-
-// same as pointsFromNormalized in interactive-graph.tsx
-const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
-// maps over [x, y]
-coords.map((coord, i) => {
-  const axisRange = range[i];
-  if (noSnap) {
-    return axisRange[MIN] + size(axisRange) * coord;
-  }
-  const axisStep = step[i];
-  const nSteps = Math.floor(size(axisRange) / axisStep);
-  const tick = Math.round(coord * nSteps);
-  return axisRange[MIN] + axisStep * tick;
-}));
-
-// same as normalizeCoords in interactive-graph.tsx
-const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
-  return (coord + ranges[i][1]) / size(ranges[i]);
-}));
-
-// Returns the closest point to the given `point` that is within the graph
-// bounds given in `state`.
-function bound$1({
-  snapStep,
-  range,
-  point
-}) {
-  const boundingBox = inset(snapStep, range);
-  return clampToBox(boundingBox, point);
-}
-function isUnlimitedGraphState(state) {
-  return state.type === "point" && state.numPoints === "unlimited" || state.type === "polygon" && state.numSides === "unlimited";
-}
-
-/**
- * Replace all text outside of the $ TeX blocks with `\\text{...}`
- * This way, the entire resulting string can be rendered within <TeX>
- * and the text outside of the $ blocks will be non-TeX text.
- */
-function replaceOutsideTeX(mathString) {
-  // All the information we need is in the first section,
-  // whether it's typed as "blockmath" or "paragraph"
-  const firstSection = SimpleMarkdown.parse(mathString)[0];
-
-  // If it's blockMath, the outer level has the full math content.
-  if (firstSection.type === "blockMath") {
-    return firstSection.content;
-  }
-
-  // If it's a paragraph, we need to iterate through the sections
-  // to look for individual math blocks.
-  const condensedNodes = condenseTextNodes(firstSection.content);
-  let result = "";
-  for (const piece of condensedNodes) {
-    piece.type === "math" ? result += piece.content : result += `\\text{${escapeSpecialChars(piece.content)}}`;
-  }
-  return result;
-}
-// Helper function for replaceOutsideTeX()
-// Condense adjacent text nodes into a single text node
-function condenseTextNodes(nodes) {
-  const result = [];
-  if (!nodes) {
-    return result;
-  }
-  let currentText = "";
-  for (const node of nodes) {
-    if (node.type === "math") {
-      if (currentText) {
-        result.push({
-          type: "text",
-          content: currentText
-        });
-        currentText = "";
-      }
-      result.push(node);
-    } else {
-      currentText += node.content;
-    }
-  }
-  if (currentText) {
-    result.push({
-      type: "text",
-      content: currentText
-    });
-  }
-  return result;
-}
-
-// Helper function for replaceOutsideTeX()
-function escapeSpecialChars(str) {
-  // Escape $, \, {, and } characters
-  return str.replace(/([$\\{}])/g, "\\$1");
-}
-
 function LockedLabel(props) {
   const {
     coord,
@@ -33316,6 +33519,7 @@ function useControlPoint(params) {
   } = useGraphConfig();
   const {
     point,
+    sequenceNumber,
     color,
     cursor,
     constrain = p => snap(snapStep, p),
@@ -33356,6 +33560,7 @@ function useControlPoint(params) {
     ref: focusableHandleRef,
     role: "button",
     "aria-label": strings.srPointAtCoordinates({
+      num: sequenceNumber,
       x: srFormatNumber(point[X], locale),
       y: srFormatNumber(point[Y], locale)
     })
@@ -33434,6 +33639,7 @@ const MovableLine = props => {
     focusableHandle: focusableHandle1
   } = useControlPoint({
     point: start,
+    sequenceNumber: 1,
     color,
     onMove: p => onMovePoint(0, p)
   });
@@ -33442,6 +33648,7 @@ const MovableLine = props => {
     focusableHandle: focusableHandle2
   } = useControlPoint({
     point: end,
+    sequenceNumber: 2,
     color,
     onMove: p => onMovePoint(1, p)
   });
@@ -33621,14 +33828,17 @@ function AngleGraph(props) {
   // Render the lines, angle, and then movable points
   return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: coords[1],
+    sequenceNumber: 1,
     constrain: p => p,
     onMove: destination => dispatch(actions.angle.movePoint(1, destination))
   }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: coords[0],
+    sequenceNumber: 2,
     constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(0, destination))
   }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: coords[2],
+    sequenceNumber: 3,
     constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(2, destination))
   }));
@@ -33782,6 +33992,7 @@ function CircleGraph(props) {
     onMove: c => dispatch(actions.circle.moveCenter(c))
   }), /*#__PURE__*/React.createElement(MovablePoint$1, {
     point: radiusPoint,
+    sequenceNumber: 1,
     cursor: "ew-resize",
     onMove: newRadiusPoint => {
       dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
@@ -33957,6 +34168,7 @@ function LimitedPointGraph(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
+    sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
   })));
 }
@@ -33999,6 +34211,7 @@ function UnlimitedPointGraph(props) {
   }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
+    sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
     ref: ref => {
       itemsRef.current[i] = ref;
@@ -34029,7 +34242,8 @@ function describePointGraph(state, i18n) {
   if (state.coords.length === 0) {
     return strings.srNoInteractiveElements;
   }
-  const pointDescriptions = state.coords.map(([x, y]) => strings.srPointAtCoordinates({
+  const pointDescriptions = state.coords.map(([x, y], index) => strings.srPointAtCoordinates({
+    num: index + 1,
     x: srFormatNumber(x, locale),
     y: srFormatNumber(y, locale)
   }));
@@ -34147,6 +34361,7 @@ const LimitedPolygonGraph = props => {
     key: "point-" + i,
     constrain: constrain,
     point: point,
+    sequenceNumber: i + 1,
     onMove: destination => {
       const now = Date.now();
       const targetFPS = 40;
@@ -34293,6 +34508,7 @@ const UnlimitedPolygonGraph = props => {
   }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
+    sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
     ref: ref => {
       pointRef.current[i] = ref;
@@ -34368,6 +34584,7 @@ function QuadraticGraph(props) {
   }), coords.map((coord, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: "point-" + i,
     point: coord,
+    sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.quadratic.movePoint(i, destination))
   })));
 }
@@ -34496,6 +34713,7 @@ function SinusoidGraph(props) {
   }), coords.map((coord, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: "point-" + i,
     point: coord,
+    sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
   })));
 }
@@ -44624,7 +44842,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "41.4.0";
+const libVersion = "42.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45248,6 +45466,13 @@ class ServerItemRenderer extends React.Component {
         this.props.onRendered(true);
       }
     }
+    if (this.props.score && this.props.score !== prevProps.score) {
+      const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
+      this.setState({
+        questionCompleted: this.props.score.correct,
+        questionHighlightedWidgets: emptyQuestionAreaWidgets
+      });
+    }
   }
   componentWillUnmount() {
     if (this.blurTimeoutID != null) {
@@ -45328,7 +45553,7 @@ class ServerItemRenderer extends React.Component {
 
   /**
    * Accepts a question area widgetId, or an answer area widgetId of
-   * the form "answer-input-number 1", or the string "answer-area"
+   * the form "answer-numeric-input 1", or the string "answer-area"
    * for the whole answer area (if the answer area is a single widget).
    */
   _setWidgetProps(widgetId, newProps, callback) {
@@ -45365,18 +45590,37 @@ class ServerItemRenderer extends React.Component {
     return this.questionRenderer.getPromptJSON();
   }
 
+  /**
+   * Returns an array of the widget `.getUserInput()` results
+   *
+   * TODO: can we remove this? Seems to be just for backwards
+   * compatibility with old Perseus Chrome logging
+   * @deprecated use getUserInput
+   */
+  getUserInputLegacy() {
+    return this.questionRenderer.getUserInput();
+  }
+
+  /**
+   * Returns an object of the widget `.getUserInput()` results
+   */
+  getUserInput() {
+    return this.questionRenderer.getUserInputMap();
+  }
+
   /**
    * Grades the item.
+   *
+   * @deprecated use scorePerseusItem
    */
   scoreInput() {
-    const guessAndScore = this.questionRenderer.guessAndScore();
-    const guess = guessAndScore[0];
-    const score = guessAndScore[1];
+    const guess = this.getUserInput();
+    const score = scorePerseusItem(this.props.item.question, guess, this.context.strings, this.context.locale);
 
     // Continue to include an empty guess for the now defunct answer area.
     // TODO(alex): Check whether we rely on the format here for
     //             analyzing ProblemLogs. If not, remove this layer.
-    const maxCompatGuess = [guess, []];
+    const maxCompatGuess = [this.questionRenderer.getUserInput(), []];
     const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
     const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
     this.setState({
@@ -47224,140 +47468,6 @@ 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.
  *
@@ -48283,6 +48393,118 @@ const parseExpressionWidget = parseWidget(constant("expression"), object({
   buttonsVisible: optional(enumeration("always", "never", "focused"))
 }));
 
+const parsePerseusRenderer = object({
+  content: string,
+  // This module has an import cycle with parseWidgetsMap, because the
+  // `group` widget can contain another renderer.
+  // The anonymous function below ensures that we don't try to access
+  // parseWidgetsMap before it's defined.
+  widgets: (rawVal, ctx) => parseWidgetsMap(rawVal, ctx),
+  metadata: optional(array(string)),
+  images: record(string, object({
+    width: number,
+    height: number
+  }))
+});
+
+const parseGradedGroupWidgetOptions = object({
+  title: string,
+  hasHint: optional(nullable(boolean)),
+  // This module has an import cycle with parsePerseusRenderer.
+  // The anonymous function below ensures that we don't try to access
+  // parsePerseusRenderer before it's defined.
+  hint: optional(nullable((rawVal, ctx) => parsePerseusRenderer(rawVal, ctx))),
+  content: string,
+  // This module has an import cycle with parseWidgetsMap.
+  // The anonymous function below ensures that we don't try to access
+  // parseWidgetsMap before it's defined.
+  widgets: (rawVal, ctx) => parseWidgetsMap(rawVal, ctx),
+  widgetEnabled: optional(nullable(boolean)),
+  immutableWidgets: optional(nullable(boolean)),
+  images: record(string, object({
+    width: number,
+    height: number
+  }))
+});
+const parseGradedGroupWidget = parseWidget(constant("graded-group"), parseGradedGroupWidgetOptions);
+
+const parseGradedGroupSetWidget = parseWidget(constant("graded-group-set"), object({
+  gradedGroups: array(parseGradedGroupWidgetOptions)
+}));
+
+const pairOfNumbers$3 = pair(number, number);
+const pairOfPoints = pair(pairOfNumbers$3, pairOfNumbers$3);
+const parseGrapherWidget = parseWidget(constant("grapher"), object({
+  availableTypes: array(enumeration("absolute_value", "exponential", "linear", "logarithm", "quadratic", "sinusoid", "tangent")),
+  correct: union(object({
+    type: constant("absolute_value"),
+    coords: pairOfPoints
+  })).or(object({
+    type: constant("exponential"),
+    asymptote: pairOfPoints,
+    coords: pairOfPoints
+  })).or(object({
+    type: constant("linear"),
+    coords: pairOfPoints
+  })).or(object({
+    type: constant("logarithm"),
+    asymptote: pairOfPoints,
+    coords: pairOfPoints
+  })).or(object({
+    type: constant("quadratic"),
+    coords: pairOfPoints
+  })).or(object({
+    type: constant("sinusoid"),
+    coords: pairOfPoints
+  })).or(object({
+    type: constant("tangent"),
+    coords: pairOfPoints
+  })).parser,
+  graph: object({
+    backgroundImage: object({
+      bottom: optional(number),
+      height: optional(number),
+      left: optional(number),
+      scale: optional(number),
+      url: optional(nullable(string)),
+      width: optional(number)
+    }),
+    box: optional(pairOfNumbers$3),
+    editableSettings: optional(array(enumeration("graph", "snap", "image", "measure"))),
+    gridStep: optional(pairOfNumbers$3),
+    labels: pair(string, string),
+    markings: enumeration("graph", "none", "grid"),
+    range: pair(pairOfNumbers$3, pairOfNumbers$3),
+    rulerLabel: constant(""),
+    rulerTicks: number,
+    showProtractor: optional(boolean),
+    showRuler: optional(boolean),
+    showTooltips: optional(boolean),
+    snapStep: optional(pairOfNumbers$3),
+    step: pairOfNumbers$3,
+    valid: optional(union(boolean).or(string).parser)
+  })
+}));
+
+const parseGroupWidget = parseWidget(constant("group"),
+// This module has an import cycle with parsePerseusRenderer.
+// The anonymous function below ensures that we don't try to access
+// parsePerseusRenderer before it's defined.
+(rawVal, ctx) => parsePerseusRenderer(rawVal, ctx));
+
+const parseIframeWidget = parseWidget(constant("iframe"), object({
+  url: string,
+  settings: array(object({
+    name: string,
+    value: string
+  })),
+  width: union(number).or(string).parser,
+  height: union(number).or(string).parser,
+  allowFullScreen: boolean,
+  allowTopNavigation: optional(boolean),
+  static: boolean
+}));
+
 const parsePerseusImageBackground = object({
   url: optional(nullable(string)),
   width: optional(number),
@@ -48294,6 +48516,160 @@ const parsePerseusImageBackground = object({
   scale: optional(union(number).or(string).parser)
 });
 
+const pairOfNumbers$2 = pair(number, number);
+const parseImageWidget = parseWidget(constant("image"), object({
+  title: optional(string),
+  caption: optional(string),
+  alt: optional(string),
+  backgroundImage: parsePerseusImageBackground,
+  static: optional(boolean),
+  labels: optional(array(object({
+    content: string,
+    alignment: string,
+    coordinates: array(number)
+  }))),
+  range: optional(pair(pairOfNumbers$2, pairOfNumbers$2)),
+  box: optional(pairOfNumbers$2)
+}));
+
+const parseInputNumberWidget = parseWidget(constant("input-number"), object({
+  answerType: optional(enumeration("number", "decimal", "integer", "rational", "improper", "mixed", "percent", "pi")),
+  inexact: optional(boolean),
+  maxError: optional(union(number).or(string).parser),
+  rightAlign: optional(boolean),
+  simplify: enumeration("required", "optional", "enforced"),
+  size: enumeration("normal", "small"),
+  value: union(number).or(string).parser,
+  customKeypad: optional(boolean)
+}));
+
+const pairOfNumbers$1 = pair(number, number);
+const parseFunctionElement = object({
+  type: constant("function"),
+  key: string,
+  options: object({
+    value: string,
+    funcName: string,
+    rangeMin: string,
+    rangeMax: string,
+    color: string,
+    strokeDasharray: string,
+    strokeWidth: number
+  })
+});
+const parseLabelElement = object({
+  type: constant("label"),
+  key: string,
+  options: object({
+    label: string,
+    color: string,
+    coordX: string,
+    coordY: string
+  })
+});
+const parseLineElement = object({
+  type: constant("line"),
+  key: string,
+  options: object({
+    color: string,
+    startX: string,
+    startY: string,
+    endX: string,
+    endY: string,
+    strokeDasharray: string,
+    strokeWidth: number,
+    arrows: string
+  })
+});
+const parseMovableLineElement = object({
+  type: constant("movable-line"),
+  key: string,
+  options: object({
+    startX: string,
+    startY: string,
+    startSubscript: number,
+    endX: string,
+    endY: string,
+    endSubscript: number,
+    constraint: string,
+    snap: number,
+    constraintFn: string,
+    constraintXMin: string,
+    constraintXMax: string,
+    constraintYMin: string,
+    constraintYMax: string
+  })
+});
+const parseMovablePointElement = object({
+  type: constant("movable-point"),
+  key: string,
+  options: object({
+    startX: string,
+    startY: string,
+    varSubscript: number,
+    constraint: string,
+    snap: number,
+    constraintFn: string,
+    constraintXMin: string,
+    constraintXMax: string,
+    constraintYMin: string,
+    constraintYMax: string
+  })
+});
+const parseParametricElement = object({
+  type: constant("parametric"),
+  key: string,
+  options: object({
+    x: string,
+    y: string,
+    rangeMin: string,
+    rangeMax: string,
+    color: string,
+    strokeDasharray: string,
+    strokeWidth: number
+  })
+});
+const parsePointElement = object({
+  type: constant("point"),
+  key: string,
+  options: object({
+    color: string,
+    coordX: string,
+    coordY: string
+  })
+});
+const parseRectangleElement = object({
+  type: constant("rectangle"),
+  key: string,
+  options: object({
+    color: string,
+    coordX: string,
+    coordY: string,
+    width: string,
+    height: string
+  })
+});
+const parseInteractionWidget = parseWidget(constant("interaction"), object({
+  static: boolean,
+  graph: object({
+    editableSettings: optional(array(enumeration("canvas", "graph"))),
+    box: pairOfNumbers$1,
+    labels: array(string),
+    range: pair(pairOfNumbers$1, pairOfNumbers$1),
+    gridStep: pairOfNumbers$1,
+    markings: enumeration("graph", "grid", "none"),
+    snapStep: optional(pairOfNumbers$1),
+    valid: optional(union(boolean).or(string).parser),
+    backgroundImage: optional(parsePerseusImageBackground),
+    showProtractor: optional(boolean),
+    showRuler: optional(boolean),
+    rulerLabel: optional(string),
+    rulerTicks: optional(number),
+    tickStep: pairOfNumbers$1
+  }),
+  elements: array(union(parseFunctionElement).or(parseLabelElement).or(parseLineElement).or(parseMovableLineElement).or(parseMovablePointElement).or(parseParametricElement).or(parsePointElement).or(parseRectangleElement).parser)
+}));
+
 // Used to represent 2-D points and ranges
 const pairOfNumbers = pair(number, number);
 const parsePerseusGraphTypeAngle = object({
@@ -48480,6 +48856,195 @@ const parseInteractiveGraphWidget = parseWidget(constant("interactive-graph"), o
   fullGraphAriaDescription: optional(string)
 }));
 
+const parseLabelImageWidget = parseWidget(constant("label-image"), object({
+  choices: array(string),
+  imageUrl: string,
+  imageAlt: string,
+  imageHeight: number,
+  imageWidth: number,
+  markers: array(object({
+    answers: array(string),
+    label: string,
+    x: number,
+    y: number
+  })),
+  hideChoicesFromInstructions: boolean,
+  multipleAnswers: boolean,
+  static: boolean
+}));
+
+const parseMatcherWidget = parseWidget(constant("matcher"), object({
+  labels: array(string),
+  left: array(string),
+  right: array(string),
+  orderMatters: boolean,
+  padding: boolean
+}));
+
+const parseMatrixWidget = parseWidget(constant("matrix"), object({
+  prefix: string,
+  suffix: string,
+  answers: array(array(number)),
+  cursorPosition: array(number),
+  matrixBoardSize: array(number),
+  static: boolean
+}));
+
+const parseMeasurerWidget = parseWidget(constant("measurer"), object({
+  image: parsePerseusImageBackground,
+  showProtractor: boolean,
+  showRuler: boolean,
+  rulerLabel: string,
+  rulerTicks: number,
+  rulerPixels: number,
+  rulerLength: number,
+  box: pair(number, number),
+  static: boolean
+}));
+
+const parseMoleculeRendererWidget = parseWidget(constant("molecule-renderer"), object({
+  widgetId: string,
+  rotationAngle: optional(number),
+  smiles: optional(string)
+}));
+
+const parseNumberLineWidget = parseWidget(constant("number-line"), object({
+  range: array(number),
+  labelRange: array(nullable(number)),
+  labelStyle: string,
+  labelTicks: boolean,
+  isTickCtrl: optional(nullable(boolean)),
+  divisionRange: array(number),
+  numDivisions: optional(nullable(number)),
+  snapDivisions: number,
+  tickStep: optional(nullable(number)),
+  correctRel: optional(nullable(string)),
+  correctX: number,
+  initialX: optional(nullable(number)),
+  showTooltip: optional(boolean),
+  static: boolean
+}));
+
+const parseMathFormat = enumeration("integer", "mixed", "improper", "proper", "decimal", "percent", "pi");
+const parseNumericInputWidget = parseWidget(constant("numeric-input"), object({
+  answers: array(object({
+    message: string,
+    value: number,
+    status: string,
+    answerForms: optional(array(parseMathFormat)),
+    strict: boolean,
+    maxError: optional(nullable(number)),
+    simplify: optional(nullable(string))
+  })),
+  labelText: string,
+  size: string,
+  coefficient: boolean,
+  rightAlign: optional(boolean),
+  static: boolean,
+  answerForms: optional(array(object({
+    name: parseMathFormat,
+    simplify: optional(nullable(enumeration("required", "correct", "enforced", "optional")))
+  })))
+}));
+
+// There is an import cycle between orderer-widget.ts and perseus-renderer.ts.
+// This wrapper ensures that we don't refer to parsePerseusRenderer before
+// it's defined.
+function parseRenderer(rawValue, ctx) {
+  return parsePerseusRenderer(rawValue, ctx);
+}
+const parseOrdererWidget = parseWidget(constant("orderer"), object({
+  options: array(parseRenderer),
+  correctOptions: array(parseRenderer),
+  otherOptions: array(parseRenderer),
+  height: string,
+  layout: string
+}));
+
+const parsePassageRefWidget = parseWidget(constant("passage-ref"), object({
+  passageNumber: number,
+  referenceNumber: number,
+  summaryText: string
+}));
+
+const parsePassageWidget = parseWidget(constant("passage"), object({
+  footnotes: string,
+  passageText: string,
+  passageTitle: string,
+  showLineNumbers: boolean,
+  static: boolean
+}));
+
+const parsePhetSimulationWidget = parseWidget(constant("phet-simulation"), object({
+  url: string,
+  description: string
+}));
+
+const parsePlotterWidget = parseWidget(constant("plotter"), object({
+  labels: array(string),
+  categories: array(string),
+  type: enumeration(...plotterPlotTypes),
+  maxY: number,
+  scaleY: number,
+  labelInterval: optional(nullable(number)),
+  snapsPerLine: number,
+  starting: array(number),
+  correct: array(number),
+  picUrl: optional(nullable(string)),
+  picSize: optional(nullable(number)),
+  picBoxHeight: optional(nullable(number)),
+  plotDimensions: array(number)
+}));
+
+const parsePythonProgramWidget = parseWidget(constant("python-program"), object({
+  programID: string,
+  height: number
+}));
+
+const parseRadioWidget = parseWidget(constant("radio"), object({
+  choices: array(object({
+    content: string,
+    clue: optional(string),
+    correct: optional(boolean),
+    isNoneOfTheAbove: optional(boolean),
+    // deprecated
+    // There is an import cycle between radio-widget.ts and
+    // widgets-map.ts. The anonymous function below ensures that we
+    // don't refer to parseWidgetsMap before it's defined.
+    widgets: optional((rawVal, ctx) => parseWidgetsMap(rawVal, ctx))
+  })),
+  hasNoneOfTheAbove: optional(boolean),
+  countChoices: optional(boolean),
+  randomize: optional(boolean),
+  multipleSelect: optional(boolean),
+  deselectEnabled: optional(boolean),
+  // deprecated
+  onePerLine: optional(boolean),
+  // deprecated
+  displayCount: optional(any),
+  // v0 props
+  // `noneOfTheAbove` is still in use (but only set to `false`).
+  noneOfTheAbove: constant(false)
+}));
+
+const parseSorterWidget = parseWidget(constant("sorter"), object({
+  correct: array(string),
+  padding: boolean,
+  layout: enumeration("horizontal", "vertical")
+}));
+
+const parseTableWidget = parseWidget(constant("table"), object({
+  headers: array(string),
+  rows: number,
+  columns: number,
+  answers: array(array(string))
+}));
+
+const parseVideoWidget = parseWidget(constant("video"), object({
+  location: string,
+  static: optional(boolean)
+}));
+
 const parseWidgetsMap = (rawValue, ctx) => {
   if (!isObject(rawValue)) {
     return ctx.failure("PerseusWidgetsMap", rawValue);
@@ -48524,86 +49089,67 @@ const parseWidgetsMapEntry = ([key, widget], widgetMap, ctx) => {
     case "expression":
       return parseAndAssign(`expression ${id}`, parseExpressionWidget);
     case "grapher":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`grapher ${id}`, any);
+      return parseAndAssign(`grapher ${id}`, parseGrapherWidget);
     case "group":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`group ${id}`, any);
+      return parseAndAssign(`group ${id}`, parseGroupWidget);
     case "graded-group":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`graded-group ${id}`, any);
+      return parseAndAssign(`graded-group ${id}`, parseGradedGroupWidget);
     case "graded-group-set":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`graded-group-set ${id}`, any);
+      return parseAndAssign(`graded-group-set ${id}`, parseGradedGroupSetWidget);
     case "iframe":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`iframe ${id}`, any);
+      return parseAndAssign(`iframe ${id}`, parseIframeWidget);
     case "image":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`image ${id}`, any);
+      return parseAndAssign(`image ${id}`, parseImageWidget);
     case "input-number":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`input-number ${id}`, any);
+      return parseAndAssign(`input-number ${id}`, parseInputNumberWidget);
     case "interaction":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`interaction ${id}`, any);
+      return parseAndAssign(`interaction ${id}`, parseInteractionWidget);
     case "interactive-graph":
       return parseAndAssign(`interactive-graph ${id}`, parseInteractiveGraphWidget);
     case "label-image":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`label-image ${id}`, any);
+      return parseAndAssign(`label-image ${id}`, parseLabelImageWidget);
     case "matcher":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`matcher ${id}`, any);
+      return parseAndAssign(`matcher ${id}`, parseMatcherWidget);
     case "matrix":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`matrix ${id}`, any);
+      return parseAndAssign(`matrix ${id}`, parseMatrixWidget);
     case "measurer":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`measurer ${id}`, any);
+      return parseAndAssign(`measurer ${id}`, parseMeasurerWidget);
     case "molecule-renderer":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`molecule-renderer ${id}`, any);
+      return parseAndAssign(`molecule-renderer ${id}`, parseMoleculeRendererWidget);
     case "number-line":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`number-line ${id}`, any);
+      return parseAndAssign(`number-line ${id}`, parseNumberLineWidget);
     case "numeric-input":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`numeric-input ${id}`, any);
+      return parseAndAssign(`numeric-input ${id}`, parseNumericInputWidget);
     case "orderer":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`orderer ${id}`, any);
+      return parseAndAssign(`orderer ${id}`, parseOrdererWidget);
     case "passage":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`passage ${id}`, any);
+      return parseAndAssign(`passage ${id}`, parsePassageWidget);
     case "passage-ref":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`passage-ref ${id}`, any);
+      return parseAndAssign(`passage-ref ${id}`, parsePassageRefWidget);
     case "passage-ref-target":
-      // TODO(LEMS-2585): implement a real parser for this widget
+      // NOTE(benchristel): as of 2024-11-12, passage-ref-target is only
+      // used in test content. See:
+      // https://www.khanacademy.org/devadmin/content/search?query=widget:passage-ref-target
       return parseAndAssign(`passage-ref-target ${id}`, any);
     case "phet-simulation":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`phet-simulation ${id}`, any);
+      return parseAndAssign(`phet-simulation ${id}`, parsePhetSimulationWidget);
     case "plotter":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`plotter ${id}`, any);
+      return parseAndAssign(`plotter ${id}`, parsePlotterWidget);
     case "python-program":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`python-program ${id}`, any);
+      return parseAndAssign(`python-program ${id}`, parsePythonProgramWidget);
     case "radio":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`radio ${id}`, any);
+      return parseAndAssign(`radio ${id}`, parseRadioWidget);
     case "sorter":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`sorter ${id}`, any);
+      return parseAndAssign(`sorter ${id}`, parseSorterWidget);
     case "table":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`table ${id}`, any);
+      return parseAndAssign(`table ${id}`, parseTableWidget);
     case "video":
-      // TODO(LEMS-2585): implement a real parser for this widget
-      return parseAndAssign(`video ${id}`, any);
+      return parseAndAssign(`video ${id}`, parseVideoWidget);
     default:
+      if (getWidget(type)) {
+        // @ts-expect-error - 'type' is not a valid widget type
+        return parseAndAssign(`${type} ${id}`, any);
+      }
       return ctx.failure("a valid widget type", type);
   }
 };
@@ -48626,16 +49172,6 @@ const parseHint = object({
   }))
 });
 
-const parsePerseusRenderer = object({
-  content: string,
-  widgets: parseWidgetsMap,
-  metadata: optional(array(string)),
-  images: record(string, object({
-    width: number,
-    height: number
-  }))
-});
-
 object({
   question: parsePerseusRenderer,
   hints: array(parseHint),
@@ -48876,5 +49412,5 @@ const GrapherUtil = {
   typeToButton
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, 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, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, 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, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map