@khanacademy/perseus 34.0.0 → 35.0.0

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
@@ -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,6 +21711,43 @@ const answerTypes = {
     forms: "pi"
   }
 };
+function inputNumberValidator(state, rubric, strings) {
+  if (rubric.answerType == null) {
+    rubric.answerType = "number";
+  }
+
+  // note(matthewc): this will get immediately parsed again by
+  // `KhanAnswerTypes.number.convertToPredicate`, but a string is
+  // expected here
+  const stringValue = `${rubric.value}`;
+  const val = KhanAnswerTypes.number.createValidatorFunctional(stringValue, {
+    simplify: rubric.simplify,
+    inexact: rubric.inexact || undefined,
+    maxError: rubric.maxError,
+    forms: answerTypes[rubric.answerType].forms
+  }, strings);
+
+  // We may have received TeX; try to parse it before grading.
+  // If `currentValue` is not TeX, this should be a no-op.
+  const currentValue = ParseTex$1(state.currentValue);
+  const result = val(currentValue);
+
+  // TODO(eater): Seems silly to translate result to this invalid/points
+  // thing and immediately translate it back in ItemRenderer.scoreInput()
+  if (result.empty) {
+    return {
+      type: "invalid",
+      message: result.message
+    };
+  }
+  return {
+    type: "points",
+    earned: result.correct ? 1 : 0,
+    total: 1,
+    message: result.message
+  };
+}
+
 const formExamples$1 = {
   integer: function (options, strings) {
     return strings.integerExample;
@@ -21823,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 InputNumber.validate(this.getUserInput(), rubric, this.context.strings, onInputError);
-    };
     this.examples = () => {
       const {
         strings
@@ -21840,45 +21843,8 @@ class InputNumber extends React.Component {
       return [strings.yourAnswer].concat(examples);
     };
   }
-  static validate(state, rubric, strings, onInputError = () => {}) {
-    if (rubric.answerType == null) {
-      rubric.answerType = "number";
-    }
-
-    // note(matthewc): this will get immediately parsed again by
-    // `KhanAnswerTypes.number.convertToPredicate`, but a string is
-    // expected here
-    const stringValue = `${rubric.value}`;
-    const val = KhanAnswerTypes.number.createValidatorFunctional(stringValue, {
-      simplify: rubric.simplify,
-      inexact: rubric.inexact || undefined,
-      maxError: rubric.maxError,
-      forms: answerTypes[rubric.answerType].forms
-    }, strings);
-
-    // We may have received TeX; try to parse it before grading.
-    // If `currentValue` is not TeX, this should be a no-op.
-    const currentValue = ParseTex$1(state.currentValue);
-    const result = val(currentValue);
-
-    // 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
-      };
-    }
-    return {
-      type: "points",
-      earned: result.correct ? 1 : 0,
-      total: 1,
-      message: result.message
-    };
+  static validate(state, rubric, strings) {
+    return inputNumberValidator(state, rubric, strings);
   }
   static getUserInputFromProps(props) {
     return {
@@ -21895,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".
@@ -22198,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();
@@ -22230,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
@@ -22282,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 === "") {
@@ -22412,15 +22384,15 @@ var NumericInput$1 = {
  * Several widgets don't have "right"/"wrong" validation logic,
  * so this just says to move on past those widgets
  *
- * TODO: widgets that use this probably shouldn't have any
+ * TODO(LEMS-2396) widgets that use this probably shouldn't have any
  * validation logic and the thing validating an exercise
  * should just know to skip these
  */
-function noopValidator() {
+function noopValidator(points = 0) {
   return {
     type: "points",
-    earned: 0,
-    total: 0,
+    earned: points,
+    total: points,
     message: null
   };
 }
@@ -22438,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);
     };
@@ -22472,11 +22439,9 @@ class PassageRef extends React.Component {
         }
       }
     };
-    this.simpleValidate = rubric => {
-      return PassageRef.validate(this.getUserInput(), rubric);
-    };
   }
-  static validate(userInput, rubric) {
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  static validate() {
     return noopValidator();
   }
   componentDidMount() {
@@ -22497,6 +22462,15 @@ class PassageRef extends React.Component {
     window.removeEventListener("resize", this._throttledUpdateRange);
     this._isMounted = false;
   }
+
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  getUserInput() {
+    return null;
+  }
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  simpleValidate() {
+    return noopValidator();
+  }
   render() {
     const {
       strings
@@ -23898,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 {
@@ -23992,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
@@ -24058,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
@@ -24186,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
@@ -24426,6 +24411,31 @@ var Radio = {
 /* eslint-disable import/no-named-as-default */
 var basicWidgets = [Radio, InputNumber$1, NumericInput$1, Expression$1];
 
+function categorizerValidator(userInput, rubric, strings) {
+  let completed = true;
+  let allCorrect = true;
+  rubric.values.forEach((value, i) => {
+    if (userInput.values[i] == null) {
+      completed = false;
+    }
+    if (userInput.values[i] !== value) {
+      allCorrect = false;
+    }
+  });
+  if (!completed) {
+    return {
+      type: "invalid",
+      message: strings.invalidSelection
+    };
+  }
+  return {
+    type: "points",
+    earned: allCorrect ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 class Categorizer extends React.Component {
   constructor(..._args) {
@@ -24437,42 +24447,18 @@ 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 Categorizer.validate(this.getUserInput(), rubric, this.context.strings);
-    };
   }
   static validate(userInput, rubric, strings) {
-    let completed = true;
-    let allCorrect = true;
-    rubric.values.forEach((value, i) => {
-      if (userInput.values[i] == null) {
-        completed = false;
-      }
-      if (userInput.values[i] !== value) {
-        allCorrect = false;
-      }
-    });
-    if (!completed) {
-      return {
-        type: "invalid",
-        message: strings.invalidSelection
-      };
-    }
-    return {
-      type: "points",
-      earned: allCorrect ? 1 : 0,
-      total: 1,
-      message: null
-    };
+    return categorizerValidator(userInput, rubric, strings);
   }
   static getUserInputFromProps(props) {
     return {
       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'.
@@ -24480,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;
 
@@ -24846,16 +24835,16 @@ var CSProgram$1 = {
 };
 
 class Definition extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.getUserInput = () => {
-      return {};
-    };
-    this.simpleValidate = rubric => {
-      return Definition.validate(this.getUserInput(), rubric);
-    };
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  static validate() {
+    return noopValidator();
   }
-  static validate(userInput, rubric) {
+  getUserInput() {
+    return {};
+  }
+
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  simpleValidate() {
     return noopValidator();
   }
   render() {
@@ -24924,18 +24913,13 @@ class DeprecatedStandin extends React__default.Component {
       return {};
     };
     this.simpleValidate = rubric => {
-      return DeprecatedStandin.validate(this.getUserInput(), rubric);
+      return noopValidator(1);
     };
   }
   static validate(userInput, rubric) {
     // Since this mean to replace an existing widget the learner
     // WILL earn points for this widget
-    return {
-      type: "points",
-      earned: 1,
-      total: 1,
-      message: null
-    };
+    return noopValidator(1);
   }
   render() {
     return /*#__PURE__*/React__default.createElement("div", {
@@ -24995,18 +24979,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",
@@ -25080,14 +25064,9 @@ class Explanation extends React.Component {
       });
       this.props.trackInteraction();
     };
-    this.getUserInput = () => {
-      return {};
-    };
-    this.simpleValidate = rubric => {
-      return Explanation.validate(this.getUserInput(), rubric);
-    };
   }
-  static validate(userInput, rubric) {
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  static validate() {
     return noopValidator();
   }
   componentDidMount() {
@@ -25096,6 +25075,14 @@ 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();
+  }
   render() {
     const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
     const caretIcon = this.state.expanded ? caretUp : caretDown;
@@ -26715,7 +26702,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) {
@@ -26931,49 +26918,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() {
@@ -26982,6 +26961,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, {
@@ -27249,15 +27236,18 @@ class ImageWidget extends React.Component {
     this.change = (...args) => {
       return change.apply(this, args);
     };
-    this.getUserInput = () => {
-      return null;
-    };
-    this.simpleValidate = rubric => {
-      return ImageWidget.validate(this.getUserInput(), rubric);
-    };
     this.focus = () => {};
   }
-  static validate(userInput, rubric) {
+  // 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();
   }
   // no-op
@@ -27567,18 +27557,9 @@ 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 {};
-    };
-    this.simpleValidate = rubric => {
-      return Interaction.validate(this.getUserInput(), rubric);
-    };
   }
-  static validate(state, rubric) {
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  static validate() {
     return noopValidator();
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -27599,6 +27580,18 @@ class Interaction extends React.Component {
       });
     }
   }
+  getUserInput() {
+    // TODO(eater): Perhaps we want to be able to record the state of the
+    // user's interaction. Unfortunately sending all the props will
+    // probably make the attempt payload too large. So for now, don't send
+    // anything.
+    return {};
+  }
+
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  simpleValidate() {
+    return noopValidator();
+  }
   render() {
     const range = this.props.graph.range;
     let labels = this.props.graph.labels;
@@ -29649,18 +29642,33 @@ function GraphLockedLabelsLayer(props) {
     lockedFigures
   } = props;
   return lockedFigures.map((figure, i) => {
-    var _flags$mafs;
+    var _flags$mafs, _flags$mafs2, _flags$mafs3, _flags$mafs4, _flags$mafs5;
     if (figure.type === "label") {
       return /*#__PURE__*/React.createElement(LockedLabel, _extends({
         key: `label-${i}`
       }, figure));
     }
-    if (flags != null && (_flags$mafs = flags["mafs"]) != null && _flags$mafs["locked-point-labels"] && figure.type === "point") {
+    if (
+    // 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" ||
+    // 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" ||
+    // Function flag + function type
+    flags != null && (_flags$mafs5 = flags["mafs"]) != null && _flags$mafs5["locked-function-labels"] && figure.type === "function") {
+      var _figure$labels, _figure$points$0$labe, _figure$points$1$labe;
       return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: `point-${i}`
-      }, figure.labels.map((label, j) => /*#__PURE__*/React.createElement(LockedLabel, _extends({
-        key: `locked-figure-${i}-label-${j}`
-      }, label))));
+        key: i
+      }, (_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$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$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)))));
     }
     return null;
   });
@@ -30000,7 +30008,9 @@ const GraphLockedLayer = props => {
 
 const actions = {
   global: {
-    deleteIntent
+    deleteIntent,
+    changeInteractionMode,
+    changeKeyboardInvitationVisibility
   },
   angle: {
     movePoint
@@ -30092,6 +30102,20 @@ function clickPoint(index) {
     index
   };
 }
+const CHANGE_INTERACTION_MODE = "point-change-interaction-mode";
+function changeInteractionMode(mode) {
+  return {
+    type: CHANGE_INTERACTION_MODE,
+    mode
+  };
+}
+const CHANGE_KEYBOARD_INVITATION_VISIBILITY = "change-keyboard-interaction-invitation-visibility";
+function changeKeyboardInvitationVisibility(shouldShow) {
+  return {
+    type: CHANGE_KEYBOARD_INVITATION_VISIBILITY,
+    shouldShow
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -31740,7 +31764,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);
@@ -31902,6 +31926,9 @@ const MafsGraph = props => {
     x: viewboxX,
     y: viewboxY
   };
+  const {
+    strings
+  } = usePerseusI18n();
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -31930,16 +31957,18 @@ const MafsGraph = props => {
       height
     },
     onKeyUp: event => {
-      if (event.key === "Backspace") {
-        var _graphRef$current;
-        dispatch(actions.global.deleteIntent());
-        (_graphRef$current = graphRef.current) == null || _graphRef$current.focus();
-      }
+      handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
     "aria-describedby": fullGraphAriaDescription ? descriptionId : undefined,
     ref: graphRef,
-    tabIndex: 0
+    tabIndex: 0,
+    onFocus: event => {
+      handleFocusEvent(event, state, dispatch);
+    },
+    onBlur: event => {
+      handleBlurEvent(event, state, dispatch);
+    }
   }, fullGraphAriaDescription && /*#__PURE__*/React.createElement(View, {
     id: descriptionId,
     tabIndex: -1,
@@ -32001,35 +32030,75 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
     state,
     dispatch
-  })))))), renderGraphControls({
+  }))))), state.type === "point" && state.showKeyboardInteractionInvitation && /*#__PURE__*/React.createElement(View, {
+    style: {
+      textAlign: "center",
+      backgroundColor: "white",
+      border: "1px solid #21242C52",
+      padding: "16px 0",
+      boxShadow: "0px 8px 8px 0px #21242C14",
+      // This translates the box to the center of the
+      // graph Then backs it off by half of its
+      // overall height so it's perfectly centered
+      top: "50%",
+      transform: "translateY(-50%)"
+    }
+  }, /*#__PURE__*/React.createElement(LabelMedium, null, strings.graphKeyboardPrompt))), renderGraphControls({
     state,
     dispatch,
-    width
+    width,
+    strings
   })));
 };
-const renderPointGraphControls = props => /*#__PURE__*/React.createElement(View, {
-  style: {
-    flexDirection: "row",
-    width: props.width
-  }
-}, props.state.showRemovePointButton && props.state.focusedPointIndex !== null && /*#__PURE__*/React.createElement(Button, {
-  id: REMOVE_BUTTON_ID,
-  kind: "secondary",
-  color: "destructive",
-  tabIndex: -1,
-  style: {
-    width: "100%",
-    marginLeft: "20px"
-  },
-  onClick: event => {
-    props.dispatch(actions.pointGraph.removePoint(props.state.focusedPointIndex));
-  }
-}, "Remove Point"));
+const renderPointGraphControls = props => {
+  const {
+    interactionMode,
+    showRemovePointButton,
+    focusedPointIndex
+  } = props.state;
+  const {
+    strings
+  } = props;
+  const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      width: props.width
+    }
+  }, interactionMode === "keyboard" && /*#__PURE__*/React.createElement(Button, {
+    kind: "secondary",
+    style: {
+      width: "100%",
+      marginLeft: "20px"
+    },
+    tabIndex: 0,
+    onClick: () => {
+      props.dispatch(actions.pointGraph.addPoint([0, 0]));
+    }
+  }, strings.addPoint), interactionMode === "mouse" && /*#__PURE__*/React.createElement(Button, {
+    id: REMOVE_BUTTON_ID,
+    kind: "secondary",
+    color: "destructive"
+    // This button is meant to be interacted with by the mouse only
+    // Never allow learners to tab to this button
+    ,
+    tabIndex: -1,
+    style: {
+      width: "100%",
+      marginLeft: "20px",
+      visibility: shouldShowRemoveButton ? "visible" : "hidden"
+    },
+    onClick: event => {
+      props.dispatch(actions.pointGraph.removePoint(props.state.focusedPointIndex));
+    }
+  }, strings.removePoint));
+};
 const renderGraphControls = props => {
   const {
     state,
     dispatch,
-    width
+    width,
+    strings
   } = props;
   const {
     type
@@ -32040,7 +32109,8 @@ const renderGraphControls = props => {
         return renderPointGraphControls({
           state,
           dispatch,
-          width
+          width,
+          strings
         });
       }
       return null;
@@ -32048,6 +32118,34 @@ const renderGraphControls = props => {
       return null;
   }
 };
+function handleFocusEvent(event, state, dispatch) {
+  if (state.type === "point" && state.numPoints === "unlimited") {
+    if (event.target.classList.contains("mafs-graph") && state.interactionMode === "mouse") {
+      dispatch(actions.global.changeKeyboardInvitationVisibility(true));
+    }
+  }
+}
+function handleBlurEvent(event, state, dispatch) {
+  if (state.type === "point" && state.numPoints === "unlimited") {
+    dispatch(actions.global.changeKeyboardInvitationVisibility(false));
+  }
+}
+function handleKeyboardEvent(event, state, dispatch) {
+  if (state.type === "point" && state.numPoints === "unlimited") {
+    if (event.key === "Backspace") {
+      dispatch(actions.global.deleteIntent());
+
+      // After removing a point blur
+      // It would be nice if this could focus on the graph but doing so
+      // would trigger the message to prompt a learner to enter keyboard mode
+      document.activeElement.blur();
+    } else if (event.shiftKey && event.key === "Enter") {
+      dispatch(actions.global.changeInteractionMode("keyboard"));
+    } else if (state.interactionMode === "keyboard" && event.key === "a") {
+      dispatch(actions.pointGraph.addPoint([0, 0]));
+    }
+  }
+}
 
 // Calculate the difference between the min and max values of a range
 const getRangeDiff = range => {
@@ -32212,7 +32310,9 @@ function initializeGraphState(params) {
         coords: getPointCoords(graph, range, step),
         numPoints: graph.numPoints || 0,
         focusedPointIndex: null,
-        showRemovePointButton: false
+        showRemovePointButton: false,
+        interactionMode: "mouse",
+        showKeyboardInteractionInvitation: false
       });
     case "circle":
       return _extends({}, shared, {
@@ -32482,6 +32582,10 @@ function interactiveGraphReducer(state, action) {
       return doDeleteIntent(state);
     case CLICK_POINT:
       return doClickPoint(state, action);
+    case CHANGE_INTERACTION_MODE:
+      return doChangeInteractionMode(state, action);
+    case CHANGE_KEYBOARD_INVITATION_VISIBILITY:
+      return doChangeKeyboardInvitationVisibility(state, action);
     default:
       throw new UnreachableCaseError(action);
   }
@@ -32530,6 +32634,31 @@ function doClickPoint(state, action) {
   }
   return state;
 }
+function doChangeInteractionMode(state, action) {
+  if (state.type !== "point") {
+    return state;
+  }
+  if (state.numPoints === "unlimited") {
+    const nextKeyboardInvitation = action.mode === "keyboard" ? false : state.showKeyboardInteractionInvitation;
+    return _extends({}, state, {
+      interactionMode: action.mode,
+      showKeyboardInteractionInvitation: nextKeyboardInvitation
+    });
+  }
+  return state;
+}
+function doChangeKeyboardInvitationVisibility(state, action) {
+  if (state.type !== "point") {
+    return state;
+  }
+  if (state.numPoints === "unlimited") {
+    return _extends({}, state, {
+      showKeyboardInteractionInvitation: action.shouldShow,
+      hasBeenInteractedWith: true
+    });
+  }
+  return state;
+}
 function doMovePointInFigure(state, action) {
   switch (state.type) {
     case "segment":
@@ -33266,7 +33395,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const snapTo = graph.type === "polygon" ? graph.snapTo : null;
   const showAngles = graph.type === "polygon" ? graph.showAngles : null;
   const showSides = graph.type === "polygon" ? graph.showSides : null;
-  const startCoords = "startCoords" in graph ? graph.startCoords : null;
+  const startCoords = "startCoords" in graph ? graph.startCoords : undefined;
   const originalPropsRef = useRef(props);
   const latestPropsRef = useLatestRef(props);
   useEffect(() => {
@@ -34565,20 +34694,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 InteractiveGraph.validate(this.getUserInput(), rubric, this);
   }
   render() {
     var _this$props$apiOption;
@@ -36256,6 +36384,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
@@ -36514,57 +36693,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);
   }
 
   /**
@@ -36762,7 +36895,7 @@ class LabelImage extends React.Component {
     this._mounted = false;
   }
   simpleValidate(rubric) {
-    return LabelImage.validate(this.getUserInput(), rubric);
+    return labelImageValidator(this.getUserInput());
   }
   getUserInput() {
     const {
@@ -36780,7 +36913,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
@@ -36927,7 +37060,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.
@@ -37126,9 +37259,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",
@@ -37908,10 +38039,10 @@ 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);
-    };
+  }
+  simpleValidate(rubric) {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Matcher'.
+    return Matcher.validate(this.getUserInput(), rubric);
   }
   render() {
     // To minimize layout shift, we display a spinner until our math
@@ -38275,14 +38406,6 @@ 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;
@@ -38300,7 +38423,9 @@ class Matrix extends React.Component {
           hasEmptyCell = true;
         }
         if (!incorrectSize) {
-          const validator = createValidator(solution[row][col], {
+          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]);
@@ -38339,6 +38464,14 @@ class Matrix extends React.Component {
     // Used in the `onBlur` and `onFocus` handlers
     this.cursorPosition = [0, 0];
   }
+  getUserInput() {
+    return {
+      answers: this.props.answers
+    };
+  }
+  simpleValidate(rubric) {
+    return Matrix.validate(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
@@ -38629,9 +38762,8 @@ const Measurer = createReactClass({
   getUserInput: function () {
     return {};
   },
-  simpleValidate: function (rubric) {
-    // TODO(joel) - I don't understand how this is useful!
-    return Measurer.validate(this.getUserInput(), rubric);
+  simpleValidate: function () {
+    return noopValidator(1);
   },
   focus: $.noop,
   render: function () {
@@ -38660,14 +38792,7 @@ const Measurer = createReactClass({
   }
 });
 _.extend(Measurer, {
-  validate: function (state, rubric) {
-    return {
-      type: "points",
-      earned: 1,
-      total: 1,
-      message: null
-    };
-  }
+  validate: noopValidator(1)
 });
 const propUpgrades = {
   "1": v0props => {
@@ -39557,25 +39682,17 @@ class Molecule extends React.Component {
 }
 Molecule.contextType = PerseusI18nContext;
 class MoleculeWidget extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.simpleValidate = () => {
-      return {
-        type: "points",
-        earned: 0,
-        total: 0,
-        message: null
-      };
-    };
-    this.getUserInput = () => {
-      return [];
-    };
-    this.validate = (state, rubric) => {
-      // TODO(colin): this is here as part of the interface for a component.
-      // Figure out if there is something more appropriate that this should
-      // return.
-      return noopValidator();
-    };
+  // 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();
   }
   render() {
     return /*#__PURE__*/React.createElement(Molecule, {
@@ -39720,6 +39837,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);
@@ -39999,19 +40119,19 @@ 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);
+  }
+  getUserInput() {
+    return {
+      numLinePosition: this.props.numLinePosition,
+      rel: this.props.isInequality ? this.props.rel : "eq",
+      numDivisions: this.props.numDivisions,
+      divisionRange: this.props.divisionRange
     };
   }
+  simpleValidate(rubric) {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof NumberLine'.
+    return NumberLine.validate(this.getUserInput(), rubric);
+  }
   render() {
     const {
       strings
@@ -40086,6 +40206,8 @@ _.extend(NumberLine, {
     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",
@@ -40342,8 +40464,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);
@@ -40584,17 +40706,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)) {
@@ -40603,6 +40714,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
@@ -40716,14 +40838,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,
@@ -42539,7 +42661,8 @@ class Passage extends React.Component {
       });
     };
   }
-  static validate(state, rubric) {
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  static validate() {
     return noopValidator();
   }
   componentDidMount() {
@@ -42755,8 +42878,10 @@ class Passage extends React.Component {
   getUserInput() {
     return null;
   }
-  simpleValidate(rubric) {
-    return Passage.validate(this.getUserInput(), rubric);
+
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  simpleValidate() {
+    return noopValidator();
   }
 
   /**
@@ -42919,19 +43044,21 @@ 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);
     };
-    // TODO passage-ref-target isn't interactive; remove
-    this.simpleValidate = rubric => {
-      return PassageRefTarget.validate(this.getUserInput(), rubric);
-    };
   }
-  static validate(state, rubric) {
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  static validate() {
+    return noopValidator();
+  }
+
+  // TODO passage-ref-target isn't interactive; remove
+  getUserInput() {
+    return null;
+  }
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  simpleValidate() {
     return noopValidator();
   }
   render() {
@@ -42974,9 +43101,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) {
@@ -43025,6 +43149,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;
   }
@@ -43910,13 +44036,6 @@ 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);
-    };
   }
   componentDidMount() {
     this._isMounted = true;
@@ -43941,6 +44060,13 @@ class Plotter extends React.Component {
   componentWillUnmount() {
     this._isMounted = false;
   }
+  getUserInput() {
+    return this.state.values;
+  }
+  simpleValidate(rubric) {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Plotter'.
+    return Plotter.validate(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
@@ -43973,8 +44099,8 @@ Plotter.defaultProps = {
   labelInterval: 1
 };
 _.extend(Plotter, {
-  validate: function (guess, rubric) {
-    if (deepEq(guess, rubric.starting)) {
+  validate: function (userInput, rubric) {
+    if (deepEq(userInput, rubric.starting)) {
       return {
         type: "invalid",
         message: null
@@ -43982,7 +44108,7 @@ _.extend(Plotter, {
     }
     return {
       type: "points",
-      earned: deepEq(guess, rubric.correct) ? 1 : 0,
+      earned: deepEq(userInput, rubric.correct) ? 1 : 0,
       total: 1,
       message: null
     };
@@ -44045,6 +44171,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;
@@ -44074,42 +44222,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;
@@ -44117,6 +44237,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 {
@@ -44189,9 +44321,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);
 
@@ -44211,10 +44340,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);
     };
@@ -44281,6 +44406,13 @@ class Table extends React.Component {
       }, cb);
     };
   }
+  getUserInput() {
+    return _.map(this.props.answers, _.clone);
+  }
+  simpleValidate(rubric) {
+    // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Table'.
+    return Table.validate(this.getUserInput(), rubric, this.context.strings);
+  }
   render() {
     const rows = this._getRows();
     const columns = this._getColumns();
@@ -44529,9 +44661,6 @@ class Video extends React.Component {
     this.getUserInput = () => {
       return null;
     };
-    this.simpleValidate = rubric => {
-      return Video.validate(null, rubric);
-    };
     this.change = (...args) => {
       // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
       return change.apply(this, args);
@@ -44541,8 +44670,12 @@ class Video extends React.Component {
    * This is the widget's grading function.
    * Points for videos are tallied by the embedded video itself, in the case
    * of Khan Academy videos.
-   */
-  static validate(userInput, rubric) {
+   */ // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  static validate() {
+    return noopValidator();
+  }
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  simpleValidate() {
     return noopValidator();
   }
   render() {
@@ -44648,7 +44781,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.0.0";
+const libVersion = "35.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45199,9 +45332,6 @@ const defaultContext = {
 };
 const context = /*#__PURE__*/React.createContext(defaultContext);
 
-const {
-  mapObject
-} = objective_;
 class ServerItemRenderer extends React.Component {
   constructor(props) {
     super(props);
@@ -45421,20 +45551,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.
    */