@khanacademy/perseus 41.2.0 → 41.3.0

package/dist/index.js

@@ -24,7 +24,7 @@ var kmath = require('@khanacademy/kmath');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
 var SimpleMarkdown = require('@khanacademy/simple-markdown');
-var pureMarkdown = require('@khanacademy/pure-markdown');
+var SimpleMarkdown$1 = require('@khanacademy/pure-markdown');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
@@ -77,6 +77,7 @@ var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var SimpleMarkdown__default = /*#__PURE__*/_interopDefaultLegacy(SimpleMarkdown);
+var SimpleMarkdown__namespace = /*#__PURE__*/_interopNamespace(SimpleMarkdown$1);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
@@ -1293,6 +1294,41 @@ const ClassNames = {
   MOBILE: "perseus-mobile"
 };
 
+const getPromptJSON$t = (renderProps, userInput) => {
+  return {
+    type: "expression",
+    label: renderProps.visibleLabel,
+    userInput: {
+      value: userInput
+    }
+  };
+};
+
+/**
+ *  Get the character used for separating decimals.
+ */
+const getDecimalSeparator = locale => {
+  switch (locale) {
+    // TODO(somewhatabstract): Remove this when Chrome supports the `ka`
+    // locale properly.
+    // https://github.com/formatjs/formatjs/issues/1526#issuecomment-559891201
+    //
+    // Supported locales in Chrome:
+    // https://source.chromium.org/chromium/chromium/src/+/master:third_party/icu/scripts/chrome_ui_languages.list
+    case "ka":
+      return ",";
+    default:
+      const numberWithDecimalSeparator = 1.1;
+      // TODO(FEI-3647): Update to use .formatToParts() once we no longer have to
+      // support Safari 12.
+      const match = new Intl.NumberFormat(locale).format(numberWithDecimalSeparator)
+      // 0x661 is ARABIC-INDIC DIGIT ONE
+      // 0x6F1 is EXTENDED ARABIC-INDIC DIGIT ONE
+      .match(/[^\d\u0661\u06F1]/);
+      return match?.[0] ?? ".";
+  }
+};
+
 // TODO(LP-11481): Change the primary API we use for logging in Perseus to use
 // getDependencies() internally... simplify usage to just using a "singleton"
 // which get's the injected logger.
@@ -2225,31 +2261,6 @@ const KhanAnswerTypes = {
   }
 };
 
-/**
- *  Get the character used for separating decimals.
- */
-const getDecimalSeparator = locale => {
-  switch (locale) {
-    // TODO(somewhatabstract): Remove this when Chrome supports the `ka`
-    // locale properly.
-    // https://github.com/formatjs/formatjs/issues/1526#issuecomment-559891201
-    //
-    // Supported locales in Chrome:
-    // https://source.chromium.org/chromium/chromium/src/+/master:third_party/icu/scripts/chrome_ui_languages.list
-    case "ka":
-      return ",";
-    default:
-      const numberWithDecimalSeparator = 1.1;
-      // TODO(FEI-3647): Update to use .formatToParts() once we no longer have to
-      // support Safari 12.
-      const match = new Intl.NumberFormat(locale).format(numberWithDecimalSeparator)
-      // 0x661 is ARABIC-INDIC DIGIT ONE
-      // 0x6F1 is EXTENDED ARABIC-INDIC DIGIT ONE
-      .match(/[^\d\u0661\u06F1]/);
-      return match?.[0] ?? ".";
-  }
-};
-
 /* Content creators input a list of answers which are matched from top to
  * bottom. The intent is that they can include spcific solutions which should
  * be graded as correct or incorrect (or ungraded!) first, then get more
@@ -2268,7 +2279,7 @@ const getDecimalSeparator = locale => {
  *   show the user an error. TODO(joel) - what error?
  * - Otherwise, pass through the resulting points and message.
  */
-function expressionValidator(userInput, rubric, strings, locale) {
+function scoreExpression(userInput, rubric, strings, locale) {
   const options = ___default["default"].clone(rubric);
   ___default["default"].extend(options, {
     decimal_separator: getDecimalSeparator(locale)
@@ -2480,6 +2491,9 @@ class Expression extends React__namespace.Component {
   getUserInput() {
     return Expression.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$t(this.props, this.getUserInput());
+  }
   change = (() => {
     var _this = this;
     return function () {
@@ -2764,7 +2778,7 @@ var Expression$1 = {
   propUpgrades: propUpgrades$2,
   // For use by the editor
   isLintable: true,
-  validator: expressionValidator,
+  scorer: scoreExpression,
   getOneCorrectAnswerFromRubric(rubric) {
     const correctAnswers = (rubric.answerForms || []).filter(answerForm => answerForm.considered === "correct");
     if (correctAnswers.length === 0) {
@@ -18502,10 +18516,10 @@ const styles$C = aphrodite.StyleSheet.create({
 
 /* eslint-disable no-useless-escape, no-prototype-builtins */
 const rules$1 = {
-  ...pureMarkdown.pureMarkdownRules,
+  ...SimpleMarkdown$1.pureMarkdownRules,
   // NOTE: basically ignored by JIPT. wraps everything at the outer layer
   columns: {
-    ...pureMarkdown.pureMarkdownRules.columns,
+    ...SimpleMarkdown$1.pureMarkdownRules.columns,
     react: (node, output, state) => {
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "perseus-two-columns",
@@ -18533,7 +18547,7 @@ const rules$1 = {
   // for exercises the renderer just renders the crowdin id to the
   // renderer div.
   crowdinId: {
-    ...pureMarkdown.pureMarkdownRules.crowdinId,
+    ...SimpleMarkdown$1.pureMarkdownRules.crowdinId,
     react: (node, output, state) => node.id
   },
   // Ensure that the table is focusable in sequential keyboard navigation
@@ -18542,7 +18556,7 @@ const rules$1 = {
   // left/right gesture. Note, setting `tabindex` doesn't appear required for
   // iOS 14.4, in order for VoiceOver to work.
   table: {
-    ...pureMarkdown.pureMarkdownRules.table,
+    ...SimpleMarkdown$1.pureMarkdownRules.table,
     react: function (node, output, state) {
       const table = SimpleMarkdown__default["default"].defaultRules.table.react(node, output, state);
       if (!state.isMobile) {
@@ -18560,7 +18574,7 @@ const rules$1 = {
   // our table regex into tableCapture[1..], and we pass tableCapture to
   // our nptable regex
   titledTable: {
-    ...pureMarkdown.pureMarkdownRules.titledTable,
+    ...SimpleMarkdown$1.pureMarkdownRules.titledTable,
     react: (node, output, state) => {
       let contents;
       if (!node.table) {
@@ -18620,7 +18634,7 @@ const rules$1 = {
     }
   },
   widget: {
-    ...pureMarkdown.pureMarkdownRules.widget,
+    ...SimpleMarkdown$1.pureMarkdownRules.widget,
     react: (node, output, state) => {
       // The actual output is handled in the renderer, where
       // we know the current widget props/state. This is
@@ -18631,7 +18645,7 @@ const rules$1 = {
     }
   },
   blockMath: {
-    ...pureMarkdown.pureMarkdownRules.blockMath,
+    ...SimpleMarkdown$1.pureMarkdownRules.blockMath,
     react: (node, output, state) => {
       const {
         TeX
@@ -18645,7 +18659,7 @@ const rules$1 = {
     }
   },
   math: {
-    ...pureMarkdown.pureMarkdownRules.math,
+    ...SimpleMarkdown$1.pureMarkdownRules.math,
     react: (node, output, state) => {
       const {
         TeX
@@ -18659,7 +18673,7 @@ const rules$1 = {
     }
   },
   unescapedDollar: {
-    ...pureMarkdown.pureMarkdownRules.unescapedDollar,
+    ...SimpleMarkdown$1.pureMarkdownRules.unescapedDollar,
     react: (node, output, state) => {
       // Unescaped dollar signs render correctly, but result in
       // untranslatable text after the i18n python linter flags it
@@ -18669,7 +18683,7 @@ const rules$1 = {
   // Extend the SimpleMarkdown link parser to make the link open in a new
   // window and handle reverse tabnapping phishing attacks
   link: {
-    ...pureMarkdown.pureMarkdownRules.link,
+    ...SimpleMarkdown$1.pureMarkdownRules.link,
     react: function (node, output, state) {
       const link = SimpleMarkdown__default["default"].defaultRules.link.react(node, output, state);
       const href = link.props.href;
@@ -18696,7 +18710,7 @@ const rules$1 = {
     }
   },
   codeBlock: {
-    ...pureMarkdown.pureMarkdownRules.codeBlock,
+    ...SimpleMarkdown$1.pureMarkdownRules.codeBlock,
     react: (node, output, state) => {
       // ideally this should be a different rule, with only an
       // output function, but right now that breaks the parser.
@@ -18714,7 +18728,7 @@ const rules$1 = {
   // transform the tree to add lint nodes. This rule is here
   // just for the react() function
   lint: {
-    ...pureMarkdown.pureMarkdownRules.lint,
+    ...SimpleMarkdown$1.pureMarkdownRules.lint,
     react: (node, output, state) => {
       return /*#__PURE__*/React__namespace.createElement(Lint, {
         message: node.message,
@@ -18964,8 +18978,8 @@ const getWidget = name => {
 const getWidgetExport = name => {
   return widgets[name] ?? null;
 };
-const getWidgetValidator = name => {
-  return widgets[name]?.validator ?? null;
+const getWidgetScorer = name => {
+  return widgets[name]?.scorer ?? null;
 };
 const getEditor = name => {
   return ___default["default"].has(editors, name) ? editors[name] : null;
@@ -19273,7 +19287,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getWidgetExport: getWidgetExport,
-  getWidgetValidator: getWidgetValidator,
+  getWidgetScorer: getWidgetScorer,
   getEditor: getEditor,
   getTransform: getTransform,
   getVersion: getVersion,
@@ -19305,12 +19319,12 @@ widgetIds, userInputMap, strings, locale) {
     }
     let score = null;
     const userInput = userInputMap[id];
-    const validator = getWidgetValidator(widget.type);
+    const scorer = getWidgetScorer(widget.type);
     if (widget.type === "group") {
       const scores = scoreWidgetsFunctional(widget.options.widgets, Object.keys(widget.options.widgets), userInputMap[id], strings, locale);
       score = Util.flattenScores(scores);
-    } else if (validator) {
-      score = validator(userInput, widget.options, strings, locale);
+    } else if (scorer) {
+      score = scorer(userInput, widget.options, strings, locale);
     }
     if (score) {
       return Util.scoreIsEmpty(score);
@@ -19335,12 +19349,12 @@ widgetIds, userInputMap, strings, locale) {
       return;
     }
     const userInput = userInputMap[id];
-    const validator = getWidgetValidator(widget.type);
+    const scorer = getWidgetScorer(widget.type);
     if (widget.type === "group") {
       const scores = scoreWidgetsFunctional(widget.options.widgets, Object.keys(widget.options.widgets), userInputMap[id], strings, locale);
       widgetScores[id] = Util.flattenScores(scores);
-    } else if (validator) {
-      widgetScores[id] = validator(userInput, widget.options, strings, locale);
+    } else if (scorer) {
+      widgetScores[id] = scorer(userInput, widget.options, strings, locale);
     }
   });
   return widgetScores;
@@ -19824,9 +19838,9 @@ class Renderer extends React__namespace.Component {
     // WidgetContainers don't update their widgets' props when
     // they are re-rendered, so even if they've been
     // re-rendered we need to call these methods on them.
-    ___default["default"].each(this.widgetIds, id => {
+    this.widgetIds.forEach(id => {
       const container = this._widgetContainers.get(makeContainerId(id));
-      container && container.replaceWidgetProps(this.getWidgetProps(id));
+      container?.replaceWidgetProps(this.getWidgetProps(id));
     });
     if (this.props.serializedState && !___default["default"].isEqual(this.props.serializedState, this.getSerializedState())) {
       this.restoreSerializedState(this.props.serializedState);
@@ -19965,25 +19979,25 @@ class Renderer extends React__namespace.Component {
     }
     return null;
   };
-  getWidgetProps = id => {
+  getWidgetProps(widgetId) {
     var _this = this;
     const apiOptions = this.getApiOptions();
-    const widgetProps = this.state.widgetProps[id] || {};
+    const widgetProps = this.state.widgetProps[widgetId] || {};
 
     // The widget needs access to its "rubric" at all times when in review
     // mode (which is really just part of its widget info).
-    const widgetInfo = this.state.widgetInfo[id];
+    const widgetInfo = this.state.widgetInfo[widgetId];
     const reviewModeRubric = this.props.reviewMode && widgetInfo ? widgetInfo.options : null;
     if (!this._interactionTrackers) {
       this._interactionTrackers = {};
     }
-    let interactionTracker = this._interactionTrackers[id];
+    let interactionTracker = this._interactionTrackers[widgetId];
     if (!interactionTracker) {
-      interactionTracker = this._interactionTrackers[id] = new InteractionTracker(apiOptions.trackInteraction, widgetInfo && widgetInfo.type, id, getTracking(widgetInfo && widgetInfo.type));
+      interactionTracker = this._interactionTrackers[widgetId] = new InteractionTracker(apiOptions.trackInteraction, widgetInfo && widgetInfo.type, widgetId, getTracking(widgetInfo && widgetInfo.type));
     }
     return {
       ...widgetProps,
-      widgetId: id,
+      widgetId: widgetId,
       alignment: widgetInfo && widgetInfo.alignment,
       static: widgetInfo?.static,
       problemNum: this.props.problemNum,
@@ -19991,19 +20005,19 @@ class Renderer extends React__namespace.Component {
       keypadElement: this.props.keypadElement,
       questionCompleted: this.props.questionCompleted,
       showSolutions: this.props.showSolutions,
-      onFocus: ___default["default"].partial(this._onWidgetFocus, id),
-      onBlur: ___default["default"].partial(this._onWidgetBlur, id),
+      onFocus: ___default["default"].partial(this._onWidgetFocus, widgetId),
+      onBlur: ___default["default"].partial(this._onWidgetBlur, widgetId),
       findWidgets: this.findWidgets,
       reviewModeRubric: reviewModeRubric,
       reviewMode: this.props.reviewMode,
       onChange: function (newProps, cb) {
         let silent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-        _this._setWidgetProps(id, newProps, cb, silent);
+        _this._setWidgetProps(widgetId, newProps, cb, silent);
       },
       trackInteraction: interactionTracker.track,
-      isLastUsedWidget: id === this.state.lastUsedWidgetId
+      isLastUsedWidget: widgetId === this.state.lastUsedWidgetId
     };
-  };
+  }
 
   /**
    * Serializes the questions state so it can be recovered.
@@ -20892,6 +20906,25 @@ class Renderer extends React__namespace.Component {
     return this.widgetIds;
   };
 
+  /**
+   * Returns a JSON representation of the content and widgets
+   * that can be passed to an LLM for prompt context.
+   */
+  getPromptJSON() {
+    const {
+      content
+    } = this.props;
+    const widgetJSON = {};
+    this.widgetIds.forEach(id => {
+      const widget = this.getWidgetInstance(id);
+      widgetJSON[id] = widget?.getPromptJSON?.() || {};
+    });
+    return {
+      content,
+      widgets: widgetJSON
+    };
+  }
+
   /**
    * Returns an object mapping from widget ID to perseus-style score.
    * The keys of this object are the values of the array returned
@@ -21618,6 +21651,19 @@ SimpleKeypadInput.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
 
+const getPromptJSON$s = (renderProps, userInput) => {
+  return {
+    type: "input-number",
+    options: {
+      simplify: renderProps.simplify,
+      answerType: renderProps.answerType
+    },
+    userInput: {
+      value: userInput.currentValue
+    }
+  };
+};
+
 /*
  * In this file, an `expression` is some portion of valid TeX enclosed in
  * curly brackets.
@@ -21808,7 +21854,7 @@ const answerTypes = {
     forms: "pi"
   }
 };
-function inputNumberValidator(userInput, rubric, strings) {
+function scoreInputNumber(userInput, rubric, strings) {
   if (rubric.answerType == null) {
     rubric.answerType = "number";
   }
@@ -21939,6 +21985,9 @@ class InputNumber extends React__namespace.Component {
   getUserInput() {
     return InputNumber.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$s(this.props, this.getUserInput());
+  }
   examples = () => {
     const {
       strings
@@ -22038,7 +22087,7 @@ var InputNumber$1 = {
   widget: InputNumber,
   transform: propTransform$3,
   isLintable: true,
-  validator: inputNumberValidator,
+  scorer: scoreInputNumber,
   getOneCorrectAnswerFromRubric(rubric) {
     if (rubric.value == null) {
       return;
@@ -22051,6 +22100,16 @@ var InputNumber$1 = {
   }
 };
 
+const getPromptJSON$r = (renderProps, userInput) => {
+  return {
+    type: "numeric-input",
+    label: renderProps.labelText,
+    userInput: {
+      value: userInput.currentValue
+    }
+  };
+};
+
 const ParseTex = TexWrangler.parseTex;
 const answerFormButtons = [{
   title: "Integers",
@@ -22109,7 +22168,7 @@ function maybeParsePercentInput(inputValue, normalizedAnswerExpected) {
   // Otherwise, we return input valuåe (number) stripped of the "%".
   return value;
 }
-function numericInputValidator(userInput, rubric, strings) {
+function scoreNumericInput(userInput, rubric, strings) {
   const defaultAnswerForms = answerFormButtons.map(e => e["value"])
   // Don't default to validating the answer as a pi answer
   // if answerForm isn't set on the answer
@@ -22271,6 +22330,9 @@ class NumericInput extends React__namespace.Component {
   getUserInput() {
     return NumericInput.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$r(this.props, this.getUserInput());
+  }
   handleChange = (newValue, cb) => {
     this.props.onChange({
       currentValue: newValue
@@ -22396,7 +22458,7 @@ var NumericInput$1 = {
   widget: NumericInput,
   transform: propsTransform,
   isLintable: true,
-  validator: numericInputValidator,
+  scorer: scoreNumericInput,
   getOneCorrectAnswerFromRubric(rubric) {
     const correctAnswers = rubric.answers.filter(answer => answer.status === "correct");
     const answerStrings = correctAnswers.map(answer => {
@@ -22427,15 +22489,43 @@ var NumericInput$1 = {
   }
 };
 
+const getPromptJSON$q = (renderProps, userInput) => {
+  const choices = renderProps.choices || [];
+  const options = choices.map(choice => {
+    return {
+      value: choice.content
+    };
+  });
+  return {
+    type: "radio",
+    hasNoneOfTheAbove: !!renderProps.hasNoneOfTheAbove,
+    options,
+    userInput: {
+      selectedOptions: userInput.choicesSelected.slice()
+    }
+  };
+};
+
+const getPromptJSON$p = renderProps => {
+  return {
+    type: "passage-ref",
+    options: {
+      passageNumber: renderProps.passageNumber,
+      referenceNumber: renderProps.referenceNumber,
+      summaryText: renderProps.summaryText
+    }
+  };
+};
+
 /**
- * Several widgets don't have "right"/"wrong" validation logic,
+ * Several widgets don't have "right"/"wrong" scoring logic,
  * so this just says to move on past those widgets
  *
  * TODO(LEMS-2543) widgets that use this probably shouldn't have any
- * validation logic and the thing validating an exercise
+ * scoring logic and the thing scoring an exercise
  * should just know to skip these
  */
-function noopValidator() {
+function scoreNoop() {
   let points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return {
     type: "points",
@@ -23829,6 +23919,17 @@ const styles$x = aphrodite.StyleSheet.create({
   }
 });
 
+const getPromptJSON$o = renderProps => {
+  return {
+    type: "passage",
+    options: {
+      passageTitle: renderProps.passageTitle,
+      passageText: renderProps.passageText,
+      footnotes: renderProps.footnotes
+    }
+  };
+};
+
 function getInitialParseState() {
   return {
     currentRef: [],
@@ -24461,6 +24562,9 @@ class Passage extends React__namespace.Component {
       content: refContent
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$o(this.props);
+  }
 
   /**
    * Rendering
@@ -24606,7 +24710,7 @@ var Passage$1 = {
     return ___default["default"].pick(editorProps, "passageTitle", "passageText", "footnotes", "showLineNumbers");
   },
   isLintable: true,
-  validator: () => noopValidator()
+  scorer: () => scoreNoop()
 };
 
 /**
@@ -24671,6 +24775,9 @@ class PassageRef extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
+  getPromptJSON() {
+    return getPromptJSON$p(this.props);
+  }
   _deferredUpdateRange = () => {
     ___default["default"].defer(this._updateRange);
   };
@@ -24740,8 +24847,8 @@ var PassageRef$1 = {
     major: 0,
     minor: 1
   },
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator()
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop()
 };
 
 /**
@@ -26109,7 +26216,7 @@ const styles$p = aphrodite.StyleSheet.create({
   }
 });
 
-function radioValidator(userInput, rubric, strings) {
+function scoreRadio(userInput, rubric, strings) {
   const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
     return sum + (selected ? 1 : 0);
   }, 0);
@@ -26119,10 +26226,10 @@ function radioValidator(userInput, rubric, strings) {
       message: null
     };
   }
-
-  // TODO(LEMS-2541): should numCorrect actually be on the rubric
-  // instead of the userInput?
-  if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
+  const numCorrect = rubric.choices.reduce((sum, currentChoice) => {
+    return currentChoice.correct ? sum + 1 : sum;
+  }, 0);
+  if (numCorrect > 1 && numSelected !== numCorrect) {
     return {
       type: "invalid",
       message: strings.chooseCorrectNum
@@ -26130,9 +26237,8 @@ function radioValidator(userInput, rubric, strings) {
     // If NOTA and some other answer are checked, ...
   }
 
-  // TODO(LEMS-2541): should noneOfTheAboveSelected be replaced with a
-  // combination of choicesSelected and noneOfTheAboveIndex?
-  if (userInput.noneOfTheAboveSelected && numSelected > 1) {
+  const noneOfTheAboveSelected = rubric.choices.some((choice, index) => choice.isNoneOfTheAbove && userInput.choicesSelected[index]);
+  if (noneOfTheAboveSelected && numSelected > 1) {
     return {
       type: "invalid",
       message: strings.notNoneOfTheAbove
@@ -26140,9 +26246,7 @@ function radioValidator(userInput, rubric, strings) {
   }
   const correct = userInput.choicesSelected.every((selected, i) => {
     let isCorrect;
-    // TODO(LEMS-2541): should noneOfTheAboveIndex actually be on the rubric
-    // instead of the userInput?
-    if (userInput.noneOfTheAboveIndex === i) {
+    if (rubric.choices[i].isNoneOfTheAbove) {
       isCorrect = rubric.choices.every((choice, j) => {
         return i === j || !choice.correct;
       });
@@ -26174,31 +26278,19 @@ class Radio$1 extends React__namespace.Component {
     showSolutions: "none"
   };
   static getUserInputFromProps(props) {
+    let unshuffle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
     // future timeline implementers: this used to be {value: i} before
     // multiple select was added)
     if (props.choiceStates) {
-      let noneOfTheAboveIndex = null;
-      let noneOfTheAboveSelected = false;
       const choiceStates = props.choiceStates;
       const choicesSelected = choiceStates.map(() => false);
-      const numCorrect = props.numCorrect;
       for (let i = 0; i < choicesSelected.length; i++) {
-        const index = props.choices[i].originalIndex;
+        const index = unshuffle ? props.choices[i].originalIndex : i;
         choicesSelected[index] = choiceStates[i].selected;
-        if (props.choices[i].isNoneOfTheAbove) {
-          // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
-          noneOfTheAboveIndex = index;
-          if (choicesSelected[i]) {
-            noneOfTheAboveSelected = true;
-          }
-        }
       }
       return {
-        choicesSelected,
-        numCorrect,
-        noneOfTheAboveIndex,
-        noneOfTheAboveSelected
+        choicesSelected
       };
       // Support legacy choiceState implementation
     }
@@ -26207,27 +26299,14 @@ class Radio$1 extends React__namespace.Component {
       values
     } = props;
     if (values) {
-      let noneOfTheAboveIndex = null;
-      let noneOfTheAboveSelected = false;
       const choicesSelected = [...values];
-      const numCorrect = props.numCorrect;
       const valuesLength = values.length;
       for (let i = 0; i < valuesLength; i++) {
-        const index = props.choices[i].originalIndex;
+        const index = unshuffle ? props.choices[i].originalIndex : i;
         choicesSelected[index] = values[i];
-        if (props.choices[i].isNoneOfTheAbove) {
-          // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
-          noneOfTheAboveIndex = index;
-          if (choicesSelected[i]) {
-            noneOfTheAboveSelected = true;
-          }
-        }
       }
       return {
-        choicesSelected,
-        noneOfTheAboveIndex,
-        noneOfTheAboveSelected,
-        numCorrect
+        choicesSelected
       };
     }
     // Nothing checked
@@ -26355,6 +26434,10 @@ class Radio$1 extends React__namespace.Component {
   getUserInput() {
     return Radio$1.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    const userInput = Radio$1.getUserInputFromProps(this.props, false);
+    return getPromptJSON$q(this.props, userInput);
+  }
 
   /**
    * Turn on rationale display for the currently selected choices. Note that
@@ -26367,7 +26450,7 @@ class Radio$1 extends React__namespace.Component {
       choiceStates
     } = this.props;
     if (choiceStates) {
-      const score = radioValidator(this.getUserInput(), rubric, this.context.strings);
+      const score = scoreRadio(this.getUserInput(), rubric, this.context.strings);
       const widgetCorrect = score.type === "points" && score.total === score.earned;
       const newStates = choiceStates.map(state => ({
         ...state,
@@ -26649,13 +26732,26 @@ var Radio = {
   },
   propUpgrades: propUpgrades$1,
   isLintable: true,
-  validator: radioValidator
+  scorer: scoreRadio
 };
 
 /* eslint-disable import/no-named-as-default */
 var basicWidgets = [Radio, InputNumber$1, NumericInput$1, Expression$1];
 
-function categorizerValidator(userInput, rubric, strings) {
+const getPromptJSON$n = (renderProps, userInput) => {
+  return {
+    type: "categorizer",
+    options: {
+      items: renderProps.items,
+      categories: renderProps.categories
+    },
+    userInput: {
+      itemToCategoryMapping: userInput.values
+    }
+  };
+};
+
+function scoreCategorizer(userInput, rubric, strings) {
   let completed = true;
   let allCorrect = true;
   rubric.values.forEach((value, i) => {
@@ -26710,6 +26806,9 @@ class Categorizer extends React__namespace.Component {
   getUserInput() {
     return Categorizer.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$n(this.props, this.getUserInput());
+  }
   onChange(itemNum, catNum) {
     const values = [...this.props.values];
     // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
@@ -26856,7 +26955,7 @@ var Categorizer$1 = {
     return ___default["default"].pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
   isLintable: true,
-  validator: categorizerValidator
+  scorer: scoreCategorizer
 };
 
 /**
@@ -26906,7 +27005,20 @@ const parseUrl = url => new URL(url, location().origin);
  */
 const toAbsoluteUrl = url => parseUrl(url).href;
 
-function csProgramValidator(state) {
+const getUnsupportedPromptJSON = function (widgetType) {
+  let message = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return {
+    type: widgetType,
+    isSupported: false,
+    message
+  };
+};
+
+const getPromptJSON$m = () => {
+  return getUnsupportedPromptJSON("cs-program");
+};
+
+function scoreCSProgram(state) {
   // The iframe can tell us whether it's correct or incorrect,
   //  and pass an optional message
   if (state.status === "correct") {
@@ -27002,6 +27114,9 @@ class CSProgram extends React__namespace.Component {
       message: this.props.message
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$m();
+  }
   render() {
     if (!this.props.programID) {
       return /*#__PURE__*/React__namespace.createElement("div", null);
@@ -27077,7 +27192,15 @@ var CSProgram$1 = {
   supportedAlignments: ["block", "full-width"],
   widget: CSProgram,
   hidden: true,
-  validator: csProgramValidator
+  scorer: scoreCSProgram
+};
+
+const getPromptJSON$l = renderProps => {
+  return {
+    type: "definition",
+    definition: renderProps.definition,
+    togglePrompt: renderProps.togglePrompt
+  };
 };
 
 class Definition extends React__namespace.Component {
@@ -27090,6 +27213,9 @@ class Definition extends React__namespace.Component {
   // this just helps with TS weak typing when a Widget
   // doesn't implement any Widget methods
   isWidget = true;
+  getPromptJSON() {
+    return getPromptJSON$l(this.props);
+  }
   render() {
     return /*#__PURE__*/React__namespace.createElement(DefinitionConsumer, null, _ref => {
       let {
@@ -27146,8 +27272,8 @@ var Definition$1 = {
   defaultAlignment: "inline",
   widget: Definition,
   transform: x => x,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator()
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop()
 };
 
 // The props are type `any` on purpose so that this can receive props
@@ -27175,11 +27301,23 @@ var DeprecatedStandin$1 = {
   displayName: "Deprecated Standin",
   widget: DeprecatedStandin,
   hidden: true,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator(1)
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop(1)
+};
+
+const getPromptJSON$k = (renderProps, userInput) => {
+  return {
+    type: "dropdown",
+    options: {
+      items: renderProps.choices
+    },
+    userInput: {
+      selectedIndex: userInput.value - 1 // Offset to account for placeholder
+    }
+  };
 };
 
-function dropdownValidator(userInput, rubric) {
+function scoreDropdown(userInput, rubric) {
   const selected = userInput.value;
   if (selected === 0) {
     return {
@@ -27225,6 +27363,9 @@ class Dropdown extends React__namespace.Component {
       value: this.props.selected
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$k(this.props, this.getUserInput());
+  }
   render() {
     const children = [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: "placeholder",
@@ -27266,7 +27407,15 @@ var Dropdown$1 = {
   accessible: true,
   widget: Dropdown,
   transform: optionsTransform,
-  validator: dropdownValidator
+  scorer: scoreDropdown
+};
+
+const getPromptJSON$j = renderProps => {
+  return {
+    type: "explanation",
+    showPrompt: renderProps.showPrompt,
+    explanation: renderProps.explanation
+  };
 };
 
 // transform = _.identity
@@ -27315,6 +27464,9 @@ class Explanation extends React__namespace.Component {
     });
     this.props.trackInteraction();
   };
+  getPromptJSON() {
+    return getPromptJSON$j(this.props);
+  }
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp__default["default"] : caretDown__default["default"];
@@ -27421,8 +27573,26 @@ var Explanation$1 = {
   widget: Explanation,
   transform: ___default["default"].identity,
   isLintable: true,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator()
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop()
+};
+
+const getPromptJSON$i = (title, rendererJSON, hintRendererJSON) => {
+  if (!rendererJSON) {
+    return {
+      type: "graded-group",
+      title,
+      content: "",
+      widgets: {},
+      hint: hintRendererJSON
+    };
+  }
+  return {
+    ...rendererJSON,
+    title,
+    type: "graded-group",
+    hint: hintRendererJSON
+  };
 };
 
 class GradedGroupAnswerBar extends React__namespace.Component {
@@ -27566,6 +27736,8 @@ class GradedGroup extends React__namespace.Component {
     message: "",
     answerBarState: "HIDDEN"
   };
+  rendererRef = /*#__PURE__*/React__namespace.createRef();
+  hintRendererRef = /*#__PURE__*/React__namespace.createRef();
   shouldComponentUpdate(nextProps, nextState) {
     return nextProps !== this.props || nextState !== this.state;
   }
@@ -27591,13 +27763,9 @@ class GradedGroup extends React__namespace.Component {
       status: GRADING_STATUSES.ungraded,
       message: ""
     });
-
-    // eslint-disable-next-line react/no-string-refs
-    if (this.refs.renderer) {
+    if (this.rendererRef.current) {
       this.change("widgets", this.props.widgets);
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'emptyWidgets' does not exist on type 'ReactInstance'.
-      const emptyWidgets = this.refs.renderer.emptyWidgets();
+      const emptyWidgets = this.rendererRef.current.emptyWidgets();
       const answerable = emptyWidgets.length === 0;
       const answerBarState = this.state.answerBarState;
       this.setState({
@@ -27606,12 +27774,10 @@ class GradedGroup extends React__namespace.Component {
     }
   };
   _checkAnswer = () => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'showRationalesForCurrentlySelectedChoices' does not exist on type 'ReactInstance'.
-    this.refs.renderer.showRationalesForCurrentlySelectedChoices();
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'score' does not exist on type 'ReactInstance'.
-    const score = this.refs.renderer.score();
+    this.rendererRef.current?.showRationalesForCurrentlySelectedChoices();
+    const score = this.rendererRef.current?.score() || {
+      type: "invalid"
+    };
     const {
       INVALID_MESSAGE_PREFIX,
       DEFAULT_INVALID_MESSAGE_1,
@@ -27632,29 +27798,28 @@ class GradedGroup extends React__namespace.Component {
 
   // Mobile API
   getInputPaths = () => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'ReactInstance'.
-    return this.refs.renderer.getInputPaths();
+    return this.rendererRef.current?.getInputPaths() || [];
   };
+  getPromptJSON() {
+    // If the hint isn't expanded, we can't get the prompt JSON from the rendered widgets.
+    // We'll just pass in the hint content as a string instead.
+    const hint = this.hintRendererRef.current?.getPromptJSON() || {
+      content: this.props.hint?.content || "",
+      widgets: {}
+    };
+    return getPromptJSON$i(this.props.title, this.rendererRef.current?.getPromptJSON(), hint);
+  }
   setInputValue = (path, newValue, cb) => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'setInputValue' does not exist on type 'ReactInstance'.
-    return this.refs.renderer.setInputValue(path, newValue, cb);
+    return this.rendererRef.current?.setInputValue(path, newValue, cb);
   };
   focus = () => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-    return this.refs.renderer.focus();
+    return !!this.rendererRef.current?.focus();
   };
   focusInputPath = path => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'focusPath' does not exist on type 'ReactInstance'.
-    this.refs.renderer.focusPath(path);
+    this.rendererRef.current?.focusPath(path);
   };
   blurInputPath = path => {
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'blurPath' does not exist on type 'ReactInstance'.
-    this.refs.renderer.blurPath(path);
+    this.rendererRef.current?.blurPath(path);
   };
   render() {
     const apiOptions = ___default["default"].extend({}, ApiOptions.defaults, this.props.apiOptions, {
@@ -27712,8 +27877,7 @@ class GradedGroup extends React__namespace.Component {
     }, !!this.props.title && /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$j.title)
     }, this.props.title), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props, {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "renderer",
+      ref: this.rendererRef,
       apiOptions: {
         ...apiOptions,
         readOnly
@@ -27756,8 +27920,7 @@ class GradedGroup extends React__namespace.Component {
         });
       }
     }, this.context.strings.hideExplanation), /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, this.props.hint, {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "hints-renderer",
+      ref: this.hintRendererRef,
       apiOptions: apiOptions,
       linterContext: this.props.linterContext,
       strings: this.context.strings
@@ -27849,6 +28012,16 @@ var GradedGroup$1 = {
   isLintable: true
 };
 
+const getPromptJSON$h = (renderProps, activeGroupJSON) => {
+  return {
+    type: "graded-group-set",
+    options: {
+      groupCount: renderProps.gradedGroups.length,
+      currentGroup: activeGroupJSON
+    }
+  };
+};
+
 class Indicators extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   handleKeyDown = (e, i) => {
@@ -27927,6 +28100,10 @@ class GradedGroupSet extends React__namespace.Component {
   getInputPaths = () => {
     return this._childGroup.getInputPaths();
   };
+  getPromptJSON() {
+    const activeGroupPromptJSON = this._childGroup.getPromptJSON();
+    return getPromptJSON$h(this.props, activeGroupPromptJSON);
+  }
   setInputValue = (path, newValue, cb) => {
     return this._childGroup.setInputValue(path, newValue, cb);
   };
@@ -28180,6 +28357,33 @@ const styles$h = aphrodite.StyleSheet.create({
   }
 });
 
+const getPromptJSON$g = (renderProps, userInput) => {
+  const {
+    type,
+    coords
+  } = userInput;
+  const input = {
+    type,
+    coords
+  };
+  if (userInput.type === "logarithm" || userInput.type === "exponential") {
+    input["asymptote"] = userInput.asymptote;
+  }
+  return {
+    type: "grapher",
+    options: {
+      availableTypes: renderProps.availableTypes,
+      range: renderProps.graph.range,
+      labels: renderProps.graph.labels,
+      tickStep: renderProps.graph.step,
+      gridStep: renderProps.graph.gridStep,
+      snapStep: renderProps.graph.snapStep,
+      backgroundImageUrl: renderProps.graph.backgroundImage.url
+    },
+    userInput: input
+  };
+};
+
 /* eslint-disable one-var */
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
 const Plot$1 = Graphie.Plot;
@@ -28703,7 +28907,7 @@ function getCoefficientsByType(data) {
     throw new perseusCore.PerseusError("Invalid grapher type", perseusCore.Errors.InvalidInput);
   }
 }
-function grapherValidator(userInput, rubric) {
+function scoreGrapher(userInput, rubric) {
   if (userInput.type !== rubric.correct.type) {
     return {
       type: "points",
@@ -29054,6 +29258,9 @@ class Grapher extends React__namespace.Component {
   getUserInput() {
     return Grapher.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$g(this.props, this.getUserInput());
+  }
   render() {
     const type = this.props.plot.type;
     const coords = this.props.plot.coords;
@@ -29143,7 +29350,21 @@ var Grapher$1 = {
   widget: Grapher,
   transform: propTransform$2,
   staticTransform: staticTransform$4,
-  validator: grapherValidator
+  scorer: scoreGrapher
+};
+
+const getPromptJSON$f = rendererJSON => {
+  if (!rendererJSON) {
+    return {
+      type: "group",
+      content: "",
+      widgets: {}
+    };
+  }
+  return {
+    ...rendererJSON,
+    type: "group"
+  };
 };
 
 // exports has no 'transform'
@@ -29182,6 +29403,9 @@ class Group extends React__namespace.Component {
   getUserInput() {
     return this.rendererRef?.getUserInput();
   }
+  getPromptJSON() {
+    return getPromptJSON$f(this.rendererRef?.getPromptJSON());
+  }
   getSerializedState = () => {
     return this.rendererRef?.getSerializedState();
   };
@@ -29295,7 +29519,11 @@ var Group$1 = {
   isLintable: true
 };
 
-function iframeValidator(userInput) {
+const getPromptJSON$e = () => {
+  return getUnsupportedPromptJSON("iframe");
+};
+
+function scoreIframe(userInput) {
   // The iframe can tell us whether it's correct or incorrect,
   //  and pass an optional message
   if (userInput.status === "correct") {
@@ -29352,6 +29580,9 @@ class Iframe extends React__namespace.Component {
       message: this.props.message
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$e();
+  }
   handleMessageEvent = e => {
     // We receive data from the iframe that contains {passed: true/false}
     //  and use that to set the status
@@ -29449,7 +29680,19 @@ var Iframe$1 = {
   widget: Iframe,
   // Let's not expose it to all content creators yet
   hidden: true,
-  validator: iframeValidator
+  scorer: scoreIframe
+};
+
+const getPromptJSON$d = renderProps => {
+  return {
+    type: "image",
+    options: {
+      altText: renderProps.alt,
+      title: renderProps.title,
+      caption: renderProps.caption,
+      imageUrl: renderProps.backgroundImage.url
+    }
+  };
 };
 
 const defaultBoxSize = 400;
@@ -29490,6 +29733,9 @@ class ImageWidget extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
+  getPromptJSON() {
+    return getPromptJSON$d(this.props);
+  }
   render() {
     let image;
     const alt = this.props.caption === this.props.alt ? "" : this.props.alt;
@@ -29636,8 +29882,12 @@ var Image$1 = {
   displayName: "Image",
   widget: ImageWidget,
   isLintable: true,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator()
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop()
+};
+
+const getPromptJSON$c = () => {
+  return getUnsupportedPromptJSON("interaction");
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -29826,6 +30076,9 @@ class Interaction extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
+  getPromptJSON() {
+    return getPromptJSON$c();
+  }
   render() {
     const range = this.props.graph.range;
     let labels = this.props.graph.labels;
@@ -30234,8 +30487,8 @@ var Interactive = {
   widget: Interaction,
   transform: ___default["default"].identity,
   hidden: true,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator()
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop()
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -30539,6 +30792,137 @@ class Graph extends React__namespace.Component {
   }
 }
 
+const getPromptJSON$b = (props, userInput) => {
+  return {
+    type: "interactive-graph",
+    options: {
+      graph: getGraphOptionsForProps(props),
+      backgroundImageUrl: props.backgroundImage?.url,
+      range: props.range,
+      labels: props.labels
+    },
+    userInput: getUserInput(userInput)
+  };
+};
+const getGraphOptionsForProps = props => {
+  const type = props.graph.type;
+  switch (type) {
+    case "angle":
+      return {
+        type: props.graph.type,
+        angleOffsetDegrees: props.graph.angleOffsetDeg,
+        startCoords: props.graph.startCoords
+      };
+    case "circle":
+      return {
+        type: props.graph.type,
+        startParams: {
+          center: props.graph.startCoords?.center,
+          radius: props.graph.startCoords?.radius
+        }
+      };
+    case "linear":
+      return {
+        type: props.graph.type,
+        startCoords: props.graph.startCoords
+      };
+    case "linear-system":
+      return {
+        type: props.graph.type,
+        startCoords: props.graph.startCoords
+      };
+    case "point":
+      return {
+        type: props.graph.type,
+        numPoints: props.graph.numPoints,
+        startCoords: props.graph.startCoords
+      };
+    case "polygon":
+      return {
+        type: props.graph.type,
+        match: props.graph.match,
+        numSides: props.graph.numSides,
+        startCoords: props.graph.startCoords
+      };
+    case "quadratic":
+      return {
+        type: props.graph.type,
+        startCoords: props.graph.startCoords
+      };
+    case "ray":
+      return {
+        type: props.graph.type,
+        startCoords: props.graph.startCoords
+      };
+    case "segment":
+      return {
+        type: props.graph.type,
+        numSegments: props.graph.numSegments,
+        startCoords: props.graph.startCoords
+      };
+    case "sinusoid":
+      return {
+        type: props.graph.type,
+        startCoords: props.graph.startCoords
+      };
+    case "none":
+      return {};
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(type);
+  }
+};
+const getUserInput = userInput => {
+  const type = userInput.type;
+  switch (type) {
+    case "angle":
+      return {
+        coords: userInput.coords,
+        angleOffsetDegrees: userInput.angleOffsetDeg
+      };
+    case "circle":
+      return {
+        center: userInput.center,
+        radius: userInput.radius
+      };
+    case "linear":
+      return {
+        coords: userInput.coords
+      };
+    case "linear-system":
+      return {
+        coords: userInput.coords
+      };
+    case "point":
+      return {
+        coords: userInput.coords
+      };
+    case "polygon":
+      return {
+        coords: userInput.coords
+      };
+    case "quadratic":
+      return {
+        coords: userInput.coords
+      };
+    case "ray":
+      return {
+        coords: userInput.coords
+      };
+    case "segment":
+      return {
+        coords: userInput.coords
+      };
+    case "sinusoid":
+      return {
+        coords: userInput.coords
+      };
+    case "none":
+      return {};
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(type);
+  }
+};
+
 function pathBuilder() {
   return new PathBuilder();
 }
@@ -31790,6 +32174,10 @@ const LegacyGrid = _ref => {
  * To render more complex Perseus items, see the `Item` type in the multi item
  * area.
  */
+/**
+ * A "PerseusArticle" is an item that is meant to be rendered as an article.
+ * This item is never scored and is rendered by the `ArticleRenderer`.
+ */
 /**
  * A "MultiItem" is an advanced Perseus item. It is rendered by the
  * `MultiRenderer` and you can control the layout of individual parts of the
@@ -31886,6 +32274,10 @@ const ItemExtras = [
 // A background image applied to various widgets.
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
+
+// 2D range: xMin, xMax, yMin, yMax
+
+const lockedFigureColorNames = ["blue", "green", "grayH", "purple", "pink", "orange", "red"];
 const lockedFigureColors = {
   blue: "#3D7586",
   green: "#447A53",
@@ -31953,16 +32345,57 @@ function isUnlimitedGraphState(state) {
  * and the text outside of the $ blocks will be non-TeX text.
  */
 function replaceOutsideTeX(mathString) {
-  let currentlyTeX = mathString[0] === "$";
+  // All the information we need is in the first section,
+  // whether it's typed as "blockmath" or "paragraph"
+  const firstSection = SimpleMarkdown__namespace.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 = "";
-  const splitString = mathString.split("$").filter(part => part !== "");
-  for (let i = 0; i < splitString.length; i++) {
-    const part = splitString[i];
-    result += currentlyTeX ? part : `\\text{${part}}`;
-    currentlyTeX = !currentlyTeX;
+  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 = [];
+  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 {
@@ -36298,7 +36731,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref)
 
 const eq$1 = Util.eq;
 const deepEq$2 = Util.deepEq;
-function interactiveGraphValidator(userInput, rubric) {
+function scoreInteractiveGraph(userInput, rubric) {
   // None-type graphs are not graded
   if (userInput.type === "none" && rubric.correct.type === "none") {
     return {
@@ -37796,6 +38229,9 @@ class InteractiveGraph extends React__namespace.Component {
     }
     throw new perseusCore.PerseusError("Cannot getUserInput from a graph that has never rendered", perseusCore.Errors.NotAllowed);
   }
+  getPromptJSON() {
+    return getPromptJSON$b(this.props, this.getUserInput());
+  }
   render() {
     // Mafs shim
     const mafsFlags = this.props.apiOptions?.flags?.["mafs"];
@@ -38160,7 +38596,7 @@ var InteractiveGraph$1 = {
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
   staticTransform: staticTransform$3,
-  validator: interactiveGraphValidator
+  scorer: scoreInteractiveGraph
 };
 
 // TODO: can we use WB typography?
@@ -38172,6 +38608,32 @@ const bodyXsmallBold = {
   lineHeight: "22px"
 };
 
+const getPromptJSON$a = (renderProps, userInput) => {
+  const propMarkers = renderProps.markers.map(marker => {
+    return {
+      label: marker.label
+    };
+  });
+  const inputMarkers = userInput.markers.map(marker => {
+    return {
+      label: marker.label,
+      selected: marker.selected
+    };
+  });
+  return {
+    type: "label-image",
+    options: {
+      choices: renderProps.choices,
+      imageUrl: renderProps.imageUrl,
+      imageAlt: renderProps.imageAlt,
+      markers: propMarkers
+    },
+    userInput: {
+      markers: inputMarkers
+    }
+  };
+};
+
 const AnswerChoices = props => {
   const {
     strings
@@ -38257,59 +38719,6 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
-// Question state for marker as result of user selected answers.
-
-function scoreMarker(marker) {
-  const score = {
-    hasAnswers: false,
-    isCorrect: false
-  };
-  if (marker.selected && marker.selected.length > 0) {
-    score.hasAnswers = true;
-  }
-  if (marker.answers.length > 0) {
-    if (marker.selected && marker.selected.length === marker.answers.length) {
-      // All correct answers are selected by the user.
-      score.isCorrect = marker.selected.every(choice => marker.answers.includes(choice));
-    }
-  } else if (!marker.selected || marker.selected.length === 0) {
-    // Correct as no answers should be selected by the user.
-    score.isCorrect = true;
-  }
-  return score;
-}
-
-// TODO(LEMS-2440): May need to pull answers out of PerseusLabelImageWidgetOptions[markers] for the rubric
-function labelImageValidator(userInput, rubric) {
-  let numAnswered = 0;
-  let numCorrect = 0;
-  for (const marker of userInput.markers) {
-    const score = scoreMarker(marker);
-    if (score.hasAnswers) {
-      numAnswered++;
-    }
-    if (score.isCorrect) {
-      numCorrect++;
-    }
-  }
-
-  // We expect all question markers to be answered before grading.
-  if (numAnswered !== userInput.markers.length) {
-    return {
-      type: "invalid",
-      message: null
-    };
-  }
-  return {
-    type: "points",
-    // Markers with no expected answers are graded as correct if user
-    // makes no answer selection.
-    earned: numCorrect === userInput.markers.length ? 1 : 0,
-    total: 1,
-    message: null
-  };
-}
-
 const BringToFront = {
   boxShadow: `0 8px 8px ${wonderBlocksTokens.color.offBlack64}`,
   zIndex: 1000
@@ -38565,6 +38974,59 @@ const styles$b = aphrodite.StyleSheet.create({
   }
 });
 
+// Question state for marker as result of user selected answers.
+
+function scoreMarker(marker) {
+  const score = {
+    hasAnswers: false,
+    isCorrect: false
+  };
+  if (marker.selected && marker.selected.length > 0) {
+    score.hasAnswers = true;
+  }
+  if (marker.answers.length > 0) {
+    if (marker.selected && marker.selected.length === marker.answers.length) {
+      // All correct answers are selected by the user.
+      score.isCorrect = marker.selected.every(choice => marker.answers.includes(choice));
+    }
+  } else if (!marker.selected || marker.selected.length === 0) {
+    // Correct as no answers should be selected by the user.
+    score.isCorrect = true;
+  }
+  return score;
+}
+
+// TODO(LEMS-2440): May need to pull answers out of PerseusLabelImageWidgetOptions[markers] for the rubric
+function scoreLabelImage(userInput, rubric) {
+  let numAnswered = 0;
+  let numCorrect = 0;
+  for (const marker of userInput.markers) {
+    const score = scoreMarker(marker);
+    if (score.hasAnswers) {
+      numAnswered++;
+    }
+    if (score.isCorrect) {
+      numCorrect++;
+    }
+  }
+
+  // We expect all question markers to be answered before grading.
+  if (numAnswered !== userInput.markers.length) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  return {
+    type: "points",
+    // Markers with no expected answers are graded as correct if user
+    // makes no answer selection.
+    earned: numCorrect === userInput.markers.length ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 /**
  * Represents a direction vector.
  * No diagonals allowed.
@@ -38775,6 +39237,9 @@ class LabelImage extends React__namespace.Component {
       markers
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$a(this.props, this.getUserInput());
+  }
 
   // TODO(LEMS-2544): Investigate impact on scoring; possibly pull out &/or remove rubric parameter.
   showRationalesForCurrentlySelectedChoices(rubric) {
@@ -39140,7 +39605,7 @@ var LabelImage$1 = {
   widget: LabelImageWithDependencies,
   accessible: true,
   isLintable: true,
-  validator: labelImageValidator
+  scorer: scoreLabelImage
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -39850,7 +40315,23 @@ const styles$9 = aphrodite.StyleSheet.create({
   }
 });
 
-function matcherValidator(state, rubric) {
+const getPromptJSON$9 = (renderProps, userInput) => {
+  return {
+    type: "matcher",
+    options: {
+      labels: renderProps.labels,
+      left: renderProps.left,
+      right: renderProps.right,
+      orderMatters: renderProps.orderMatters
+    },
+    userInput: {
+      left: userInput.left,
+      right: userInput.right
+    }
+  };
+};
+
+function scoreMatcher(state, rubric) {
   const correct = ___default["default"].isEqual(state.left, rubric.left) && ___default["default"].isEqual(state.right, rubric.right);
   return {
     type: "points",
@@ -39917,6 +40398,9 @@ class Matcher extends React__namespace.Component {
       right: this.refs.right.getOptions()
     };
   };
+  getPromptJSON() {
+    return getPromptJSON$9(this.props, this.getUserInput());
+  }
 
   // Programatic API for moving options
   // This is used by testing
@@ -40060,10 +40544,23 @@ var Matcher$1 = {
   displayName: "Matcher (two column)",
   widget: Matcher,
   isLintable: true,
-  validator: matcherValidator
+  scorer: scoreMatcher
+};
+
+const getPromptJSON$8 = (renderProps, userInput) => {
+  return {
+    type: "matrix",
+    options: {
+      height: renderProps.matrixBoardSize[0],
+      width: renderProps.matrixBoardSize[1]
+    },
+    userInput: {
+      answerRows: userInput.answers
+    }
+  };
 };
 
-function matrixValidator(userInput, rubric, strings) {
+function scoreMatrix(userInput, rubric, strings) {
   const solution = rubric.answers;
   const supplied = userInput.answers;
   const solutionSize = getMatrixSize(solution);
@@ -40340,6 +40837,9 @@ class Matrix extends React__namespace.Component {
       answers: this.props.answers
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$8(this.props, this.getUserInput());
+  }
   render() {
     // Set the input sizes through JS so we can control the size of the
     // brackets. (If we set them in CSS we won't know values until the
@@ -40525,7 +41025,11 @@ var Matrix$1 = {
   transform: propTransform$1,
   staticTransform: staticTransform$2,
   isLintable: true,
-  validator: matrixValidator
+  scorer: scoreMatrix
+};
+
+const getPromptJSON$7 = () => {
+  return getUnsupportedPromptJSON("measurer");
 };
 
 const defaultImage = {
@@ -40602,6 +41106,9 @@ class Measurer extends React__namespace.Component {
       });
     }
   }
+  getPromptJSON() {
+    return getPromptJSON$7();
+  }
   render() {
     const image = ___default["default"].extend({}, defaultImage, this.props.image);
 
@@ -40649,8 +41156,8 @@ var Measurer$1 = {
     minor: 0
   },
   propUpgrades: propUpgrades,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator(1)
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop(1)
 };
 
 /**
@@ -41539,10 +42046,25 @@ var Molecule$1 = {
   displayName: "Molecule renderer",
   hidden: true,
   widget: MoleculeWidget,
-  validator: () => noopValidator()
+  scorer: () => scoreNoop()
 };
 
-function numberLineValidator(state, rubric) {
+const getPromptJSON$6 = (renderProps, userInput) => {
+  return {
+    type: "number-line",
+    options: {
+      range: renderProps.range,
+      numDivisions: renderProps.numDivisions,
+      snapDivisions: renderProps.snapDivisions
+    },
+    userInput: {
+      numLinePosition: userInput.numLinePosition,
+      numDivisions: userInput.numDivisions
+    }
+  };
+};
+
+function scoreNumberLine(state, rubric) {
   const range = rubric.range;
   const divisionRange = state.divisionRange;
   const start = rubric.initialX != null ? rubric.initialX : range[0];
@@ -42031,6 +42553,9 @@ class NumberLine extends React__namespace.Component {
       divisionRange: this.props.divisionRange
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$6(this.props, this.getUserInput());
+  }
   render() {
     const {
       strings
@@ -42135,10 +42660,22 @@ var NumberLine$1 = {
   widget: NumberLine,
   transform: numberLineTransform,
   staticTransform: staticTransform$1,
-  validator: numberLineValidator
+  scorer: scoreNumberLine
 };
 
-function ordererValidator(userInput, rubric) {
+const getPromptJSON$5 = (renderProps, userInput) => {
+  return {
+    type: "orderer",
+    options: {
+      options: renderProps.options.map(option => option.content)
+    },
+    userInput: {
+      values: userInput.current
+    }
+  };
+};
+
+function scoreOrderer(userInput, rubric) {
   if (userInput.current.length === 0) {
     return {
       type: "invalid",
@@ -42584,6 +43121,9 @@ class Orderer extends React__namespace.Component {
       })
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$5(this.props, this.getUserInput());
+  }
   render() {
     // This is the card we are currently dragging
     const dragging = this.state.dragging && /*#__PURE__*/React__namespace.createElement(Card
@@ -42694,7 +43234,7 @@ var Orderer$1 = {
   hidden: true,
   widget: Orderer,
   isLintable: true,
-  validator: ordererValidator
+  scorer: scoreOrderer
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -42748,8 +43288,12 @@ var PassageRefTarget$1 = {
     minor: 0
   },
   isLintable: true,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator()
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop()
+};
+
+const getPromptJSON$4 = () => {
+  return getUnsupportedPromptJSON("phet-simulation");
 };
 
 /**
@@ -42801,6 +43345,9 @@ class PhetSimulation extends React__namespace.Component {
         return kaLocale;
     }
   };
+  getPromptJSON() {
+    return getPromptJSON$4();
+  }
   displayLoadFailure = () => {
     this.setState({
       url: null,
@@ -42955,10 +43502,14 @@ var PhetSimulation$1 = {
   isLintable: true
 };
 
+const getPromptJSON$3 = () => {
+  return getUnsupportedPromptJSON("plotter");
+};
+
 const {
   deepEq: deepEq$1
 } = Util;
-function plotterValidator(userInput, rubric) {
+function scorePlotter(userInput, rubric) {
   if (deepEq$1(userInput, rubric.starting)) {
     return {
       type: "invalid",
@@ -43746,6 +44297,9 @@ class Plotter extends React__namespace.Component {
   getUserInput() {
     return this.state.values;
   }
+  getPromptJSON() {
+    return getPromptJSON$3();
+  }
   render() {
     // TODO(kevinb) actually compute the size of the graphie correctly and
     // make it that size so we don't have to add extra padding.  The value
@@ -43772,7 +44326,11 @@ var Plotter$1 = {
   hidden: true,
   widget: Plotter,
   staticTransform: staticTransform,
-  validator: plotterValidator
+  scorer: scorePlotter
+};
+
+const getPromptJSON$2 = () => {
+  return getUnsupportedPromptJSON("python-program");
 };
 
 /**
@@ -43798,6 +44356,9 @@ class PythonProgram extends React__namespace.Component {
   getDOMNodeForPath(path) {
     return null;
   }
+  getPromptJSON() {
+    return getPromptJSON$2();
+  }
   render() {
     const url = getUrlFromProgramID(this.props.programID);
     const iframeStyle = {
@@ -43832,7 +44393,17 @@ var PythonProgram$1 = {
   widget: PythonProgram
 };
 
-function sorterValidator(userInput, rubric) {
+const getPromptJSON$1 = userInput => {
+  return {
+    type: "sorter",
+    userInput: {
+      values: userInput.options,
+      changed: userInput.changed
+    }
+  };
+};
+
+function scoreSorter(userInput, rubric) {
   // If the sorter widget hasn't been changed yet, we treat it as "empty" which
   // prevents the "Check" button from becoming active. We want the user
   // to make a change before trying to move forward. This makes an
@@ -43904,6 +44475,9 @@ class Sorter extends React__namespace.Component {
       changed: this.state.changed
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$1(this.getUserInput());
+  }
   moveOptionToIndex = (option, index) => {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
@@ -43935,10 +44509,10 @@ var Sorter$1 = {
   displayName: "Sorter",
   widget: Sorter,
   isLintable: true,
-  validator: sorterValidator
+  scorer: scoreSorter
 };
 
-function tableValidator(state, rubric, strings) {
+function scoreTable(state, rubric, strings) {
   const filterNonEmpty = function (table) {
     return ___default["default"].filter(table, function (row) {
       // Check if row has a cell that is nonempty
@@ -44212,7 +44786,11 @@ var Table$1 = {
   transform: propTransform,
   hidden: true,
   isLintable: true,
-  validator: tableValidator
+  scorer: scoreTable
+};
+
+const getPromptJSON = () => {
+  return getUnsupportedPromptJSON("video");
 };
 
 /**
@@ -44311,6 +44889,9 @@ class Video extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
+  getPromptJSON() {
+    return getPromptJSON();
+  }
   render() {
     const {
       InitialRequestUrl
@@ -44370,8 +44951,8 @@ var Video$1 = {
   defaultAlignment: "block",
   supportedAlignments: ["block", "float-left", "float-right", "full-width"],
   widget: Video,
-  // TODO: things that aren't interactive shouldn't need validators
-  validator: () => noopValidator()
+  // TODO: things that aren't interactive shouldn't need scoring functions
+  scorer: () => scoreNoop()
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -44390,7 +44971,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "41.2.0";
+const libVersion = "41.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45126,6 +45707,9 @@ class ServerItemRenderer extends React__namespace.Component {
   getNumHints() {
     return this.props.item.hints.length;
   }
+  getPromptJSON() {
+    return this.questionRenderer.getPromptJSON();
+  }
 
   /**
    * Grades the item.
@@ -45783,7 +46367,7 @@ function treeToItem(node) {
   };
 }
 
-var isObject = function (obj) {
+var isObject$1 = function (obj) {
   return obj === Object(obj);
 };
 var merge = function () {
@@ -45799,7 +46383,7 @@ var merge = function () {
   return obj;
 };
 var clone = function (obj) {
-  if (!isObject(obj)) {
+  if (!isObject$1(obj)) {
     return obj;
   }
   return Array.isArray(obj) ? obj.slice() : merge(obj);
@@ -45815,7 +46399,7 @@ var clone = function (obj) {
 var dispatch = function (x) {
   if (Array.isArray(x)) {
     return arr;
-  } else if (isObject(x)) {
+  } else if (isObject$1(x)) {
     return obj;
   } else if (typeof x === "string") {
     return str;
@@ -47739,6 +48323,697 @@ function buildTestData(testObject) {
   return `{"data":{"assessmentItem":{"__typename":"AssessmentItemOrError","error":null,"item":{"__typename":"AssessmentItem","id":"x890b3c70f3e8f4a6","itemData":"${testObject}","problemType":"Type 1","sha":"c7284a3ad65214b4e62bccce236d92f7f5d35941"}}}}`;
 }
 
+function success(value) {
+  return {
+    type: "success",
+    value
+  };
+}
+function failure(detail) {
+  return {
+    type: "failure",
+    detail
+  };
+}
+function isFailure(result) {
+  return result.type === "failure";
+}
+function isSuccess(result) {
+  return result.type === "success";
+}
+
+// Result's `all` function is similar to Promise.all: given an array of
+// results, it returns success if all succeeded, and failure if any failed.
+function all(results) {
+  let combineFailureDetails = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : a => a;
+  const values = [];
+  const failureDetails = [];
+  for (const result of results) {
+    if (result.type === "success") {
+      values.push(result.value);
+    } else {
+      failureDetails.push(result.detail);
+    }
+  }
+  if (failureDetails.length > 0) {
+    return failure(failureDetails.reduce(combineFailureDetails));
+  }
+  return success(values);
+}
+
+const any = (rawValue, ctx) => ctx.success(rawValue);
+
+function array(elementParser) {
+  return (rawValue, ctx) => {
+    if (!Array.isArray(rawValue)) {
+      return ctx.failure("array", rawValue);
+    }
+    const elementResults = rawValue.map((elem, i) => elementParser(elem, ctx.forSubtree(i)));
+    return all(elementResults, concat);
+  };
+}
+function concat(a, b) {
+  return [...a, ...b];
+}
+
+function boolean(rawValue, ctx) {
+  if (typeof rawValue === "boolean") {
+    return ctx.success(rawValue);
+  }
+  return ctx.failure("boolean", rawValue);
+}
+
+function constant(acceptedValue) {
+  return (rawValue, ctx) => {
+    if (rawValue !== acceptedValue) {
+      return ctx.failure(String(JSON.stringify(acceptedValue)), rawValue);
+    }
+    return ctx.success(acceptedValue);
+  };
+}
+
+function enumeration() {
+  for (var _len = arguments.length, acceptedValues = new Array(_len), _key = 0; _key < _len; _key++) {
+    acceptedValues[_key] = arguments[_key];
+  }
+  return (rawValue, ctx) => {
+    if (typeof rawValue === "string") {
+      const index = acceptedValues.indexOf(rawValue);
+      if (index > -1) {
+        return ctx.success(acceptedValues[index]);
+      }
+    }
+    const expected = acceptedValues.map(v => JSON.stringify(v));
+    return ctx.failure(expected, rawValue);
+  };
+}
+
+function isObject(x) {
+  return x != null && Object.getPrototypeOf(x) === Object.prototype;
+}
+
+function nullable(parseValue) {
+  return (rawValue, ctx) => {
+    if (rawValue === null) {
+      return ctx.success(rawValue);
+    }
+    return parseValue(rawValue, ctx);
+  };
+}
+
+const number = (rawValue, ctx) => {
+  if (typeof rawValue === "number") {
+    return ctx.success(rawValue);
+  }
+  return ctx.failure("number", rawValue);
+};
+
+function object(schema) {
+  return (rawValue, ctx) => {
+    if (!isObject(rawValue)) {
+      return ctx.failure("object", rawValue);
+    }
+    const ret = {
+      ...rawValue
+    };
+    const mismatches = [];
+    for (const [prop, propParser] of Object.entries(schema)) {
+      const result = propParser(rawValue[prop], ctx.forSubtree(prop));
+      if (isSuccess(result)) {
+        ret[prop] = result.value;
+      } else {
+        mismatches.push(...result.detail);
+      }
+    }
+    if (mismatches.length > 0) {
+      return failure(mismatches);
+    }
+    return ctx.success(ret);
+  };
+}
+
+function optional(parseValue) {
+  return (rawValue, ctx) => {
+    if (rawValue === undefined) {
+      return ctx.success(rawValue);
+    }
+    return parseValue(rawValue, ctx);
+  };
+}
+
+function pair(parseA, parseB) {
+  return (rawValue, ctx) => {
+    if (!Array.isArray(rawValue)) {
+      return ctx.failure("array", rawValue);
+    }
+    if (rawValue.length !== 2) {
+      return ctx.failure("array of length 2", rawValue);
+    }
+    const [rawA, rawB] = rawValue;
+    const resultA = parseA(rawA, ctx.forSubtree(0));
+    if (isFailure(resultA)) {
+      return resultA;
+    }
+    const resultB = parseB(rawB, ctx.forSubtree(1));
+    if (isFailure(resultB)) {
+      return resultB;
+    }
+    return ctx.success([resultA.value, resultB.value]);
+  };
+}
+
+function record(parseKey, parseValue) {
+  return (rawValue, ctx) => {
+    if (!isObject(rawValue)) {
+      return ctx.failure("object", rawValue);
+    }
+    const result = {};
+    const mismatches = [];
+    for (const [key, value] of Object.entries(rawValue)) {
+      const entryCtx = ctx.forSubtree(key);
+      const keyResult = parseKey(key, entryCtx);
+      if (isFailure(keyResult)) {
+        mismatches.push(...keyResult.detail);
+      }
+      const valueResult = parseValue(value, entryCtx);
+      if (isFailure(valueResult)) {
+        mismatches.push(...valueResult.detail);
+      }
+      if (isSuccess(keyResult) && isSuccess(valueResult)) {
+        result[keyResult.value] = valueResult.value;
+      }
+    }
+    if (mismatches.length > 0) {
+      return failure(mismatches);
+    }
+    return ctx.success(result);
+  };
+}
+
+const string = (rawValue, ctx) => {
+  if (typeof rawValue === "string") {
+    return ctx.success(rawValue);
+  }
+  return ctx.failure("string", rawValue);
+};
+
+function trio(parseA, parseB, parseC) {
+  return (rawValue, ctx) => {
+    if (!Array.isArray(rawValue)) {
+      return ctx.failure("array", rawValue);
+    }
+    if (rawValue.length !== 3) {
+      return ctx.failure("array of length 3", rawValue);
+    }
+    const resultA = parseA(rawValue[0], ctx.forSubtree(0));
+    if (isFailure(resultA)) {
+      return resultA;
+    }
+    const resultB = parseB(rawValue[1], ctx.forSubtree(1));
+    if (isFailure(resultB)) {
+      return resultB;
+    }
+    const resultC = parseC(rawValue[2], ctx.forSubtree(2));
+    if (isFailure(resultC)) {
+      return resultC;
+    }
+    return ctx.success([resultA.value, resultB.value, resultC.value]);
+  };
+}
+
+function union(parseBranch) {
+  return new UnionBuilder(parseBranch);
+}
+class UnionBuilder {
+  constructor(parser) {
+    this.parser = parser;
+  }
+  or(newBranch) {
+    return new UnionBuilder(either(this.parser, newBranch));
+  }
+}
+function either(parseA, parseB) {
+  return (rawValue, ctx) => {
+    const resultA = parseA(rawValue, ctx);
+    if (isSuccess(resultA)) {
+      return resultA;
+    }
+    return parseB(rawValue, ctx);
+  };
+}
+
+function parseWidget(parseType, parseOptions) {
+  return object({
+    type: parseType,
+    static: optional(boolean),
+    graded: optional(boolean),
+    alignment: optional(string),
+    options: parseOptions,
+    key: optional(number),
+    version: object({
+      major: number,
+      minor: number
+    })
+  });
+}
+
+const parseCategorizerWidget = parseWidget(constant("categorizer"), object({
+  items: array(string),
+  categories: array(string),
+  randomizeItems: boolean,
+  static: boolean,
+  values: array(number),
+  highlightLint: optional(boolean),
+  linterContext: optional(object({
+    contentType: string,
+    paths: array(string),
+    stack: array(string)
+  }))
+}));
+
+const parseCSProgramWidget = parseWidget(constant("cs-program"), object({
+  programID: string,
+  programType: any,
+  settings: array(object({
+    name: string,
+    value: string
+  })),
+  showEditor: boolean,
+  showButtons: boolean,
+  width: number,
+  height: number,
+  static: boolean
+}));
+
+const parseDefinitionWidget = parseWidget(constant("definition"), object({
+  togglePrompt: string,
+  definition: string,
+  static: boolean
+}));
+
+const parseDropdownWidget = parseWidget(constant("dropdown"), object({
+  placeholder: string,
+  static: boolean,
+  choices: array(object({
+    content: string,
+    correct: boolean
+  }))
+}));
+
+const parseExplanationWidget = parseWidget(constant("explanation"), object({
+  showPrompt: string,
+  hidePrompt: string,
+  explanation: string,
+  // We wrap parseWidgetsMap in a function here to make sure it is not
+  // referenced before it is defined. There is an import cycle between
+  // this file and widgets-map.ts that could cause it to be undefined.
+  widgets: (rawVal, ctx) => parseWidgetsMap(rawVal, ctx),
+  static: boolean
+}));
+
+const parseAnswerForm = object({
+  value: string,
+  form: boolean,
+  simplify: boolean,
+  considered: enumeration("correct", "wrong", "ungraded"),
+  key: optional(string)
+});
+const parseExpressionWidget = parseWidget(constant("expression"), object({
+  answerForms: array(parseAnswerForm),
+  functions: array(string),
+  times: boolean,
+  visibleLabel: optional(string),
+  ariaLabel: optional(string),
+  buttonSets: array(enumeration("basic", "basic+div", "trig", "prealgebra", "logarithms", "basic relations", "advanced relations")),
+  buttonsVisible: optional(enumeration("always", "never", "focused"))
+}));
+
+const parsePerseusImageBackground = object({
+  url: optional(nullable(string)),
+  width: optional(number),
+  height: optional(number),
+  top: optional(number),
+  left: optional(number),
+  bottom: optional(number),
+  // TODO(benchristel): convert scale to a number
+  scale: optional(union(number).or(string).parser)
+});
+
+// Used to represent 2-D points and ranges
+const pairOfNumbers = pair(number, number);
+const parsePerseusGraphTypeAngle = object({
+  type: constant("angle"),
+  showAngles: optional(boolean),
+  allowReflexAngles: optional(boolean),
+  angleOffsetDeg: optional(number),
+  snapDegrees: optional(number),
+  match: optional(constant("congruent")),
+  coords: optional(trio(pairOfNumbers, pairOfNumbers, pairOfNumbers)),
+  startCoords: optional(trio(pairOfNumbers, pairOfNumbers, pairOfNumbers))
+});
+const parsePerseusGraphTypeCircle = object({
+  type: constant("circle"),
+  center: optional(pairOfNumbers),
+  radius: optional(number),
+  startCoords: optional(object({
+    center: pairOfNumbers,
+    radius: number
+  })),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypeLinear = object({
+  type: constant("linear"),
+  coords: optional(nullable(pair(pairOfNumbers, pairOfNumbers))),
+  startCoords: optional(pair(pairOfNumbers, pairOfNumbers)),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypeLinearSystem = object({
+  type: constant("linear-system"),
+  // TODO(benchristel): default coords to empty array?
+  coords: optional(nullable(array(pair(pairOfNumbers, pairOfNumbers)))),
+  startCoords: optional(array(pair(pairOfNumbers, pairOfNumbers))),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypeNone = object({
+  type: constant("none")
+});
+const parsePerseusGraphTypePoint = object({
+  type: constant("point"),
+  numPoints: optional(union(number).or(constant("unlimited")).parser),
+  coords: optional(nullable(array(pairOfNumbers))),
+  startCoords: optional(array(pairOfNumbers)),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypePolygon = object({
+  type: constant("polygon"),
+  numSides: optional(union(number).or(constant("unlimited")).parser),
+  showAngles: optional(boolean),
+  showSides: optional(boolean),
+  snapTo: optional(enumeration("grid", "angles", "sides")),
+  match: optional(enumeration("similar", "congruent", "approx")),
+  startCoords: optional(array(pairOfNumbers)),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypeQuadratic = object({
+  type: constant("quadratic"),
+  coords: optional(nullable(trio(pairOfNumbers, pairOfNumbers, pairOfNumbers))),
+  startCoords: optional(trio(pairOfNumbers, pairOfNumbers, pairOfNumbers)),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypeRay = object({
+  type: constant("ray"),
+  coords: optional(nullable(pair(pairOfNumbers, pairOfNumbers))),
+  startCoords: optional(pair(pairOfNumbers, pairOfNumbers)),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypeSegment = object({
+  type: constant("segment"),
+  // TODO(benchristel): default numSegments?
+  numSegments: optional(number),
+  coords: optional(nullable(array(pair(pairOfNumbers, pairOfNumbers)))),
+  startCoords: optional(array(pair(pairOfNumbers, pairOfNumbers))),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphTypeSinusoid = object({
+  type: constant("sinusoid"),
+  coords: optional(nullable(array(pairOfNumbers))),
+  startCoords: optional(array(pairOfNumbers)),
+  // TODO: remove coord? it's legacy.
+  coord: optional(pairOfNumbers)
+});
+const parsePerseusGraphType = union(parsePerseusGraphTypeAngle).or(parsePerseusGraphTypeAngle).or(parsePerseusGraphTypeCircle).or(parsePerseusGraphTypeLinear).or(parsePerseusGraphTypeLinearSystem).or(parsePerseusGraphTypeNone).or(parsePerseusGraphTypePoint).or(parsePerseusGraphTypePolygon).or(parsePerseusGraphTypeQuadratic).or(parsePerseusGraphTypeRay).or(parsePerseusGraphTypeSegment).or(parsePerseusGraphTypeSinusoid).parser;
+const parseLockedFigureColor = enumeration(...lockedFigureColorNames);
+const parseLockedFigureFillType = enumeration("none", "white", "translucent", "solid");
+const parseLockedLineStyle = enumeration("solid", "dashed");
+const parseLockedLabelType = object({
+  type: constant("label"),
+  coord: pairOfNumbers,
+  text: string,
+  color: parseLockedFigureColor,
+  size: enumeration("small", "medium", "large")
+});
+const parseLockedPointType = object({
+  type: constant("point"),
+  coord: pairOfNumbers,
+  color: parseLockedFigureColor,
+  filled: boolean,
+  // TODO(benchristel): default labels to empty array?
+  labels: optional(array(parseLockedLabelType)),
+  ariaLabel: optional(string)
+});
+const parseLockedLineType = object({
+  type: constant("line"),
+  kind: enumeration("line", "ray", "segment"),
+  points: pair(parseLockedPointType, parseLockedPointType),
+  color: parseLockedFigureColor,
+  lineStyle: parseLockedLineStyle,
+  showPoint1: boolean,
+  showPoint2: boolean,
+  // TODO(benchristel): default labels to empty array?
+  labels: optional(array(parseLockedLabelType)),
+  ariaLabel: optional(string)
+});
+const parseLockedVectorType = object({
+  type: constant("vector"),
+  points: pair(pairOfNumbers, pairOfNumbers),
+  color: parseLockedFigureColor,
+  // TODO(benchristel): default labels to empty array?
+  labels: optional(array(parseLockedLabelType)),
+  ariaLabel: optional(string)
+});
+const parseLockedEllipseType = object({
+  type: constant("ellipse"),
+  center: pairOfNumbers,
+  radius: pairOfNumbers,
+  angle: number,
+  color: parseLockedFigureColor,
+  fillStyle: parseLockedFigureFillType,
+  strokeStyle: parseLockedLineStyle,
+  // TODO(benchristel): default labels to empty array?
+  labels: optional(array(parseLockedLabelType)),
+  ariaLabel: optional(string)
+});
+const parseLockedPolygonType = object({
+  type: constant("polygon"),
+  points: array(pairOfNumbers),
+  color: parseLockedFigureColor,
+  showVertices: boolean,
+  fillStyle: parseLockedFigureFillType,
+  strokeStyle: parseLockedLineStyle,
+  // TODO(benchristel): default labels to empty array?
+  labels: optional(array(parseLockedLabelType)),
+  ariaLabel: optional(string)
+});
+const parseLockedFunctionType = object({
+  type: constant("function"),
+  color: parseLockedFigureColor,
+  strokeStyle: parseLockedLineStyle,
+  equation: string,
+  directionalAxis: enumeration("x", "y"),
+  domain: optional(pairOfNumbers),
+  // TODO(benchristel): default labels to empty array?
+  labels: optional(array(parseLockedLabelType)),
+  ariaLabel: optional(string)
+});
+const parseLockedFigure = union(parseLockedPointType).or(parseLockedLineType).or(parseLockedVectorType).or(parseLockedEllipseType).or(parseLockedPolygonType).or(parseLockedFunctionType).or(parseLockedLabelType).parser;
+const parseInteractiveGraphWidget = parseWidget(constant("interactive-graph"), object({
+  step: pairOfNumbers,
+  gridStep: pairOfNumbers,
+  snapStep: pairOfNumbers,
+  backgroundImage: optional(parsePerseusImageBackground),
+  markings: enumeration("graph", "grid", "none"),
+  labels: array(string),
+  showProtractor: boolean,
+  showRuler: optional(boolean),
+  showTooltips: optional(boolean),
+  rulerLabel: optional(string),
+  rulerTicks: optional(number),
+  range: pair(pairOfNumbers, pairOfNumbers),
+  graph: parsePerseusGraphType,
+  correct: parsePerseusGraphType,
+  // TODO(benchristel): default lockedFigures to empty array
+  lockedFigures: optional(array(parseLockedFigure)),
+  fullGraphLabel: optional(string),
+  fullGraphAriaDescription: optional(string)
+}));
+
+const parseWidgetsMap = (rawValue, ctx) => {
+  if (!isObject(rawValue)) {
+    return ctx.failure("PerseusWidgetsMap", rawValue);
+  }
+  const widgetsMap = {};
+  for (const key of Object.keys(rawValue)) {
+    // parseWidgetsMapEntry modifies the widgetsMap. This is kind of gross,
+    // but it's the only way I could find to make TypeScript check the key
+    // against the widget type.
+    const entryResult = parseWidgetsMapEntry([key, rawValue[key]], widgetsMap, ctx.forSubtree(key));
+    if (isFailure(entryResult)) {
+      return entryResult;
+    }
+  }
+  return ctx.success(widgetsMap);
+};
+const parseWidgetsMapEntry = (_ref, widgetMap, ctx) => {
+  let [key, widget] = _ref;
+  const keyComponentsResult = parseWidgetMapKeyComponents(key.split(" "), ctx);
+  if (isFailure(keyComponentsResult)) {
+    return keyComponentsResult;
+  }
+  const [type, id] = keyComponentsResult.value;
+  function parseAndAssign(key, parse) {
+    const widgetResult = parse(widget, ctx);
+    if (isFailure(widgetResult)) {
+      return widgetResult;
+    }
+    widgetMap[key] = widgetResult.value;
+    return ctx.success(undefined);
+  }
+  switch (type) {
+    case "categorizer":
+      return parseAndAssign(`categorizer ${id}`, parseCategorizerWidget);
+    case "cs-program":
+      return parseAndAssign(`cs-program ${id}`, parseCSProgramWidget);
+    case "definition":
+      return parseAndAssign(`definition ${id}`, parseDefinitionWidget);
+    case "dropdown":
+      return parseAndAssign(`dropdown ${id}`, parseDropdownWidget);
+    case "explanation":
+      return parseAndAssign(`explanation ${id}`, parseExplanationWidget);
+    case "expression":
+      return parseAndAssign(`expression ${id}`, parseExpressionWidget);
+    case "grapher":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`grapher ${id}`, any);
+    case "group":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`group ${id}`, any);
+    case "graded-group":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`graded-group ${id}`, any);
+    case "graded-group-set":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`graded-group-set ${id}`, any);
+    case "iframe":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`iframe ${id}`, any);
+    case "image":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`image ${id}`, any);
+    case "input-number":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`input-number ${id}`, any);
+    case "interaction":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`interaction ${id}`, any);
+    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);
+    case "matcher":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`matcher ${id}`, any);
+    case "matrix":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`matrix ${id}`, any);
+    case "measurer":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`measurer ${id}`, any);
+    case "molecule-renderer":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`molecule-renderer ${id}`, any);
+    case "number-line":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`number-line ${id}`, any);
+    case "numeric-input":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`numeric-input ${id}`, any);
+    case "orderer":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`orderer ${id}`, any);
+    case "passage":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`passage ${id}`, any);
+    case "passage-ref":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`passage-ref ${id}`, any);
+    case "passage-ref-target":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      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);
+    case "plotter":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`plotter ${id}`, any);
+    case "python-program":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`python-program ${id}`, any);
+    case "radio":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`radio ${id}`, any);
+    case "sorter":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`sorter ${id}`, any);
+    case "table":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`table ${id}`, any);
+    case "video":
+      // TODO(LEMS-2585): implement a real parser for this widget
+      return parseAndAssign(`video ${id}`, any);
+    default:
+      return ctx.failure("a valid widget type", type);
+  }
+};
+const parseStringToPositiveInt = (rawValue, ctx) => {
+  if (typeof rawValue !== "string" || !/^[1-9][0-9]*$/.test(rawValue)) {
+    return ctx.failure("numeric string", rawValue);
+  }
+  return ctx.success(+rawValue);
+};
+const parseWidgetMapKeyComponents = pair(string, parseStringToPositiveInt);
+
+const parseHint = object({
+  replace: optional(boolean),
+  content: string,
+  widgets: parseWidgetsMap,
+  metadata: optional(array(string)),
+  images: record(string, object({
+    width: number,
+    height: number
+  }))
+});
+
+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),
+  answerArea: record(enumeration(...ItemExtras), boolean),
+  itemDataVersion: object({
+    major: number,
+    minor: number
+  }),
+  // Deprecated field
+  answer: any
+});
+
 /**
  * Helper to parse PerseusItem JSON
  * Why not just use JSON.parse? We want: