@khanacademy/perseus 36.1.1 → 37.0.0

package/dist/es/index.js

@@ -53,16 +53,6 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
 /**
  * The translated strings that are used to render Perseus.
  */
@@ -2258,7 +2248,6 @@ function expressionValidator(userInput, rubric, strings, locale) {
   };
 }
 
-const _excluded$5 = ["scoring"];
 // Map of international operator names to their English equivalents
 const englishOperators = {
   arctg: "arctan",
@@ -2281,13 +2270,6 @@ const anglicizeOperators = tex => {
 const normalizeTex = tex => {
   return anglicizeOperators(tex);
 };
-const deriveKeypadVersion = apiOptions => {
-  // We can derive which version of the keypad is in use. This is
-  // a bit tricky, but this code will be relatively short-lived
-  // as we coalesce onto the new, v2 Keypad, at which point we
-  // can remove this `virtualKeypadVersion` field entirely.
-  return apiOptions.nativeKeypadProxy != null ? "REACT_NATIVE_KEYPAD" : "MATH_INPUT_KEYPAD_V2";
-};
 // The new, MathQuill input expression widget
 class Expression extends React.Component {
   constructor(..._args) {
@@ -2346,27 +2328,6 @@ class Expression extends React.Component {
         });
       }
     };
-    this.simpleValidate = _ref => {
-      let {
-          scoring
-        } = _ref,
-        rubric = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-      const score = expressionValidator(this.getUserInput(), rubric, this.context.strings, this.context.locale);
-
-      // "scoring" is a flag that indicates when we are checking answers.
-      // otherwise, we may just be checking validity after changes.
-      if (scoring && score.type !== "invalid") {
-        var _this$props$analytics;
-        (_this$props$analytics = this.props.analytics) == null || _this$props$analytics.onAnalyticsEvent({
-          type: "perseus:expression-evaluated",
-          payload: {
-            result: score.earned === score.total ? "correct" : "incorrect",
-            virtualKeypadVersion: deriveKeypadVersion(this.props.apiOptions)
-          }
-        });
-      }
-      return score;
-    };
     this.change = (...args) => {
       return change.apply(this, args);
     };
@@ -2384,8 +2345,8 @@ class Expression extends React.Component {
       this.props.trackInteraction();
     };
     this._handleFocus = () => {
-      var _this$props$analytics2;
-      (_this$props$analytics2 = this.props.analytics) == null || _this$props$analytics2.onAnalyticsEvent({
+      var _this$props$analytics;
+      (_this$props$analytics = this.props.analytics) == null || _this$props$analytics.onAnalyticsEvent({
         type: "perseus:expression-focused",
         payload: null
       });
@@ -2412,10 +2373,6 @@ class Expression extends React.Component {
       return [[]];
     };
   }
-  // TODO remove this in favor of just using expressionValidator
-  static validate(userInput, rubric, strings, locale) {
-    return expressionValidator(userInput, rubric, strings, locale);
-  }
   static getUserInputFromProps(props) {
     return normalizeTex(props.value);
   }
@@ -2465,7 +2422,7 @@ class Expression extends React.Component {
     }, cb);
   }
   render() {
-    var _this$props$keypadCon, _this$props$analytics3;
+    var _this$props$keypadCon, _this$props$analytics2;
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(View, {
         className: css(styles$D.mobileLabelInputWrapper)
@@ -2538,7 +2495,7 @@ class Expression extends React.Component {
       hasError: this.state.showErrorStyle,
       ariaLabel: this.props.ariaLabel || this.context.strings.mathInputBox,
       extraKeys: (_this$props$keypadCon = this.props.keypadConfiguration) == null ? void 0 : _this$props$keypadCon.extraKeys,
-      analytics: (_this$props$analytics3 = this.props.analytics) != null ? _this$props$analytics3 : {
+      analytics: (_this$props$analytics2 = this.props.analytics) != null ? _this$props$analytics2 : {
         onAnalyticsEvent: async function () {}
       }
     }))));
@@ -2691,7 +2648,8 @@ var Expression$1 = {
   },
   propUpgrades: propUpgrades$2,
   // For use by the editor
-  isLintable: true
+  isLintable: true,
+  validator: expressionValidator
 };
 
 /**
@@ -2920,6 +2878,9 @@ function combineScores(scoreA, scoreB) {
     }
   });
 }
+function flattenScores(widgetScoreMap) {
+  return Object.values(widgetScoreMap).reduce(combineScores, noScore);
+}
 function isCorrect(score) {
   return score.type === "points" && score.earned >= score.total;
 }
@@ -3452,6 +3413,7 @@ const Util = {
   shuffle: shuffle$3,
   split,
   combineScores,
+  flattenScores,
   keScoreFromPerseusScore,
   firstNumericalParse: firstNumericalParse$1,
   stringArrayOfSize: stringArrayOfSize$1,
@@ -9988,6 +9950,8 @@ const setLabelMargins = function setLabelMargins(span, size) {
     });
   } else {
     var _$container$css, _$container$width, _$span$css;
+    const currentHeightMatchesProps = span.scrollHeight === height;
+
     // We are using jQuery to collect information and calculate a scale
     //     since we don't have a way to pass it to this function.
     // We need the width of the container in order to calculate the scale to apply to the label.
@@ -10009,6 +9973,17 @@ const setLabelMargins = function setLabelMargins(span, size) {
     // Inherited line-height values can really mess up placement.
     $container.css("line-height", "normal");
 
+    // TODO: Verify that this change doesn't impact other graphies
+    //       Check the full list of consuming widgets.
+
+    // If the change in line-height affected the height of the element,
+    //     then the height used for calculations should be updated.
+    // This can happen when the first label in the container calls this method,
+    //     and the line-height was different when the height measurement was originally referenced.
+    if (currentHeightMatchesProps && span.scrollHeight !== height) {
+      height = span.scrollHeight;
+    }
+
     // The expected width of the graphie is found in the "max-width" property on ".svg-image" containers,
     //     and is found in the "width" property on ".graphie" containers.
     const widthValues = (_$container$css = $container.css(["max-width", "width"])) != null ? _$container$css : {
@@ -10070,7 +10045,10 @@ const GraphUtils = {
     return point.distanceToPoint(point1, point2);
   },
   // Find the angle in degrees between two or three points
-  findAngle: function (point1, point2, vertex) {
+  // This function is deprecated as it has several issues calculating
+  // correctly when dealing with reflex angles or the position of point2
+  // (LEMS-2202) Remove this function while removing the Legacy Interactive Graph.
+  findAngleDeprecated: function (point1, point2, vertex) {
     if (vertex === undefined) {
       const x = point1[0] - point2[0];
       const y = point1[1] - point2[1];
@@ -10079,7 +10057,7 @@ const GraphUtils = {
       }
       return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
     }
-    return GraphUtils.findAngle(point1, vertex) - GraphUtils.findAngle(point2, vertex);
+    return GraphUtils.findAngleDeprecated(point1, vertex) - GraphUtils.findAngleDeprecated(point2, vertex);
   },
   graphs: {}
 };
@@ -11095,8 +11073,8 @@ _.extend(GraphUtils.Graphie.prototype, {
       p1 = options.point3;
       p3 = options.point1;
     }
-    const startAngle = GraphUtils.findAngle(p1, vertex);
-    const endAngle = GraphUtils.findAngle(p3, vertex);
+    const startAngle = GraphUtils.findAngleDeprecated(p1, vertex);
+    const endAngle = GraphUtils.findAngleDeprecated(p3, vertex);
     const angle = (endAngle + 360 - startAngle) % 360;
     const halfAngle = (startAngle + angle / 2) % 360;
     const sPadding = 5 * options.pushOut;
@@ -11263,15 +11241,15 @@ _.extend(GraphUtils.Graphie.prototype, {
     let angle = 135;
     let halfAngle;
     if (p1 && p3) {
-      const startAngle = GraphUtils.findAngle(p1, vertex);
-      const endAngle = GraphUtils.findAngle(p3, vertex);
+      const startAngle = GraphUtils.findAngleDeprecated(p1, vertex);
+      const endAngle = GraphUtils.findAngleDeprecated(p3, vertex);
       angle = (endAngle + 360 - startAngle) % 360;
       halfAngle = (startAngle + angle / 2 + 180) % 360;
     } else if (p1) {
-      const parallelAngle = GraphUtils.findAngle(vertex, p1);
+      const parallelAngle = GraphUtils.findAngleDeprecated(vertex, p1);
       halfAngle = parallelAngle + 90;
     } else if (p3) {
-      const parallelAngle = GraphUtils.findAngle(p3, vertex);
+      const parallelAngle = GraphUtils.findAngleDeprecated(p3, vertex);
       halfAngle = parallelAngle + 90;
     } else {
       // Standalone point
@@ -11477,7 +11455,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         const vertex = constraints.fixedAngle.vertex.coord || constraints.fixedAngle.vertex;
         const ref = constraints.fixedAngle.ref.coord || constraints.fixedAngle.ref;
         const distPoint = constraints.fixedDistance.point.coord || constraints.fixedDistance.point;
-        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngle(ref, vertex)) * Math.PI / 180;
+        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngleDeprecated(ref, vertex)) * Math.PI / 180;
         const length = constraints.fixedDistance.dist;
         newCoord[0] = length * Math.cos(constrainedAngle) + distPoint[0];
         newCoord[1] = length * Math.sin(constrainedAngle) + distPoint[1];
@@ -11486,8 +11464,8 @@ _.extend(GraphUtils.Graphie.prototype, {
       } else if (typeof constraints.fixedAngle.angle === "number") {
         const vertex = constraints.fixedAngle.vertex.coord || constraints.fixedAngle.vertex;
         const ref = constraints.fixedAngle.ref.coord || constraints.fixedAngle.ref;
-        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngle(ref, vertex)) * Math.PI / 180;
-        const angle = GraphUtils.findAngle(coord, vertex) * Math.PI / 180;
+        const constrainedAngle = (constraints.fixedAngle.angle + GraphUtils.findAngleDeprecated(ref, vertex)) * Math.PI / 180;
+        const angle = GraphUtils.findAngleDeprecated(coord, vertex) * Math.PI / 180;
         const distance = GraphUtils.getDistance(coord, vertex);
         let length = distance * Math.cos(constrainedAngle - angle);
         length = length < 1.0 ? 1.0 : length;
@@ -11497,7 +11475,7 @@ _.extend(GraphUtils.Graphie.prototype, {
         // distance is constrained
       } else if (typeof constraints.fixedDistance.dist === "number") {
         const distPoint = constraints.fixedDistance.point.coord || constraints.fixedDistance.point;
-        let angle = GraphUtils.findAngle(coord, distPoint);
+        let angle = GraphUtils.findAngleDeprecated(coord, distPoint);
         const length = constraints.fixedDistance.dist;
         angle = angle * Math.PI / 180;
         newCoord[0] = length * Math.cos(angle) + distPoint[0];
@@ -13697,7 +13675,7 @@ _.extend(MovableAngle.prototype, {
       _.each([0, 2], function (i) {
         const oldPoint = points[i].coord;
         let newPoint = vector$1.add(oldPoint, delta);
-        let angle = GraphUtils.findAngle(newVertex, newPoint);
+        let angle = GraphUtils.findAngleDeprecated(newVertex, newPoint);
         angle *= Math.PI / 180;
         newPoint = graphie.constrainToBoundsOnAngle(newPoint, 10, angle);
         newPoints[i] = newPoint;
@@ -13730,7 +13708,7 @@ _.extend(MovableAngle.prototype, {
           return false;
         }
         if (snap) {
-          let angle = GraphUtils.findAngle(newPoint, vertex);
+          let angle = GraphUtils.findAngleDeprecated(newPoint, vertex);
           angle = Math.round((angle - snapOffset) / snap) * snap + snapOffset;
           const distance = GraphUtils.getDistance(newPoint, vertex);
           return vector$1.add(vertex, polar$1(distance, angle));
@@ -13818,7 +13796,7 @@ _.extend(MovableAngle.prototype, {
    * coords when interpreted in a clockwise direction.
    */
   _getClockwiseAngle: function (coords) {
-    const rawAngle = GraphUtils.findAngle(
+    const rawAngle = GraphUtils.findAngleDeprecated(
     // The order of these is "weird" to match what a clockwise
     // order is in graphie.labelAngle
     coords[2],
@@ -14642,7 +14620,7 @@ const mapObject$1 = function mapObject(obj, lambda) {
  *   });
  * {a: 'aa', b: 'bb'}
  */
-const mapObjectFromArray$1 = function mapObjectFromArray(arr, lambda) {
+const mapObjectFromArray = function mapObjectFromArray(arr, lambda) {
   const result = {};
   _.each(arr, function (elem) {
     result[elem] = lambda(elem);
@@ -14652,7 +14630,7 @@ const mapObjectFromArray$1 = function mapObjectFromArray(arr, lambda) {
 var objective_ = {
   pluck: pluck,
   mapObject: mapObject$1,
-  mapObjectFromArray: mapObjectFromArray$1
+  mapObjectFromArray: mapObjectFromArray
 };
 
 /**
@@ -18815,169 +18793,6 @@ class QuestionParagraph extends React.Component {
   }
 }
 
-/**
- * TranslationLinter asynchronously calls Khan Academy's poentry linter.
- *
- * The poentry linter checks for issues that prevent content from being
- * translated. This linter is KA-specific and so TranslationLinter does not do
- * anything in non-KA environments.
- */
-
-// A LintCB is called once the linter has been run.
-
-// msec to wait before we actually call the linter after receiving the
-// last call. The timer is reset if the lint is called during the wait.
-const DEBOUNCE_TIMEOUT = 1000;
-class TranslationLinter {
-  constructor() {
-    // To avoid linting when nothing has changed.
-    this.previousContent = null;
-    /**
-     * Runs the poentry linter on the given perseus string asynchronously.
-     *
-     * It doesn't do anything unless we're in a KA environment.
-     *
-     * onLintErrorsGenerated is called even if there are no errors. It is not
-     * called if perseusStr is unchanged from the last call.
-     *
-     * Linting is relatively expensive -- so we debounce linting each instance
-     * for some amount of time.
-     */
-    this.runLinter = debounce$1((perseusStr, onLintErrorsGenerated) => {
-      // TODO(FEI-5003): Do we still need to check for 'KA'?
-      if (typeof KA === "undefined") {
-        return;
-      }
-      if (perseusStr === this.previousContent) {
-        return;
-      }
-      this.previousContent = perseusStr;
-      if (perseusStr === "") {
-        onLintErrorsGenerated([]);
-        return;
-      }
-      fetch("/api/internal/translations/lint_poentry?preview=1&lang=en", {
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          // The poentry linter verifies that the translation from
-          // the original text to the translated text is sane. We
-          // want to ensure that the translation from English to
-          // English is sane, so msgid === mstr.
-          msgid: perseusStr,
-          // msgid is the original text
-          msgstr: perseusStr,
-          // msgstr is the translated text
-          format: "perseus_text",
-          filename: ""
-        }),
-        method: "POST"
-      }).then(response => {
-        if (response.status >= 400) {
-          return {
-            status: "error",
-            message: "Could not run i18n linter."
-          };
-        }
-        return response.json();
-      }, rejection => {
-        return {
-          status: "error",
-          message: "Could not run i18n linter."
-        };
-      }).then(json => {
-        if (json.status === "error") {
-          onLintErrorsGenerated(["Some part of this text makes it untranslatable. " + "The specific message from the i18n linter was: " + json.message.replace(/\n/g, " ")]);
-        } else {
-          onLintErrorsGenerated([]);
-        }
-      });
-    }, DEBOUNCE_TIMEOUT);
-  }
-  /**
-   * Applies an array of errors generated by linters without position
-   * information (TranslationLinter and the legacy getSaveWarnings()) to the
-   * top of a Perseus tree.
-   */
-  applyLintErrors(parsedMarkdown, translationLintErrors) {
-    // These lint errors do not have position data associated with
-    // them, so we just plop them at the top.
-    if (translationLintErrors.length) {
-      const errorText = translationLintErrors.join("\n\n");
-      parsedMarkdown.unshift({
-        content: {
-          type: "text",
-          content: ""
-        },
-        insideTable: false,
-        message: errorText,
-        ruleName: "legacy-error",
-        severity: Rule.Severity.ERROR,
-        type: "lint"
-      });
-    }
-  }
-}
-
-/**
- * Preprocess TeX code to convert things that MathJax doesn't know how to handle
- * to things is does.
- */
-var preprocessTex = (texCode => texCode
-// Replace uses of \begin{align}...\end{align} which KaTeX doesn't
-// support (yet) with \begin{aligned}...\end{aligned} which renders
-// the same is supported by KaTeX.  It does the same for align*.
-// TODO(kevinb) update content to use aligned instead of align.
-// TODO(LEMS-1608) Remove this replacement as MathJax supports the
-// "align" macro correctly (and, in fact, it is not synonymous with
-// "aligned").
-.replace(/\{align[*]?\}/g, "{aligned}")
-// Replace non-breaking spaces with regular spaces.
-.replace(/[\u00a0]/g, " "));
-
-const {
-  interactiveSizes
-} = constants$1;
-
-// Note: these size cutoffs represent content-width cutoffs as specified in
-// http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
-// TODO(benkomalo): these values aren't used in JS outside of this file, but
-// are coupled to the values in styles/styles.less - DRY it up at some point
-const smMax = articleMaxWidthTableInPx;
-const mdMax = articleMaxWidthInPx;
-const containerSizeClass = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large",
-  XLARGE: "xlarge"
-};
-const getClassFromWidth = width => {
-  if (!width) {
-    return containerSizeClass.MEDIUM;
-  }
-  if (width <= smMax) {
-    return containerSizeClass.SMALL;
-  }
-  if (width <= mdMax) {
-    return containerSizeClass.MEDIUM;
-  }
-  return containerSizeClass.LARGE;
-};
-const getInteractiveBoxFromSizeClass = sizeClass => {
-  if (sizeClass === containerSizeClass.SMALL) {
-    return [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall];
-  }
-  return [interactiveSizes.defaultBoxSize, interactiveSizes.defaultBoxSize];
-};
-
-var sizingUtils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  containerSizeClass: containerSizeClass,
-  getClassFromWidth: getClassFromWidth,
-  getInteractiveBoxFromSizeClass: getInteractiveBoxFromSizeClass
-});
-
 const DEFAULT_ALIGNMENT$1 = "block";
 // NOTE(kevinb): "default" is not one in `validAlignments`.
 const DEFAULT_SUPPORTED_ALIGNMENTS = ["default"];
@@ -19078,6 +18893,10 @@ const getWidget = name => {
   }
   return widgets[name].widget;
 };
+const getWidgetValidator = name => {
+  var _widgets$name$validat, _widgets$name3;
+  return (_widgets$name$validat = (_widgets$name3 = widgets[name]) == null ? void 0 : _widgets$name3.validator) != null ? _widgets$name$validat : null;
+};
 const getEditor = name => {
   return _.has(editors, name) ? editors[name] : null;
 };
@@ -19380,6 +19199,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceEditor: replaceEditor,
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
+  getWidgetValidator: getWidgetValidator,
   getEditor: getEditor,
   getTransform: getTransform,
   getVersion: getVersion,
@@ -19399,6 +19219,222 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   isLintable: isLintable
 });
 
+function emptyWidgetsFunctional(widgets,
+// This is a port of old code, I'm not sure why
+// we need widgetIds vs the keys of the widgets object
+widgetIds, userInputMap, strings, locale) {
+  return widgetIds.filter(id => {
+    const widget = widgets[id];
+    if (!widget || widget.static) {
+      // Static widgets shouldn't count as empty
+      return false;
+    }
+    let score = null;
+    const userInput = userInputMap[id];
+    const validator = getWidgetValidator(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);
+    }
+    if (score) {
+      return Util.scoreIsEmpty(score);
+    }
+  });
+}
+function scoreWidgetsFunctional(widgets,
+// This is a port of old code, I'm not sure why
+// we need widgetIds vs the keys of the widgets object
+widgetIds, userInputMap, strings, locale) {
+  const gradedWidgetIds = widgetIds.filter(id => {
+    const props = widgets[id];
+    const widgetIsGraded = (props == null ? void 0 : props.graded) == null || props.graded;
+    const widgetIsStatic = !!(props != null && props.static);
+    // Ungraded widgets or widgets set to static shouldn't be graded.
+    return widgetIsGraded && !widgetIsStatic;
+  });
+  const widgetScores = {};
+  gradedWidgetIds.forEach(id => {
+    const widget = widgets[id];
+    if (!widget) {
+      return;
+    }
+    const userInput = userInputMap[id];
+    const validator = getWidgetValidator(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);
+    }
+  });
+  return widgetScores;
+}
+
+/**
+ * TranslationLinter asynchronously calls Khan Academy's poentry linter.
+ *
+ * The poentry linter checks for issues that prevent content from being
+ * translated. This linter is KA-specific and so TranslationLinter does not do
+ * anything in non-KA environments.
+ */
+
+// A LintCB is called once the linter has been run.
+
+// msec to wait before we actually call the linter after receiving the
+// last call. The timer is reset if the lint is called during the wait.
+const DEBOUNCE_TIMEOUT = 1000;
+class TranslationLinter {
+  constructor() {
+    // To avoid linting when nothing has changed.
+    this.previousContent = null;
+    /**
+     * Runs the poentry linter on the given perseus string asynchronously.
+     *
+     * It doesn't do anything unless we're in a KA environment.
+     *
+     * onLintErrorsGenerated is called even if there are no errors. It is not
+     * called if perseusStr is unchanged from the last call.
+     *
+     * Linting is relatively expensive -- so we debounce linting each instance
+     * for some amount of time.
+     */
+    this.runLinter = debounce$1((perseusStr, onLintErrorsGenerated) => {
+      // TODO(FEI-5003): Do we still need to check for 'KA'?
+      if (typeof KA === "undefined") {
+        return;
+      }
+      if (perseusStr === this.previousContent) {
+        return;
+      }
+      this.previousContent = perseusStr;
+      if (perseusStr === "") {
+        onLintErrorsGenerated([]);
+        return;
+      }
+      fetch("/api/internal/translations/lint_poentry?preview=1&lang=en", {
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          // The poentry linter verifies that the translation from
+          // the original text to the translated text is sane. We
+          // want to ensure that the translation from English to
+          // English is sane, so msgid === mstr.
+          msgid: perseusStr,
+          // msgid is the original text
+          msgstr: perseusStr,
+          // msgstr is the translated text
+          format: "perseus_text",
+          filename: ""
+        }),
+        method: "POST"
+      }).then(response => {
+        if (response.status >= 400) {
+          return {
+            status: "error",
+            message: "Could not run i18n linter."
+          };
+        }
+        return response.json();
+      }, rejection => {
+        return {
+          status: "error",
+          message: "Could not run i18n linter."
+        };
+      }).then(json => {
+        if (json.status === "error") {
+          onLintErrorsGenerated(["Some part of this text makes it untranslatable. " + "The specific message from the i18n linter was: " + json.message.replace(/\n/g, " ")]);
+        } else {
+          onLintErrorsGenerated([]);
+        }
+      });
+    }, DEBOUNCE_TIMEOUT);
+  }
+  /**
+   * Applies an array of errors generated by linters without position
+   * information (TranslationLinter and the legacy getSaveWarnings()) to the
+   * top of a Perseus tree.
+   */
+  applyLintErrors(parsedMarkdown, translationLintErrors) {
+    // These lint errors do not have position data associated with
+    // them, so we just plop them at the top.
+    if (translationLintErrors.length) {
+      const errorText = translationLintErrors.join("\n\n");
+      parsedMarkdown.unshift({
+        content: {
+          type: "text",
+          content: ""
+        },
+        insideTable: false,
+        message: errorText,
+        ruleName: "legacy-error",
+        severity: Rule.Severity.ERROR,
+        type: "lint"
+      });
+    }
+  }
+}
+
+/**
+ * Preprocess TeX code to convert things that MathJax doesn't know how to handle
+ * to things is does.
+ */
+var preprocessTex = (texCode => texCode
+// Replace uses of \begin{align}...\end{align} which KaTeX doesn't
+// support (yet) with \begin{aligned}...\end{aligned} which renders
+// the same is supported by KaTeX.  It does the same for align*.
+// TODO(kevinb) update content to use aligned instead of align.
+// TODO(LEMS-1608) Remove this replacement as MathJax supports the
+// "align" macro correctly (and, in fact, it is not synonymous with
+// "aligned").
+.replace(/\{align[*]?\}/g, "{aligned}")
+// Replace non-breaking spaces with regular spaces.
+.replace(/[\u00a0]/g, " "));
+
+const {
+  interactiveSizes
+} = constants$1;
+
+// Note: these size cutoffs represent content-width cutoffs as specified in
+// http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
+// TODO(benkomalo): these values aren't used in JS outside of this file, but
+// are coupled to the values in styles/styles.less - DRY it up at some point
+const smMax = articleMaxWidthTableInPx;
+const mdMax = articleMaxWidthInPx;
+const containerSizeClass = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  XLARGE: "xlarge"
+};
+const getClassFromWidth = width => {
+  if (!width) {
+    return containerSizeClass.MEDIUM;
+  }
+  if (width <= smMax) {
+    return containerSizeClass.SMALL;
+  }
+  if (width <= mdMax) {
+    return containerSizeClass.MEDIUM;
+  }
+  return containerSizeClass.LARGE;
+};
+const getInteractiveBoxFromSizeClass = sizeClass => {
+  if (sizeClass === containerSizeClass.SMALL) {
+    return [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall];
+  }
+  return [interactiveSizes.defaultBoxSize, interactiveSizes.defaultBoxSize];
+};
+
+var sizingUtils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  containerSizeClass: containerSizeClass,
+  getClassFromWidth: getClassFromWidth,
+  getInteractiveBoxFromSizeClass: getInteractiveBoxFromSizeClass
+});
+
 class WidgetContainer extends React.Component {
   constructor(...args) {
     super(...args);
@@ -19544,8 +19580,7 @@ WidgetContainer.defaultProps = {
 };
 
 const {
-  mapObject,
-  mapObjectFromArray
+  mapObject
 } = objective_;
 const rContainsNonWhitespace = /\S/;
 const rImageURL = /(web\+graphie|https):\/\/[^\s]*/;
@@ -19710,11 +19745,7 @@ class Renderer extends React.Component {
       }
       let interactionTracker = this._interactionTrackers[id];
       if (!interactionTracker) {
-        interactionTracker = this._interactionTrackers[id] = new InteractionTracker(apiOptions.trackInteraction,
-        // @ts-expect-error - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
-        widgetInfo && widgetInfo.type, id,
-        // @ts-expect-error - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
-        getTracking(widgetInfo && widgetInfo.type));
+        interactionTracker = this._interactionTrackers[id] = new InteractionTracker(apiOptions.trackInteraction, widgetInfo && widgetInfo.type, id, getTracking(widgetInfo && widgetInfo.type));
       }
       return _extends({}, widgetProps, {
         widgetId: id,
@@ -20492,23 +20523,6 @@ class Renderer extends React.Component {
       }, this);
       return state;
     };
-    this.emptyWidgets = () => {
-      // @ts-expect-error - TS2345 - Argument of type '(id: string) => boolean | undefined' is not assignable to parameter of type 'Iteratee<string[], boolean, string>'.
-      return _.filter(this.widgetIds, id => {
-        const widgetInfo = this._getWidgetInfo(id);
-        if (widgetInfo.static) {
-          // Static widgets shouldn't count as empty
-          return false;
-        }
-        const widget = this.getWidgetInstance(id);
-        if (widget && widget.simpleValidate) {
-          const score = widget.simpleValidate(widgetInfo.options,
-          // @ts-expect-error - TS2345 - Argument of type 'null' is not assignable to parameter of type '((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined'.
-          null);
-          return Util.scoreIsEmpty(score);
-        }
-      });
-    };
     this._setWidgetProps = (id, newProps, cb, silent) => {
       this.setState(prevState => {
         const widgetProps = _extends({}, prevState.widgetProps, {
@@ -20565,19 +20579,6 @@ class Renderer extends React.Component {
       // Widget handles parsing of the interWidgetPath.
       widget == null || widget.setInputValue == null || widget.setInputValue(interWidgetPath, newValue, focus);
     };
-    /**
-     * Returns an array of the widget `.getUserInput()` results
-     */
-    this.getUserInput = () => {
-      return this.widgetIds.map(id => {
-        const widget = this.getWidgetInstance(id);
-        if (widget && widget.getUserInput) {
-          // TODO(Jeremy): Add the widget ID in here so we can more
-          // easily correlate it to the widget state.
-          return widget.getUserInput();
-        }
-      });
-    };
     /**
      * Returns an array of all widget IDs in the order they occur in
      * the content.
@@ -20585,56 +20586,6 @@ class Renderer extends React.Component {
     this.getWidgetIds = () => {
       return this.widgetIds;
     };
-    /**
-     * Returns the result of `.getUserInput()` for each widget, in
-     * a map from widgetId to userInput.
-     * NOTE(jeremy): This function is hauntingly similar to `getUserInput` with
-     * the major difference being that this function returns a map of
-     * `widgetID` => UserInput and `getUserInput` simply returns an array. It
-     * would be trivial to map between the results of each of these functions,
-     * so we should aim to remove one of these functions.
-     */
-    this.getUserInputForWidgets = () => {
-      return mapObjectFromArray(this.widgetIds, id => {
-        const widget = this.getWidgetInstance(id);
-        if (widget && widget.getUserInput) {
-          return widget.getUserInput();
-        }
-      });
-    };
-    /**
-     * Returns an object mapping from widget ID to perseus-style score.
-     * The keys of this object are the values of the array returned
-     * from `getWidgetIds`.
-     */
-    this.scoreWidgets = () => {
-      const widgetProps = this.state.widgetInfo;
-      const gradedWidgetIds = _.filter(this.widgetIds, id => {
-        const props = widgetProps[id];
-        const widgetIsGraded = (props == null ? void 0 : props.graded) == null || props.graded;
-        const widgetIsStatic = !!(props != null && props.static);
-        // Ungraded widgets or widgets set to static shouldn't be graded.
-        return widgetIsGraded && !widgetIsStatic;
-      });
-      const widgetScores = {};
-      _.each(gradedWidgetIds, id => {
-        const props = widgetProps[id];
-        const widget = this.getWidgetInstance(id);
-        // widget can be undefined if it hasn't yet been rendered
-        if (widget && widget.simpleValidate) {
-          widgetScores[id] = widget.simpleValidate(_extends({}, props == null ? void 0 : props.options, {
-            scoring: true
-          }));
-        }
-      });
-      return widgetScores;
-    };
-    /**
-     * Grades the content.
-     */
-    this.score = () => {
-      return _.reduce(this.scoreWidgets(), Util.combineScores, Util.noScore);
-    };
     this.guessAndScore = () => {
       const totalGuess = this.getUserInput();
       const totalScore = this.score();
@@ -20808,6 +20759,59 @@ class Renderer extends React.Component {
     }
     this._isMounted = false;
   }
+  emptyWidgets() {
+    return emptyWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
+  }
+  /**
+   * Returns an array of the widget `.getUserInput()` results
+   *
+   * TODO: can we remove this?
+   * @deprecated use getUserInputMap
+   */
+  getUserInput() {
+    return this.widgetIds.map(id => {
+      const widget = this.getWidgetInstance(id);
+      if (widget && widget.getUserInput) {
+        // TODO(Jeremy): Add the widget ID in here so we can more
+        // easily correlate it to the widget state.
+        return widget.getUserInput();
+      }
+    });
+  }
+
+  /**
+   * Returns an object of the widget `.getUserInput()` results
+   */
+  getUserInputMap() {
+    const userInputMap = {};
+    this.widgetIds.forEach(id => {
+      const widget = this.getWidgetInstance(id);
+      // Handle Groups, which have their own sets of widgets
+      if (widget != null && widget.getUserInputMap) {
+        userInputMap[id] = widget.getUserInputMap();
+      } else if (widget != null && widget.getUserInput) {
+        userInputMap[id] = widget.getUserInput();
+      }
+    });
+    return userInputMap;
+  }
+  /**
+   * Returns an object mapping from widget ID to perseus-style score.
+   * The keys of this object are the values of the array returned
+   * from `getWidgetIds`.
+   */
+  scoreWidgets() {
+    return scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
+  }
+
+  /**
+   * Grades the content.
+   */
+  score() {
+    const scores = this.scoreWidgets();
+    const combinedScore = Util.flattenScores(scores);
+    return combinedScore;
+  }
   render() {
     const apiOptions = this.getApiOptions();
     if (this.reuseMarkdown) {
@@ -20882,11 +20886,11 @@ class Renderer extends React.Component {
       // If highlightLint is true and lint is detected, this call
       // will modify the parse tree by adding lint nodes that will
       // serve to highlight the lint when rendered
-      const context = _extends({
+      const fullLinterContext = _extends({
         content: this.props.content,
         widgets: this.props.widgets
       }, this.props.linterContext);
-      PerseusLinter.runLinter(parsedMarkdown, context, true);
+      PerseusLinter.runLinter(parsedMarkdown, fullLinterContext, true);
 
       // Apply the lint errors from the last TranslationLinter run.
       // TODO(joshuan): Support overlapping dots.
@@ -20908,6 +20912,7 @@ class Renderer extends React.Component {
     return this.lastRenderedMarkdown;
   }
 }
+Renderer.contextType = PerseusI18nContext;
 Renderer.defaultProps = {
   content: "",
   widgets: {},
@@ -21395,6 +21400,16 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
 const _excluded$4 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
@@ -21797,9 +21812,6 @@ class InputNumber extends React.Component {
       return [strings.yourAnswer].concat(examples);
     };
   }
-  static validate(state, rubric, strings) {
-    return inputNumberValidator(state, rubric, strings);
-  }
   static getUserInputFromProps(props) {
     return {
       currentValue: props.currentValue
@@ -21818,9 +21830,6 @@ class InputNumber extends React.Component {
   getUserInput() {
     return InputNumber.getUserInputFromProps(this.props);
   }
-  simpleValidate(rubric) {
-    return inputNumberValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   render() {
     if (this.props.apiOptions.customKeypad) {
       // TODO(charlie): Support "Review Mode".
@@ -21925,7 +21934,8 @@ var InputNumber$1 = {
   hidden: true,
   widget: InputNumber,
   transform: propTransform$3,
-  isLintable: true
+  isLintable: true,
+  validator: inputNumberValidator
 };
 
 const ParseTex = TexWrangler.parseTex;
@@ -22199,12 +22209,6 @@ class NumericInput extends React.Component {
     }
     return answerStrings[0];
   }
-  static validate(userInput, rubric, strings) {
-    return numericInputValidator(userInput, rubric, strings);
-  }
-  simpleValidate(rubric) {
-    return numericInputValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   getUserInput() {
     return NumericInput.getUserInputFromProps(this.props);
   }
@@ -22331,7 +22335,8 @@ var NumericInput$1 = {
   accessible: true,
   widget: NumericInput,
   transform: propsTransform,
-  isLintable: true
+  isLintable: true,
+  validator: numericInputValidator
 };
 
 /**
@@ -24139,6 +24144,9 @@ class Passage extends React.Component {
     this._onResize = void 0;
     // @ts-expect-error - TS2564 - Property '_stylesAppiedTimer' has no initializer and is not definitely assigned in the constructor.
     this._stylesAppiedTimer = void 0;
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     this.state = {
       nLines: null,
       startLineNumbersAfter: 0,
@@ -24150,10 +24158,6 @@ class Passage extends React.Component {
       });
     };
   }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
   componentDidMount() {
     this._updateState();
 
@@ -24358,21 +24362,6 @@ class Passage extends React.Component {
     };
   }
 
-  /**
-   * Misc functions
-   *
-   * These are misc widget functions used for the widget API
-   */
-
-  getUserInput() {
-    return null;
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
-
   /**
    * Rendering
    *
@@ -24525,7 +24514,8 @@ var Passage$1 = {
   transform: editorProps => {
     return _.pick(editorProps, "passageTitle", "passageText", "footnotes", "showLineNumbers");
   },
-  isLintable: true
+  isLintable: true,
+  validator: () => noopValidator()
 };
 
 /**
@@ -24551,6 +24541,9 @@ class PassageRef extends React.Component {
     this._isMounted = void 0;
     // @ts-expect-error - TS2564 - Property '_throttledUpdateRange' has no initializer and is not definitely assigned in the constructor.
     this._throttledUpdateRange = void 0;
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     this.state = {
       lineRange: null,
       content: null
@@ -24579,10 +24572,6 @@ class PassageRef extends React.Component {
       }
     };
   }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
   componentDidMount() {
     // TODO(scottgrant): This is a hack to remove the deprecated call to
     // this.isMounted() but is still considered an anti-pattern.
@@ -24601,15 +24590,6 @@ class PassageRef extends React.Component {
     window.removeEventListener("resize", this._throttledUpdateRange);
     this._isMounted = false;
   }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  getUserInput() {
-    return null;
-  }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     const {
       strings
@@ -24664,7 +24644,9 @@ var PassageRef$1 = {
   version: {
     major: 0,
     minor: 1
-  }
+  },
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /**
@@ -26166,7 +26148,7 @@ class Radio$1 extends React.Component {
         choiceStates
       } = this.props;
       if (choiceStates) {
-        const score = this.simpleValidate(rubric);
+        const score = radioValidator(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,
@@ -26214,9 +26196,6 @@ class Radio$1 extends React.Component {
       }
     };
   }
-  static validate(userInput, rubric, strings) {
-    return radioValidator(userInput, rubric, strings);
-  }
   static getUserInputFromProps(props) {
     // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
     // future timeline implementers: this used to be {value: i} before
@@ -26307,9 +26286,6 @@ class Radio$1 extends React.Component {
   getUserInput() {
     return Radio$1.getUserInputFromProps(this.props);
   }
-  simpleValidate(rubric) {
-    return radioValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   render() {
     const {
       choices
@@ -26544,7 +26520,8 @@ var Radio = {
     minor: 0
   },
   propUpgrades: propUpgrades$1,
-  isLintable: true
+  isLintable: true,
+  validator: radioValidator
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -26587,9 +26564,6 @@ class Categorizer extends React.Component {
       return change.apply(this, args);
     };
   }
-  static validate(userInput, rubric, strings) {
-    return categorizerValidator(userInput, rubric, strings);
-  }
   static getUserInputFromProps(props) {
     return {
       values: props.values
@@ -26605,9 +26579,6 @@ class Categorizer extends React.Component {
     this.change("values", values);
     this.props.trackInteraction();
   }
-  simpleValidate(rubric) {
-    return categorizerValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   render() {
     const self = this;
 
@@ -26753,7 +26724,8 @@ var Categorizer$1 = {
   staticTransform: editorProps => {
     return _.pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
-  isLintable: true
+  isLintable: true,
+  validator: categorizerValidator
 };
 
 /**
@@ -26877,10 +26849,6 @@ class CSProgram extends React.Component {
       return change.apply(this, args);
     };
   }
-  // The widget's grading function
-  static validate(state) {
-    return csProgramValidator(state);
-  }
   componentDidMount() {
     $(window).on("message", this.handleMessageEvent);
   }
@@ -26893,9 +26861,6 @@ class CSProgram extends React.Component {
       message: this.props.message
     };
   }
-  simpleValidate() {
-    return csProgramValidator(this.getUserInput());
-  }
   render() {
     if (!this.props.programID) {
       return /*#__PURE__*/React.createElement("div", null);
@@ -26977,21 +26942,16 @@ var CSProgram$1 = {
   displayName: "CS Program",
   supportedAlignments: ["block", "full-width"],
   widget: CSProgram,
-  hidden: true
+  hidden: true,
+  validator: csProgramValidator
 };
 
 class Definition extends React.Component {
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
-  getUserInput() {
-    return {};
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
+  constructor(...args) {
+    super(...args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
   }
   render() {
     return /*#__PURE__*/React.createElement(DefinitionConsumer, null, ({
@@ -27047,22 +27007,19 @@ var Definition$1 = {
   accessible: true,
   defaultAlignment: "inline",
   widget: Definition,
-  transform: x => x
+  transform: x => x,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 // The props are type `any` on purpose so that this can receive props
 // from any deprecated widget
 class DeprecatedStandin extends React__default.Component {
-  static validate() {
-    // Since this mean to replace an existing widget the learner
-    // WILL earn points for this widget
-    return noopValidator(1);
-  }
-  getUserInput() {
-    return {};
-  }
-  simpleValidate() {
-    return noopValidator(1);
+  constructor(...args) {
+    super(...args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
   }
   render() {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -27082,7 +27039,9 @@ var DeprecatedStandin$1 = {
   name: "deprecated-standin",
   displayName: "Deprecated Standin",
   widget: DeprecatedStandin,
-  hidden: true
+  hidden: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator(1)
 };
 
 function dropdownValidator(userInput, rubric) {
@@ -27123,17 +27082,11 @@ class Dropdown extends React.Component {
       });
     };
   }
-  static validate(userInput, rubric) {
-    return dropdownValidator(userInput, rubric);
-  }
   getUserInput() {
     return {
       value: this.props.selected
     };
   }
-  simpleValidate(rubric) {
-    return dropdownValidator(this.getUserInput(), rubric);
-  }
   render() {
     const children = [/*#__PURE__*/React.createElement(OptionItem, {
       key: "placeholder",
@@ -27180,7 +27133,8 @@ var Dropdown$1 = {
   defaultAlignment: "inline-block",
   accessible: true,
   widget: Dropdown,
-  transform: optionsTransform
+  transform: optionsTransform,
+  validator: dropdownValidator
 };
 
 // transform = _.identity
@@ -27194,6 +27148,9 @@ function mediaQueryIsMatched(mediaQuery) {
 class Explanation extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     this.state = {
       expanded: false
     };
@@ -27208,24 +27165,12 @@ class Explanation extends React.Component {
       this.props.trackInteraction();
     };
   }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
   componentDidMount() {
     this._mounted = true;
   }
   componentWillUnmount() {
     this._mounted = false;
   }
-  getUserInput() {
-    return {};
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp : caretDown;
@@ -27339,7 +27284,9 @@ var Explanation$1 = {
   defaultAlignment: "inline",
   widget: Explanation,
   transform: _.identity,
-  isLintable: true
+  isLintable: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 class GradedGroupAnswerBar extends React.Component {
@@ -28939,9 +28886,6 @@ class Grapher extends React.Component {
       }
     };
   }
-  static validate(state, rubric) {
-    return grapherValidator(state, rubric);
-  }
   static getUserInputFromProps(props) {
     return props.plot;
   }
@@ -28960,9 +28904,6 @@ class Grapher extends React.Component {
     tickStep[1] = tickStep[1] / gridStep[1];
     return tickStep;
   }
-  simpleValidate(rubric) {
-    return grapherValidator(this.getUserInput(), rubric);
-  }
   getUserInput() {
     return Grapher.getUserInputFromProps(this.props);
   }
@@ -29050,7 +28991,8 @@ var Grapher$1 = {
   hidden: true,
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$4
+  staticTransform: staticTransform$4,
+  validator: grapherValidator
 };
 
 // exports has no 'transform'
@@ -29096,17 +29038,18 @@ class Group extends React.Component {
     // the group with the correct number.
     this.forceUpdate();
   }
-  getUserInput() {
+  getUserInputMap() {
     var _this$rendererRef7;
-    return (_this$rendererRef7 = this.rendererRef) == null ? void 0 : _this$rendererRef7.getUserInput();
-  }
-  simpleValidate() {
-    var _this$rendererRef$sco, _this$rendererRef8;
-    return (_this$rendererRef$sco = (_this$rendererRef8 = this.rendererRef) == null ? void 0 : _this$rendererRef8.score()) != null ? _this$rendererRef$sco : {
-      type: "invalid"
-    };
+    return (_this$rendererRef7 = this.rendererRef) == null ? void 0 : _this$rendererRef7.getUserInputMap();
   }
 
+  /**
+   * @deprecated getUserInputMap should be used for Groups
+   */
+  getUserInput() {
+    var _this$rendererRef8;
+    return (_this$rendererRef8 = this.rendererRef) == null ? void 0 : _this$rendererRef8.getUserInput();
+  }
   // Mobile API:
   getInputPaths() {
     var _this$rendererRef$get, _this$rendererRef9;
@@ -29267,9 +29210,6 @@ class Iframe extends React.Component {
       return change.apply(this, args);
     };
   }
-  static validate(state) {
-    return iframeValidator(state);
-  }
   componentDidMount() {
     $(window).on("message", this.handleMessageEvent);
   }
@@ -29282,9 +29222,6 @@ class Iframe extends React.Component {
       message: this.props.message
     };
   }
-  simpleValidate() {
-    return iframeValidator(this.getUserInput());
-  }
   render() {
     const style = {
       width: String(this.props.width),
@@ -29358,7 +29295,8 @@ var Iframe$1 = {
   displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
-  hidden: true
+  hidden: true,
+  validator: iframeValidator
 };
 
 const defaultBoxSize = 400;
@@ -29376,22 +29314,13 @@ const DEFAULT_ALIGNMENT = "block";
 class ImageWidget extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     this.change = (...args) => {
       return change.apply(this, args);
     };
   }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
-  getUserInput() {
-    return null;
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     let image;
     const alt = this.props.caption === this.props.alt ? "" : this.props.alt;
@@ -29546,7 +29475,9 @@ var Image$1 = {
   supportedAlignments: editorAlignments,
   displayName: "Image",
   widget: ImageWidget,
-  isLintable: true
+  isLintable: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -29615,6 +29546,9 @@ const KAScompile = (expr, options) => {
 class Interaction extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     this.state = {
       variables: _getInitialVariables(this.props.elements),
       functions: _getInitialFunctions(this.props.elements)
@@ -29698,10 +29632,6 @@ class Interaction extends React.Component {
       return change.apply(this, args);
     };
   }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
   UNSAFE_componentWillReceiveProps(nextProps) {
     // HACK(michaelpolyak): This widget is not wired to use the Perseus
     // `onChange` callback to save user changes. Perseus re-rendering of the
@@ -29720,18 +29650,6 @@ class Interaction extends React.Component {
       });
     }
   }
-  getUserInput() {
-    // TODO(eater): Perhaps we want to be able to record the state of the
-    // user's interaction. Unfortunately sending all the props will
-    // probably make the attempt payload too large. So for now, don't send
-    // anything.
-    return {};
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     const range = this.props.graph.range;
     let labels = this.props.graph.labels;
@@ -30150,7 +30068,9 @@ var Interactive = {
   displayName: "Interaction",
   widget: Interaction,
   transform: _.identity,
-  hidden: true
+  hidden: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -30672,16 +30592,39 @@ function polar(r, th) {
   th = th * Math.PI / 180;
   return [r[0] * Math.cos(th), r[1] * Math.sin(th)];
 }
-const findAngle = (point1, point2, vertex) => {
-  if (vertex === undefined) {
-    const x = point1[0] - point2[0];
-    const y = point1[1] - point2[1];
-    if (!x && !y) {
-      return 0;
-    }
-    return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+// This function calculates the angle between two points and an optional vertex.
+// If the vertex is not provided, the angle is measured between the two points.
+// This does not account for reflex angles or clockwise position.
+const getAngleFromVertex = (point, vertex) => {
+  const x = point[0] - vertex[0];
+  const y = point[1] - vertex[1];
+  if (!x && !y) {
+    return 0;
   }
-  return findAngle(point1, vertex) - findAngle(point2, vertex);
+  return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
+};
+
+// This function calculates the clockwise angle between three points,
+// and is used to generate the labels and equation strings of the
+// current angle for the interactive graph.
+const getClockwiseAngle = (coords, allowReflexAngles = false) => {
+  const coordsCopy = [...coords];
+  // The coords are saved as [point1, vertex, point2] in the interactive graph
+  const areClockwise = clockwise$1([coordsCopy[0], coordsCopy[2], coordsCopy[1]]);
+
+  // We may need to reverse the coordinates if we allow
+  // reflex angles and the points are not in clockwise order.
+  const shouldReverseCoords = !areClockwise || allowReflexAngles;
+
+  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
+  const clockwiseCoords = shouldReverseCoords ? coordsCopy.reverse() : coordsCopy;
+
+  // Calculate the angles between the two points and get the difference
+  // between the two angles to get the clockwise angle.
+  const startAngle = getAngleFromVertex(clockwiseCoords[0], clockwiseCoords[1]);
+  const endAngle = getAngleFromVertex(clockwiseCoords[2], clockwiseCoords[1]);
+  const angle = (startAngle + 360 - endAngle) % 360;
+  return angle;
 };
 
 const defaultGraphConfig = {
@@ -33103,8 +33046,8 @@ const Angle = ({
   const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
 
   // Calculate the angles between the two points
-  const startAngle = findAngle(clockwiseCoords[0], vertex);
-  const endAngle = findAngle(clockwiseCoords[1], vertex);
+  const startAngle = getAngleFromVertex(clockwiseCoords[0], vertex);
+  const endAngle = getAngleFromVertex(clockwiseCoords[1], vertex);
   const angle = (startAngle + 360 - endAngle) % 360;
 
   // Check if the angle is reflexive
@@ -34183,7 +34126,9 @@ const MafsGraph = props => {
     analytics.onAnalyticsEvent({
       type: "perseus:interactive-graph-widget:rendered",
       payload: {
-        type
+        type,
+        widgetType: "INTERACTIVE_GRAPH",
+        widgetId: "interactive-graph"
       }
     });
   });
@@ -35423,7 +35368,7 @@ function boundAndSnapAngleVertex({
   for (const i of [0, 2]) {
     const oldPoint = coordsCopy[i];
     let newPoint = vec.add(oldPoint, delta);
-    let angle = findAngle(newVertex, newPoint);
+    let angle = getAngleFromVertex(newVertex, newPoint);
     angle *= Math.PI / 180;
     newPoint = constrainToBoundsOnAngle(newPoint, angle, range, snapStep);
     newPoints[i] = newPoint;
@@ -35494,7 +35439,7 @@ function boundAndSnapAngleEndPoints(destinationPoint, {
   const vertex = coords[1];
 
   // Gets the angle between the coords and the vertex
-  let angle = findAngle(coordsCopy[index], vertex);
+  let angle = getAngleFromVertex(coordsCopy[index], vertex);
 
   // Snap the angle to the nearest multiple of snapDegrees (if provided)
   angle = Math.round((angle - offsetDegrees) / snap) * snap + offsetDegrees;
@@ -35540,8 +35485,8 @@ function boundAndSnapToPolygonAngle(destinationPoint, {
     angles[rel(j)] = Math.round(angles[rel(j)]);
   });
   const getAngle = function getAngle(a, vertex, b) {
-    const angle = findAngle(coordsCopy[rel(a)], coordsCopy[rel(b)], coordsCopy[rel(vertex)]);
-    return (angle + 360) % 360;
+    const angle = getClockwiseAngle([coordsCopy[rel(a)], coordsCopy[rel(vertex)], coordsCopy[rel(b)]]);
+    return angle;
   };
   const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
   innerAngles[2] = 180 - (innerAngles[0] + innerAngles[1]);
@@ -35568,7 +35513,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, {
   const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
 
   // Angle at the second vertex of the polygon
-  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = getAngleFromVertex(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Uses the length of the side of the polygon (radial coordinate)
   // and the angle between the first and second sides of the
@@ -35618,7 +35563,7 @@ function boundAndSnapToSides(destinationPoint, {
   const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
-  const outerAngle = findAngle(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
+  const outerAngle = getAngleFromVertex(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
 
   // Returns true if the points form a counter-clockwise turn;
   // a.k.a if the point is on the left or right of the polygon.
@@ -35725,7 +35670,8 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const numPoints = graph.type === "point" ? graph.numPoints : null;
   const numSides = graph.type === "polygon" ? graph.numSides : null;
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
-  const showAngles = graph.type === "polygon" ? graph.showAngles : null;
+  const showAngles = graph.type === "polygon" || graph.type === "angle" ? graph.showAngles : null;
+  const allowReflexAngles = graph.type === "angle" ? graph.allowReflexAngles : null;
   const showSides = graph.type === "polygon" ? graph.showSides : null;
   const startCoords = "startCoords" in graph ? graph.startCoords : undefined;
   const originalPropsRef = useRef(props);
@@ -35738,7 +35684,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, startCoords]);
+  }, [graph.type, numPoints, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef, startCoords, allowReflexAngles]);
 
   // If the graph is static, it always displays the correct answer. This is
   // standard behavior for Perseus widgets (e.g. compare the Radio widget).
@@ -35927,17 +35873,15 @@ function interactiveGraphValidator(userInput, rubric) {
     } else if (userInput.type === "angle" && rubric.correct.type === "angle") {
       const guess = userInput.coords;
       const correct = rubric.correct.coords;
+      const allowReflexAngles = rubric.correct.allowReflexAngles;
       let match;
       if (rubric.correct.match === "congruent") {
         const angles = _.map([guess, correct], function (coords) {
-          const angle = GraphUtils.findAngle(
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[2],
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[0],
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-          coords[1]);
-          return (angle + 360) % 360;
+          if (!coords) {
+            return false;
+          }
+          const angle = getClockwiseAngle(coords, allowReflexAngles);
+          return angle;
         });
         // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
         match = eq$1(...angles);
@@ -36805,7 +36749,7 @@ class LegacyInteractiveGraph extends React.Component {
             angles[rel(j)] = Math.round(angles[rel(j)]);
           });
           const getAngle = function getAngle(a, vertex, b) {
-            const angle = GraphUtils.findAngle(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
+            const angle = GraphUtils.findAngleDeprecated(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
             return (angle + 360) % 360;
           };
           const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
@@ -36824,7 +36768,7 @@ class LegacyInteractiveGraph extends React.Component {
 
           // Solve for side by using the law of sines
           const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
-          const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
+          const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
           const offset = polar$1(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
           return (_this$graphie5 = this.graphie) == null ? void 0 : _this$graphie5.addPoints(coords[rel(-1)], offset);
         }
@@ -36848,7 +36792,7 @@ class LegacyInteractiveGraph extends React.Component {
 
           // Solve for angle by using the law of cosines
           const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
-          const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
+          const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
           const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
           const offset = polar$1(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
           return (_this$graphie6 = this.graphie) == null ? void 0 : _this$graphie6.addPoints(coords[rel(-1)], offset);
@@ -37212,9 +37156,6 @@ class LegacyInteractiveGraph extends React.Component {
   getUserInput() {
     return InteractiveGraph.getUserInputFromProps(this.props);
   }
-  simpleValidate(rubric) {
-    return interactiveGraphValidator(this.getUserInput(), rubric);
-  }
   render() {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
@@ -37291,9 +37232,6 @@ class InteractiveGraph extends React.Component {
     }
     throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
   }
-  simpleValidate(rubric) {
-    return interactiveGraphValidator(this.getUserInput(), rubric);
-  }
   render() {
     var _this$props$apiOption;
     // Mafs shim
@@ -37622,12 +37560,10 @@ class InteractiveGraph extends React.Component {
       throw makeInvalidTypeError("getAngleEquationString", "angle");
     }
     const coords = InteractiveGraph.getAngleCoords(props.graph, props);
-    const angle = GraphUtils.findAngle(coords[2], coords[0], coords[1]);
+    const allowReflexAngles = props.graph.allowReflexAngles;
+    const angle = getClockwiseAngle(coords, allowReflexAngles);
     return angle.toFixed(0) + "\u00B0 angle" + " at (" + coords[1].join(", ") + ")";
   }
-  static validate(userInput, rubric) {
-    return interactiveGraphValidator(userInput, rubric);
-  }
   static getUserInputFromProps(props) {
     return props.graph;
   }
@@ -37676,7 +37612,8 @@ var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
-  staticTransform: staticTransform$3
+  staticTransform: staticTransform$3,
+  validator: interactiveGraphValidator
 };
 
 const black = "#000000";
@@ -39041,10 +38978,6 @@ const styles$b = StyleSheet.create({
 // TODO: should this be using WidgetProps / PerseusLabelImageWidgetOptions?
 
 class LabelImage extends React.Component {
-  static validate(state, rubric) {
-    return labelImageValidator(state);
-  }
-
   /**
    * Test whether point is contained within triangle.
    *
@@ -39239,9 +39172,6 @@ class LabelImage extends React.Component {
   componentWillUnmount() {
     this._mounted = false;
   }
-  simpleValidate(rubric) {
-    return labelImageValidator(this.getUserInput());
-  }
   getUserInput() {
     const {
       markers
@@ -39598,19 +39528,13 @@ const LabelImageWithDependencies = /*#__PURE__*/React.forwardRef((props, ref) =>
     analytics: deps.analytics
   }, props));
 });
-
-// HACK: Propogate "static" methods onto our wrapper component.
-// In the future we should adjust client apps to not depend on these static
-// methods and instead adjust Peresus to provide these facilities through
-// instance methods on our Renderers.
-// @ts-expect-error - TS2339 - Property 'validate' does not exist on type
-LabelImageWithDependencies.validate = labelImageValidator;
 var LabelImage$1 = {
   name: "label-image",
   displayName: "Label Image",
   widget: LabelImageWithDependencies,
   accessible: true,
-  isLintable: true
+  isLintable: true,
+  validator: labelImageValidator
 };
 
 var ItemState = /*#__PURE__*/function (ItemState) {
@@ -40395,12 +40319,6 @@ class Matcher extends React.Component {
       this.refs.right.moveOptionToIndex(option, index);
     };
   }
-  static validate(state, rubric) {
-    return matcherValidator(state, rubric);
-  }
-  simpleValidate(rubric) {
-    return matcherValidator(this.getUserInput(), rubric);
-  }
   render() {
     // To minimize layout shift, we display a spinner until our math
     // renderer is ready to render the math inside the matcher. To
@@ -40538,7 +40456,8 @@ var Matcher$1 = {
   name: "matcher",
   displayName: "Matcher (two column)",
   widget: Matcher,
-  isLintable: true
+  isLintable: true,
+  validator: matcherValidator
 };
 
 function matrixValidator(state, rubric, strings) {
@@ -40800,9 +40719,6 @@ class Matrix extends React.Component {
       this.props.trackInteraction();
     };
   }
-  static validate(state, rubric, strings) {
-    return matrixValidator(state, rubric, strings);
-  }
   componentDidMount() {
     // Used in the `onBlur` and `onFocus` handlers
     this.cursorPosition = [0, 0];
@@ -40817,9 +40733,6 @@ class Matrix extends React.Component {
       answers: this.props.answers
     };
   }
-  simpleValidate(rubric) {
-    return matrixValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   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
@@ -41012,7 +40925,8 @@ var Matrix$1 = {
   widget: Matrix,
   transform: propTransform$1,
   staticTransform: staticTransform$2,
-  isLintable: true
+  isLintable: true,
+  validator: matrixValidator
 };
 
 const defaultImage = {
@@ -41023,6 +40937,9 @@ const defaultImage = {
 class Measurer extends React.Component {
   constructor(...args) {
     super(...args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     this.state = {};
     this.ruler = void 0;
     this.protractor = void 0;
@@ -41076,12 +40993,6 @@ class Measurer extends React.Component {
       });
     }
   }
-  getUserInput() {
-    return {};
-  }
-  simpleValidate() {
-    return noopValidator(1);
-  }
   render() {
     const image = _.extend({}, defaultImage, this.props.image);
 
@@ -41107,7 +41018,6 @@ class Measurer extends React.Component {
     }));
   }
 }
-Measurer.validate = noopValidator;
 Measurer.defaultProps = {
   box: [480, 480],
   image: {},
@@ -41141,7 +41051,9 @@ var Measurer$1 = {
     major: 1,
     minor: 0
   },
-  propUpgrades: propUpgrades
+  propUpgrades: propUpgrades,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator(1)
 };
 
 /**
@@ -42008,17 +41920,11 @@ class Molecule extends React.Component {
 }
 Molecule.contextType = PerseusI18nContext;
 class MoleculeWidget extends React.Component {
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
-  getUserInput() {
-    return [];
-  }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  validate() {
-    return noopValidator();
+  constructor(...args) {
+    super(...args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
   }
   render() {
     return /*#__PURE__*/React.createElement(Molecule, {
@@ -42035,7 +41941,8 @@ var Molecule$1 = {
   name: "molecule-renderer",
   displayName: "Molecule renderer",
   hidden: true,
-  widget: MoleculeWidget
+  widget: MoleculeWidget,
+  validator: () => noopValidator()
 };
 
 function numberLineValidator(state, rubric) {
@@ -42180,18 +42087,16 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
     results.push(graphie.line([x, -0.2], [x, 0.2]));
     const labelTicks = props.labelTicks;
     if (labelTicks || props.labelStyle === "decimal ticks") {
-      results.push(_label(graphie, props.labelStyle, x, x, base));
+      if (x === leftLabel || x === rightLabel) {
+        results.push(graphie.style({
+          color: KhanColors.BLUE
+        }, () => _label(graphie, props.labelStyle, x, x, base)));
+      } else {
+        results.push(_label(graphie, props.labelStyle, x, x, base));
+      }
     }
   }
 
-  // Render the text labels
-  results.push(graphie.style(props.isMobile ? {
-    color: KhanColors.BLUE
-  } : {}, () => _label(graphie, props.labelStyle, leftLabel, leftLabel, base)));
-  results.push(graphie.style(props.isMobile ? {
-    color: KhanColors.BLUE
-  } : {}, () => _label(graphie, props.labelStyle, rightLabel, rightLabel, base)));
-
   // Render the labels' lines
   graphie.style({
     stroke: KhanColors.BLUE,
@@ -42466,9 +42371,6 @@ class NumberLine extends React.Component {
       });
     };
   }
-  static validate(state, rubric) {
-    return numberLineValidator(state, rubric);
-  }
   focus() {
     if (this.props.isTickCtrl) {
       // eslint-disable-next-line react/no-string-refs
@@ -42498,9 +42400,6 @@ class NumberLine extends React.Component {
       divisionRange: this.props.divisionRange
     };
   }
-  simpleValidate(rubric) {
-    return numberLineValidator(this.getUserInput(), rubric);
-  }
   render() {
     const {
       strings
@@ -42619,7 +42518,8 @@ var NumberLine$1 = {
   displayName: "Number line",
   widget: NumberLine,
   transform: numberLineTransform,
-  staticTransform: staticTransform$1
+  staticTransform: staticTransform$1,
+  validator: numberLineValidator
 };
 
 function ordererValidator(userInput, rubric) {
@@ -43052,9 +42952,6 @@ class Orderer extends React.Component {
       });
     };
   }
-  static validate(userInput, rubric) {
-    return ordererValidator(userInput, rubric);
-  }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!_.isEqual(this.props.current, nextProps.current)) {
       this.setState({
@@ -43069,9 +42966,6 @@ class Orderer extends React.Component {
       })
     };
   }
-  simpleValidate(rubric) {
-    return ordererValidator(this.getUserInput(), rubric);
-  }
   render() {
     // This is the card we are currently dragging
     const dragging = this.state.dragging && /*#__PURE__*/React.createElement(Card
@@ -43189,31 +43083,22 @@ var Orderer$1 = {
   displayName: "Orderer",
   hidden: true,
   widget: Orderer,
-  isLintable: true
+  isLintable: true,
+  validator: ordererValidator
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class PassageRefTarget extends React.Component {
   constructor(..._args) {
     super(..._args);
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     // TODO passage-ref-target isn't interactive; remove
     this.change = (...args) => {
       return change.apply(this, args);
     };
   }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
-
-  // TODO passage-ref-target isn't interactive; remove
-  getUserInput() {
-    return null;
-  }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     return /*#__PURE__*/React.createElement(Renderer, {
       content: this.props.content
@@ -43247,7 +43132,9 @@ var PassageRefTarget$1 = {
     major: 0,
     minor: 0
   },
-  isLintable: true
+  isLintable: true,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /**
@@ -43260,6 +43147,9 @@ class PhetSimulation extends React.Component {
     super(props);
     this.iframeRef = /*#__PURE__*/React.createRef();
     this.locale = void 0;
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     this.state = {
       url: null,
       banner: null
@@ -43302,11 +43192,6 @@ class PhetSimulation extends React.Component {
       await this.updateSimState(this.props.url);
     }
   }
-
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  getUserInput() {
-    return null;
-  }
   async updateSimState(urlString) {
     const url = makeSafeUrl(urlString, this.locale);
     if (url === null) {
@@ -44205,9 +44090,6 @@ class Plotter extends React.Component {
       });
     };
   }
-  static validate(userInput, rubric) {
-    return plotterValidator(userInput, rubric);
-  }
   componentDidMount() {
     this._isMounted = true;
     this.setupGraphie(this.state);
@@ -44234,9 +44116,6 @@ class Plotter extends React.Component {
   getUserInput() {
     return this.state.values;
   }
-  simpleValidate(rubric) {
-    return plotterValidator(this.getUserInput(), rubric);
-  }
   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
@@ -44276,7 +44155,8 @@ var Plotter$1 = {
   displayName: "Plotter",
   hidden: true,
   widget: Plotter,
-  staticTransform: staticTransform
+  staticTransform: staticTransform,
+  validator: plotterValidator
 };
 
 /**
@@ -44392,9 +44272,6 @@ class Sorter extends React.Component {
       this.refs.sortable.moveOptionToIndex(option, index);
     };
   }
-  static validate(userInput, rubric) {
-    return sorterValidator(userInput, rubric);
-  }
   componentDidMount() {
     this._isMounted = true;
   }
@@ -44410,9 +44287,6 @@ class Sorter extends React.Component {
       changed: this.state.changed
     };
   }
-  simpleValidate(rubric) {
-    return sorterValidator(this.getUserInput(), rubric);
-  }
   render() {
     const options = shuffle(this.props.correct, this.props.problemNum, /* ensurePermuted */true);
     const {
@@ -44446,7 +44320,8 @@ var Sorter$1 = {
   name: "sorter",
   displayName: "Sorter",
   widget: Sorter,
-  isLintable: true
+  isLintable: true,
+  validator: sorterValidator
 };
 
 function tableValidator(state, rubric, strings) {
@@ -44625,15 +44500,9 @@ class Table extends React.Component {
       }, cb);
     };
   }
-  static validate(state, rubric, strings) {
-    return tableValidator(state, rubric, strings);
-  }
   getUserInput() {
     return _.map(this.props.answers, _.clone);
   }
-  simpleValidate(rubric) {
-    return tableValidator(this.getUserInput(), rubric, this.context.strings);
-  }
   getDOMNodeForPath(path) {
     const inputID = getRefForPath(path);
     // eslint-disable-next-line react/no-string-refs
@@ -44734,7 +44603,8 @@ var Table$1 = {
   widget: Table,
   transform: propTransform,
   hidden: true,
-  isLintable: true
+  isLintable: true,
+  validator: tableValidator
 };
 
 /**
@@ -44822,26 +44692,14 @@ const IS_VIMEO = /(vimeo\.com)/;
 class Video extends React.Component {
   constructor(..._args) {
     super(..._args);
-    this.getUserInput = () => {
-      return null;
-    };
+    // this just helps with TS weak typing when a Widget
+    // doesn't implement any Widget methods
+    this.isWidget = true;
     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);
     };
   }
-  /**
-   * This is the widget's grading function.
-   * Points for videos are tallied by the embedded video itself, in the case
-   * of Khan Academy videos.
-   */ // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  static validate() {
-    return noopValidator();
-  }
-  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
-  simpleValidate() {
-    return noopValidator();
-  }
   render() {
     const {
       InitialRequestUrl
@@ -44901,7 +44759,9 @@ var Video$1 = {
   displayName: "Video",
   defaultAlignment: "block",
   supportedAlignments: ["block", "float-left", "float-right", "full-width"],
-  widget: Video
+  widget: Video,
+  // TODO: things that aren't interactive shouldn't need validators
+  validator: () => noopValidator()
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -44945,7 +44805,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "36.1.1";
+const libVersion = "37.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45521,7 +45381,7 @@ class ServerItemRenderer extends React.Component {
       });
 
       // Call the interactionCallback, if it exists, with the current user input data
-      (_this$props$apiOption = this.props.apiOptions) == null || _this$props$apiOption.interactionCallback == null || _this$props$apiOption.interactionCallback(this.questionRenderer.getUserInputForWidgets());
+      (_this$props$apiOption = this.props.apiOptions) == null || _this$props$apiOption.interactionCallback == null || _this$props$apiOption.interactionCallback(this.questionRenderer.getUserInputMap());
     };
     // This must be pre-bound otherwise SvgImage's shouldComponentUpdate
     // won't behave correctly and we'll get an infinite loop.
@@ -48285,12 +48145,12 @@ function parsePerseusItem(json) {
   }
   throw new Error("Something went wrong.");
 }
-function buildRandomString() {
+function buildRandomString(capitalize = false) {
   let randomString = "";
   const randomLength = Math.floor(Math.random() * 8) + 3;
   for (let i = 0; i < randomLength; i++) {
     const randomLetter = String.fromCharCode(97 + Math.floor(Math.random() * 26));
-    randomString += randomLetter;
+    randomString += capitalize && i === 0 ? randomLetter.toUpperCase() : randomLetter;
   }
   return randomString;
 }
@@ -48298,9 +48158,12 @@ function buildRandomPhrase() {
   const phrases = [];
   const randomLength = Math.floor(Math.random() * 10) + 5;
   for (let i = 0; i < randomLength; i++) {
-    phrases.push(buildRandomString());
+    phrases.push(buildRandomString(i === 0));
   }
-  return phrases.join(" ");
+  const modifierStart = ["**", "$"];
+  const modifierEnd = ["**", "$"];
+  const modifierIndex = Math.floor(Math.random() * modifierStart.length);
+  return `${modifierStart[modifierIndex]}${phrases.join(" ")}${modifierEnd[modifierIndex]}`;
 }
 function buildTestData(testObject) {
   return `{"data":{"assessmentItem":{"__typename":"AssessmentItemOrError","error":null,"item":{"__typename":"AssessmentItem","id":"x890b3c70f3e8f4a6","itemData":"${testObject}","problemType":"Type 1","sha":"c7284a3ad65214b4e62bccce236d92f7f5d35941"}}}}`;
@@ -48505,5 +48368,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map