@khanacademy/perseus 41.1.1 → 41.3.0

package/dist/es/index.js

@@ -19,10 +19,11 @@ import $ from 'jquery';
 import { v4 } from 'uuid';
 import { PerseusError, Errors, addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
 import PropTypes from 'prop-types';
-import { number, point, vector as vector$1, line } from '@khanacademy/kmath';
+import { number as number$1, point, vector as vector$1, line } from '@khanacademy/kmath';
 import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
-import SimpleMarkdown from '@khanacademy/simple-markdown';
+import SimpleMarkdown$1 from '@khanacademy/simple-markdown';
+import * as SimpleMarkdown from '@khanacademy/pure-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
 import { TextField } from '@khanacademy/wonder-blocks-form';
 import Button from '@khanacademy/wonder-blocks-button';
@@ -1168,6 +1169,42 @@ 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 => {
+  var _match$;
+  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$ = match == null ? void 0 : match[0]) != null ? _match$ : ".";
+  }
+};
+
 // 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.
@@ -1288,7 +1325,7 @@ const KhanMath = {
   toFixedApprox: function (num, precision) {
     // TODO(aria): Make this locale-dependent
     const fixedStr = num.toFixed(precision);
-    if (number.equal(+fixedStr, num)) {
+    if (number$1.equal(+fixedStr, num)) {
       return fixedStr;
     }
     return "\\approx " + fixedStr;
@@ -1300,7 +1337,7 @@ const KhanMath = {
    */
   roundToApprox: function (num, precision) {
     const fixed = KhanMath.roundTo(precision, num);
-    if (number.equal(fixed, num)) {
+    if (number$1.equal(fixed, num)) {
       return String(fixed);
     }
     return KhanMath.toFixedApprox(num, precision);
@@ -1372,32 +1409,32 @@ const KhanMath = {
     return null;
   },
   // Returns a string of the number in a specified format
-  toNumericString: function (number$1, format) {
-    if (number$1 == null) {
+  toNumericString: function (number, format) {
+    if (number == null) {
       return "";
     }
-    if (number$1 === 0) {
+    if (number === 0) {
       return "0"; // otherwise it might end up as 0% or 0pi
     }
 
     if (format === "percent") {
-      return number$1 * 100 + "%";
+      return number * 100 + "%";
     }
     if (format === "pi") {
-      const fraction = number.toFraction(number$1 / Math.PI);
+      const fraction = number$1.toFraction(number / Math.PI);
       const numerator = Math.abs(fraction[0]);
       const denominator = fraction[1];
-      if (number.isInteger(numerator)) {
-        const sign = number$1 < 0 ? "-" : "";
+      if (number$1.isInteger(numerator)) {
+        const sign = number < 0 ? "-" : "";
         const pi = "\u03C0";
         return sign + (numerator === 1 ? "" : numerator) + pi + (denominator === 1 ? "" : "/" + denominator);
       }
     }
     if (_(["proper", "improper", "mixed", "fraction"]).contains(format)) {
-      const fraction = number.toFraction(number$1);
+      const fraction = number$1.toFraction(number);
       const numerator = Math.abs(fraction[0]);
       const denominator = fraction[1];
-      const sign = number$1 < 0 ? "-" : "";
+      const sign = number < 0 ? "-" : "";
       if (denominator === 1) {
         return sign + numerator; // for integers, irrational, d > 1000
       }
@@ -1411,7 +1448,7 @@ const KhanMath = {
     }
 
     // otherwise (decimal, float, long long)
-    return String(number$1);
+    return String(number);
   }
 };
 function sum$1(array) {
@@ -2099,32 +2136,6 @@ const KhanAnswerTypes = {
   }
 };
 
-/**
- *  Get the character used for separating decimals.
- */
-const getDecimalSeparator = locale => {
-  var _match$;
-  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$ = match == null ? void 0 : match[0]) != null ? _match$ : ".";
-  }
-};
-
 /* 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
@@ -2143,7 +2154,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 = _.clone(rubric);
   _.extend(options, {
     decimal_separator: getDecimalSeparator(locale)
@@ -2393,6 +2404,9 @@ class Expression extends React.Component {
   getUserInput() {
     return Expression.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$t(this.props, this.getUserInput());
+  }
   focusInputPath(inputPath) {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
@@ -2643,7 +2657,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) {
@@ -9330,7 +9344,7 @@ class Graphie$1 {
       // We round the coordinates to make testing easier, because trig
       // operations return unround numbers.
       // TODO(benchristel): move rounding to scalePoint?
-      const round = x => number.round(x, 6);
+      const round = x => number$1.round(x, 6);
       const startPoint = this.scalePoint([round(center[0] + startVector[0]), round(center[1] + startVector[1])]);
       const endPoint = this.scalePoint([round(center[0] + endVector[0]), round(center[1] + endVector[1])]);
       const largeAngle = ((endAngle - startAngle) % 360 + 360) % 360 > 180;
@@ -10887,7 +10901,7 @@ function similar(coords1, coords2, tolerance) {
         return eq$3(factors[0], factor);
       });
       const congruentEnough = _.all(sidePairs, function (pair) {
-        return number.equal(pair[0], pair[1], tolerance);
+        return number$1.equal(pair[0], pair[1], tolerance);
       });
       if (same && congruentEnough) {
         return true;
@@ -17914,7 +17928,7 @@ class InteractionTracker {
  */
 const arrayRules = {
   fence: {
-    match: SimpleMarkdown.defaultRules.fence.match,
+    match: SimpleMarkdown$1.defaultRules.fence.match,
     order: 1,
     parse: (capture, state, parse) => ({
       type: "codeBlock",
@@ -17923,14 +17937,14 @@ const arrayRules = {
     })
   },
   paragraph: {
-    match: SimpleMarkdown.defaultRules.paragraph.match,
+    match: SimpleMarkdown$1.defaultRules.paragraph.match,
     order: 2,
     parse: (capture, state, parse) => ({
       content: capture[1]
     })
   }
 };
-const builtArrayParser = SimpleMarkdown.parserFor(arrayRules);
+const builtArrayParser = SimpleMarkdown$1.parserFor(arrayRules);
 
 // This should just return an array of strings! magick!
 const parseToArray = source => {
@@ -18355,7 +18369,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
   // iOS 14.4, in order for VoiceOver to work.
   table: _extends({}, pureMarkdownRules.table, {
     react: function (node, output, state) {
-      const table = SimpleMarkdown.defaultRules.table.react(node, output, state);
+      const table = SimpleMarkdown$1.defaultRules.table.react(node, output, state);
       if (!state.isMobile) {
         return table;
       }
@@ -18404,7 +18418,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
           contents = rules$1.lint.react(node.table, output, state);
         }
       } else {
-        const tableOutput = SimpleMarkdown.defaultRules.table.react(node.table, output, state);
+        const tableOutput = SimpleMarkdown$1.defaultRules.table.react(node.table, output, state);
         const caption = /*#__PURE__*/React.createElement("caption", {
           key: "caption",
           className: "perseus-table-title"
@@ -18474,7 +18488,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
   // window and handle reverse tabnapping phishing attacks
   link: _extends({}, pureMarkdownRules.link, {
     react: function (node, output, state) {
-      const link = SimpleMarkdown.defaultRules.link.react(node, output, state);
+      const link = SimpleMarkdown$1.defaultRules.link.react(node, output, state);
       const href = link.props.href;
       let rel = null;
       // The href prop should always be here, but just in case somehow the article's
@@ -18507,7 +18521,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
           className: "perseus-markdown-alt perseus-sr-only"
         }, output(node.content, state));
       }
-      return SimpleMarkdown.defaultRules.codeBlock.react(node, output, state);
+      return SimpleMarkdown$1.defaultRules.codeBlock.react(node, output, state);
     }
   }),
   // The lint rule never actually matches anything.
@@ -18549,7 +18563,7 @@ const inlineNodeTypes = {
 };
 
 // @ts-expect-error - TS2345 - Argument of type '{ readonly columns: { readonly react: (node: any, output: any, state: any) => Element; readonly order: -2; readonly match: any; readonly parse: (capture: any, parse: any, state: any) => any; }; ... 35 more ...; readonly text: TextInOutRule; }' is not assignable to parameter of type 'ParserRules'.
-const builtParser$1 = SimpleMarkdown.parserFor(rules$1);
+const builtParser$1 = SimpleMarkdown$1.parserFor(rules$1);
 const parse$3 = (source, state) => {
   const paragraphedSource = source + "\n\n";
   return builtParser$1(paragraphedSource, _extends({}, state, {
@@ -18642,10 +18656,10 @@ var PerseusMarkdown = {
   traverseContent: traverseContent,
   parse: parse$3,
   parseInline: inlineParser,
-  reactFor: SimpleMarkdown.reactFor,
-  ruleOutput: SimpleMarkdown.ruleOutput(rules$1, "react"),
-  basicOutput: SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules$1, "react")),
-  sanitizeUrl: SimpleMarkdown.sanitizeUrl
+  reactFor: SimpleMarkdown$1.reactFor,
+  ruleOutput: SimpleMarkdown$1.ruleOutput(rules$1, "react"),
+  basicOutput: SimpleMarkdown$1.reactFor(SimpleMarkdown$1.ruleOutput(rules$1, "react")),
+  sanitizeUrl: SimpleMarkdown$1.sanitizeUrl
 };
 
 class QuestionParagraph extends React.Component {
@@ -18766,9 +18780,9 @@ const getWidgetExport = name => {
   var _widgets$name3;
   return (_widgets$name3 = widgets[name]) != null ? _widgets$name3 : null;
 };
-const getWidgetValidator = name => {
-  var _widgets$name$validat, _widgets$name4;
-  return (_widgets$name$validat = (_widgets$name4 = widgets[name]) == null ? void 0 : _widgets$name4.validator) != null ? _widgets$name$validat : null;
+const getWidgetScorer = name => {
+  var _widgets$name$scorer, _widgets$name4;
+  return (_widgets$name$scorer = (_widgets$name4 = widgets[name]) == null ? void 0 : _widgets$name4.scorer) != null ? _widgets$name$scorer : null;
 };
 const getEditor = name => {
   return _.has(editors, name) ? editors[name] : null;
@@ -19073,7 +19087,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getWidgetExport: getWidgetExport,
-  getWidgetValidator: getWidgetValidator,
+  getWidgetScorer: getWidgetScorer,
   getEditor: getEditor,
   getTransform: getTransform,
   getVersion: getVersion,
@@ -19105,12 +19119,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);
@@ -19135,12 +19149,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;
@@ -19599,42 +19613,6 @@ class Renderer extends React.Component {
       }
       return null;
     };
-    this.getWidgetProps = id => {
-      const apiOptions = this.getApiOptions();
-      const widgetProps = this.state.widgetProps[id] || {};
-
-      // 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 reviewModeRubric = this.props.reviewMode && widgetInfo ? widgetInfo.options : null;
-      if (!this._interactionTrackers) {
-        this._interactionTrackers = {};
-      }
-      let interactionTracker = this._interactionTrackers[id];
-      if (!interactionTracker) {
-        interactionTracker = this._interactionTrackers[id] = new InteractionTracker(apiOptions.trackInteraction, widgetInfo && widgetInfo.type, id, getTracking(widgetInfo && widgetInfo.type));
-      }
-      return _extends({}, widgetProps, {
-        widgetId: id,
-        alignment: widgetInfo && widgetInfo.alignment,
-        static: widgetInfo == null ? void 0 : widgetInfo.static,
-        problemNum: this.props.problemNum,
-        apiOptions: this.getApiOptions(),
-        keypadElement: this.props.keypadElement,
-        questionCompleted: this.props.questionCompleted,
-        showSolutions: this.props.showSolutions,
-        onFocus: _.partial(this._onWidgetFocus, id),
-        onBlur: _.partial(this._onWidgetBlur, id),
-        findWidgets: this.findWidgets,
-        reviewModeRubric: reviewModeRubric,
-        reviewMode: this.props.reviewMode,
-        onChange: (newProps, cb, silent = false) => {
-          this._setWidgetProps(id, newProps, cb, silent);
-        },
-        trackInteraction: interactionTracker.track,
-        isLastUsedWidget: id === this.state.lastUsedWidgetId
-      });
-    };
     /**
      * Serializes the questions state so it can be recovered.
      *
@@ -20583,9 +20561,9 @@ class Renderer extends React.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.
-    _.each(this.widgetIds, id => {
+    this.widgetIds.forEach(id => {
       const container = this._widgetContainers.get(makeContainerId(id));
-      container && container.replaceWidgetProps(this.getWidgetProps(id));
+      container == null || container.replaceWidgetProps(this.getWidgetProps(id));
     });
     if (this.props.serializedState && !_.isEqual(this.props.serializedState, this.getSerializedState())) {
       this.restoreSerializedState(this.props.serializedState);
@@ -20614,6 +20592,42 @@ class Renderer extends React.Component {
     }
     this._isMounted = false;
   }
+  getWidgetProps(widgetId) {
+    const apiOptions = this.getApiOptions();
+    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[widgetId];
+    const reviewModeRubric = this.props.reviewMode && widgetInfo ? widgetInfo.options : null;
+    if (!this._interactionTrackers) {
+      this._interactionTrackers = {};
+    }
+    let interactionTracker = this._interactionTrackers[widgetId];
+    if (!interactionTracker) {
+      interactionTracker = this._interactionTrackers[widgetId] = new InteractionTracker(apiOptions.trackInteraction, widgetInfo && widgetInfo.type, widgetId, getTracking(widgetInfo && widgetInfo.type));
+    }
+    return _extends({}, widgetProps, {
+      widgetId: widgetId,
+      alignment: widgetInfo && widgetInfo.alignment,
+      static: widgetInfo == null ? void 0 : widgetInfo.static,
+      problemNum: this.props.problemNum,
+      apiOptions: this.getApiOptions(),
+      keypadElement: this.props.keypadElement,
+      questionCompleted: this.props.questionCompleted,
+      showSolutions: this.props.showSolutions,
+      onFocus: _.partial(this._onWidgetFocus, widgetId),
+      onBlur: _.partial(this._onWidgetBlur, widgetId),
+      findWidgets: this.findWidgets,
+      reviewModeRubric: reviewModeRubric,
+      reviewMode: this.props.reviewMode,
+      onChange: (newProps, cb, silent = false) => {
+        this._setWidgetProps(widgetId, newProps, cb, silent);
+      },
+      trackInteraction: interactionTracker.track,
+      isLastUsedWidget: widgetId === this.state.lastUsedWidgetId
+    });
+  }
   emptyWidgets() {
     return emptyWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
   }
@@ -20650,6 +20664,25 @@ class Renderer extends React.Component {
     });
     return userInputMap;
   }
+  /**
+   * 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 == null || widget.getPromptJSON == null ? void 0 : 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
@@ -21389,6 +21422,19 @@ SimpleKeypadInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.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.
@@ -21579,7 +21625,7 @@ const answerTypes = {
     forms: "pi"
   }
 };
-function inputNumberValidator(userInput, rubric, strings) {
+function scoreInputNumber(userInput, rubric, strings) {
   if (rubric.answerType == null) {
     rubric.answerType = "number";
   }
@@ -21713,6 +21759,9 @@ class InputNumber extends React.Component {
   getUserInput() {
     return InputNumber.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$s(this.props, this.getUserInput());
+  }
   render() {
     if (this.props.apiOptions.customKeypad) {
       // TODO(charlie): Support "Review Mode".
@@ -21814,7 +21863,7 @@ var InputNumber$1 = {
   widget: InputNumber,
   transform: propTransform$3,
   isLintable: true,
-  validator: inputNumberValidator,
+  scorer: scoreInputNumber,
   getOneCorrectAnswerFromRubric(rubric) {
     if (rubric.value == null) {
       return;
@@ -21827,6 +21876,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",
@@ -21885,7 +21944,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) {
   var _matchedAnswer$messag;
   const defaultAnswerForms = answerFormButtons.map(e => e["value"])
   // Don't default to validating the answer as a pi answer
@@ -22056,6 +22115,9 @@ class NumericInput extends React.Component {
   getUserInput() {
     return NumericInput.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    return getPromptJSON$r(this.props, this.getUserInput());
+  }
   render() {
     let labelText = this.props.labelText;
     if (labelText == null || labelText === "") {
@@ -22180,7 +22242,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 => {
@@ -22211,15 +22273,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(points = 0) {
+function scoreNoop(points = 0) {
   return {
     type: "points",
     earned: points,
@@ -23603,6 +23693,17 @@ const styles$x = StyleSheet.create({
   }
 });
 
+const getPromptJSON$o = renderProps => {
+  return {
+    type: "passage",
+    options: {
+      passageTitle: renderProps.passageTitle,
+      passageText: renderProps.passageText,
+      footnotes: renderProps.footnotes
+    }
+  };
+};
+
 function getInitialParseState() {
   return {
     currentRef: [],
@@ -23652,12 +23753,12 @@ const AltText = ({
   }));
 };
 const rules = {
-  newline: SimpleMarkdown.defaultRules.newline,
-  paragraph: SimpleMarkdown.defaultRules.paragraph,
-  escape: SimpleMarkdown.defaultRules.escape,
+  newline: SimpleMarkdown$1.defaultRules.newline,
+  paragraph: SimpleMarkdown$1.defaultRules.paragraph,
+  escape: SimpleMarkdown$1.defaultRules.escape,
   passageFootnote: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.1,
-    match: SimpleMarkdown.inlineRegex(/^\^/),
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.1,
+    match: SimpleMarkdown$1.inlineRegex(/^\^/),
     parse: (capture, parse, state) => {
       // if no footnotes have been seen, we're id 1. otherwise,
       // we're the next subsequent id
@@ -23686,7 +23787,7 @@ const rules = {
     }
   },
   refStart: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.2,
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.2,
     match: function (source) {
       const capture = /^\{\{/.exec(source);
       if (capture) {
@@ -23772,8 +23873,8 @@ const rules = {
     }
   },
   refEnd: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.3,
-    match: SimpleMarkdown.inlineRegex(/^\}\}/),
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.3,
+    match: SimpleMarkdown$1.inlineRegex(/^\}\}/),
     parse: (capture, parse, state) => {
       if (!state.useRefs) {
         return {
@@ -23801,8 +23902,8 @@ const rules = {
     }
   },
   squareLabel: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.4,
-    match: SimpleMarkdown.inlineRegex(/^\[\[(\w+)\]\]( *)/),
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.4,
+    match: SimpleMarkdown$1.inlineRegex(/^\[\[(\w+)\]\]( *)/),
     parse: (capture, parse, state) => {
       if (!state.firstQuestionRef) {
         state.firstQuestionRef = capture[1];
@@ -23828,8 +23929,8 @@ const rules = {
     }
   },
   circleLabel: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.5,
-    match: SimpleMarkdown.inlineRegex(/^\(\((\w+)\)\)( *)/),
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.5,
+    match: SimpleMarkdown$1.inlineRegex(/^\(\((\w+)\)\)( *)/),
     parse: (capture, parse, state) => {
       return {
         content: capture[1],
@@ -23853,8 +23954,8 @@ const rules = {
     }
   },
   squareBracketRef: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.6,
-    match: SimpleMarkdown.inlineRegex(/^\[(\d+)\]( *)/),
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.6,
+    match: SimpleMarkdown$1.inlineRegex(/^\[(\d+)\]( *)/),
     parse: (capture, parse, state) => {
       if (!state.firstSentenceRef) {
         state.firstSentenceRef = capture[1];
@@ -23877,8 +23978,8 @@ const rules = {
     }
   },
   highlight: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.7,
-    match: SimpleMarkdown.inlineRegex(/^{highlighting.start}(.+?){highlighting.end}/),
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.7,
+    match: SimpleMarkdown$1.inlineRegex(/^{highlighting.start}(.+?){highlighting.end}/),
     parse: (capture, parse, state) => {
       return {
         content: capture[1]
@@ -23892,8 +23993,8 @@ const rules = {
     }
   },
   reviewHighlight: {
-    order: SimpleMarkdown.defaultRules.escape.order + 0.7,
-    match: SimpleMarkdown.inlineRegex(/^{review-highlighting.start}(.+?){review-highlighting.end}/),
+    order: SimpleMarkdown$1.defaultRules.escape.order + 0.7,
+    match: SimpleMarkdown$1.inlineRegex(/^{review-highlighting.start}(.+?){review-highlighting.end}/),
     parse: (capture, parse, state) => {
       return {
         content: capture[1]
@@ -23906,11 +24007,11 @@ const rules = {
       }, node.content)];
     }
   },
-  strong: SimpleMarkdown.defaultRules.strong,
-  u: SimpleMarkdown.defaultRules.u,
-  em: SimpleMarkdown.defaultRules.em,
-  del: SimpleMarkdown.defaultRules.del,
-  text: _extends({}, SimpleMarkdown.defaultRules.text, {
+  strong: SimpleMarkdown$1.defaultRules.strong,
+  u: SimpleMarkdown$1.defaultRules.u,
+  em: SimpleMarkdown$1.defaultRules.em,
+  del: SimpleMarkdown$1.defaultRules.del,
+  text: _extends({}, SimpleMarkdown$1.defaultRules.text, {
     react(node, output, state) {
       return /*#__PURE__*/React.createElement("span", {
         key: state.key
@@ -23951,7 +24052,7 @@ const CIRCLE_LABEL_STYLE = {
   borderRadius: "50%",
   textAlign: "center"
 };
-const builtParser = SimpleMarkdown.parserFor(rules);
+const builtParser = SimpleMarkdown$1.parserFor(rules);
 const parse$2 = (source, state) => {
   // @ts-expect-error - TS2322 - Type 'ParseState | {}' is not assignable to type 'ParseState | null | undefined'.
   state = state || {};
@@ -23960,7 +24061,7 @@ const parse$2 = (source, state) => {
 };
 
 // @ts-expect-error - TS2322 - Type 'ReactOutput' is not assignable to type '(arg1: SingleASTNode[]) => ReactElement<any, string | JSXElementConstructor<any>>'.
-const output = SimpleMarkdown.reactFor(SimpleMarkdown.ruleOutput(rules, "react"));
+const output = SimpleMarkdown$1.reactFor(SimpleMarkdown$1.ruleOutput(rules, "react"));
 var PassageMarkdown = {
   parse: parse$2,
   output,
@@ -24233,6 +24334,9 @@ class Passage extends React.Component {
       content: refContent
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$o(this.props);
+  }
 
   /**
    * Rendering
@@ -24387,7 +24491,7 @@ var Passage$1 = {
     return _.pick(editorProps, "passageTitle", "passageText", "footnotes", "showLineNumbers");
   },
   isLintable: true,
-  validator: () => noopValidator()
+  scorer: () => scoreNoop()
 };
 
 /**
@@ -24462,6 +24566,9 @@ class PassageRef extends React.Component {
     window.removeEventListener("resize", this._throttledUpdateRange);
     this._isMounted = false;
   }
+  getPromptJSON() {
+    return getPromptJSON$p(this.props);
+  }
   render() {
     const {
       strings
@@ -24517,8 +24624,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()
 };
 
 /**
@@ -25876,7 +25983,7 @@ const styles$p = 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);
@@ -25886,10 +25993,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
@@ -25897,9 +26004,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
@@ -25907,9 +26013,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;
       });
@@ -26031,7 +26135,7 @@ class Radio$1 extends React.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 => _extends({}, state, {
           highlighted: state.selected,
@@ -26079,32 +26183,19 @@ class Radio$1 extends React.Component {
       }
     };
   }
-  static getUserInputFromProps(props) {
+  static getUserInputFromProps(props, unshuffle = 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
     }
@@ -26113,27 +26204,14 @@ class Radio$1 extends React.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
@@ -26165,6 +26243,10 @@ class Radio$1 extends React.Component {
   getUserInput() {
     return Radio$1.getUserInputFromProps(this.props);
   }
+  getPromptJSON() {
+    const userInput = Radio$1.getUserInputFromProps(this.props, false);
+    return getPromptJSON$q(this.props, userInput);
+  }
   render() {
     const {
       choices
@@ -26402,13 +26484,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) => {
@@ -26453,6 +26548,9 @@ class Categorizer extends React.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'.
@@ -26606,7 +26704,7 @@ var Categorizer$1 = {
     return _.pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
   isLintable: true,
-  validator: categorizerValidator
+  scorer: scoreCategorizer
 };
 
 /**
@@ -26656,7 +26754,19 @@ const parseUrl = url => new URL(url, location().origin);
  */
 const toAbsoluteUrl = url => parseUrl(url).href;
 
-function csProgramValidator(state) {
+const getUnsupportedPromptJSON = (widgetType, message = "") => {
+  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") {
@@ -26742,6 +26852,9 @@ class CSProgram extends React.Component {
       message: this.props.message
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$m();
+  }
   render() {
     if (!this.props.programID) {
       return /*#__PURE__*/React.createElement("div", null);
@@ -26824,7 +26937,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.Component {
@@ -26834,6 +26955,9 @@ class Definition extends React.Component {
     // doesn't implement any Widget methods
     this.isWidget = true;
   }
+  getPromptJSON() {
+    return getPromptJSON$l(this.props);
+  }
   render() {
     return /*#__PURE__*/React.createElement(DefinitionConsumer, null, ({
       activeDefinitionId,
@@ -26889,8 +27013,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
@@ -26921,11 +27045,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 {
@@ -26968,6 +27104,9 @@ class Dropdown extends React.Component {
       value: this.props.selected
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$k(this.props, this.getUserInput());
+  }
   render() {
     const children = [/*#__PURE__*/React.createElement(OptionItem, {
       key: "placeholder",
@@ -27015,7 +27154,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
@@ -27052,6 +27199,9 @@ class Explanation extends React.Component {
   componentWillUnmount() {
     this._mounted = false;
   }
+  getPromptJSON() {
+    return getPromptJSON$j(this.props);
+  }
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp : caretDown;
@@ -27166,8 +27316,25 @@ var Explanation$1 = {
   widget: Explanation,
   transform: _.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 _extends({}, rendererJSON, {
+    title,
+    type: "graded-group",
+    hint: hintRendererJSON
+  });
 };
 
 class GradedGroupAnswerBar extends React.Component {
@@ -27302,6 +27469,8 @@ class GradedGroup extends React.Component {
       message: "",
       answerBarState: "HIDDEN"
     };
+    this.rendererRef = /*#__PURE__*/React.createRef();
+    this.hintRendererRef = /*#__PURE__*/React.createRef();
     this.change = (...args) => {
       // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
       return change.apply(this, args);
@@ -27317,13 +27486,9 @@ class GradedGroup extends React.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({
@@ -27332,12 +27497,11 @@ class GradedGroup extends React.Component {
       }
     };
     this._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();
+      var _this$rendererRef$cur, _this$rendererRef$cur2;
+      (_this$rendererRef$cur = this.rendererRef.current) == null || _this$rendererRef$cur.showRationalesForCurrentlySelectedChoices();
+      const score = ((_this$rendererRef$cur2 = this.rendererRef.current) == null ? void 0 : _this$rendererRef$cur2.score()) || {
+        type: "invalid"
+      };
       const {
         INVALID_MESSAGE_PREFIX,
         DEFAULT_INVALID_MESSAGE_1,
@@ -27357,34 +27521,39 @@ class GradedGroup extends React.Component {
     };
     // Mobile API
     this.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();
+      var _this$rendererRef$cur3;
+      return ((_this$rendererRef$cur3 = this.rendererRef.current) == null ? void 0 : _this$rendererRef$cur3.getInputPaths()) || [];
     };
     this.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);
+      var _this$rendererRef$cur4;
+      return (_this$rendererRef$cur4 = this.rendererRef.current) == null ? void 0 : _this$rendererRef$cur4.setInputValue(path, newValue, cb);
     };
     this.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();
+      var _this$rendererRef$cur5;
+      return !!((_this$rendererRef$cur5 = this.rendererRef.current) != null && _this$rendererRef$cur5.focus());
     };
     this.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);
+      var _this$rendererRef$cur6;
+      (_this$rendererRef$cur6 = this.rendererRef.current) == null || _this$rendererRef$cur6.focusPath(path);
     };
     this.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);
+      var _this$rendererRef$cur7;
+      (_this$rendererRef$cur7 = this.rendererRef.current) == null || _this$rendererRef$cur7.blurPath(path);
     };
   }
   shouldComponentUpdate(nextProps, nextState) {
     return nextProps !== this.props || nextState !== this.state;
   }
+  getPromptJSON() {
+    var _this$hintRendererRef, _this$props$hint, _this$rendererRef$cur8;
+    // 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 = this.hintRendererRef.current) == null ? void 0 : _this$hintRendererRef.getPromptJSON()) || {
+      content: ((_this$props$hint = this.props.hint) == null ? void 0 : _this$props$hint.content) || "",
+      widgets: {}
+    };
+    return getPromptJSON$i(this.props.title, (_this$rendererRef$cur8 = this.rendererRef.current) == null ? void 0 : _this$rendererRef$cur8.getPromptJSON(), hint);
+  }
   render() {
     const apiOptions = _.extend({}, ApiOptions.defaults, this.props.apiOptions, {
       // Api Rewriting to support correct onFocus/onBlur
@@ -27441,8 +27610,7 @@ class GradedGroup extends React.Component {
     }, !!this.props.title && /*#__PURE__*/React.createElement("div", {
       className: css(styles$j.title)
     }, this.props.title), /*#__PURE__*/React.createElement(Renderer, _extends({}, this.props, {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "renderer",
+      ref: this.rendererRef,
       apiOptions: _extends({}, apiOptions, {
         readOnly
       }),
@@ -27484,8 +27652,7 @@ class GradedGroup extends React.Component {
         });
       }
     }, this.context.strings.hideExplanation), /*#__PURE__*/React.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
@@ -27587,6 +27754,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.Component {
   constructor(...args) {
     super(...args);
@@ -27674,6 +27851,10 @@ class GradedGroupSet extends React.Component {
     nextProps.gradedGroups;
     return nextProps !== this.props || nextState !== this.state;
   }
+  getPromptJSON() {
+    const activeGroupPromptJSON = this._childGroup.getPromptJSON();
+    return getPromptJSON$h(this.props, activeGroupPromptJSON);
+  }
   render() {
     // When used in the context of TranslationEditor, render the
     // GradedGroup widget one below another instead of using an indicator
@@ -27911,6 +28092,33 @@ const styles$h = 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;
@@ -28434,7 +28642,7 @@ function getCoefficientsByType(data) {
     throw new PerseusError("Invalid grapher type", Errors.InvalidInput);
   }
 }
-function grapherValidator(userInput, rubric) {
+function scoreGrapher(userInput, rubric) {
   if (userInput.type !== rubric.correct.type) {
     return {
       type: "points",
@@ -28583,7 +28791,7 @@ class FunctionGrapher extends React.Component {
         constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           // Always enforce that this is a function
           const isFunction = _.all(this._coords(), (otherCoord, j) => {
-            return i === j || !otherCoord || !number.equal(coord[0], otherCoord[0]);
+            return i === j || !otherCoord || !number$1.equal(coord[0], otherCoord[0]);
           });
 
           // Evaluate this criteria before per-point
@@ -28783,6 +28991,9 @@ class Grapher extends React.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;
@@ -28868,7 +29079,20 @@ 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 _extends({}, rendererJSON, {
+    type: "group"
+  });
 };
 
 // exports has no 'transform'
@@ -28926,17 +29150,21 @@ class Group extends React.Component {
     var _this$rendererRef8;
     return (_this$rendererRef8 = this.rendererRef) == null ? void 0 : _this$rendererRef8.getUserInput();
   }
+  getPromptJSON() {
+    var _this$rendererRef9;
+    return getPromptJSON$f((_this$rendererRef9 = this.rendererRef) == null ? void 0 : _this$rendererRef9.getPromptJSON());
+  }
   // Mobile API:
   getInputPaths() {
-    var _this$rendererRef$get, _this$rendererRef9;
-    return (_this$rendererRef$get = (_this$rendererRef9 = this.rendererRef) == null ? void 0 : _this$rendererRef9.getInputPaths()) != null ? _this$rendererRef$get : [];
+    var _this$rendererRef$get, _this$rendererRef10;
+    return (_this$rendererRef$get = (_this$rendererRef10 = this.rendererRef) == null ? void 0 : _this$rendererRef10.getInputPaths()) != null ? _this$rendererRef$get : [];
   }
   focus() {
-    var _this$rendererRef$foc, _this$rendererRef10;
-    return (_this$rendererRef$foc = (_this$rendererRef10 = this.rendererRef) == null ? void 0 : _this$rendererRef10.focus()) != null ? _this$rendererRef$foc : false;
+    var _this$rendererRef$foc, _this$rendererRef11;
+    return (_this$rendererRef$foc = (_this$rendererRef11 = this.rendererRef) == null ? void 0 : _this$rendererRef11.focus()) != null ? _this$rendererRef$foc : false;
   }
   render() {
-    var _this$rendererRef11;
+    var _this$rendererRef12;
     const apiOptions = _extends({}, ApiOptions.defaults, this.props.apiOptions, {
       // Api Rewriting to support correct onFocus/onBlur
       // events for the mobile API
@@ -28972,7 +29200,7 @@ class Group extends React.Component {
         this.change("widgets", this.rendererRef.props.widgets);
       }
     };
-    const score = (_this$rendererRef11 = this.rendererRef) == null ? void 0 : _this$rendererRef11.score();
+    const score = (_this$rendererRef12 = this.rendererRef) == null ? void 0 : _this$rendererRef12.score();
     const isValid = score && score.type !== "invalid";
     const isInvalid = score && score.type === "invalid";
 
@@ -29022,7 +29250,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") {
@@ -29098,6 +29330,9 @@ class Iframe extends React.Component {
       message: this.props.message
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$e();
+  }
   render() {
     const style = {
       width: String(this.props.width),
@@ -29172,7 +29407,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;
@@ -29197,6 +29444,9 @@ class ImageWidget extends React.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;
@@ -29352,8 +29602,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 */
@@ -29526,6 +29780,9 @@ class Interaction extends React.Component {
       });
     }
   }
+  getPromptJSON() {
+    return getPromptJSON$c();
+  }
   render() {
     const range = this.props.graph.range;
     let labels = this.props.graph.labels;
@@ -29945,8 +30202,8 @@ var Interactive = {
   widget: Interaction,
   transform: _.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 */
@@ -30249,6 +30506,139 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+const getPromptJSON$b = (props, userInput) => {
+  var _props$backgroundImag;
+  return {
+    type: "interactive-graph",
+    options: {
+      graph: getGraphOptionsForProps(props),
+      backgroundImageUrl: (_props$backgroundImag = props.backgroundImage) == null ? void 0 : _props$backgroundImag.url,
+      range: props.range,
+      labels: props.labels
+    },
+    userInput: getUserInput(userInput)
+  };
+};
+const getGraphOptionsForProps = props => {
+  var _props$graph$startCoo, _props$graph$startCoo2;
+  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$startCoo = props.graph.startCoords) == null ? void 0 : _props$graph$startCoo.center,
+          radius: (_props$graph$startCoo2 = props.graph.startCoords) == null ? void 0 : _props$graph$startCoo2.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 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 UnreachableCaseError(type);
+  }
+};
+
 function pathBuilder() {
   return new PathBuilder();
 }
@@ -31313,7 +31703,7 @@ class NumberInput extends React.Component {
     };
   }
   componentDidUpdate(prevProps) {
-    if (!number.equal(this.getValue(), this.props.value)) {
+    if (!number$1.equal(this.getValue(), this.props.value)) {
       this._setValue(this.props.value, this.state.format);
     }
   }
@@ -31482,6 +31872,10 @@ const LegacyGrid = ({
  * 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
@@ -31578,6 +31972,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",
@@ -31598,6 +31996,104 @@ 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 = [];
+  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,
@@ -31610,7 +32106,7 @@ function LockedLabel(props) {
     TeX
   } = getDependencies();
 
-  // Move this all outside the SVG element
+  // Note: The TeX component cannot be rendered within an SVG
   return /*#__PURE__*/React.createElement("span", {
     className: "locked-label",
     style: {
@@ -31622,7 +32118,7 @@ function LockedLabel(props) {
       backgroundColor: "rgba(255, 255, 255, 0.8)"
     },
     "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(TeX, null, text));
+  }, /*#__PURE__*/React.createElement(TeX, null, replaceOutsideTeX(text)));
 }
 
 function GraphLockedLabelsLayer(props) {
@@ -32542,46 +33038,6 @@ function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, a
   return scaledBisector;
 }
 
-/**
- * 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";
-}
-
 var isProduction = process.env.NODE_ENV === 'production';
 var prefix = 'Invariant failed';
 function invariant(condition, message) {
@@ -35898,7 +36354,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.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 {
@@ -36007,7 +36463,7 @@ function interactiveGraphValidator(userInput, rubric) {
       if (rubric.correct.match === "similar") {
         match = similar(guess, correct, Number.POSITIVE_INFINITY);
       } else if (rubric.correct.match === "congruent") {
-        match = similar(guess, correct, number.DEFAULT_TOLERANCE);
+        match = similar(guess, correct, number$1.DEFAULT_TOLERANCE);
       } else if (rubric.correct.match === "approx") {
         match = similar(guess, correct, 0.1);
       } else {
@@ -36316,7 +36772,7 @@ class LegacyInteractiveGraph extends React.Component {
     };
     this.setTrashCanVisibility = opacity => {
       const graphie = this.graphie;
-      if (number.equal(opacity, 0)) {
+      if (number$1.equal(opacity, 0)) {
         if (this.trashCan) {
           this.trashCan.remove();
           this.trashCan = null;
@@ -37410,6 +37866,9 @@ class InteractiveGraph extends React.Component {
     }
     throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
   }
+  getPromptJSON() {
+    return getPromptJSON$b(this.props, this.getUserInput());
+  }
   render() {
     var _this$props$apiOption;
     // Mafs shim
@@ -37788,7 +38247,7 @@ var InteractiveGraph$1 = {
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
   staticTransform: staticTransform$3,
-  validator: interactiveGraphValidator
+  scorer: scoreInteractiveGraph
 };
 
 // TODO: can we use WB typography?
@@ -37800,6 +38259,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
@@ -37882,59 +38367,6 @@ const styles$d = 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 ${color.offBlack64}`,
   zIndex: 1000
@@ -38188,6 +38620,59 @@ const styles$b = 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.
@@ -38396,6 +38881,9 @@ class LabelImage extends React.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) {
@@ -38752,7 +39240,7 @@ var LabelImage$1 = {
   widget: LabelImageWithDependencies,
   accessible: true,
   isLintable: true,
-  validator: labelImageValidator
+  scorer: scoreLabelImage
 };
 
 var ItemState = /*#__PURE__*/function (ItemState) {
@@ -39464,7 +39952,23 @@ const styles$9 = 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 = _.isEqual(state.left, rubric.left) && _.isEqual(state.right, rubric.right);
   return {
     type: "points",
@@ -39537,6 +40041,9 @@ class Matcher extends React.Component {
       this.refs.right.moveOptionToIndex(option, index);
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$9(this.props, this.getUserInput());
+  }
   render() {
     // To minimize layout shift, we display a spinner until our math
     // renderer is ready to render the math inside the matcher. To
@@ -39675,10 +40182,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);
@@ -39948,6 +40468,9 @@ class Matrix extends React.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
@@ -40141,7 +40664,11 @@ var Matrix$1 = {
   transform: propTransform$1,
   staticTransform: staticTransform$2,
   isLintable: true,
-  validator: matrixValidator
+  scorer: scoreMatrix
+};
+
+const getPromptJSON$7 = () => {
+  return getUnsupportedPromptJSON("measurer");
 };
 
 const defaultImage = {
@@ -40208,6 +40735,9 @@ class Measurer extends React.Component {
       });
     }
   }
+  getPromptJSON() {
+    return getPromptJSON$7();
+  }
   render() {
     const image = _.extend({}, defaultImage, this.props.image);
 
@@ -40267,8 +40797,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)
 };
 
 /**
@@ -41157,16 +41687,31 @@ 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];
   const startRel = rubric.isInequality ? "ge" : "eq";
   const correctRel = rubric.correctRel || "eq";
-  const correctPos = number.equal(state.numLinePosition, rubric.correctX || 0);
+  const correctPos = number$1.equal(state.numLinePosition, rubric.correctX || 0);
   const outsideAllowedRange = state.numDivisions > divisionRange[1] || state.numDivisions < divisionRange[0];
 
   // TODO: I don't think isTickCrtl is a thing anymore
@@ -41295,7 +41840,7 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
       const x = range[0] + i * tickStep;
       fractions.push(x);
     }
-    const getDenom = x => number.toFraction(x)[1];
+    const getDenom = x => number$1.toFraction(x)[1];
     const denoms = _.map(fractions, getDenom);
     base = _.reduce(denoms, (x, y) => KhanMath.getLCM(x, y));
   } else {
@@ -41358,7 +41903,7 @@ class NumberLine extends React.Component {
       let initialX = this.props.numLinePosition;
       const divisionRange = this.props.divisionRange;
       initialX = initialX == null ? range[0] : initialX;
-      return range[0] < range[1] && number.sign(initialX - range[0]) >= 0 && number.sign(initialX - range[1]) <= 0 && divisionRange[0] < divisionRange[1] && 0 < this.props.numDivisions && 0 < this.props.snapDivisions;
+      return range[0] < range[1] && number$1.sign(initialX - range[0]) >= 0 && number$1.sign(initialX - range[1]) <= 0 && divisionRange[0] < divisionRange[1] && 0 < this.props.numDivisions && 0 < this.props.snapDivisions;
     };
     this.onNumDivisionsChange = (numDivisions, cb) => {
       const divRange = this.props.divisionRange.slice();
@@ -41461,7 +42006,7 @@ class NumberLine extends React.Component {
       const right = props.range[1];
       const snapX = props.tickStep / props.snapDivisions;
       let x = bound(numLinePosition, left, right);
-      x = left + number.roundTo(x - left, snapX);
+      x = left + number$1.roundTo(x - left, snapX);
       assert$1(_.isFinite(x));
       return x;
     };
@@ -41628,6 +42173,9 @@ class NumberLine extends React.Component {
       divisionRange: this.props.divisionRange
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$6(this.props, this.getUserInput());
+  }
   render() {
     const {
       strings
@@ -41747,10 +42295,22 @@ var NumberLine$1 = {
   widget: NumberLine,
   transform: numberLineTransform,
   staticTransform: staticTransform$1,
-  validator: numberLineValidator
+  scorer: scoreNumberLine
+};
+
+const getPromptJSON$5 = (renderProps, userInput) => {
+  return {
+    type: "orderer",
+    options: {
+      options: renderProps.options.map(option => option.content)
+    },
+    userInput: {
+      values: userInput.current
+    }
+  };
 };
 
-function ordererValidator(userInput, rubric) {
+function scoreOrderer(userInput, rubric) {
   if (userInput.current.length === 0) {
     return {
       type: "invalid",
@@ -42194,6 +42754,9 @@ class Orderer extends React.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.createElement(Card
@@ -42312,7 +42875,7 @@ var Orderer$1 = {
   hidden: true,
   widget: Orderer,
   isLintable: true,
-  validator: ordererValidator
+  scorer: scoreOrderer
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -42361,8 +42924,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");
 };
 
 /**
@@ -42420,6 +42987,9 @@ class PhetSimulation extends React.Component {
       await this.updateSimState(this.props.url);
     }
   }
+  getPromptJSON() {
+    return getPromptJSON$4();
+  }
   async updateSimState(urlString) {
     const url = makeSafeUrl(urlString, this.locale);
     if (url === null) {
@@ -42568,10 +43138,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",
@@ -43344,6 +43918,9 @@ class Plotter extends React.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
@@ -43384,7 +43961,11 @@ var Plotter$1 = {
   hidden: true,
   widget: Plotter,
   staticTransform: staticTransform,
-  validator: plotterValidator
+  scorer: scorePlotter
+};
+
+const getPromptJSON$2 = () => {
+  return getUnsupportedPromptJSON("python-program");
 };
 
 /**
@@ -43406,6 +43987,9 @@ class PythonProgram extends React.Component {
   getDOMNodeForPath(path) {
     return null;
   }
+  getPromptJSON() {
+    return getPromptJSON$2();
+  }
   render() {
     const url = getUrlFromProgramID(this.props.programID);
     const iframeStyle = {
@@ -43443,7 +44027,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
@@ -43515,6 +44109,9 @@ class Sorter extends React.Component {
       changed: this.state.changed
     };
   }
+  getPromptJSON() {
+    return getPromptJSON$1(this.getUserInput());
+  }
   render() {
     const options = shuffle(this.props.correct, this.props.problemNum, /* ensurePermuted */true);
     const {
@@ -43549,10 +44146,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 filterNonEmpty(table) {
     return _.filter(table, function (row) {
       // Check if row has a cell that is nonempty
@@ -43829,7 +44426,11 @@ var Table$1 = {
   transform: propTransform,
   hidden: true,
   isLintable: true,
-  validator: tableValidator
+  scorer: scoreTable
+};
+
+const getPromptJSON = () => {
+  return getUnsupportedPromptJSON("video");
 };
 
 /**
@@ -43925,6 +44526,9 @@ class Video extends React.Component {
       return change.apply(this, args);
     };
   }
+  getPromptJSON() {
+    return getPromptJSON();
+  }
   render() {
     const {
       InitialRequestUrl
@@ -43985,8 +44589,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 */
@@ -43996,41 +44600,16 @@ var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Defin
  * This should be called by all clients, specifying whether extra widgets are
  * needed via `loadExtraWidgets`. It is idempotent, so it's not a problem to
  * call it multiple times.
- *
- * skipMathJax:
- *   If false/undefined, MathJax will be configured, and the
- *   promise will wait for MathJax to load (if it hasn't already).
  */
-const init = function init(options) {
+const init = function init() {
   registerWidgets(basicWidgets);
   registerWidgets(extraWidgets);
   replaceDeprecatedWidgets();
-
-  // Pass skipMathJax: true if MathJax is already loaded and configured.
-  const skipMathJax = options.skipMathJax;
-  if (skipMathJax) {
-    // @ts-expect-error - TS2322 - Type 'Promise<void>' is not assignable to type 'Promise<undefined>'.
-    return Promise.resolve();
-  }
-  return new Promise((resolve, reject) => {
-    MathJax.Hub.Config({
-      messageStyle: "none",
-      skipStartupTypeset: "none",
-      "HTML-CSS": {
-        availableFonts: ["TeX"],
-        imageFont: null,
-        scale: 100,
-        showMathMenu: false
-      }
-    });
-    MathJax.Hub.Configured();
-    MathJax.Hub.Queue(resolve);
-  });
 };
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "41.1.1";
+const libVersion = "41.3.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44767,6 +45346,9 @@ class ServerItemRenderer extends React.Component {
   getNumHints() {
     return this.props.item.hints.length;
   }
+  getPromptJSON() {
+    return this.questionRenderer.getPromptJSON();
+  }
 
   /**
    * Grades the item.
@@ -45414,7 +45996,7 @@ function treeToItem(node) {
   };
 }
 
-var isObject = function isObject(obj) {
+var isObject$1 = function isObject(obj) {
   return obj === Object(obj);
 };
 var merge = function merge() {
@@ -45430,7 +46012,7 @@ var merge = function merge() {
   return obj;
 };
 var clone = function clone(obj) {
-  if (!isObject(obj)) {
+  if (!isObject$1(obj)) {
     return obj;
   }
   return Array.isArray(obj) ? obj.slice() : merge(obj);
@@ -45446,7 +46028,7 @@ var clone = function clone(obj) {
 var dispatch = function dispatch(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;
@@ -47367,6 +47949,690 @@ 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, combineFailureDetails = 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(...acceptedValues) {
+  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 = _extends({}, 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 = ([key, widget], widgetMap, ctx) => {
+  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: