@khanacademy/perseus 34.1.0 → 35.1.1

package/dist/es/index.js

@@ -246,7 +246,10 @@ const mockStrings = {
   cos: "cos",
   tan: "tan",
   simulationLoadFail: "Sorry, this simulation cannot load.",
-  simulationLocaleWarning: "Sorry, this simulation isn't available in your language."
+  simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
+  addPoint: "Add Point",
+  removePoint: "Remove Point",
+  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph"
 };
 
 /**
@@ -749,7 +752,7 @@ const denylist = [
 // (technically the renderer still adds them)
 "key", "ref",
 // added by src/renderer.jsx
-"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets",
+"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "widgetIsOpen", "questionCompleted", "findWidgets",
 // added by src/editor.jsx, for widgets removing themselves
 // this is soooo not the right place for this, but alas.
 "onRemove",
@@ -757,15 +760,6 @@ const denylist = [
 "id",
 // Callbacks and items for interaction handling
 "onBlur", "onFocus", "trackInteraction", "keypadElement"];
-const removeDenylistProps = props => {
-  const newProps = _extends({}, props);
-  for (const prop of denylist) {
-    if (prop in newProps) {
-      delete newProps[prop];
-    }
-  }
-  return newProps;
-};
 
 /* eslint-disable @babel/no-invalid-this */
 const USAGE = "Usage:\n" + "  this.change({propName: 5}, callback);\n" + '  this.change("propName", 5, callback);\n' + '  this.change("propName")';
@@ -1030,8 +1024,6 @@ StubTagEditor.defaultProps = {
  *  * nothing if it is purely a bug fix.
  *
  * Callbacks passed to Renderer/ItemRenderer:
- *  * onInputError:
- *    Called when there is an error grading a widget
  *  * onFocusChange: (newFocusPath, oldFocusPath, keypadDOMNode)
  *    Called when the user focus changes. The first two parameters are `path`
  *    arrays uniquely identifying the respect inputs. The third parameter,
@@ -1054,7 +1046,6 @@ StubTagEditor.defaultProps = {
 const ApiOptions = {
   propTypes: PropTypes.shape({
     isArticle: PropTypes.bool.isRequired,
-    onInputError: PropTypes.func.isRequired,
     onFocusChange: PropTypes.func.isRequired,
     GroupMetadataEditor: PropTypes.func.isRequired,
     showAlignmentOptions: PropTypes.bool.isRequired,
@@ -1138,7 +1129,6 @@ const ApiOptions = {
   defaults: {
     isArticle: false,
     isMobile: false,
-    onInputError: function () {},
     onFocusChange: function () {},
     GroupMetadataEditor: StubTagEditor,
     showAlignmentOptions: false,
@@ -2150,9 +2140,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,
-// @ts-expect-error - TS2322 - Type '() => void' is not assignable to type 'OnInputErrorFunctionType'.
-onInputError = function () {}, strings, locale) {
+function expressionValidator(userInput, rubric, strings, locale) {
   const options = _.clone(rubric);
   _.extend(options, {
     decimal_separator: getDecimalSeparator(locale)
@@ -2252,14 +2240,9 @@ onInputError = function () {}, strings, locale) {
     };
   }
   if (matchingAnswerForm.considered === "ungraded") {
-    // We matched an ungraded answer form - return "invalid", which
-    // will let the user try again with no penalty
-    const apiResult = onInputError(null,
-    // Reserved for some widget identifier
-    userInput, matchMessage);
     return {
       type: "invalid",
-      message: apiResult === false ? null : matchMessage
+      message: matchMessage
     };
   }
   // We matched a graded answer form, so we can now tell the user
@@ -2348,14 +2331,9 @@ class Expression extends React.Component {
           showErrorStyle: false
         });
         if (!this.parse(this.props.value, this.props).parsed) {
-          const apiResult = this.props.apiOptions.onInputError(null,
-          // reserved for some widget identifier
-          this.props.value, this.context.strings.ERROR_TITLE);
-          if (apiResult !== false) {
-            this.setState({
-              invalid: true
-            });
-          }
+          this.setState({
+            invalid: true
+          });
         }
       }
     };
@@ -2369,12 +2347,12 @@ class Expression extends React.Component {
         });
       }
     };
-    this.simpleValidate = (_ref, onInputError) => {
+    this.simpleValidate = _ref => {
       let {
           scoring
         } = _ref,
         rubric = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-      const score = expressionValidator(this.getUserInput(), rubric, onInputError || function () {}, this.context.strings, this.context.locale);
+      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.
@@ -2390,9 +2368,6 @@ class Expression extends React.Component {
       }
       return score;
     };
-    this.getUserInput = () => {
-      return Expression.getUserInputFromProps(this.props);
-    };
     this.change = (...args) => {
       return change.apply(this, args);
     };
@@ -2465,10 +2440,8 @@ class Expression extends React.Component {
     };
   }
   // TODO remove this in favor of just using expressionValidator
-  static validate(userInput, rubric,
-  // @ts-expect-error - TS2322 - Type '() => void' is not assignable to type 'OnInputErrorFunctionType'.
-  onInputError = function () {}, strings, locale) {
-    return expressionValidator(userInput, rubric, onInputError, strings, locale);
+  static validate(userInput, rubric, strings, locale) {
+    return expressionValidator(userInput, rubric, strings, locale);
   }
   static getUserInputFromProps(props) {
     return normalizeTex(props.value);
@@ -2482,6 +2455,9 @@ class Expression extends React.Component {
   }
   //#endregion
 
+  getUserInput() {
+    return Expression.getUserInputFromProps(this.props);
+  }
   // HACK(joel)
   insert(keyPressed) {
     // eslint-disable-next-line react/no-string-refs
@@ -3170,7 +3146,7 @@ function constrainedTickStepsFromTickSteps(tickSteps, ranges) {
 /**
  * Approximate equality on numbers and primitives.
  */
-function eq$3(x, y) {
+function eq$4(x, y) {
   if (typeof x === "number" && typeof y === "number") {
     return Math.abs(x - y) < 1e-9;
   }
@@ -3197,7 +3173,7 @@ function deepEq$5(x, y) {
     return false;
   }
   if (typeof x === "function" && typeof y === "function") {
-    return eq$3(x, y);
+    return eq$4(x, y);
   }
   if (typeof x === "function" || typeof y === "function") {
     return false;
@@ -3214,7 +3190,7 @@ function deepEq$5(x, y) {
   if (typeof x === "object" && !!x || typeof y === "object" && !!y) {
     return false;
   }
-  return eq$3(x, y);
+  return eq$4(x, y);
 }
 
 /**
@@ -3514,7 +3490,7 @@ const Util = {
   gridStepFromTickStep,
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
-  eq: eq$3,
+  eq: eq$4,
   deepEq: deepEq$5,
   parseQueryString,
   updateQueryString: updateQueryString$2,
@@ -10837,7 +10813,7 @@ class WrappedLine extends WrappedDrawing {
  * A collection of geomtry-related utility functions
  */
 const {
-  eq: eq$2,
+  eq: eq$3,
   deepEq: deepEq$4
 } = Util;
 
@@ -10847,7 +10823,7 @@ const {
 
 // Given a number, return whether it is positive (1), negative (-1), or zero (0)
 function sign(val) {
-  if (eq$2(val, 0)) {
+  if (eq$3(val, 0)) {
     return 0;
   }
   return val > 0 ? 1 : -1;
@@ -10859,7 +10835,7 @@ function ccw(a, b, c) {
   return (b[0] - a[0]) * (c[1] - a[1]) - (c[0] - a[0]) * (b[1] - a[1]);
 }
 function collinear(a, b, c) {
-  return eq$2(ccw(a, b, c), 0);
+  return eq$3(ccw(a, b, c), 0);
 }
 
 // Given rect bounding points A and B, whether point C is inside the rect
@@ -11004,7 +10980,7 @@ function similar(coords1, coords2, tolerance) {
         return pair[0] / pair[1];
       });
       const same = _.all(factors, function (factor) {
-        return eq$2(factors[0], factor);
+        return eq$3(factors[0], factor);
       });
       const congruentEnough = _.all(sidePairs, function (pair) {
         return number.equal(pair[0], pair[1], tolerance);
@@ -11056,7 +11032,7 @@ function rotate(array, n) {
   return array.slice(n).concat(array.slice(0, n));
 }
 function getLineEquation(first, second) {
-  if (eq$2(first[0], second[0])) {
+  if (eq$3(first[0], second[0])) {
     return "x = " + first[0].toFixed(3);
   }
   const m = (second[1] - first[1]) / (second[0] - first[0]);
@@ -14677,7 +14653,7 @@ const pluck = function pluck(table, subKey) {
  *   });
  * {a: 2, b: 3}
  */
-const mapObject$2 = function mapObject(obj, lambda) {
+const mapObject$1 = function mapObject(obj, lambda) {
   const result = {};
   _.each(_.keys(obj), function (key) {
     // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
@@ -14703,7 +14679,7 @@ const mapObjectFromArray$1 = function mapObjectFromArray(arr, lambda) {
 };
 var objective_ = {
   pluck: pluck,
-  mapObject: mapObject$2,
+  mapObject: mapObject$1,
   mapObjectFromArray: mapObjectFromArray$1
 };
 
@@ -19596,7 +19572,7 @@ WidgetContainer.defaultProps = {
 };
 
 const {
-  mapObject: mapObject$1,
+  mapObject,
   mapObjectFromArray
 } = objective_;
 const rContainsNonWhitespace = /\S/;
@@ -19624,9 +19600,6 @@ const isIdPathPrefix = function isIdPathPrefix(prefixArray, wholeArray) {
   });
 };
 
-// The return type for getUserInput. Widgets have full control of what is
-// returned so it's not easily typed (some widgets return a scalar (string),
-// some return a custom-built object
 /**
  * The Widget type represents the common API that the Renderer uses to interact
  * with all widgets. All widgets must implement the methods in this API, unless
@@ -19636,6 +19609,7 @@ const isIdPathPrefix = function isIdPathPrefix(prefixArray, wholeArray) {
  * communicate with the individual widgets to coordinate actions such as
  * scoring, state serialization/deserialization, and focus management.
  */
+
 class Renderer extends React.Component {
   constructor(_props) {
     super(_props);
@@ -19670,7 +19644,7 @@ class Renderer extends React.Component {
     };
     // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
     this._getAllWidgetsInfo = props => {
-      return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
+      return mapObject(props.widgets, (widgetInfo, widgetId) => {
         if (!widgetInfo.type || !widgetInfo.alignment) {
           const newValues = {};
           if (!widgetInfo.type) {
@@ -19811,7 +19785,7 @@ class Renderer extends React.Component {
      * state from that instead of the current widget props.
      */
     this.getSerializedState = widgetProps => {
-      return mapObject$1(widgetProps || this.state.widgetProps, (props, widgetId) => {
+      return mapObject(widgetProps || this.state.widgetProps, (props, widgetId) => {
         const widget = this.getWidgetInstance(widgetId);
         if (widget && widget.getSerializedState) {
           return widget.getSerializedState();
@@ -19847,7 +19821,7 @@ class Renderer extends React.Component {
         }
       };
       this.setState({
-        widgetProps: mapObject$1(serializedState, (props, widgetId) => {
+        widgetProps: mapObject(serializedState, (props, widgetId) => {
           const widget = this.getWidgetInstance(widgetId);
           if (widget && widget.restoreSerializedState) {
             // Note that we probably can't call
@@ -20681,7 +20655,6 @@ class Renderer extends React.Component {
      */
     this.scoreWidgets = () => {
       const widgetProps = this.state.widgetInfo;
-      const onInputError = this.getApiOptions().onInputError;
       const gradedWidgetIds = _.filter(this.widgetIds, id => {
         const props = widgetProps[id];
         const widgetIsGraded = (props == null ? void 0 : props.graded) == null || props.graded;
@@ -20697,7 +20670,7 @@ class Renderer extends React.Component {
         if (widget && widget.simpleValidate) {
           widgetScores[id] = widget.simpleValidate(_extends({}, props == null ? void 0 : props.options, {
             scoring: true
-          }), onInputError);
+          }));
         }
       });
       return widgetScores;
@@ -21738,7 +21711,7 @@ const answerTypes = {
     forms: "pi"
   }
 };
-function inputNumberValidator(state, rubric, strings, onInputError = () => {}) {
+function inputNumberValidator(state, rubric, strings) {
   if (rubric.answerType == null) {
     rubric.answerType = "number";
   }
@@ -21762,13 +21735,9 @@ function inputNumberValidator(state, rubric, strings, onInputError = () => {}) {
   // TODO(eater): Seems silly to translate result to this invalid/points
   // thing and immediately translate it back in ItemRenderer.scoreInput()
   if (result.empty) {
-    // TODO(FEI-3867): remove null-check once we have APIOptionsInternal
-    const apiResult = onInputError == null ? void 0 : onInputError(null,
-    // reserved for some widget identifier
-    state.currentValue, result.message);
     return {
       type: "invalid",
-      message: apiResult === false ? null : result.message
+      message: result.message
     };
   }
   return {
@@ -21864,13 +21833,6 @@ class InputNumber extends React.Component {
         currentValue: newValue
       }, cb);
     };
-    this.getUserInput = () => {
-      return InputNumber.getUserInputFromProps(this.props);
-    };
-    this.simpleValidate = (rubric, onInputError) => {
-      onInputError = onInputError || function () {};
-      return inputNumberValidator(this.getUserInput(), rubric, this.context.strings, onInputError);
-    };
     this.examples = () => {
       const {
         strings
@@ -21881,8 +21843,8 @@ class InputNumber extends React.Component {
       return [strings.yourAnswer].concat(examples);
     };
   }
-  static validate(state, rubric, strings, onInputError = () => {}) {
-    return inputNumberValidator(state, rubric, strings, onInputError);
+  static validate(state, rubric, strings) {
+    return inputNumberValidator(state, rubric, strings);
   }
   static getUserInputFromProps(props) {
     return {
@@ -21899,6 +21861,12 @@ class InputNumber extends React.Component {
     }
     return answerString;
   }
+  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".
@@ -22202,9 +22170,6 @@ class NumericInput extends React.Component {
       const allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
       return !noFormsAccepted && !allFormsAccepted;
     };
-    this.simpleValidate = rubric => {
-      return numericInputValidator(this.getUserInput(), rubric, this.context.strings);
-    };
     this.focus = () => {
       var _this$inputRef;
       (_this$inputRef = this.inputRef) == null || _this$inputRef.focus();
@@ -22234,9 +22199,6 @@ class NumericInput extends React.Component {
         currentValue: newValue
       }, cb);
     };
-    this.getUserInput = () => {
-      return NumericInput.getUserInputFromProps(this.props);
-    };
     this.handleChange = (newValue, cb) => {
       this.props.onChange({
         currentValue: newValue
@@ -22286,6 +22248,12 @@ class NumericInput extends React.Component {
   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);
+  }
   render() {
     let labelText = this.props.labelText;
     if (labelText == null || labelText === "") {
@@ -22442,11 +22410,6 @@ class PassageRef extends React.Component {
       lineRange: null,
       content: null
     };
-    // TODO(tamarab): getUserInput needs to be updated to only return
-    // props input by the user. Currently returns all the widget's props.
-    this.getUserInput = () => {
-      return removeDenylistProps(this.props);
-    };
     this.change = (...args) => {
       return change.apply(this, args);
     };
@@ -22499,6 +22462,11 @@ 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();
@@ -23904,6 +23872,56 @@ const styles$t = StyleSheet.create({
   }
 });
 
+function radioValidator(userInput, rubric, strings) {
+  const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
+    return sum + (selected ? 1 : 0);
+  }, 0);
+  if (numSelected === 0) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+
+  // TODO: should numCorrect actually be on the rubric
+  // instead of the userInput?
+  if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
+    return {
+      type: "invalid",
+      message: strings.chooseCorrectNum
+    };
+    // If NOTA and some other answer are checked, ...
+  }
+
+  // TODO: should noneOfTheAboveSelected be replaced with a
+  // combination of choicesSelected and noneOfTheAboveIndex?
+  if (userInput.noneOfTheAboveSelected && numSelected > 1) {
+    return {
+      type: "invalid",
+      message: strings.notNoneOfTheAbove
+    };
+  }
+  const correct = userInput.choicesSelected.every((selected, i) => {
+    let isCorrect;
+    // TODO: should noneOfTheAboveIndex actually be on the rubric
+    // instead of the userInput?
+    if (userInput.noneOfTheAboveIndex === i) {
+      isCorrect = rubric.choices.every((choice, j) => {
+        return i === j || !choice.correct;
+      });
+    } else {
+      isCorrect = !!rubric.choices[i].correct;
+    }
+    return isCorrect === selected;
+  });
+  return {
+    type: "points",
+    earned: correct ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 // RenderProps is the return type for radio.jsx#transform
 
 class Radio$1 extends React.Component {
@@ -23998,12 +24016,6 @@ class Radio$1 extends React.Component {
       });
       this.props.trackInteraction();
     };
-    this.getUserInput = () => {
-      return Radio$1.getUserInputFromProps(this.props);
-    };
-    this.simpleValidate = rubric => {
-      return Radio$1.validate(this.getUserInput(), rubric, this.context.strings);
-    };
     /**
      * Turn on rationale display for the currently selected choices. Note that
      * this leaves rationales on for choices that are already showing
@@ -24064,46 +24076,7 @@ class Radio$1 extends React.Component {
     };
   }
   static validate(userInput, rubric, strings) {
-    const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
-      return sum + (selected ? 1 : 0);
-    }, 0);
-    if (numSelected === 0) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
-      return {
-        type: "invalid",
-        message: strings.chooseCorrectNum
-      };
-      // If NOTA and some other answer are checked, ...
-    }
-
-    if (userInput.noneOfTheAboveSelected && numSelected > 1) {
-      return {
-        type: "invalid",
-        message: strings.notNoneOfTheAbove
-      };
-    }
-    const correct = userInput.choicesSelected.every((selected, i) => {
-      let isCorrect;
-      if (userInput.noneOfTheAboveIndex === i) {
-        isCorrect = rubric.choices.every((choice, j) => {
-          return i === j || !choice.correct;
-        });
-      } else {
-        isCorrect = !!rubric.choices[i].correct;
-      }
-      return isCorrect === selected;
-    });
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message: null
-    };
+    return radioValidator(userInput, rubric, strings);
   }
   static getUserInputFromProps(props) {
     // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
@@ -24192,6 +24165,12 @@ class Radio$1 extends React.Component {
   registerFocusFunction(fun) {
     this.focusFunction = fun;
   }
+  getUserInput() {
+    return Radio$1.getUserInputFromProps(this.props);
+  }
+  simpleValidate(rubric) {
+    return radioValidator(this.getUserInput(), rubric, this.context.strings);
+  }
   render() {
     const {
       choices
@@ -24468,12 +24447,6 @@ class Categorizer extends React.Component {
       // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
       return change.apply(this, args);
     };
-    this.getUserInput = () => {
-      return Categorizer.getUserInputFromProps(this.props);
-    };
-    this.simpleValidate = rubric => {
-      return categorizerValidator(this.getUserInput(), rubric, this.context.strings);
-    };
   }
   static validate(userInput, rubric, strings) {
     return categorizerValidator(userInput, rubric, strings);
@@ -24483,6 +24456,9 @@ class Categorizer extends React.Component {
       values: props.values
     };
   }
+  getUserInput() {
+    return Categorizer.getUserInputFromProps(this.props);
+  }
   onChange(itemNum, catNum) {
     const values = [...this.props.values];
     // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
@@ -24490,6 +24466,9 @@ 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;
 
@@ -24685,6 +24664,31 @@ const parseUrl = url => new URL(url, location().origin);
  */
 const toAbsoluteUrl = url => parseUrl(url).href;
 
+function csProgramValidator(state) {
+  // The iframe can tell us whether it's correct or incorrect,
+  //  and pass an optional message
+  if (state.status === "correct") {
+    return {
+      type: "points",
+      earned: 1,
+      total: 1,
+      message: state.message || null
+    };
+  }
+  if (state.status === "incorrect") {
+    return {
+      type: "points",
+      earned: 0,
+      total: 1,
+      message: state.message || null
+    };
+  }
+  return {
+    type: "invalid",
+    message: "Keep going, you're not there yet!"
+  };
+}
+
 /**
  * This widget is for embedding Khan Academy CS programs.
  */
@@ -24735,29 +24739,8 @@ class CSProgram extends React.Component {
     };
   }
   // The widget's grading function
-  static validate(state, rubric) {
-    // The iframe can tell us whether it's correct or incorrect,
-    //  and pass an optional message
-    if (state.status === "correct") {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: state.message || null
-      };
-    }
-    if (state.status === "incorrect") {
-      return {
-        type: "points",
-        earned: 0,
-        total: 1,
-        message: state.message || null
-      };
-    }
-    return {
-      type: "invalid",
-      message: "Keep going, you're not there yet!"
-    };
+  static validate(state) {
+    return csProgramValidator(state);
   }
   componentDidMount() {
     $(window).on("message", this.handleMessageEvent);
@@ -24765,11 +24748,11 @@ class CSProgram extends React.Component {
   componentWillUnmount() {
     $(window).off("message", this.handleMessageEvent);
   }
-  simpleValidate(rubric) {
-    return CSProgram.validate({
+  simpleValidate() {
+    return csProgramValidator({
       status: this.props.status,
       message: this.props.message
-    }, rubric);
+    });
   }
   render() {
     if (!this.props.programID) {
@@ -24856,16 +24839,14 @@ var CSProgram$1 = {
 };
 
 class Definition extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.getUserInput = () => {
-      return {};
-    };
-  }
   // 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();
@@ -25002,18 +24983,18 @@ class Dropdown extends React.Component {
         selected: selected
       });
     };
-    this.getUserInput = () => {
-      return {
-        value: this.props.selected
-      };
-    };
-    this.simpleValidate = rubric => {
-      return dropdownValidator(this.getUserInput(), rubric);
-    };
   }
   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",
@@ -25087,9 +25068,6 @@ class Explanation extends React.Component {
       });
       this.props.trackInteraction();
     };
-    this.getUserInput = () => {
-      return {};
-    };
   }
   // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   static validate() {
@@ -25101,6 +25079,10 @@ class Explanation extends React.Component {
   componentWillUnmount() {
     this._mounted = false;
   }
+  getUserInput() {
+    return {};
+  }
+
   // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   simpleValidate() {
     return noopValidator();
@@ -26361,49 +26343,6 @@ function functionForType(
 type) {
   return functionTypeMapping[type];
 }
-const validate$1 = (state, rubric) => {
-  if (state.type !== rubric.correct.type) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-
-  // We haven't moved the coords
-  if (state.coords == null) {
-    return {
-      type: "invalid",
-      message: null
-    };
-  }
-
-  // Get new function handler for grading
-  const grader = functionForType(state.type);
-  const guessCoeffs = grader.getCoefficients(state.coords, state.asymptote);
-  const correctCoeffs = grader.getCoefficients(rubric.correct.coords, rubric.correct.asymptote);
-  if (guessCoeffs == null || correctCoeffs == null) {
-    return {
-      type: "invalid",
-      message: null
-    };
-  }
-  if (grader.areEqual(guessCoeffs, correctCoeffs)) {
-    return {
-      type: "points",
-      earned: 1,
-      total: 1,
-      message: null
-    };
-  }
-  return {
-    type: "points",
-    earned: 0,
-    total: 1,
-    message: null
-  };
-};
 const getEquationString = props => {
   const plot = props.plot;
   if (plot.type && plot.coords) {
@@ -26521,7 +26460,6 @@ var util = /*#__PURE__*/Object.freeze({
   DEFAULT_BACKGROUND_IMAGE: DEFAULT_BACKGROUND_IMAGE,
   allTypes: allTypes,
   functionForType: functionForType,
-  validate: validate$1,
   getEquationString: getEquationString,
   pointsFromNormalized: pointsFromNormalized,
   maybePointsFromNormalized: maybePointsFromNormalized,
@@ -26532,6 +26470,52 @@ var util = /*#__PURE__*/Object.freeze({
   typeToButton: typeToButton
 });
 
+function grapherValidator(state, rubric) {
+  if (state.type !== rubric.correct.type) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 1,
+      message: null
+    };
+  }
+
+  // We haven't moved the coords
+  if (state.coords == null) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+
+  // Get new function handler for grading
+  const grader = functionForType(state.type);
+  const guessCoeffs = grader.getCoefficients(state.coords, state.asymptote);
+  const correctCoeffs = grader.getCoefficients(rubric.correct.coords,
+  // @ts-expect-error - TS(2339) - Property 'asymptote' does not exist on type '{ type: "absolute_value"; coords: [Coord, Coord]; }'
+  rubric.correct.asymptote);
+  if (guessCoeffs == null || correctCoeffs == null) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  if (grader.areEqual(guessCoeffs, correctCoeffs)) {
+    return {
+      type: "points",
+      earned: 1,
+      total: 1,
+      message: null
+    };
+  }
+  return {
+    type: "points",
+    earned: 0,
+    total: 1,
+    message: null
+  };
+}
+
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
 const MovablePoint$3 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
@@ -26724,7 +26708,7 @@ FunctionGrapher.defaultProps = {
   coords: null,
   asymptote: null,
   isMobile: false
-}; // Really this is props.plot, I think
+};
 /* Widget and editor. */
 class Grapher extends React.Component {
   constructor(...args) {
@@ -26817,7 +26801,7 @@ class Grapher extends React.Component {
     };
   }
   static validate(state, rubric) {
-    return validate$1(state, rubric);
+    return grapherValidator(state, rubric);
   }
   static getUserInputFromProps(props) {
     return props.plot;
@@ -26838,7 +26822,7 @@ class Grapher extends React.Component {
     return tickStep;
   }
   simpleValidate(rubric) {
-    return validate$1(this.getUserInput(), rubric);
+    return grapherValidator(this.getUserInput(), rubric);
   }
   getUserInput() {
     return Grapher.getUserInputFromProps(this.props);
@@ -26940,49 +26924,41 @@ class Group extends React.Component {
     this.change = (...args) => {
       return change.apply(this, args);
     };
-    this.getUserInput = () => {
-      var _this$rendererRef;
-      return (_this$rendererRef = this.rendererRef) == null ? void 0 : _this$rendererRef.getUserInput();
-    };
     this.getSerializedState = () => {
-      var _this$rendererRef2;
-      return (_this$rendererRef2 = this.rendererRef) == null ? void 0 : _this$rendererRef2.getSerializedState();
+      var _this$rendererRef;
+      return (_this$rendererRef = this.rendererRef) == null ? void 0 : _this$rendererRef.getSerializedState();
     };
     this.restoreSerializedState = (state, callback) => {
-      var _this$rendererRef3;
-      (_this$rendererRef3 = this.rendererRef) == null || _this$rendererRef3.restoreSerializedState(state, callback);
+      var _this$rendererRef2;
+      (_this$rendererRef2 = this.rendererRef) == null || _this$rendererRef2.restoreSerializedState(state, callback);
       // Tell our renderer that we have no props to change
       // (all our changes were in state):
       return null;
     };
-    this.simpleValidate = rubric => {
-      var _this$rendererRef4;
-      return (_this$rendererRef4 = this.rendererRef) == null ? void 0 : _this$rendererRef4.score();
-    };
     // Mobile API:
     this.getInputPaths = () => {
-      var _this$rendererRef5;
-      return (_this$rendererRef5 = this.rendererRef) == null ? void 0 : _this$rendererRef5.getInputPaths();
+      var _this$rendererRef3;
+      return (_this$rendererRef3 = this.rendererRef) == null ? void 0 : _this$rendererRef3.getInputPaths();
     };
     this.setInputValue = (path, newValue, callback) => {
-      var _this$rendererRef6;
-      return (_this$rendererRef6 = this.rendererRef) == null ? void 0 : _this$rendererRef6.setInputValue(path, newValue, callback);
+      var _this$rendererRef4;
+      return (_this$rendererRef4 = this.rendererRef) == null ? void 0 : _this$rendererRef4.setInputValue(path, newValue, callback);
     };
     this.focus = () => {
-      var _this$rendererRef7;
-      return (_this$rendererRef7 = this.rendererRef) == null ? void 0 : _this$rendererRef7.focus();
+      var _this$rendererRef5;
+      return (_this$rendererRef5 = this.rendererRef) == null ? void 0 : _this$rendererRef5.focus();
     };
     this.focusInputPath = path => {
-      var _this$rendererRef8;
-      (_this$rendererRef8 = this.rendererRef) == null || _this$rendererRef8.focusPath(path);
+      var _this$rendererRef6;
+      (_this$rendererRef6 = this.rendererRef) == null || _this$rendererRef6.focusPath(path);
     };
     this.blurInputPath = path => {
-      var _this$rendererRef9;
-      (_this$rendererRef9 = this.rendererRef) == null || _this$rendererRef9.blurPath(path);
+      var _this$rendererRef7;
+      (_this$rendererRef7 = this.rendererRef) == null || _this$rendererRef7.blurPath(path);
     };
     this.showRationalesForCurrentlySelectedChoices = () => {
-      var _this$rendererRef10;
-      (_this$rendererRef10 = this.rendererRef) == null || _this$rendererRef10.showRationalesForCurrentlySelectedChoices();
+      var _this$rendererRef8;
+      (_this$rendererRef8 = this.rendererRef) == null || _this$rendererRef8.showRationalesForCurrentlySelectedChoices();
     };
   }
   componentDidMount() {
@@ -26991,6 +26967,14 @@ class Group extends React.Component {
     // the group with the correct number.
     this.forceUpdate();
   }
+  getUserInput() {
+    var _this$rendererRef9;
+    return (_this$rendererRef9 = this.rendererRef) == null ? void 0 : _this$rendererRef9.getUserInput();
+  }
+  simpleValidate() {
+    var _this$rendererRef10;
+    return (_this$rendererRef10 = this.rendererRef) == null ? void 0 : _this$rendererRef10.score();
+  }
   render() {
     var _this$rendererRef11;
     const apiOptions = _extends({}, ApiOptions.defaults, this.props.apiOptions, {
@@ -27079,6 +27063,31 @@ var Group$1 = {
   isLintable: true
 };
 
+function iframeValidator(state) {
+  // The iframe can tell us whether it's correct or incorrect,
+  //  and pass an optional message
+  if (state.status === "correct") {
+    return {
+      type: "points",
+      earned: 1,
+      total: 1,
+      message: state.message || null
+    };
+  }
+  if (state.status === "incorrect") {
+    return {
+      type: "points",
+      earned: 0,
+      total: 1,
+      message: state.message || null
+    };
+  }
+  return {
+    type: "invalid",
+    message: "Keep going, you're not there yet!"
+  };
+}
+
 /**
  * This is an iframe widget. It is used for rendering an iframe that
  *  then communicates its state via window.postMessage
@@ -27117,10 +27126,9 @@ class Iframe extends React.Component {
       // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
       return change.apply(this, args);
     };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Iframe'.
-      return Iframe.validate(this.getUserInput(), rubric);
-    };
+  }
+  static validate(state) {
+    return iframeValidator(state);
   }
   componentDidMount() {
     $(window).on("message", this.handleMessageEvent);
@@ -27134,6 +27142,9 @@ class Iframe extends React.Component {
       message: this.props.message
     };
   }
+  simpleValidate() {
+    return iframeValidator(this.getUserInput());
+  }
   render() {
     const style = {
       width: String(this.props.width),
@@ -27195,10 +27206,6 @@ class Iframe extends React.Component {
     });
   }
 }
-
-/**
- * This is the widget's grading function
- */
 Iframe.defaultProps = {
   status: "incomplete",
   // optional message
@@ -27206,32 +27213,6 @@ Iframe.defaultProps = {
   allowFullScreen: false,
   allowTopNavigation: false
 };
-_.extend(Iframe, {
-  validate: function (state, rubric) {
-    // The iframe can tell us whether it's correct or incorrect,
-    //  and pass an optional message
-    if (state.status === "correct") {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: state.message || null
-      };
-    }
-    if (state.status === "incorrect") {
-      return {
-        type: "points",
-        earned: 0,
-        total: 1,
-        message: state.message || null
-      };
-    }
-    return {
-      type: "invalid",
-      message: "Keep going, you're not there yet!"
-    };
-  }
-});
 var Iframe$1 = {
   name: "iframe",
   displayName: "Iframe (deprecated)",
@@ -27258,15 +27239,16 @@ class ImageWidget extends React.Component {
     this.change = (...args) => {
       return change.apply(this, args);
     };
-    this.getUserInput = () => {
-      return null;
-    };
     this.focus = () => {};
   }
   // 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();
@@ -27578,13 +27560,6 @@ class Interaction extends React.Component {
     this.change = (...args) => {
       return change.apply(this, args);
     };
-    this.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
   static validate() {
@@ -27608,6 +27583,14 @@ 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();
@@ -28736,7 +28719,8 @@ const tickSize = 10;
 const tickLabelSize = 14;
 const YGridTick = ({
   y,
-  range
+  range,
+  tickStep
 }) => {
   // If the graph requires out-of-bounds labels, we want to make sure to set the
   // coordinates to the edge of the visible range of the graph. Otherwise,
@@ -28771,9 +28755,10 @@ const YGridTick = ({
 
   // If the graph displays both the y and x axis lines within the graph, we want
   // to hide the label at -1 on the y-axis to prevent overlap with the x-axis label
-  const showLabel = shouldShowLabel(y, range);
+  const showLabel = shouldShowLabel(y, range, tickStep);
   return /*#__PURE__*/React.createElement("g", {
-    className: "tick"
+    className: "tick",
+    "aria-hidden": true
   }, /*#__PURE__*/React.createElement("line", {
     x1: x1,
     y1: y1,
@@ -28832,7 +28817,8 @@ const XGridTick = ({
   const xPositionText = xPosition + xAdjustment;
   const yPositionText = yPosition + yAdjustment;
   return /*#__PURE__*/React.createElement("g", {
-    className: "tick"
+    className: "tick",
+    "aria-hidden": true
   }, /*#__PURE__*/React.createElement("line", {
     x1: x1,
     y1: y1,
@@ -28851,13 +28837,13 @@ const XGridTick = ({
 };
 
 // Determines whether to show the label for the given tick
-// Currently, the only condition is to hide the label at -1
-// on the y-axis when the x-axis is within the graph
-const shouldShowLabel = (number, range) => {
+// Currently, the only condition is to hide the label at -tickStep
+// on the y-axis when the y-axis is within the graph bounds
+const shouldShowLabel = (currentTick, range, tickStep) => {
   let showLabel = true;
 
-  // If the x-axis is within the graph and the y-axis is at -1, hide the label
-  if (range[X][MIN] < -1 && range[X][MAX] > 0 && number === -1) {
+  // If the y-axis is within the graph and currentTick equals -tickStep, hide the label
+  if (range[X][MIN] < -tickStep && range[X][MAX] > 0 && currentTick === -tickStep) {
     showLabel = false;
   }
   return showLabel;
@@ -28899,7 +28885,8 @@ const AxisTicks = () => {
     return /*#__PURE__*/React.createElement(YGridTick, {
       y: y,
       key: `y-grid-tick-${y}`,
-      range: range
+      range: range,
+      tickStep: tickStep[Y]
     });
   })), /*#__PURE__*/React.createElement("g", {
     className: "x-axis-ticks"
@@ -29652,7 +29639,8 @@ function LockedLabel(props) {
       color: lockedFigureColors[color],
       fontSize: font.size[size],
       backgroundColor: "rgba(255, 255, 255, 0.8)"
-    }
+    },
+    "aria-hidden": true
   }, /*#__PURE__*/React.createElement(TeX, null, text));
 }
 
@@ -29662,7 +29650,7 @@ function GraphLockedLabelsLayer(props) {
     lockedFigures
   } = props;
   return lockedFigures.map((figure, i) => {
-    var _flags$mafs, _flags$mafs2;
+    var _flags$mafs, _flags$mafs2, _flags$mafs3, _flags$mafs4, _flags$mafs5, _flags$mafs6;
     if (figure.type === "label") {
       return /*#__PURE__*/React.createElement(LockedLabel, _extends({
         key: `label-${i}`
@@ -29672,14 +29660,23 @@ function GraphLockedLabelsLayer(props) {
     // Point flag + point type
     flags != null && (_flags$mafs = flags["mafs"]) != null && _flags$mafs["locked-point-labels"] && figure.type === "point" ||
     // Line flag + line type
-    flags != null && (_flags$mafs2 = flags["mafs"]) != null && _flags$mafs2["locked-line-labels"] && figure.type === "line") {
+    flags != null && (_flags$mafs2 = flags["mafs"]) != null && _flags$mafs2["locked-line-labels"] && figure.type === "line" ||
+    // Vector flag + vector type
+    flags != null && (_flags$mafs3 = flags["mafs"]) != null && _flags$mafs3["locked-vector-labels"] && figure.type === "vector" ||
+    // Ellipse flag + ellipse type
+    flags != null && (_flags$mafs4 = flags["mafs"]) != null && _flags$mafs4["locked-ellipse-labels"] && figure.type === "ellipse" ||
+    // Polygon flag + polygon type
+    flags != null && (_flags$mafs5 = flags["mafs"]) != null && _flags$mafs5["locked-polygon-labels"] && figure.type === "polygon" ||
+    // Function flag + function type
+    flags != null && (_flags$mafs6 = flags["mafs"]) != null && _flags$mafs6["locked-function-labels"] && figure.type === "function") {
+      var _figure$labels, _figure$points$0$labe, _figure$points$1$labe;
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: i
-      }, figure.labels.map((label, j) => /*#__PURE__*/React.createElement(LockedLabel, _extends({
+      }, (_figure$labels = figure.labels) == null ? void 0 : _figure$labels.map((label, j) => /*#__PURE__*/React.createElement(LockedLabel, _extends({
         key: `${i}-label-${j}`
-      }, label))), figure.type === "line" && /*#__PURE__*/React.createElement(React.Fragment, null, figure.points[0].labels.map((label, k) => /*#__PURE__*/React.createElement(LockedLabel, _extends({
+      }, label))), figure.type === "line" && /*#__PURE__*/React.createElement(React.Fragment, null, (_figure$points$0$labe = figure.points[0].labels) == null ? void 0 : _figure$points$0$labe.map((label, k) => /*#__PURE__*/React.createElement(LockedLabel, _extends({
         key: `locked-figure-${i}-point-1-label-${k}`
-      }, label))), figure.points[1].labels.map((label, k) => /*#__PURE__*/React.createElement(LockedLabel, _extends({
+      }, label))), (_figure$points$1$labe = figure.points[1].labels) == null ? void 0 : _figure$points$1$labe.map((label, k) => /*#__PURE__*/React.createElement(LockedLabel, _extends({
         key: `locked-figure-${i}-point-2-label-${k}`
       }, label)))));
     }
@@ -29688,15 +29685,23 @@ function GraphLockedLabelsLayer(props) {
 }
 
 const LockedEllipse = props => {
+  var _flags$mafs;
   const {
     center,
     radius,
     angle,
     color: color$1,
     fillStyle,
-    strokeStyle
+    strokeStyle,
+    ariaLabel,
+    flags
   } = props;
-  return /*#__PURE__*/React.createElement(Ellipse, {
+  const hasAria = ariaLabel && (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-figures-aria"]);
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-ellipse",
+    "aria-label": hasAria ? ariaLabel : undefined,
+    "aria-hidden": !hasAria
+  }, /*#__PURE__*/React.createElement(Ellipse, {
     center: center,
     radius: radius,
     angle: angle,
@@ -29712,10 +29717,11 @@ const LockedEllipse = props => {
         fill: fillStyle === "white" ? color.white : lockedFigureColors[color$1]
       }
     }
-  });
+  }));
 };
 
 const LockedFunction = props => {
+  var _props$flags;
   const [equation, setEquation] = useState();
   const {
     color,
@@ -29728,6 +29734,7 @@ const LockedFunction = props => {
     style: strokeStyle,
     domain
   };
+  const hasAria = props.ariaLabel && ((_props$flags = props.flags) == null || (_props$flags = _props$flags["mafs"]) == null ? void 0 : _props$flags["locked-figures-aria"]);
   useEffect(() => {
     // Parsing the equation in a "useEffect" hook saves about 2ms each frame
     //    when the learner is interacting with the graph (i.e. moving points).
@@ -29737,7 +29744,9 @@ const LockedFunction = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("g", {
-    className: "locked-function"
+    className: "locked-function",
+    "aria-label": hasAria ? props.ariaLabel : undefined,
+    "aria-hidden": !hasAria
   }, directionalAxis === "x" && /*#__PURE__*/React.createElement(Plot$3.OfX, _extends({
     y: x => equation.eval({
       x
@@ -29830,6 +29839,7 @@ function isBetween(x, low, high) {
 }
 
 const LockedLine = props => {
+  var _flags$mafs;
   const {
     color: color$1,
     lineStyle,
@@ -29837,9 +29847,12 @@ const LockedLine = props => {
     points,
     showPoint1,
     showPoint2,
+    ariaLabel,
+    flags,
     range
   } = props;
   const [point1, point2] = points;
+  const hasAria = ariaLabel && (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-figures-aria"]);
   let line;
   if (kind === "ray") {
     // Rays extend to the end of the graph in one direction.
@@ -29879,7 +29892,9 @@ const LockedLine = props => {
     }), endArrowHead);
   }
   return /*#__PURE__*/React.createElement("g", {
-    className: kind === "ray" ? "locked-ray" : "locked-line"
+    className: kind === "ray" ? "locked-ray" : "locked-line",
+    "aria-label": hasAria ? ariaLabel : undefined,
+    "aria-hidden": !hasAria
   }, line, showPoint1 && /*#__PURE__*/React.createElement(Point$2, {
     x: point1.coord[X],
     y: point1.coord[Y],
@@ -29904,13 +29919,21 @@ const LockedLine = props => {
 };
 
 const LockedPoint = props => {
+  var _flags$mafs;
   const {
+    flags,
     color: color$1,
     coord,
-    filled
+    filled,
+    ariaLabel
   } = props;
   const [x, y] = coord;
-  return /*#__PURE__*/React.createElement(Point$2, {
+  const hasAria = ariaLabel && (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-figures-aria"]);
+  return /*#__PURE__*/React.createElement("g", {
+    className: "locked-point",
+    "aria-label": hasAria ? ariaLabel : undefined,
+    "aria-hidden": !hasAria
+  }, /*#__PURE__*/React.createElement(Point$2, {
     x: x,
     y: y,
     svgCircleProps: {
@@ -29920,10 +29943,11 @@ const LockedPoint = props => {
         strokeWidth: spacing.xxxxSmall_2
       }
     }
-  });
+  }));
 };
 
 const LockedPolygon = props => {
+  var _props$flags;
   const {
     points,
     color: color$1,
@@ -29931,8 +29955,11 @@ const LockedPolygon = props => {
     fillStyle,
     strokeStyle
   } = props;
+  const hasAria = props.ariaLabel && ((_props$flags = props.flags) == null || (_props$flags = _props$flags["mafs"]) == null ? void 0 : _props$flags["locked-figures-aria"]);
   return /*#__PURE__*/React.createElement("g", {
-    className: "locked-polygon"
+    className: "locked-polygon",
+    "aria-label": hasAria ? props.ariaLabel : undefined,
+    "aria-hidden": !hasAria
   }, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     fillOpacity: lockedFigureFillStyles[fillStyle],
@@ -29956,13 +29983,19 @@ const LockedPolygon = props => {
 };
 
 const LockedVector = props => {
+  var _flags$mafs;
   const {
     color,
-    points
+    points,
+    ariaLabel,
+    flags
   } = props;
   const [tail, tip] = points;
+  const hasAria = ariaLabel && (flags == null || (_flags$mafs = flags["mafs"]) == null ? void 0 : _flags$mafs["locked-figures-aria"]);
   return /*#__PURE__*/React.createElement("g", {
-    className: "locked-vector"
+    className: "locked-vector",
+    "aria-label": hasAria ? ariaLabel : undefined,
+    "aria-hidden": !hasAria
   }, /*#__PURE__*/React.createElement(Vector, {
     tail: tail,
     tip: tip,
@@ -29972,6 +30005,7 @@ const LockedVector = props => {
 
 const GraphLockedLayer = props => {
   const {
+    flags,
     lockedFigures
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, lockedFigures.map((figure, index) => {
@@ -29979,28 +30013,40 @@ const GraphLockedLayer = props => {
       case "point":
         return /*#__PURE__*/React.createElement(LockedPoint, _extends({
           key: `point-${index}`
-        }, figure));
+        }, figure, {
+          flags: flags
+        }));
       case "line":
         return /*#__PURE__*/React.createElement(LockedLine, _extends({
           key: `line-${index}`,
           range: props.range
-        }, figure));
+        }, figure, {
+          flags: flags
+        }));
       case "vector":
         return /*#__PURE__*/React.createElement(LockedVector, _extends({
           key: `vector-${index}`
-        }, figure));
+        }, figure, {
+          flags: flags
+        }));
       case "ellipse":
         return /*#__PURE__*/React.createElement(LockedEllipse, _extends({
           key: `ellipse-${index}`
-        }, figure));
+        }, figure, {
+          flags: flags
+        }));
       case "polygon":
         return /*#__PURE__*/React.createElement(LockedPolygon, _extends({
           key: `polygon-${index}`
-        }, figure));
+        }, figure, {
+          flags: flags
+        }));
       case "function":
         return /*#__PURE__*/React.createElement(LockedFunction, _extends({
           key: `function-${index}`
-        }, figure));
+        }, figure, {
+          flags: flags
+        }));
       case "label":
         // This is rendered outside the SVG element, since
         // TeX cannot be rendered inside an SVG.
@@ -31466,7 +31512,7 @@ function QuadraticGraph(props) {
   // to content creators the currently selected "correct answer". ex: y = 0.200x^2 + 0.000x + 0.000
   // While we should technically never have invalid coordinates, we want to ensure that we have a fallback
   const coeffRef = React.useRef([0, 0, 0]);
-  const coeffs = getQuadraticCoefficients(coords);
+  const coeffs = getQuadraticCoefficients$1(coords);
   if (coeffs !== undefined) {
     coeffRef.current = coeffs;
   }
@@ -31490,7 +31536,7 @@ function QuadraticGraph(props) {
 // These equations were originally set up in 2013 and may require some
 // additional comments to help clarify the quadratic formula manipulations
 // Origin: https://phabricator.khanacademy.org/D2413
-const getQuadraticCoefficients = coords => {
+const getQuadraticCoefficients$1 = coords => {
   const p1 = coords[0];
   const p2 = coords[1];
   const p3 = coords[2];
@@ -31530,7 +31576,7 @@ function SinusoidGraph(props) {
     phase: 1,
     verticalOffset: 0
   });
-  const coeffs = getSinusoidCoefficients(coords);
+  const coeffs = getSinusoidCoefficients$1(coords);
 
   // If the coefficients are valid, update the reference
   if (coeffs !== undefined) {
@@ -31559,7 +31605,7 @@ sinusoidCoefficients) {
   } = sinusoidCoefficients;
   return a * Math.sin(b * x - c) + d;
 };
-const getSinusoidCoefficients = coords => {
+const getSinusoidCoefficients$1 = coords => {
   // It's assumed that p1 is the root and p2 is the first peak
   const p1 = coords[0];
   const p2 = coords[1];
@@ -31777,7 +31823,7 @@ function Protractor() {
   const [[xMin, xMax], [yMin, yMax]] = range;
   // Position the protractor in the center of the graph (horizontally), and
   // 95% of the way to the bottom of the graph (vertically).
-  const initialCenter = [lerp(xMin, xMax, 0.5), lerp(yMin, yMax, 0.05)];
+  const initialCenter = [lerp(xMin, xMax, 0.5), lerp(yMin, yMax, 0.25)];
   const [center, setCenter] = useState(initialCenter);
   const [rotationHandleOffset, setRotationHandleOffset] = useState(centerToRotationHandle);
   const draggableRef = useRef(null);
@@ -31939,6 +31985,9 @@ const MafsGraph = props => {
     x: viewboxX,
     y: viewboxY
   };
+  const {
+    strings
+  } = usePerseusI18n();
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -32017,6 +32066,7 @@ const MafsGraph = props => {
   })),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
   props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)), /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+    flags: props.flags,
     lockedFigures: props.lockedFigures,
     range: state.range
   }))), ((_props$flags = props.flags) == null || (_props$flags = _props$flags["mafs"]) == null ? void 0 : _props$flags["interactive-graph-locked-features-labels"]) && props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
@@ -32053,10 +32103,11 @@ const MafsGraph = props => {
       top: "50%",
       transform: "translateY(-50%)"
     }
-  }, /*#__PURE__*/React.createElement(LabelMedium, null, "Press ", /*#__PURE__*/React.createElement("strong", null, "Shift + Enter"), " to interact with the graph"))), renderGraphControls({
+  }, /*#__PURE__*/React.createElement(LabelMedium, null, strings.graphKeyboardPrompt))), renderGraphControls({
     state,
     dispatch,
-    width
+    width,
+    strings
   })));
 };
 const renderPointGraphControls = props => {
@@ -32065,6 +32116,10 @@ const renderPointGraphControls = props => {
     showRemovePointButton,
     focusedPointIndex
   } = props.state;
+  const {
+    strings
+  } = props;
+  const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
   return /*#__PURE__*/React.createElement(View, {
     style: {
       flexDirection: "row",
@@ -32080,7 +32135,7 @@ const renderPointGraphControls = props => {
     onClick: () => {
       props.dispatch(actions.pointGraph.addPoint([0, 0]));
     }
-  }, "Add Point"), interactionMode === "mouse" && showRemovePointButton && focusedPointIndex !== null && /*#__PURE__*/React.createElement(Button, {
+  }, strings.addPoint), interactionMode === "mouse" && /*#__PURE__*/React.createElement(Button, {
     id: REMOVE_BUTTON_ID,
     kind: "secondary",
     color: "destructive"
@@ -32090,18 +32145,20 @@ const renderPointGraphControls = props => {
     tabIndex: -1,
     style: {
       width: "100%",
-      marginLeft: "20px"
+      marginLeft: "20px",
+      visibility: shouldShowRemoveButton ? "visible" : "hidden"
     },
     onClick: event => {
       props.dispatch(actions.pointGraph.removePoint(props.state.focusedPointIndex));
     }
-  }, "Remove Point"));
+  }, strings.removePoint));
 };
 const renderGraphControls = props => {
   const {
     state,
     dispatch,
-    width
+    width,
+    strings
   } = props;
   const {
     type
@@ -32112,7 +32169,8 @@ const renderGraphControls = props => {
         return renderPointGraphControls({
           state,
           dispatch,
-          width
+          width,
+          strings
         });
       }
       return null;
@@ -32264,6 +32322,83 @@ const renderGraph = props => {
   }
 };
 
+// Converts the state of a StatefulMafsGraph back to the format used to
+// represent graph state in the widget JSON.
+//
+// Rather than be tightly bound to how data was structured in
+// the legacy interactive graph, this lets us store state
+// however we want and we just transform it before handing it off
+// the the parent InteractiveGraph.
+//
+// The transformed data is used in the interactive graph widget editor, to
+// set the `correct` field of the graph options. In the learner-facing UI, the
+// data is also stored by the Renderer, and passed back down to the graph
+// widget via the `graph` prop. Because the data returned by this function
+// completely replaces the Renderer's representation of the widget, rather than
+// being merged into it, we take it upon ourselves to merge in the original
+// widget data here. If we didn't do this merging, the graph's configuration
+// would reset to the defaults when the learner interacted with it.
+function mafsStateToInteractiveGraph(state, originalGraph) {
+  switch (state.type) {
+    case "angle":
+      invariant(originalGraph.type === "angle");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "quadratic":
+      invariant(originalGraph.type === "quadratic");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "circle":
+      invariant(originalGraph.type === "circle");
+      return _extends({}, originalGraph, {
+        center: state.center,
+        radius: getRadius(state)
+      });
+    case "linear":
+      invariant(originalGraph.type === "linear");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "ray":
+      invariant(originalGraph.type === "ray");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "sinusoid":
+      invariant(originalGraph.type === "sinusoid");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "segment":
+      invariant(originalGraph.type === "segment");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "linear-system":
+      invariant(originalGraph.type === "linear-system");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "polygon":
+      invariant(originalGraph.type === "polygon");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "point":
+      invariant(originalGraph.type === "point");
+      return _extends({}, originalGraph, {
+        coords: state.coords
+      });
+    case "none":
+      invariant(originalGraph.type === "none");
+      return _extends({}, originalGraph);
+    default:
+      throw new UnreachableCaseError(state);
+  }
+}
+
 function initializeGraphState(params) {
   var _graph$snapTo;
   const {
@@ -32889,7 +33024,7 @@ function doMovePoint(state, action) {
         // Bind the new destination to the graph range/snapStep and then get the quadratic coefficients
         const boundDestination = boundAndSnapToGrid(action.destination, state);
         _newCoords2[action.index] = boundDestination;
-        const QuadraticCoefficients = getQuadraticCoefficients(_newCoords2);
+        const QuadraticCoefficients = getQuadraticCoefficients$1(_newCoords2);
 
         // If the new destination results in an invalid quadratic equation, we don't want to move the point
         if (QuadraticCoefficients === undefined) {
@@ -33036,11 +33171,11 @@ const getChange = (coords, delta, constraintOpts) => {
   const [dx, dy] = getDeltaVertex(maxMoves, minMoves, delta);
   return [dx, dy];
 };
-const eq$1 = Util.eq;
+const eq$2 = Util.eq;
 
 // Less than or approximately equal
 function leq$1(a, b) {
-  return a < b || eq$1(a, b);
+  return a < b || eq$2(a, b);
 }
 function boundAndSnapToGrid(point, {
   snapStep,
@@ -33343,20 +33478,6 @@ function setAtIndex(args) {
   return copy;
 }
 
-// Rather than be tightly bound to how data was structured in
-// the legacy interactive graph, this lets us store state
-// however we want and we just transform it before handing it off
-// the the parent InteractiveGraph
-function mafsStateToInteractiveGraph(state) {
-  if (state.graph.type === "circle") {
-    return _extends({}, state, {
-      graph: _extends({}, state.graph, {
-        radius: getRadius(state.graph)
-      })
-    });
-  }
-  return _extends({}, state);
-}
 const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     onChange,
@@ -33369,12 +33490,12 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const prevState = useRef(state);
   useEffect(() => {
     if (prevState.current !== state) {
-      onChange(mafsStateToInteractiveGraph({
-        graph: state
-      }));
+      onChange({
+        graph: mafsStateToInteractiveGraph(state, graph)
+      });
     }
     prevState.current = state;
-  }, [onChange, state]);
+  }, [onChange, state, graph]);
 
   // Destructuring first to keep useEffect from making excess calls
   const [xSnap, ySnap] = props.snapStep;
@@ -33426,12 +33547,234 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 
+const eq$1 = Util.eq;
+const deepEq$1 = Util.deepEq;
+function interactiveGraphValidator(userInput, rubric) {
+  // None-type graphs are not graded
+  if (userInput.type === "none" && rubric.correct.type === "none") {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
+
+  // When nothing has moved, there will neither be coords nor the
+  // circle's center/radius fields. When those fields are absent, skip
+  // all these checks; just go mark the answer as empty.
+  const hasValue = Boolean(
+  // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
+  userInput.coords ||
+  // @ts-expect-error - TS2339 - Property 'center' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
+  userInput.center && userInput.radius);
+  if (userInput.type === rubric.correct.type && hasValue) {
+    if (userInput.type === "linear" && rubric.correct.type === "linear" && userInput.coords != null) {
+      const guess = userInput.coords;
+      const correct = rubric.correct.coords;
+
+      // If both of the guess points are on the correct line, it's
+      // correct.
+      if (
+      // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
+      collinear(correct[0], correct[1], guess[0]) &&
+      // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
+      collinear(correct[0], correct[1], guess[1])) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "linear-system" && rubric.correct.type === "linear-system" && userInput.coords != null) {
+      const guess = userInput.coords;
+      const correct = rubric.correct.coords;
+      if (collinear(correct[0][0], correct[0][1], guess[0][0]) && collinear(correct[0][0], correct[0][1], guess[0][1]) && collinear(correct[1][0], correct[1][1], guess[1][0]) && collinear(correct[1][0], correct[1][1], guess[1][1]) || collinear(correct[0][0], correct[0][1], guess[1][0]) && collinear(correct[0][0], correct[0][1], guess[1][1]) && collinear(correct[1][0], correct[1][1], guess[0][0]) && collinear(correct[1][0], correct[1][1], guess[0][1])) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "quadratic" && rubric.correct.type === "quadratic" && userInput.coords != null) {
+      // If the parabola coefficients match, it's correct.
+      const guessCoeffs = getQuadraticCoefficients(userInput.coords);
+      const correctCoeffs = getQuadraticCoefficients(
+      // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
+      rubric.correct.coords);
+      if (deepEq$1(guessCoeffs, correctCoeffs)) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "sinusoid" && rubric.correct.type === "sinusoid" && userInput.coords != null) {
+      const guessCoeffs = getSinusoidCoefficients(userInput.coords);
+      const correctCoeffs = getSinusoidCoefficients(
+      // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
+      rubric.correct.coords);
+      const canonicalGuessCoeffs = canonicalSineCoefficients$1(guessCoeffs);
+      const canonicalCorrectCoeffs = canonicalSineCoefficients$1(correctCoeffs);
+      // If the canonical coefficients match, it's correct.
+      if (deepEq$1(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "circle" && rubric.correct.type === "circle") {
+      if (deepEq$1(userInput.center, rubric.correct.center) && eq$1(userInput.radius, rubric.correct.radius)) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "point" && rubric.correct.type === "point" && userInput.coords != null) {
+      let correct = rubric.correct.coords;
+      if (correct == null) {
+        throw new Error("Point graph rubric has null coords");
+      }
+      const guess = userInput.coords.slice();
+      correct = correct.slice();
+      // Everything's already rounded so we shouldn't need to do an
+      // eq() comparison but _.isEqual(0, -0) is false, so we'll use
+      // eq() anyway. The sort should be fine because it'll stringify
+      // it and -0 converted to a string is "0"
+      guess == null || guess.sort();
+      // @ts-expect-error - TS2339 - Property 'sort' does not exist on type 'readonly Coord[]'.
+      correct.sort();
+      if (deepEq$1(guess, correct)) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "polygon" && rubric.correct.type === "polygon" && userInput.coords != null) {
+      var _userInput$coords, _rubric$correct$coord;
+      const guess = (_userInput$coords = userInput.coords) == null ? void 0 : _userInput$coords.slice();
+      // @ts-expect-error - TS2322 - Type 'Coord[] | undefined' is not assignable to type 'Coord[]'.
+      const correct = (_rubric$correct$coord = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord.slice();
+      let match;
+      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);
+      } else if (rubric.correct.match === "approx") {
+        match = similar(guess, correct, 0.1);
+      } else {
+        /* exact */
+        guess.sort();
+        correct.sort();
+        match = deepEq$1(guess, correct);
+      }
+      if (match) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "segment" && rubric.correct.type === "segment" && userInput.coords != null) {
+      var _rubric$correct;
+      let guess = Util.deepClone(userInput.coords);
+      let correct = Util.deepClone((_rubric$correct = rubric.correct) == null ? void 0 : _rubric$correct.coords);
+      guess = _.invoke(guess, "sort").sort();
+      // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
+      correct = _.invoke(correct, "sort").sort();
+      if (deepEq$1(guess, correct)) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "ray" && rubric.correct.type === "ray" && userInput.coords != null) {
+      const guess = userInput.coords;
+      const correct = rubric.correct.coords;
+      if (
+      // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
+      deepEq$1(guess[0], correct[0]) &&
+      // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
+      collinear(correct[0], correct[1], guess[1])) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    } else if (userInput.type === "angle" && rubric.correct.type === "angle") {
+      const guess = userInput.coords;
+      const correct = rubric.correct.coords;
+      let match;
+      if (rubric.correct.match === "congruent") {
+        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;
+        });
+        // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+        match = eq$1(...angles);
+      } else {
+        /* exact */
+        match =
+        // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
+        deepEq$1(guess[1], correct[1]) &&
+        // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
+        collinear(correct[1], correct[0], guess[0]) &&
+        // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
+        collinear(correct[1], correct[2], guess[2]);
+      }
+      if (match) {
+        return {
+          type: "points",
+          earned: 1,
+          total: 1,
+          message: null
+        };
+      }
+    }
+  }
+
+  // The input wasn't correct, so check if it's a blank input or if it's
+  // actually just wrong
+  if (!hasValue || _.isEqual(userInput, rubric.graph)) {
+    // We're where we started.
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  return {
+    type: "points",
+    earned: 0,
+    total: 1,
+    message: null
+  };
+}
+
 const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
 const defaultBackgroundImage = {
   url: null
 };
 const eq = Util.eq;
-const deepEq$1 = Util.deepEq;
 const UNLIMITED = "unlimited";
 
 // Sample background image:
@@ -33472,6 +33815,39 @@ const makeInvalidTypeError = (functionName, graphType) => {
 
 // There's no transform function in exports
 
+// TODO: there's another, very similar getSinusoidCoefficients function
+// they should probably be merged
+function getSinusoidCoefficients(coords) {
+  // It's assumed that p1 is the root and p2 is the first peak
+  const p1 = coords[0];
+  const p2 = coords[1];
+
+  // Resulting coefficients are canonical for this sine curve
+  const amplitude = p2[1] - p1[1];
+  const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
+  const phase = p1[0] * angularFrequency;
+  const verticalOffset = p1[1];
+  return [amplitude, angularFrequency, phase, verticalOffset];
+}
+
+// TODO: there's another, very similar getQuadraticCoefficients function
+// they should probably be merged
+function getQuadraticCoefficients(coords) {
+  const p1 = coords[0];
+  const p2 = coords[1];
+  const p3 = coords[2];
+  const denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
+  if (denom === 0) {
+    // Many of the callers assume that the return value is always defined.
+    // @ts-expect-error - TS2322 - Type 'undefined' is not assignable to type 'QuadraticCoefficient'.
+    return;
+  }
+  const a = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
+  const b = (p3[0] * p3[0] * (p1[1] - p2[1]) + p2[0] * p2[0] * (p3[1] - p1[1]) + p1[0] * p1[0] * (p2[1] - p3[1])) / denom;
+  const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
+  return [a, b, c];
+}
+
 // (LEMS-2190): Move the Mafs Angle Graph coordinate reversal logic in interactive-graph-state.ts
 // to this file when we remove the legacy graph. This logic allows us to support bi-directional angles
 // for the new (non-reflexive) Mafs graphs, while maintaining the same scoring behaviour as the legacy graph.
@@ -34555,7 +34931,6 @@ class LegacyInteractiveGraph extends React.Component {
       $(this.angle).on("move", () => {
         var _this$angle;
         this.onChange({
-          // @ts-expect-error Type '{ coords: any; type: "angle"; showAngles?: boolean | undefined; allowReflexAngles?: boolean | undefined; angleOffsetDeg?: number | undefined; snapDegrees?: number | undefined; match?: "congruent" | undefined; }' is not assignable to type 'InteractiveGraphState | undefined'.
           graph: _extends({}, graph, {
             coords: (_this$angle = this.angle) == null ? void 0 : _this$angle.getClockwiseCoords()
           })
@@ -34629,7 +35004,7 @@ class LegacyInteractiveGraph extends React.Component {
     return InteractiveGraph.getUserInputFromProps(this.props);
   }
   simpleValidate(rubric) {
-    return InteractiveGraph.validate(this.getUserInput(), rubric, this);
+    return interactiveGraphValidator(this.getUserInput(), rubric);
   }
   render() {
     const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
@@ -34696,20 +35071,19 @@ class InteractiveGraph extends React.Component {
     super(...args);
     this.legacyGraphRef = /*#__PURE__*/React.createRef();
     this.mafsRef = /*#__PURE__*/React.createRef();
-    this.getUserInput = () => {
-      if (this.mafsRef.current) {
-        var _this$mafsRef$current, _this$mafsRef$current2;
-        return (_this$mafsRef$current = (_this$mafsRef$current2 = this.mafsRef.current).getUserInput) == null ? void 0 : _this$mafsRef$current.call(_this$mafsRef$current2);
-      }
-      if (this.legacyGraphRef.current) {
-        return this.legacyGraphRef.current.getUserInput();
-      }
-      throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
-    };
+  }
+  getUserInput() {
+    var _this$mafsRef$current, _this$legacyGraphRef$;
+    if ((_this$mafsRef$current = this.mafsRef.current) != null && _this$mafsRef$current.getUserInput) {
+      return this.mafsRef.current.getUserInput();
+    }
+    if ((_this$legacyGraphRef$ = this.legacyGraphRef.current) != null && _this$legacyGraphRef$.getUserInput) {
+      return this.legacyGraphRef.current.getUserInput();
+    }
+    throw new PerseusError("Cannot getUserInput from a graph that has never rendered", Errors.NotAllowed);
   }
   simpleValidate(rubric) {
-    var _this$getUserInput;
-    return InteractiveGraph.validate((_this$getUserInput = this.getUserInput) == null ? void 0 : _this$getUserInput.call(this), rubric, this);
+    return interactiveGraphValidator(this.getUserInput(), rubric);
   }
   render() {
     var _this$props$apiOption;
@@ -34734,33 +35108,6 @@ class InteractiveGraph extends React.Component {
       ref: this.legacyGraphRef
     }, this.props));
   }
-  static getQuadraticCoefficients(coords) {
-    const p1 = coords[0];
-    const p2 = coords[1];
-    const p3 = coords[2];
-    const denom = (p1[0] - p2[0]) * (p1[0] - p3[0]) * (p2[0] - p3[0]);
-    if (denom === 0) {
-      // Many of the callers assume that the return value is always defined.
-      // @ts-expect-error - TS2322 - Type 'undefined' is not assignable to type 'QuadraticCoefficient'.
-      return;
-    }
-    const a = (p3[0] * (p2[1] - p1[1]) + p2[0] * (p1[1] - p3[1]) + p1[0] * (p3[1] - p2[1])) / denom;
-    const b = (p3[0] * p3[0] * (p1[1] - p2[1]) + p2[0] * p2[0] * (p3[1] - p1[1]) + p1[0] * p1[0] * (p2[1] - p3[1])) / denom;
-    const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
-    return [a, b, c];
-  }
-  static getSinusoidCoefficients(coords) {
-    // It's assumed that p1 is the root and p2 is the first peak
-    const p1 = coords[0];
-    const p2 = coords[1];
-
-    // Resulting coefficients are canonical for this sine curve
-    const amplitude = p2[1] - p1[1];
-    const angularFrequency = Math.PI / (2 * (p2[0] - p1[0]));
-    const phase = p1[0] * angularFrequency;
-    const verticalOffset = p1[1];
-    return [amplitude, angularFrequency, phase, verticalOffset];
-  }
 
   /**
    * @param {object} graph Like props.graph or props.correct
@@ -34974,7 +35321,7 @@ class InteractiveGraph extends React.Component {
     const coords =
     // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
     props.graph.coords || InteractiveGraph.defaultQuadraticCoords(props);
-    return InteractiveGraph.getQuadraticCoefficients(coords);
+    return getQuadraticCoefficients(coords);
   }
   static defaultQuadraticCoords(props) {
     const coords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
@@ -34989,7 +35336,7 @@ class InteractiveGraph extends React.Component {
     const coords =
     // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
     props.graph.coords || InteractiveGraph.defaultSinusoidCoords(props);
-    return InteractiveGraph.getSinusoidCoefficients(coords);
+    return getSinusoidCoefficients(coords);
   }
   static defaultSinusoidCoords(props) {
     const coords = [[0.5, 0.5], [0.65, 0.6]];
@@ -35069,222 +35416,8 @@ class InteractiveGraph extends React.Component {
     const angle = GraphUtils.findAngle(coords[2], coords[0], coords[1]);
     return angle.toFixed(0) + "\u00B0 angle" + " at (" + coords[1].join(", ") + ")";
   }
-  static validate(userInput, rubric, component) {
-    // None-type graphs are not graded
-    if (userInput.type === "none" && rubric.correct.type === "none") {
-      return {
-        type: "points",
-        earned: 0,
-        total: 0,
-        message: null
-      };
-    }
-
-    // When nothing has moved, there will neither be coords nor the
-    // circle's center/radius fields. When those fields are absent, skip
-    // all these checks; just go mark the answer as empty.
-    const hasValue = Boolean(
-    // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
-    userInput.coords ||
-    // @ts-expect-error - TS2339 - Property 'center' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
-    userInput.center && userInput.radius);
-    if (userInput.type === rubric.correct.type && hasValue) {
-      if (userInput.type === "linear" && rubric.correct.type === "linear" && userInput.coords != null) {
-        const guess = userInput.coords;
-        const correct = rubric.correct.coords;
-
-        // If both of the guess points are on the correct line, it's
-        // correct.
-        if (
-        // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-        collinear(correct[0], correct[1], guess[0]) &&
-        // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-        collinear(correct[0], correct[1], guess[1])) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "linear-system" && rubric.correct.type === "linear-system" && userInput.coords != null) {
-        const guess = userInput.coords;
-        const correct = rubric.correct.coords;
-        if (collinear(correct[0][0], correct[0][1], guess[0][0]) && collinear(correct[0][0], correct[0][1], guess[0][1]) && collinear(correct[1][0], correct[1][1], guess[1][0]) && collinear(correct[1][0], correct[1][1], guess[1][1]) || collinear(correct[0][0], correct[0][1], guess[1][0]) && collinear(correct[0][0], correct[0][1], guess[1][1]) && collinear(correct[1][0], correct[1][1], guess[0][0]) && collinear(correct[1][0], correct[1][1], guess[0][1])) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "quadratic" && rubric.correct.type === "quadratic" && userInput.coords != null) {
-        // If the parabola coefficients match, it's correct.
-        const guessCoeffs = this.getQuadraticCoefficients(userInput.coords);
-        const correctCoeffs = this.getQuadraticCoefficients(
-        // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
-        rubric.correct.coords);
-        if (deepEq$1(guessCoeffs, correctCoeffs)) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "sinusoid" && rubric.correct.type === "sinusoid" && userInput.coords != null) {
-        const guessCoeffs = this.getSinusoidCoefficients(userInput.coords);
-        const correctCoeffs = this.getSinusoidCoefficients(
-        // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
-        rubric.correct.coords);
-        const canonicalGuessCoeffs = canonicalSineCoefficients$1(guessCoeffs);
-        const canonicalCorrectCoeffs = canonicalSineCoefficients$1(correctCoeffs);
-        // If the canonical coefficients match, it's correct.
-        if (deepEq$1(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "circle" && rubric.correct.type === "circle") {
-        if (deepEq$1(userInput.center, rubric.correct.center) && eq(userInput.radius, rubric.correct.radius)) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "point" && rubric.correct.type === "point" && userInput.coords != null) {
-        let correct = InteractiveGraph.getPointCoords(rubric.correct, component);
-        const guess = userInput.coords.slice();
-        correct = correct.slice();
-        // Everything's already rounded so we shouldn't need to do an
-        // eq() comparison but _.isEqual(0, -0) is false, so we'll use
-        // eq() anyway. The sort should be fine because it'll stringify
-        // it and -0 converted to a string is "0"
-        guess == null || guess.sort();
-        // @ts-expect-error - TS2339 - Property 'sort' does not exist on type 'readonly Coord[]'.
-        correct.sort();
-        if (deepEq$1(guess, correct)) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "polygon" && rubric.correct.type === "polygon" && userInput.coords != null) {
-        var _userInput$coords, _rubric$correct$coord;
-        const guess = (_userInput$coords = userInput.coords) == null ? void 0 : _userInput$coords.slice();
-        // @ts-expect-error - TS2322 - Type 'Coord[] | undefined' is not assignable to type 'Coord[]'.
-        const correct = (_rubric$correct$coord = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord.slice();
-        let match;
-        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);
-        } else if (rubric.correct.match === "approx") {
-          match = similar(guess, correct, 0.1);
-        } else {
-          /* exact */
-          guess.sort();
-          correct.sort();
-          match = deepEq$1(guess, correct);
-        }
-        if (match) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "segment" && rubric.correct.type === "segment" && userInput.coords != null) {
-        var _rubric$correct;
-        let guess = Util.deepClone(userInput.coords);
-        let correct = Util.deepClone((_rubric$correct = rubric.correct) == null ? void 0 : _rubric$correct.coords);
-        guess = _.invoke(guess, "sort").sort();
-        // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
-        correct = _.invoke(correct, "sort").sort();
-        if (deepEq$1(guess, correct)) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "ray" && rubric.correct.type === "ray" && userInput.coords != null) {
-        const guess = userInput.coords;
-        const correct = rubric.correct.coords;
-        if (
-        // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-        deepEq$1(guess[0], correct[0]) &&
-        // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-        collinear(correct[0], correct[1], guess[1])) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      } else if (userInput.type === "angle" && rubric.correct.type === "angle") {
-        const guess = userInput.coords;
-        const correct = rubric.correct.coords;
-        let match;
-        if (rubric.correct.match === "congruent") {
-          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;
-          });
-          // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-          match = eq(...angles);
-        } else {
-          /* exact */
-          match =
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-          deepEq$1(guess[1], correct[1]) &&
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-          collinear(correct[1], correct[0], guess[0]) &&
-          // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-          collinear(correct[1], correct[2], guess[2]);
-        }
-        if (match) {
-          return {
-            type: "points",
-            earned: 1,
-            total: 1,
-            message: null
-          };
-        }
-      }
-    }
-
-    // The input wasn't correct, so check if it's a blank input or if it's
-    // actually just wrong
-    if (!hasValue || _.isEqual(userInput, rubric.graph)) {
-      // We're where we started.
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
+  static validate(userInput, rubric) {
+    return interactiveGraphValidator(userInput, rubric);
   }
   static getUserInputFromProps(props) {
     return props.graph;
@@ -36387,6 +36520,57 @@ const styles$h = 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;
+}
+function labelImageValidator(state, rubric) {
+  let numAnswered = 0;
+  let numCorrect = 0;
+  for (const marker of state.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 !== state.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 === state.markers.length ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 const BringToFront = {
   boxShadow: `0 8px 8px ${color.offBlack64}`,
   zIndex: 1000
@@ -36645,57 +36829,11 @@ const styles$f = StyleSheet.create({
  * No diagonals allowed.
  */
 
+// TODO: should this be using WidgetProps / PerseusLabelImageWidgetOptions?
+
 class LabelImage extends React.Component {
-  static gradeMarker(marker) {
-    const score = {
-      hasAnswers: false,
-      isCorrect: false
-    };
-    if (marker.selected && marker.selected.length > 0) {
-      // @ts-expect-error - TS2540 - Cannot assign to 'hasAnswers' because it is a read-only property.
-      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.
-        // @ts-expect-error - TS2540 - Cannot assign to 'isCorrect' because it is a read-only property.
-        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.
-      // @ts-expect-error - TS2540 - Cannot assign to 'isCorrect' because it is a read-only property.
-      score.isCorrect = true;
-    }
-    return score;
-  }
   static validate(state, rubric) {
-    let numAnswered = 0;
-    let numCorrect = 0;
-    for (const marker of state.markers) {
-      const score = LabelImage.gradeMarker(marker);
-      if (score.hasAnswers) {
-        numAnswered++;
-      }
-      if (score.isCorrect) {
-        numCorrect++;
-      }
-    }
-
-    // We expect all question markers to be answered before grading.
-    if (numAnswered !== state.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 === state.markers.length ? 1 : 0,
-      total: 1,
-      message: null
-    };
+    return labelImageValidator(state);
   }
 
   /**
@@ -36893,7 +37031,7 @@ class LabelImage extends React.Component {
     this._mounted = false;
   }
   simpleValidate(rubric) {
-    return LabelImage.validate(this.getUserInput(), rubric);
+    return labelImageValidator(this.getUserInput());
   }
   getUserInput() {
     const {
@@ -36911,7 +37049,7 @@ class LabelImage extends React.Component {
       onChange
     } = this.props;
     const updatedMarkers = markers.map(marker => {
-      const score = LabelImage.gradeMarker(marker);
+      const score = scoreMarker(marker);
       return _extends({}, marker, {
         // Reveal correctness state for markers with answers.
         showCorrectness: score.hasAnswers ? score.isCorrect ? "correct" : "incorrect" : undefined
@@ -37058,7 +37196,7 @@ class LabelImage extends React.Component {
           bottom: "top"
         }[markerPosition];
       }
-      const score = LabelImage.gradeMarker(marker);
+      const score = scoreMarker(marker);
       // Once the question is answered, show markers
       // with correct answers, otherwise passthrough
       // the correctness state.
@@ -37257,9 +37395,7 @@ const LabelImageWithDependencies = /*#__PURE__*/React.forwardRef((props, ref) =>
 // 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 = LabelImage.validate;
-// @ts-expect-error - TS2339 - Property 'gradeMarker' does not exist on type
-LabelImageWithDependencies.gradeMarker = LabelImage.gradeMarker;
+LabelImageWithDependencies.validate = labelImageValidator;
 var LabelImage$1 = {
   name: "label-image",
   displayName: "Label Image",
@@ -37977,6 +38113,16 @@ const styles$d = StyleSheet.create({
   }
 });
 
+function matcherValidator(state, rubric) {
+  const correct = _.isEqual(state.left, rubric.left) && _.isEqual(state.right, rubric.right);
+  return {
+    type: "points",
+    earned: correct ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 const {
   shuffle: shuffle$1,
   seededRNG
@@ -38039,10 +38185,12 @@ class Matcher extends React.Component {
       // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
       this.refs.right.moveOptionToIndex(option, index);
     };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Matcher'.
-      return Matcher.validate(this.getUserInput(), rubric);
-    };
+  }
+  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
@@ -38149,17 +38297,6 @@ Matcher.defaultProps = {
   onChange: function () {},
   linterContext: linterContextDefault
 };
-_.extend(Matcher, {
-  validate: function (state, rubric) {
-    const correct = _.isEqual(state.left, rubric.left) && _.isEqual(state.right, rubric.right);
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message: null
-    };
-  }
-});
 const padding = 5;
 const border = "1px solid #444";
 const styles$c = StyleSheet.create({
@@ -38195,7 +38332,59 @@ var Matcher$1 = {
   isLintable: true
 };
 
-// Type imports
+function matrixValidator(state, rubric, strings) {
+  const solution = rubric.answers;
+  const supplied = state.answers;
+  const solutionSize = getMatrixSize(solution);
+  const suppliedSize = getMatrixSize(supplied);
+  const incorrectSize = solutionSize[0] !== suppliedSize[0] || solutionSize[1] !== suppliedSize[1];
+  const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
+  let message = null;
+  let hasEmptyCell = false;
+  let incorrect = false;
+  _(suppliedSize[0]).times(row => {
+    _(suppliedSize[1]).times(col => {
+      if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
+        hasEmptyCell = true;
+      }
+      if (!incorrectSize) {
+        const validator = createValidator(
+        // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
+        solution[row][col], {
+          simplify: true
+        }, strings);
+        const result = validator(supplied[row][col]);
+        if (result.message) {
+          // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
+          message = result.message;
+        }
+        if (!result.correct) {
+          incorrect = true;
+        }
+      }
+    });
+  });
+  if (hasEmptyCell) {
+    return {
+      type: "invalid",
+      message: strings.fillAllCells
+    };
+  }
+  if (incorrectSize) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 1,
+      message: null
+    };
+  }
+  return {
+    type: "points",
+    earned: incorrect ? 0 : 1,
+    total: 1,
+    message: message
+  };
+}
 
 const {
   assert: assert$2
@@ -38245,7 +38434,7 @@ const getRefForPath$1 = function getRefForPath(path) {
   const column = getColumnFromPath$1(path);
   return "answer" + row + "," + column;
 };
-const getMatrixSize = function getMatrixSize(matrix) {
+function getMatrixSize(matrix) {
   const matrixSize = [1, 1];
 
   // We need to find the widest row and tallest column to get the correct
@@ -38267,7 +38456,7 @@ const getMatrixSize = function getMatrixSize(matrix) {
     }
   });
   return matrixSize;
-};
+}
 class Matrix extends React.Component {
   constructor(...args) {
     super(...args);
@@ -38406,70 +38595,22 @@ class Matrix extends React.Component {
       }, cb);
       this.props.trackInteraction();
     };
-    this.getUserInput = () => {
-      return {
-        answers: this.props.answers
-      };
-    };
-    this.simpleValidate = rubric => {
-      return Matrix.validate(this.getUserInput(), rubric, this.context.strings);
-    };
   }
   static validate(state, rubric, strings) {
-    const solution = rubric.answers;
-    const supplied = state.answers;
-    const solutionSize = getMatrixSize(solution);
-    const suppliedSize = getMatrixSize(supplied);
-    const incorrectSize = solutionSize[0] !== suppliedSize[0] || solutionSize[1] !== suppliedSize[1];
-    const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
-    let message = null;
-    let hasEmptyCell = false;
-    let incorrect = false;
-    _(suppliedSize[0]).times(row => {
-      _(suppliedSize[1]).times(col => {
-        if (supplied[row][col] == null || supplied[row][col].toString().length === 0) {
-          hasEmptyCell = true;
-        }
-        if (!incorrectSize) {
-          const validator = createValidator(solution[row][col], {
-            simplify: true
-          }, strings);
-          const result = validator(supplied[row][col]);
-          if (result.message) {
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-            message = result.message;
-          }
-          if (!result.correct) {
-            incorrect = true;
-          }
-        }
-      });
-    });
-    if (hasEmptyCell) {
-      return {
-        type: "invalid",
-        message: strings.fillAllCells
-      };
-    }
-    if (incorrectSize) {
-      return {
-        type: "points",
-        earned: 0,
-        total: 1,
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: incorrect ? 0 : 1,
-      total: 1,
-      message: message
-    };
+    return matrixValidator(state, rubric, strings);
   }
   componentDidMount() {
     // Used in the `onBlur` and `onFocus` handlers
     this.cursorPosition = [0, 0];
   }
+  getUserInput() {
+    return {
+      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
@@ -39680,16 +39821,14 @@ class Molecule extends React.Component {
 }
 Molecule.contextType = PerseusI18nContext;
 class MoleculeWidget extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.getUserInput = () => {
-      return [];
-    };
-  }
   // 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();
@@ -39712,6 +39851,45 @@ var Molecule$1 = {
   widget: MoleculeWidget
 };
 
+function numberLineValidator(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 outsideAllowedRange = state.numDivisions > divisionRange[1] || state.numDivisions < divisionRange[0];
+
+  // TODO: I don't think isTickCrtl is a thing anymore
+  if (state.isTickCrtl && outsideAllowedRange) {
+    return {
+      type: "invalid",
+      message: "Number of divisions is outside the allowed range."
+    };
+  }
+  if (correctPos && correctRel === state.rel) {
+    return {
+      type: "points",
+      earned: 1,
+      total: 1,
+      message: null
+    };
+  }
+  if (state.numLinePosition === start && state.rel === startRel) {
+    // We're where we started.
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  return {
+    type: "points",
+    earned: 0,
+    total: 1,
+    message: null
+  };
+}
+
 // @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
 const MovablePoint = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
@@ -39837,6 +40015,9 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   });
   return results;
 });
+
+// TODO: most widgets use some like Widget<Something, PerseusNumberLineWidgetOptions>
+// should this one?
 class NumberLine extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -40116,19 +40297,21 @@ class NumberLine extends React.Component {
         arrows: "->"
       });
     };
-    this.getUserInput = () => {
-      return {
-        numLinePosition: this.props.numLinePosition,
-        rel: this.props.isInequality ? this.props.rel : "eq",
-        numDivisions: this.props.numDivisions,
-        divisionRange: this.props.divisionRange
-      };
-    };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof NumberLine'.
-      return NumberLine.validate(this.getUserInput(), rubric);
+  }
+  static validate(state, rubric) {
+    return numberLineValidator(state, rubric);
+  }
+  getUserInput() {
+    return {
+      numLinePosition: this.props.numLinePosition,
+      rel: this.props.isInequality ? this.props.rel : "eq",
+      numDivisions: this.props.numDivisions,
+      divisionRange: this.props.divisionRange
     };
   }
+  simpleValidate(rubric) {
+    return numberLineValidator(this.getUserInput(), rubric);
+  }
   render() {
     const {
       strings
@@ -40194,44 +40377,6 @@ NumberLine.defaultProps = {
   rel: "ge",
   apiOptions: ApiOptions.defaults
 };
-_.extend(NumberLine, {
-  validate: function (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 outsideAllowedRange = state.numDivisions > divisionRange[1] || state.numDivisions < divisionRange[0];
-    if (state.isTickCrtl && outsideAllowedRange) {
-      return {
-        type: "invalid",
-        message: "Number of divisions is outside the allowed range."
-      };
-    }
-    if (correctPos && correctRel === state.rel) {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: null
-      };
-    }
-    if (state.numLinePosition === start && state.rel === startRel) {
-      // We're where we started.
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-});
 const numberLineTransform = editorProps => {
   const props = _.pick(editorProps, ["range", "labelRange", "labelStyle", "labelTicks", "divisionRange", "snapDivisions", "isTickCtrl", "isInequality", "showTooltips"]);
   const numLinePosition = editorProps.initialX != null ? editorProps.initialX : editorProps.range[0];
@@ -40459,8 +40604,8 @@ Card.defaultProps = {
   animating: false,
   linterContext: linterContextDefault
 };
-const NORMAL = "normal",
-  HORIZONTAL = "horizontal";
+const NORMAL = "normal";
+const HORIZONTAL = "horizontal";
 class Orderer extends React.Component {
   constructor(...args) {
     super(...args);
@@ -40701,17 +40846,6 @@ class Orderer extends React.Component {
         current: list
       });
     };
-    this.getUserInput = () => {
-      return {
-        current: _.map(this.props.current, function (v) {
-          return v.content;
-        })
-      };
-    };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Orderer'.
-      return Orderer.validate(this.getUserInput(), rubric);
-    };
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!_.isEqual(this.props.current, nextProps.current)) {
@@ -40720,6 +40854,17 @@ class Orderer extends React.Component {
       });
     }
   }
+  getUserInput() {
+    return {
+      current: _.map(this.props.current, function (v) {
+        return v.content;
+      })
+    };
+  }
+  simpleValidate(rubric) {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Orderer'.
+    return Orderer.validate(this.getUserInput(), rubric);
+  }
   render() {
     // This is the card we are currently dragging
     const dragging = this.state.dragging && /*#__PURE__*/React.createElement(Card
@@ -40833,14 +40978,14 @@ Orderer.defaultProps = {
   linterContext: linterContextDefault
 };
 _.extend(Orderer, {
-  validate: function (state, rubric) {
-    if (state.current.length === 0) {
+  validate: function (userInput, rubric) {
+    if (userInput.current.length === 0) {
       return {
         type: "invalid",
         message: null
       };
     }
-    const correct = _.isEqual(state.current, _.pluck(rubric.correctOptions, "content"));
+    const correct = _.isEqual(userInput.current, _.pluck(rubric.correctOptions, "content"));
     return {
       type: "points",
       earned: correct ? 1 : 0,
@@ -43039,10 +43184,6 @@ class PassageRefTarget extends React.Component {
   constructor(..._args) {
     super(..._args);
     // TODO passage-ref-target isn't interactive; remove
-    this.getUserInput = () => {
-      return;
-    };
-    // TODO passage-ref-target isn't interactive; remove
     this.change = (...args) => {
       return change.apply(this, args);
     };
@@ -43051,6 +43192,11 @@ class PassageRefTarget extends React.Component {
   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();
@@ -43095,9 +43241,6 @@ var PassageRefTarget$1 = {
  * This is a PhET simulation widget. It is used for rendering simulations
  * from https://phet.colorado.edu/.
  */
-
-// For returning user input, but currently the PhET widget
-// does not support accessing user input
 // This renders the PhET sim
 class PhetSimulation extends React.Component {
   constructor(props) {
@@ -43146,6 +43289,8 @@ 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;
   }
@@ -43297,10 +43442,25 @@ var PhetSimulation$1 = {
   isLintable: true
 };
 
-/* eslint-disable react/no-unsafe */
 const {
   deepEq
 } = Util;
+function plotterValidator(userInput, rubric) {
+  if (deepEq(userInput, rubric.starting)) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  return {
+    type: "points",
+    earned: deepEq(userInput, rubric.correct) ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
+/* eslint-disable react/no-unsafe */
 class Plotter extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -44031,13 +44191,9 @@ class Plotter extends React.Component {
         });
       });
     };
-    this.getUserInput = () => {
-      return this.state.values;
-    };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Plotter'.
-      return Plotter.validate(this.getUserInput(), rubric);
-    };
+  }
+  static validate(userInput, rubric) {
+    return plotterValidator(userInput, rubric);
   }
   componentDidMount() {
     this._isMounted = true;
@@ -44062,6 +44218,12 @@ class Plotter extends React.Component {
   componentWillUnmount() {
     this._isMounted = false;
   }
+  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
@@ -44079,6 +44241,8 @@ class Plotter extends React.Component {
     });
   }
 }
+
+// We don't need to change any of the original props for static mode
 Plotter.contextType = PerseusI18nContext;
 Plotter.defaultProps = {
   type: "bar",
@@ -44093,24 +44257,6 @@ Plotter.defaultProps = {
   plotDimensions: [380, 300],
   labelInterval: 1
 };
-_.extend(Plotter, {
-  validate: function (guess, rubric) {
-    if (deepEq(guess, rubric.starting)) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      earned: deepEq(guess, rubric.correct) ? 1 : 0,
-      total: 1,
-      message: null
-    };
-  }
-});
-
-// We don't need to change any of the original props for static mode
 const staticTransform = _.identity;
 var Plotter$1 = {
   name: "plotter",
@@ -44166,6 +44312,28 @@ var PythonProgram$1 = {
   widget: PythonProgram
 };
 
+function sorterValidator(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
+  // assumption that the initial order isn't the correct order! However,
+  // this should be rare if it happens, and interacting with the list
+  // will enable the button, so they won't be locked out of progressing.
+  if (!userInput.changed) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  const correct = Util.deepEq(userInput.options, rubric.correct);
+  return {
+    type: "points",
+    earned: correct ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 const {
   shuffle
 } = Util;
@@ -44195,42 +44363,14 @@ class Sorter extends React.Component {
         }, 0);
       });
     };
-    this.getUserInput = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
-      return {
-        options: this.refs.sortable.getOptions()
-      };
-    };
     this.moveOptionToIndex = (option, index) => {
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
       this.refs.sortable.moveOptionToIndex(option, index);
     };
-    this.simpleValidate = rubric => {
-      // If this 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
-      // assumption that the initial order isn't the correct order! However,
-      // this should be rare if it happens, and interacting with the list
-      // will enable the button, so they won't be locked out of progressing.
-      if (!this.state.changed) {
-        return {
-          type: "invalid",
-          message: null
-        };
-      }
-      return Sorter.validate(this.getUserInput(), rubric);
-    };
   }
-  static validate(state, rubric) {
-    const correct = _.isEqual(state.options, rubric.correct);
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message: null
-    };
+  static validate(userInput, rubric) {
+    return sorterValidator(userInput, rubric);
   }
   componentDidMount() {
     this._isMounted = true;
@@ -44238,6 +44378,18 @@ class Sorter extends React.Component {
   componentWillUnmount() {
     this._isMounted = false;
   }
+  getUserInput() {
+    // eslint-disable-next-line react/no-string-refs
+    // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
+    const options = this.refs.sortable.getOptions();
+    return {
+      options,
+      changed: this.state.changed
+    };
+  }
+  simpleValidate(rubric) {
+    return sorterValidator(this.getUserInput(), rubric);
+  }
   render() {
     const options = shuffle(this.props.correct, this.props.problemNum, /* ensurePermuted */true);
     const {
@@ -44274,6 +44426,66 @@ var Sorter$1 = {
   isLintable: true
 };
 
+function tableValidator(state, rubric, strings) {
+  const filterNonEmpty = function filterNonEmpty(table) {
+    return _.filter(table, function (row) {
+      // Check if row has a cell that is nonempty
+      return _.some(row, _.identity);
+    });
+  };
+  const solution = filterNonEmpty(rubric.answers);
+  const supplied = filterNonEmpty(state);
+  const hasEmptyCell = _.some(supplied, function (row) {
+    return _.some(row, function (cell) {
+      return cell === "";
+    });
+  });
+  if (hasEmptyCell || !supplied.length) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  if (supplied.length !== solution.length) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 1,
+      message: null
+    };
+  }
+  const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
+  let message = null;
+  const allCorrect = _.every(solution, function (rowSolution) {
+    for (let i = 0; i < supplied.length; i++) {
+      const rowSupplied = supplied[i];
+      const correct = _.every(rowSupplied, function (cellSupplied, i) {
+        const cellSolution = rowSolution[i];
+        const validator = createValidator(cellSolution, {
+          simplify: true
+        }, strings);
+        const result = validator(cellSupplied);
+        if (result.message) {
+          // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
+          message = result.message;
+        }
+        return result.correct;
+      });
+      if (correct) {
+        supplied.splice(i, 1);
+        return true;
+      }
+    }
+    return false;
+  });
+  return {
+    type: "points",
+    earned: allCorrect ? 1 : 0,
+    total: 1,
+    message: message
+  };
+}
+
 const {
   assert
 } = InteractiveUtil;
@@ -44310,9 +44522,6 @@ class Table extends React.Component {
     this._getColumns = () => {
       return this.props.answers[0].length;
     };
-    this.getUserInput = () => {
-      return _.map(this.props.answers, _.clone);
-    };
     this.onValueChange = (row, column, eventOrValue) => {
       const answers = _.map(this.props.answers, _.clone);
 
@@ -44332,10 +44541,6 @@ class Table extends React.Component {
         headers: headers
       });
     };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Table'.
-      return Table.validate(this.getUserInput(), rubric, this.context.strings);
-    };
     this._handleFocus = inputPath => {
       this.props.onFocus(inputPath);
     };
@@ -44402,6 +44607,15 @@ 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);
+  }
   render() {
     const rows = this._getRows();
     const columns = this._getColumns();
@@ -44479,68 +44693,6 @@ Table.defaultProps = function () {
     linterContext: linterContextDefault
   };
 }();
-_.extend(Table, {
-  validate: function (state, rubric, strings) {
-    const filterNonEmpty = function filterNonEmpty(table) {
-      return _.filter(table, function (row) {
-        // Check if row has a cell that is nonempty
-        return _.some(row, _.identity);
-      });
-    };
-    const solution = filterNonEmpty(rubric.answers);
-    const supplied = filterNonEmpty(state);
-    const hasEmptyCell = _.some(supplied, function (row) {
-      return _.some(row, function (cell) {
-        return cell === "";
-      });
-    });
-    if (hasEmptyCell || !supplied.length) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    if (supplied.length !== solution.length) {
-      return {
-        type: "points",
-        earned: 0,
-        total: 1,
-        message: null
-      };
-    }
-    const createValidator = KhanAnswerTypes.number.createValidatorFunctional;
-    let message = null;
-    const allCorrect = _.every(solution, function (rowSolution) {
-      let i;
-      for (i = 0; i < supplied.length; i++) {
-        const rowSupplied = supplied[i];
-        const correct = _.every(rowSupplied, function (cellSupplied, i) {
-          const cellSolution = rowSolution[i];
-          const validator = createValidator(cellSolution, {
-            simplify: true
-          }, strings);
-          const result = validator(cellSupplied);
-          if (result.message) {
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-            message = result.message;
-          }
-          return result.correct;
-        });
-        if (correct) {
-          supplied.splice(i, 1);
-          return true;
-        }
-      }
-      return false;
-    });
-    return {
-      type: "points",
-      earned: allCorrect ? 1 : 0,
-      total: 1,
-      message: message
-    };
-  }
-});
 const propTransform = editorProps => {
   // Remove answers before passing to widget
   const rows = editorProps.answers.length;
@@ -44770,7 +44922,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 = "34.1.0";
+const libVersion = "35.1.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45321,9 +45473,6 @@ const defaultContext = {
 };
 const context = /*#__PURE__*/React.createContext(defaultContext);
 
-const {
-  mapObject
-} = objective_;
 class ServerItemRenderer extends React.Component {
   constructor(props) {
     super(props);
@@ -45543,20 +45692,6 @@ class ServerItemRenderer extends React.Component {
     return this.questionRenderer.getWidgetIds();
   }
 
-  /**
-   * Returns an object mapping from widget ID to KE-style score.
-   * The keys of this object are the values of the array returned
-   * from `getWidgetIds`.
-   */
-  scoreWidgets() {
-    const qScore = this.questionRenderer.scoreWidgets();
-    const qGuess = this.questionRenderer.getUserInputForWidgets();
-    const state = this.questionRenderer.getSerializedState();
-    return mapObject(qScore, (score, id) => {
-      return Util.keScoreFromPerseusScore(score, qGuess[id], state);
-    });
-  }
-
   /**
    * Get a representation of the current state of the item.
    */