@khanacademy/perseus 43.0.1 → 44.0.0

package/dist/es/index.js

@@ -4,7 +4,7 @@ import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
 import { View, RenderStateRoot, UniqueIDProvider, useOnMountEffect, useLatestRef, useUniqueIdWithMock, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
-import { HeadingMedium, LabelSmall, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
+import { HeadingMedium, LabelSmall, LabelLarge, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import { StyleSheet, css } from 'aphrodite';
 import classNames$1 from 'classnames';
 import * as React from 'react';
@@ -249,7 +249,8 @@ const mockStrings = {
   srInteractiveElements: ({
     elements
   }) => `Interactive elements: ${elements}`,
-  srNoInteractiveElements: "No interactive elements"
+  srNoInteractiveElements: "No interactive elements",
+  selectAnAnswer: "Select an answer"
 };
 
 /**
@@ -2760,8 +2761,6 @@ async function getImageSizeModern(url) {
   });
 }
 
-/* eslint-disable @babel/no-invalid-this, getter-return, one-var */
-
 // TODO: dedupe this with Coord in interactive2/types.js
 
 let supportsPassive = false;
@@ -2837,8 +2836,8 @@ function shuffle$3(array, randomSeed, ensurePermuted = false) {
   do {
     // Fischer-Yates shuffle
     for (let top = shuffled.length; top > 0; top--) {
-      const newEnd = Math.floor(random() * top),
-        temp = shuffled[newEnd];
+      const newEnd = Math.floor(random() * top);
+      const temp = shuffled[newEnd];
 
       // @ts-expect-error - TS2542 - Index signature in type 'readonly T[]' only permits reading.
       shuffled[newEnd] = shuffled[top - 1];
@@ -3170,13 +3169,13 @@ function eq$4(x, y) {
  * Deep approximate equality on primitives, numbers, arrays, and objects.
  * Recursive.
  */
-function deepEq$6(x, y) {
+function deepEq$7(x, y) {
   if (Array.isArray(x) && Array.isArray(y)) {
     if (x.length !== y.length) {
       return false;
     }
     for (let i = 0; i < x.length; i++) {
-      if (!deepEq$6(x[i], y[i])) {
+      if (!deepEq$7(x[i], y[i])) {
         return false;
       }
     }
@@ -3194,10 +3193,10 @@ function deepEq$6(x, y) {
   if (typeof x === "object" && typeof y === "object" && !!x && !!y) {
     return x === y || _.all(x, function (v, k) {
       // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$6(y[k], v);
+      return deepEq$7(y[k], v);
     }) && _.all(y, function (v, k) {
       // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$6(x[k], v);
+      return deepEq$7(x[k], v);
     });
   }
   if (typeof x === "object" && !!x || typeof y === "object" && !!y) {
@@ -3478,7 +3477,7 @@ const Util = {
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
   eq: eq$4,
-  deepEq: deepEq$6,
+  deepEq: deepEq$7,
   parseQueryString,
   updateQueryString: updateQueryString$2,
   strongEncodeURIComponent,
@@ -10509,7 +10508,9 @@ const getClipPoint = function getClipPoint(graph, coord, angle) {
   return clipPoint;
 };
 
-/* eslint-disable @babel/no-invalid-this */
+/**
+ * Default methods for a wrapped movable.
+ */
 
 /*
  * attr() and animate() simply pass the
@@ -10767,7 +10768,7 @@ class WrappedLine extends WrappedDrawing {
  */
 const {
   eq: eq$3,
-  deepEq: deepEq$5
+  deepEq: deepEq$6
 } = Util;
 
 // This should really be a readonly tuple of [number, number]
@@ -10927,7 +10928,7 @@ function similar(coords1, coords2, tolerance) {
     angles = rotate(angles, i);
     // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
     sides = rotate(sides, i);
-    if (deepEq$5(angles1, angles)) {
+    if (deepEq$6(angles1, angles)) {
       const sidePairs = _.zip(sides1, sides);
       const factors = _.map(sidePairs, function (pair) {
         return pair[0] / pair[1];
@@ -13865,7 +13866,7 @@ _.extend(MovableAngle.prototype, {
 
 /* eslint-disable @babel/no-invalid-this */
 const nestedMap$1 = Util.nestedMap;
-const deepEq$4 = Util.deepEq;
+const deepEq$5 = Util.deepEq;
 
 /**
  * A base class for all Graphie Movables
@@ -13962,7 +13963,7 @@ const createSimpleClass = function createSimpleClass(addFunction) {
       this._prevProps = this.props;
     },
     modify: function (graphie) {
-      if (!deepEq$4(this.props, this._prevProps)) {
+      if (!deepEq$5(this.props, this._prevProps)) {
         this.remove();
         this.add(graphie);
         this._prevProps = this.props;
@@ -16576,7 +16577,7 @@ var Movables = {
 const GraphieMovable = GraphieClasses.GraphieMovable;
 const createGraphie = GraphUtils.createGraphie;
 const {
-  deepEq: deepEq$3,
+  deepEq: deepEq$4,
   nestedMap
 } = Util;
 const {
@@ -16629,7 +16630,7 @@ class Graphie extends React.Component {
     };
     this._setupGraphie = () => {
       this._removeMovables();
-      const graphieDiv = ReactDOM__default.findDOMNode(this.graphieDivRef.current);
+      const graphieDiv = this.graphieDivRef.current;
       if (graphieDiv == null || graphieDiv instanceof Text) {
         throw new Error("No graphie container div found");
       }
@@ -16818,7 +16819,7 @@ class Graphie extends React.Component {
     if (this.props.setup !== prevProps.setup) {
       Log.error("<Graphie> was given a new setup function. " + "This is a bad idea; please refactor your code to give " + "the same setup function reference to <Graphie> on " + "every render.", Errors.Internal);
     }
-    if (!deepEq$3(this.props.options, prevProps.options) || !deepEq$3(this.props.box, prevProps.box) || !deepEq$3(this.props.range, prevProps.range)) {
+    if (!deepEq$4(this.props.options, prevProps.options) || !deepEq$4(this.props.box, prevProps.box) || !deepEq$4(this.props.range, prevProps.range)) {
       this._setupGraphie();
     }
     this._updateMovables();
@@ -18536,7 +18537,7 @@ const rules$1 = _extends({}, pureMarkdownRules, {
       // The href prop should always be here, but just in case somehow the article's
       // link was not put together properly, let's make sure it's there so we
       // don't break the entire page.
-      const isKAUrl = href ? href.match(/https?:\/\/[^\/]*khanacademy.org|^\//) : false;
+      const isKAUrl = href ? href.match(/https?:\/\/[^/]*khanacademy.org|^\//) : false;
       if (!isKAUrl) {
         // Prevents "reverse tabnabbing" phishing attacks
         // @ts-expect-error - TS2322 - Type '"noopener noreferrer"' is not assignable to type 'null'.
@@ -20889,36 +20890,36 @@ function uniqueIdForInput(prefix = "input-") {
 class TextInput extends React.Component {
   constructor(props) {
     super(props);
+    this.inputRef = /*#__PURE__*/React.createRef();
     this.id = void 0;
+    this._getInput = () => {
+      if (!this.inputRef.current) {
+        throw new PerseusError("Input ref accessed before set", Errors.Internal);
+      }
+      return this.inputRef.current;
+    };
     this.focus = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this).focus();
+      this._getInput().focus();
     };
     this.blur = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this).blur();
+      this._getInput().blur();
     };
     this.getValue = () => {
-      var _ReactDOM$findDOMNode;
-      // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
-      return (_ReactDOM$findDOMNode = ReactDOM__default.findDOMNode(this)) == null ? void 0 : _ReactDOM$findDOMNode.value;
+      var _this$inputRef$curren;
+      return (_this$inputRef$curren = this.inputRef.current) == null ? void 0 : _this$inputRef$curren.value;
     };
     this.getStringValue = () => {
-      var _ReactDOM$findDOMNode2;
-      // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
-      return (_ReactDOM$findDOMNode2 = ReactDOM__default.findDOMNode(this)) == null ? void 0 : _ReactDOM$findDOMNode2.value.toString();
+      var _this$inputRef$curren2;
+      return (_this$inputRef$curren2 = this.inputRef.current) == null ? void 0 : _this$inputRef$curren2.value.toString();
     };
     this.setSelectionRange = (selectionStart, selectionEnd) => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
+      this._getInput().setSelectionRange(selectionStart, selectionEnd);
     };
     this.getSelectionStart = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this).selectionStart;
+      return this._getInput().selectionStart;
     };
     this.getSelectionEnd = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this).selectionEnd;
+      return this._getInput().selectionEnd;
     };
     if (props.id) {
       this.id = props.id;
@@ -20939,6 +20940,7 @@ class TextInput extends React.Component {
     } = this.props;
     const formattedValue = value === null ? "" : value.toString();
     return /*#__PURE__*/React.createElement(TextField, {
+      ref: this.inputRef,
       style: style,
       disabled: disabled,
       id: this.id,
@@ -20973,7 +20975,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-const _excluded$5 = ["position", "visibility", "left", "top"];
+const _excluded$8 = ["position", "visibility", "left", "top"];
 const zIndex = 10;
 let HorizontalDirection = /*#__PURE__*/function (HorizontalDirection) {
   HorizontalDirection["Left"] = "left";
@@ -21024,7 +21026,7 @@ const TooltipArrow = _ref => {
       left = 100,
       top = 0
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   // TODO(aria): Think about adding a box-shadow to the triangle here
   // See http://css-tricks.com/triangle-with-shadow/
 
@@ -21134,6 +21136,7 @@ const HORIZONTAL_ALIGNMNENTS = {
 class Tooltip extends React.Component {
   constructor(...args) {
     super(...args);
+    this.tooltipContainerRef = /*#__PURE__*/React.createRef();
     this.state = {
       height: null // used for offsetting "top" positioned tooltips
     };
@@ -21208,8 +21211,7 @@ class Tooltip extends React.Component {
         display: this.props.show ? "block" : "none"
       }
     }, /*#__PURE__*/React.createElement("div", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "tooltipContainer",
+      ref: this.tooltipContainerRef,
       className: "tooltipContainer",
       style: {
         position: "absolute",
@@ -21236,10 +21238,8 @@ class Tooltip extends React.Component {
     }, this.props.children.slice(1)), arrowBelow));
   }
   _updateHeight() {
-    const tooltipContainer = ReactDOM__default.findDOMNode(
-    // eslint-disable-next-line react/no-string-refs
-    this.refs.tooltipContainer);
-    const height = tooltipContainer.offsetHeight;
+    const tooltipContainer = this.tooltipContainerRef.current;
+    const height = (tooltipContainer == null ? void 0 : tooltipContainer.offsetHeight) || 0;
     if (height !== this.state.height) {
       this.setState({
         height
@@ -21384,7 +21384,7 @@ InputWithExamples.defaultProps = {
   className: ""
 };
 
-const _excluded$4 = ["keypadElement", "onFocus", "value"];
+const _excluded$7 = ["keypadElement", "onFocus", "value"];
 class SimpleKeypadInput extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21429,7 +21429,7 @@ class SimpleKeypadInput extends React.Component {
         onFocus,
         value
       } = _this$props,
-      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+      rest = _objectWithoutPropertiesLoose(_this$props, _excluded$7);
     return (
       /*#__PURE__*/
       // @ts-expect-error - TS2769 - No overload matches this call.
@@ -21991,7 +21991,7 @@ function maybeParsePercentInput(inputValue, normalizedAnswerExpected) {
     return value / 100;
   }
 
-  // Otherwise, we return input valuåe (number) stripped of the "%".
+  // Otherwise, we return input value (number) stripped of the "%".
   return value;
 }
 function scoreNumericInput(userInput, rubric, strings) {
@@ -25662,14 +25662,14 @@ var Choice$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.
   forwardedRef: ref
 })));
 
-const _excluded$3 = ["content", "forwardedRef", "showContent"];
+const _excluded$6 = ["content", "forwardedRef", "showContent"];
 const ChoiceNoneAbove = function ChoiceNoneAbove(_ref) {
   let {
       content,
       forwardedRef,
       showContent = true
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const {
     strings
   } = usePerseusI18n();
@@ -26040,7 +26040,15 @@ const styles$p = StyleSheet.create({
   }
 });
 
-function scoreRadio(userInput, rubric, strings) {
+/**
+ * Checks if the user has selected at least one option. Additional validation
+ * is done in scoreRadio to check if the number of selected options is correct
+ * and if the user has selected both a correct option and the "none of the above"
+ * option.
+ * @param userInput
+ * @see `scoreRadio` for the additional validation logic and the scoring logic.
+ */
+function validateRadio(userInput) {
   const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
     return sum + (selected ? 1 : 0);
   }, 0);
@@ -26050,6 +26058,17 @@ function scoreRadio(userInput, rubric, strings) {
       message: null
     };
   }
+  return null;
+}
+
+function scoreRadio(userInput, rubric, strings) {
+  const validationError = validateRadio(userInput);
+  if (validationError) {
+    return validationError;
+  }
+  const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
+    return sum + (selected ? 1 : 0);
+  }, 0);
   const numCorrect = rubric.choices.reduce((sum, currentChoice) => {
     return currentChoice.correct ? sum + 1 : sum;
   }, 0);
@@ -26426,6 +26445,7 @@ Radio$1.defaultProps = {
   showSolutions: "none"
 };
 
+const _excluded$5 = ["noneOfTheAbove"];
 const {
   shuffle: shuffle$2,
   random
@@ -26514,17 +26534,15 @@ const transform = (widgetOptions, strings, problemNum) => {
 };
 const propUpgrades$1 = {
   "1": v0props => {
-    let choices;
-    let hasNoneOfTheAbove;
-    if (!v0props.noneOfTheAbove) {
-      choices = v0props.choices;
-      hasNoneOfTheAbove = false;
-    } else {
+    const {
+        noneOfTheAbove
+      } = v0props,
+      rest = _objectWithoutPropertiesLoose(v0props, _excluded$5);
+    if (noneOfTheAbove) {
       throw new Error("radio widget v0 no longer supports auto noneOfTheAbove");
     }
-    return _.extend(_.omit(v0props, "noneOfTheAbove"), {
-      choices: choices,
-      hasNoneOfTheAbove: hasNoneOfTheAbove
+    return _extends({}, rest, {
+      hasNoneOfTheAbove: false
     });
   }
 };
@@ -26562,23 +26580,36 @@ const getPromptJSON$n = (renderProps, userInput) => {
   };
 };
 
-function scoreCategorizer(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) {
+/**
+ * Checks userInput from the categorizer widget to see if the user has selected
+ * a category for each item.
+ * @param userInput - The user's input corresponding to an array of indices that
+ * represent the selected category for each row/item.
+ * @param validationData - An array of strings corresponding to each row/item
+ * @param strings - Used to provide a validation message
+ */
+function validateCategorizer(userInput, validationData, strings) {
+  const incomplete = validationData.items.some((_, i) => userInput.values[i] == null);
+  if (incomplete) {
     return {
       type: "invalid",
       message: strings.invalidSelection
     };
   }
+  return null;
+}
+
+function scoreCategorizer(userInput, scoringData, strings) {
+  const validationError = validateCategorizer(userInput, scoringData, strings);
+  if (validationError) {
+    return validationError;
+  }
+  let allCorrect = true;
+  scoringData.values.forEach((value, i) => {
+    if (userInput.values[i] !== value) {
+      allCorrect = false;
+    }
+  });
   return {
     type: "points",
     earned: allCorrect ? 1 : 0,
@@ -27124,15 +27155,26 @@ const getPromptJSON$k = (renderProps, userInput) => {
   };
 };
 
-function scoreDropdown(userInput, rubric) {
-  const selected = userInput.value;
-  if (selected === 0) {
+/**
+ * Checks if the user has selected an item from the dropdown before scoring.
+ * This is shown with a userInput value / index other than 0.
+ */
+function validateDropdown(userInput) {
+  if (userInput.value === 0) {
     return {
       type: "invalid",
       message: null
     };
   }
-  const correct = rubric.choices[selected - 1].correct;
+  return null;
+}
+
+function scoreDropdown(userInput, rubric) {
+  const validationError = validateDropdown(userInput);
+  if (validationError) {
+    return validationError;
+  }
+  const correct = rubric.choices[userInput.value - 1].correct;
   return {
     type: "points",
     earned: correct ? 1 : 0,
@@ -27181,23 +27223,40 @@ class Dropdown extends React.Component {
       value: String(i + 1),
       label: choice
     }))];
-    return /*#__PURE__*/React.createElement("div", {
-      // NOTE(jared): These are required to prevent weird behavior
-      // When there's a dropdown in a zoomable table.
+    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
+      scope: "dropdown-widget",
+      mockOnFirstRender: true
+    }, ids => /*#__PURE__*/React.createElement(View
+    // NOTE(jared): These are required to prevent weird behavior
+    // When there's a dropdown in a zoomable table.
+    , {
       onClick: e => {
         e.stopPropagation();
       },
       onTouchStart: e => {
         e.stopPropagation();
       }
-    }, /*#__PURE__*/React.createElement(SingleSelect, {
+    }, this.props.visibleLabel && /*#__PURE__*/React.createElement(LabelLarge, {
+      tag: "label",
+      id: ids.get("dropdown-label")
+    }, this.props.visibleLabel), /*#__PURE__*/React.createElement(SingleSelect, {
+      id: ids.get("dropdown"),
       placeholder: "",
       onChange: value => this._handleChange(parseInt(value)),
       selectedValue: String(this.props.selected),
-      disabled: this.props.apiOptions.readOnly
-    }, children));
+      disabled: this.props.apiOptions.readOnly,
+      "aria-label": this.props.ariaLabel || this.context.strings.selectAnAnswer,
+      "aria-labelledby": ids.get("dropdown-label")
+      // This is currently necessary for SRs to read the labels properly.
+      // However, WB is working on a change to add the "combobox" role to
+      // all dropdowns.
+      // See https://khanacademy.atlassian.net/browse/WB-1671
+      ,
+      role: "combobox"
+    }, children)));
   }
 }
+Dropdown.contextType = PerseusI18nContext;
 Dropdown.defaultProps = {
   choices: [],
   selected: 0,
@@ -27207,6 +27266,8 @@ Dropdown.defaultProps = {
 const optionsTransform = widgetOptions => {
   return {
     placeholder: widgetOptions.placeholder,
+    visibleLabel: widgetOptions.visibleLabel,
+    ariaLabel: widgetOptions.ariaLabel,
     choices: widgetOptions.choices.map(choice => choice.content)
   };
 };
@@ -27519,8 +27580,6 @@ const getNextState = (currentState, answerable) => {
   }
 };
 
-// exports has no 'transform'
-
 // A Graded Group is more or less a Group widget that displays a check
 // answer button below the rendered content. When clicked, the widget grades
 // the stuff inside and displays feedback about whether the inputted answer was
@@ -28184,7 +28243,6 @@ const getPromptJSON$g = (renderProps, userInput) => {
   };
 };
 
-/* eslint-disable one-var */
 // @ts-expect-error - TS2339 - Property 'Plot' does not exist on type 'typeof Graphie'.
 const Plot$1 = Graphie.Plot;
 const DEFAULT_BACKGROUND_IMAGE = {
@@ -28285,14 +28343,14 @@ const Linear = _.extend({}, PlotDefaults, {
     return [m, b];
   },
   getFunctionForCoeffs: function (coeffs, x) {
-    const m = coeffs[0],
-      b = coeffs[1];
+    const m = coeffs[0];
+    const b = coeffs[1];
     return m * x + b;
   },
   getEquationString: function (coords) {
     const coeffs = this.getCoefficients(coords);
-    const m = coeffs[0],
-      b = coeffs[1];
+    const m = coeffs[0];
+    const b = coeffs[1];
     return "y = " + m.toFixed(3) + "x + " + b.toFixed(3);
   }
 });
@@ -28316,9 +28374,9 @@ const Quadratic = _.extend({}, PlotDefaults, {
     return [a, b, c];
   },
   getFunctionForCoeffs: function (coeffs, x) {
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
     return (a * x + b) * x + c;
   },
   getPropsForCoeffs: function (coeffs) {
@@ -28330,9 +28388,9 @@ const Quadratic = _.extend({}, PlotDefaults, {
   },
   getEquationString: function (coords) {
     const coeffs = this.getCoefficients(coords);
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
     return "y = " + a.toFixed(3) + "x^2 + " + b.toFixed(3) + "x + " + c.toFixed(3);
   }
 });
@@ -28351,10 +28409,10 @@ const Sinusoid = _.extend({}, PlotDefaults, {
     return [a, b, c, d];
   },
   getFunctionForCoeffs: function (coeffs, x) {
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2],
-      d = coeffs[3];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
+    const d = coeffs[3];
     return a * Math.sin(b * x - c) + d;
   },
   getPropsForCoeffs: function (coeffs) {
@@ -28367,10 +28425,10 @@ const Sinusoid = _.extend({}, PlotDefaults, {
   },
   getEquationString: function (coords) {
     const coeffs = this.getCoefficients(coords);
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2],
-      d = coeffs[3];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
+    const d = coeffs[3];
     return "y = " + a.toFixed(3) + " sin(" + b.toFixed(3) + "x - " + c.toFixed(3) + ") + " + d.toFixed(3);
   },
   areEqual: function (coeffs1, coeffs2) {
@@ -28390,18 +28448,18 @@ const Tangent = _.extend({}, PlotDefaults, {
     return [a, b, c, d];
   },
   getFunctionForCoeffs: function (coeffs, x) {
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2],
-      d = coeffs[3];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
+    const d = coeffs[3];
     return a * Math.tan(b * x - c) + d;
   },
   getEquationString: function (coords) {
     const coeffs = this.getCoefficients(coords);
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2],
-      d = coeffs[3];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
+    const d = coeffs[3];
     return "y = " + a.toFixed(3) + " sin(" + b.toFixed(3) + "x - " + c.toFixed(3) + ") + " + d.toFixed(3);
   },
   areEqual: function (coeffs1, coeffs2) {
@@ -28460,9 +28518,9 @@ const Exponential = _.extend({}, PlotDefaults, {
     return [a, b, c];
   },
   getFunctionForCoeffs: function (coeffs, x) {
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
     return a * Math.exp(b * x) + c;
   },
   getEquationString: function (coords, asymptote) {
@@ -28470,9 +28528,9 @@ const Exponential = _.extend({}, PlotDefaults, {
       return null;
     }
     const coeffs = this.getCoefficients(coords, asymptote);
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
     return "y = " + a.toFixed(3) + "e^(" + b.toFixed(3) + "x) + " + c.toFixed(3);
   }
 });
@@ -28517,9 +28575,9 @@ const Logarithm = _.extend({}, PlotDefaults, {
     }
   },
   getFunctionForCoeffs: function (coeffs, x, asymptote) {
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
     return a * Math.log(b * x + c);
   },
   getEquationString: function (coords, asymptote) {
@@ -28527,9 +28585,9 @@ const Logarithm = _.extend({}, PlotDefaults, {
       return null;
     }
     const coeffs = this.getCoefficients(coords, asymptote);
-    const a = coeffs[0],
-      b = coeffs[1],
-      c = coeffs[2];
+    const a = coeffs[0];
+    const b = coeffs[1];
+    const c = coeffs[2];
     return "y = ln(" + a.toFixed(3) + "x + " + b.toFixed(3) + ") + " + c.toFixed(3);
   }
 });
@@ -28553,16 +28611,16 @@ const AbsoluteValue = _.extend({}, PlotDefaults, {
     return [m, horizontalOffset, verticalOffset];
   },
   getFunctionForCoeffs: function (coeffs, x) {
-    const m = coeffs[0],
-      horizontalOffset = coeffs[1],
-      verticalOffset = coeffs[2];
+    const m = coeffs[0];
+    const horizontalOffset = coeffs[1];
+    const verticalOffset = coeffs[2];
     return m * Math.abs(x - horizontalOffset) + verticalOffset;
   },
   getEquationString: function (coords) {
     const coeffs = this.getCoefficients(coords);
-    const m = coeffs[0],
-      horizontalOffset = coeffs[1],
-      verticalOffset = coeffs[2];
+    const m = coeffs[0];
+    const horizontalOffset = coeffs[1];
+    const verticalOffset = coeffs[2];
     return "y = " + m.toFixed(3) + "| x - " + horizontalOffset.toFixed(3) + "| + " + verticalOffset.toFixed(3);
   }
 });
@@ -30305,6 +30363,7 @@ function numSteps$1(range, step) {
 class Graph extends React.Component {
   constructor(...args) {
     super(...args);
+    this.graphieDivRef = /*#__PURE__*/React.createRef();
     this.protractor = void 0;
     this.ruler = void 0;
     this._graphie = void 0;
@@ -30348,9 +30407,7 @@ class Graph extends React.Component {
       if (this._hasSetupGraphieThisUpdate) {
         return;
       }
-
-      // eslint-disable-next-line react/no-string-refs
-      const graphieDiv = ReactDOM__default.findDOMNode(this.refs.graphieDiv);
+      const graphieDiv = this.graphieDivRef.current;
       // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
       $(graphieDiv).empty();
 
@@ -30558,7 +30615,7 @@ class Graph extends React.Component {
       onClick: this.onClick
     }, image, /*#__PURE__*/React.createElement("div", {
       className: "graphie",
-      ref: "graphieDiv"
+      ref: this.graphieDivRef
     }));
   }
 }
@@ -31646,6 +31703,7 @@ class InfoTip extends React.Component {
 class MultiButtonGroup extends React.Component {
   constructor(...args) {
     super(...args);
+    this.buttonContainerRef = /*#__PURE__*/React.createRef();
     this.toggleSelect = newValue => {
       const values = (this.props.values || []).slice(0);
       const allowEmpty = this.props.allowEmpty;
@@ -31662,9 +31720,8 @@ class MultiButtonGroup extends React.Component {
     };
   }
   focus() {
-    var _ReactDOM$findDOMNode;
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    (_ReactDOM$findDOMNode = ReactDOM.findDOMNode(this)) == null || _ReactDOM$findDOMNode.focus();
+    var _this$buttonContainer;
+    (_this$buttonContainer = this.buttonContainerRef.current) == null || _this$buttonContainer.focus();
     return true;
   }
   render() {
@@ -31685,7 +31742,8 @@ class MultiButtonGroup extends React.Component {
       display: "inline-block"
     };
     return /*#__PURE__*/React.createElement("div", {
-      style: outerStyle
+      style: outerStyle,
+      ref: this.buttonContainerRef
     }, buttons);
   }
 }
@@ -31726,7 +31784,7 @@ const styles$e = StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["onFormatChange", "checkValidity", "useArrowKeys"];
+const _excluded$4 = ["onFormatChange", "checkValidity", "useArrowKeys"];
 const {
   firstNumericalParse,
   captureScratchpadTouchStart
@@ -31756,22 +31814,25 @@ const getNumericFormat = KhanMath.getNumericFormat;
 class NumberInput extends React.Component {
   constructor(...args) {
     super(...args);
+    this.inputRef = /*#__PURE__*/React.createRef();
     this.state = {
       format: this.props.format
     };
+    this._getInput = () => {
+      if (!this.inputRef.current) {
+        throw new PerseusError("Input ref accessed before set", Errors.Internal);
+      }
+      return this.inputRef.current;
+    };
     /* Return the current "value" of this input
      * If empty, it returns the placeholder (if it is a number) or null
      */
     this.getValue = () => {
-      return this.parseInputValue(
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.input).value // eslint-disable-line react/no-string-refs
-      );
+      return this.parseInputValue(this._getInput().value);
     };
     /* Return the current string value of this input */
     this.getStringValue = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
+      return this._getInput().toString();
     };
     this.parseInputValue = value => {
       if (value === "") {
@@ -31783,26 +31844,21 @@ class NumberInput extends React.Component {
     };
     /* Set text input focus to this input */
     this.focus = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+      this._getInput().focus();
       this._handleFocus();
     };
     this.blur = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
+      this._getInput().blur();
       this._handleBlur();
     };
     this.setSelectionRange = (selectionStart, selectionEnd) => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-      ReactDOM__default.findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
+      this._getInput().setSelectionRange(selectionStart, selectionEnd);
     };
     this.getSelectionStart = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this).selectionStart;
+      return this._getInput().selectionStart;
     };
     this.getSelectionEnd = () => {
-      // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-      return ReactDOM__default.findDOMNode(this).selectionEnd;
+      return this._getInput().selectionEnd;
     };
     this._checkValidity = value => {
       if (value == null) {
@@ -31862,9 +31918,7 @@ class NumberInput extends React.Component {
       }
     };
     this._setValue = (val, format) => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'val' does not exist on type 'JQueryStatic'.
-      $(ReactDOM__default.findDOMNode(this.refs.input)).val(toNumericString(val, format));
+      this._getInput().value = toNumericString(val, format);
     };
   }
   componentDidUpdate(prevProps) {
@@ -31884,13 +31938,11 @@ class NumberInput extends React.Component {
       classes = classes + " " + this.props.className;
     }
     const _this$props = this.props,
-      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
     return /*#__PURE__*/React.createElement("input", _extends({}, restProps, {
       className: classes,
-      type: "text"
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "input",
+      type: "text",
+      ref: this.inputRef,
       onChange: this._handleChange,
       onFocus: this._handleFocus,
       onBlur: this._handleBlur,
@@ -32811,12 +32863,12 @@ const MafsCssTransformWrapper = ({
   }
 }, children);
 
-const _excluded$1 = ["children"];
+const _excluded$3 = ["children"];
 const TextLabel = _ref => {
   let {
       children
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(Text$1, _extends({
     size: 16,
     svgTextProps: {
@@ -33397,15 +33449,18 @@ function useControlPoint(params) {
   } = useGraphConfig();
   const {
     point,
-    sequenceNumber,
+    ariaDescribedBy,
+    ariaLabel,
+    ariaLive = "polite",
     color,
-    cursor,
     constrain = p => snap(snapStep, p),
+    cursor,
+    forwardedRef = noop$1,
+    sequenceNumber = 1,
     onMove = noop$1,
     onClick = noop$1,
     onFocus = noop$1,
-    onBlur = noop$1,
-    forwardedRef = noop$1
+    onBlur = noop$1
   } = params;
   const {
     strings,
@@ -33428,6 +33483,13 @@ function useControlPoint(params) {
     onMove,
     constrainKeyboardMovement: constrain
   });
+
+  // if custom aria label is not provided, will use default of sequence number and point coordinates
+  const pointAriaLabel = ariaLabel || strings.srPointAtCoordinates({
+    num: sequenceNumber,
+    x: srFormatNumber(point[X], locale),
+    y: srFormatNumber(point[Y], locale)
+  });
   useLayoutEffect(() => {
     setForwardedRef(forwardedRef, focusableHandleRef.current);
   }, [forwardedRef]);
@@ -33437,15 +33499,9 @@ function useControlPoint(params) {
     tabIndex: disableKeyboardInteraction ? -1 : 0,
     ref: focusableHandleRef,
     role: "button",
-    "aria-label": strings.srPointAtCoordinates({
-      num: sequenceNumber,
-      x: srFormatNumber(point[X], locale),
-      y: srFormatNumber(point[Y], locale)
-    })
-    // aria-live="assertive" causes the new location of the point to be
-    // announced immediately on move.
-    ,
-    "aria-live": "assertive",
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": pointAriaLabel,
+    "aria-live": ariaLive,
     onFocus: event => {
       onFocus(event);
       setFocused(true);
@@ -36451,7 +36507,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 
 const eq$1 = Util.eq;
-const deepEq$2 = Util.deepEq;
+const deepEq$3 = Util.deepEq;
 function scoreInteractiveGraph(userInput, rubric) {
   // None-type graphs are not graded
   if (userInput.type === "none" && rubric.correct.type === "none") {
@@ -36501,7 +36557,7 @@ function scoreInteractiveGraph(userInput, rubric) {
       // If the parabola coefficients match, it's correct.
       const guessCoeffs = getQuadraticCoefficients(userInput.coords);
       const correctCoeffs = getQuadraticCoefficients(rubric.correct.coords);
-      if (deepEq$2(guessCoeffs, correctCoeffs)) {
+      if (deepEq$3(guessCoeffs, correctCoeffs)) {
         return {
           type: "points",
           earned: 1,
@@ -36515,7 +36571,7 @@ function scoreInteractiveGraph(userInput, rubric) {
       const canonicalGuessCoeffs = canonicalSineCoefficients$1(guessCoeffs);
       const canonicalCorrectCoeffs = canonicalSineCoefficients$1(correctCoeffs);
       // If the canonical coefficients match, it's correct.
-      if (deepEq$2(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
+      if (deepEq$3(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
         return {
           type: "points",
           earned: 1,
@@ -36524,7 +36580,7 @@ function scoreInteractiveGraph(userInput, rubric) {
         };
       }
     } else if (userInput.type === "circle" && rubric.correct.type === "circle") {
-      if (deepEq$2(userInput.center, rubric.correct.center) && eq$1(userInput.radius, rubric.correct.radius)) {
+      if (deepEq$3(userInput.center, rubric.correct.center) && eq$1(userInput.radius, rubric.correct.radius)) {
         return {
           type: "points",
           earned: 1,
@@ -36546,7 +36602,7 @@ function scoreInteractiveGraph(userInput, rubric) {
       guess == null || guess.sort();
       // @ts-expect-error - TS2339 - Property 'sort' does not exist on type 'readonly Coord[]'.
       correct.sort();
-      if (deepEq$2(guess, correct)) {
+      if (deepEq$3(guess, correct)) {
         return {
           type: "points",
           earned: 1,
@@ -36568,7 +36624,7 @@ function scoreInteractiveGraph(userInput, rubric) {
         /* exact */
         guess.sort();
         correct.sort();
-        match = deepEq$2(guess, correct);
+        match = deepEq$3(guess, correct);
       }
       if (match) {
         return {
@@ -36583,7 +36639,7 @@ function scoreInteractiveGraph(userInput, rubric) {
       let correct = Util.deepClone(rubric.correct.coords);
       guess = _.invoke(guess, "sort").sort();
       correct = _.invoke(correct, "sort").sort();
-      if (deepEq$2(guess, correct)) {
+      if (deepEq$3(guess, correct)) {
         return {
           type: "points",
           earned: 1,
@@ -36594,7 +36650,7 @@ function scoreInteractiveGraph(userInput, rubric) {
     } else if (userInput.type === "ray" && rubric.correct.type === "ray" && userInput.coords != null) {
       const guess = userInput.coords;
       const correct = rubric.correct.coords;
-      if (deepEq$2(guess[0], correct[0]) && collinear(correct[0], correct[1], guess[1])) {
+      if (deepEq$3(guess[0], correct[0]) && collinear(correct[0], correct[1], guess[1])) {
         return {
           type: "points",
           earned: 1,
@@ -36621,7 +36677,7 @@ function scoreInteractiveGraph(userInput, rubric) {
         /* exact */
         match =
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-        deepEq$2(guess[1], correct[1]) &&
+        deepEq$3(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'.
@@ -40795,6 +40851,7 @@ const getPromptJSON$7 = () => {
   return getUnsupportedPromptJSON("measurer");
 };
 
+const _excluded$2 = ["imageUrl", "imageTop", "imageLeft"];
 const defaultImage = {
   url: null,
   top: 0,
@@ -40901,14 +40958,19 @@ Measurer.defaultProps = {
 };
 const propUpgrades = {
   "1": v0props => {
-    const v1props = _(v0props).chain().omit("imageUrl", "imageTop", "imageLeft").extend({
+    const {
+        imageUrl,
+        imageTop,
+        imageLeft
+      } = v0props,
+      rest = _objectWithoutPropertiesLoose(v0props, _excluded$2);
+    return _extends({}, rest, {
       image: {
-        url: v0props.imageUrl,
-        top: v0props.imageTop,
-        left: v0props.imageLeft
+        url: imageUrl,
+        top: imageTop,
+        left: imageLeft
       }
-    }).value();
-    return v1props;
+    });
   }
 };
 var Measurer$1 = {
@@ -42436,14 +42498,28 @@ const getPromptJSON$5 = (renderProps, userInput) => {
   };
 };
 
-function scoreOrderer(userInput, rubric) {
+/**
+ * Checks user input from the orderer widget to see if the user has started
+ * ordering the options, making the widget scorable.
+ * @param userInput
+ * @see `scoreOrderer` for more details.
+ */
+function validateOrderer(userInput) {
   if (userInput.current.length === 0) {
     return {
       type: "invalid",
       message: null
     };
   }
-  const correct = _.isEqual(userInput.current, _.pluck(rubric.correctOptions, "content"));
+  return null;
+}
+
+function scoreOrderer(userInput, rubric) {
+  const validateError = validateOrderer(userInput);
+  if (validateError) {
+    return validateError;
+  }
+  const correct = _.isEqual(userInput.current, rubric.correctOptions.map(option => option.content));
   return {
     type: "points",
     earned: correct ? 1 : 0,
@@ -42623,8 +42699,6 @@ Card.defaultProps = {
   animating: false,
   linterContext: linterContextDefault
 };
-const NORMAL = "normal";
-const HORIZONTAL = "horizontal";
 class Orderer extends React.Component {
   constructor(...args) {
     super(...args);
@@ -42771,7 +42845,7 @@ class Orderer extends React.Component {
     };
     this.findCorrectIndex = (draggable, list) => {
       // Find the correct index for a card given the current cards.
-      const isHorizontal = this.props.layout === HORIZONTAL;
+      const isHorizontal = this.props.layout === "horizontal";
       // eslint-disable-next-line react/no-string-refs
       // @ts-expect-error - TS2769 - No overload matches this call.
       const $dragList = $(ReactDOM__default.findDOMNode(this.refs.dragList));
@@ -42821,28 +42895,24 @@ class Orderer extends React.Component {
       if (draggable == null) {
         return false;
       }
-      const isHorizontal = this.props.layout === HORIZONTAL,
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        $draggable = $(ReactDOM__default.findDOMNode(draggable)),
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        $bank = $(ReactDOM__default.findDOMNode(this.refs.bank)),
-        // @ts-expect-error - TS2339 - Property 'offset' does not exist on type 'JQueryStatic'.
-        draggableOffset = $draggable.offset(),
-        // @ts-expect-error - TS2339 - Property 'offset' does not exist on type 'JQueryStatic'.
-        bankOffset = $bank.offset(),
-        // @ts-expect-error - TS2339 - Property 'outerHeight' does not exist on type 'JQueryStatic'.
-        draggableHeight = $draggable.outerHeight(true),
-        // @ts-expect-error - TS2339 - Property 'outerHeight' does not exist on type 'JQueryStatic'.
-        bankHeight = $bank.outerHeight(true),
-        // @ts-expect-error - TS2339 - Property 'outerWidth' does not exist on type 'JQueryStatic'.
-        bankWidth = $bank.outerWidth(true),
-        // eslint-disable-next-line react/no-string-refs
-        dragList = ReactDOM__default.findDOMNode(this.refs.dragList);
-        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'width' does not exist on type 'JQueryStatic'.
-        $(dragList).width();
-        const // @ts-expect-error - TS2339 - Property 'outerWidth' does not exist on type 'JQueryStatic'.
-        draggableWidth = $draggable.outerWidth(true);
+      const isHorizontal = this.props.layout === "horizontal";
+      // @ts-expect-error - TS2769 - No overload matches this call.
+      const $draggable = $(ReactDOM__default.findDOMNode(draggable));
+      // eslint-disable-next-line react/no-string-refs
+      // @ts-expect-error - TS2769 - No overload matches this call.
+      const $bank = $(ReactDOM__default.findDOMNode(this.refs.bank));
+      // @ts-expect-error - TS2339 - Property 'offset' does not exist on type 'JQueryStatic'.
+      const draggableOffset = $draggable.offset();
+      // @ts-expect-error - TS2339 - Property 'offset' does not exist on type 'JQueryStatic'.
+      const bankOffset = $bank.offset();
+      // @ts-expect-error - TS2339 - Property 'outerHeight' does not exist on type 'JQueryStatic'.
+      const draggableHeight = $draggable.outerHeight(true);
+      // @ts-expect-error - TS2339 - Property 'outerHeight' does not exist on type 'JQueryStatic'.
+      const bankHeight = $bank.outerHeight(true);
+      // @ts-expect-error - TS2339 - Property 'outerWidth' does not exist on type 'JQueryStatic'.
+      const bankWidth = $bank.outerWidth(true);
+      // @ts-expect-error - TS2339 - Property 'outerWidth' does not exist on type 'JQueryStatic'.
+      const draggableWidth = $draggable.outerWidth(true);
       if (isHorizontal) {
         return draggableOffset.top + draggableHeight / 2 < bankOffset.top + bankHeight;
       }
@@ -42991,8 +43061,8 @@ Orderer.defaultProps = {
   current: [],
   options: [],
   correctOptions: [],
-  height: NORMAL,
-  layout: HORIZONTAL,
+  height: "normal",
+  layout: "horizontal",
   linterContext: linterContextDefault
 };
 var Orderer$1 = {
@@ -43271,18 +43341,36 @@ const getPromptJSON$3 = () => {
 };
 
 const {
-  deepEq: deepEq$1
+  deepEq: deepEq$2
 } = Util;
-function scorePlotter(userInput, rubric) {
-  if (deepEq$1(userInput, rubric.starting)) {
+
+/**
+ * Checks user input to confirm it is not the same as the starting values for the graph.
+ * This means the user has modified the graph, and the question can be scored.
+ *
+ * @see 'scorePlotter' for more details on scoring.
+ */
+function validatePlotter(userInput, validationData) {
+  if (deepEq$2(userInput, validationData.starting)) {
     return {
       type: "invalid",
       message: null
     };
   }
+  return null;
+}
+
+const {
+  deepEq: deepEq$1
+} = Util;
+function scorePlotter(userInput, scoringData) {
+  const validationError = validatePlotter(userInput, scoringData);
+  if (validationError) {
+    return validationError;
+  }
   return {
     type: "points",
-    earned: deepEq$1(userInput, rubric.correct) ? 1 : 0,
+    earned: deepEq$1(userInput, scoringData.correct) ? 1 : 0,
     total: 1,
     message: null
   };
@@ -44167,7 +44255,14 @@ const getPromptJSON$1 = userInput => {
   };
 };
 
-function scoreSorter(userInput, rubric) {
+/**
+ * Checks user input for the sorter widget to ensure that the user has made
+ * changes before attempting to score the widget.
+ * @param userInput
+ * @see 'scoreSorter' in 'packages/perseus/src/widgets/sorter/score-sorter.ts'
+ * for more details on how the sorter widget is scored.
+ */
+function validateSorter(userInput) {
   // 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
@@ -44180,6 +44275,14 @@ function scoreSorter(userInput, rubric) {
       message: null
     };
   }
+  return null;
+}
+
+function scoreSorter(userInput, rubric) {
+  const validationError = validateSorter(userInput);
+  if (validationError) {
+    return validationError;
+  }
   const correct = Util.deepEq(userInput.options, rubric.correct);
   return {
     type: "points",
@@ -44758,7 +44861,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "43.0.1";
+const libVersion = "44.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46362,7 +46465,7 @@ const str = {
   }
 };
 
-const _excluded = ["item", "children", "shape", "serializedState", "onSerializedStateUpdated"];
+const _excluded$1 = ["item", "children", "shape", "serializedState", "onSerializedStateUpdated"];
 
 // TODO(mdr)
 // TODO(mdr)
@@ -46447,7 +46550,7 @@ class MultiRenderer extends React.Component {
     // explicitly pulling them out of `this.props` so I don't pass them to
     // `<Renderer>`. I'm not sure how else to do this.
     const _this$props = this.props,
-      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+      otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     return _extends({}, otherProps, {
       strings: this.context.strings
     });
@@ -48251,6 +48354,27 @@ function pair(parseA, parseB) {
   };
 }
 
+function pipeParsers(p) {
+  return new ParserPipeline(p);
+}
+class ParserPipeline {
+  constructor(parser) {
+    this.parser = parser;
+  }
+  then(nextParser) {
+    return new ParserPipeline(composeParsers(this.parser, nextParser));
+  }
+}
+function composeParsers(parserA, parserB) {
+  return (rawValue, ctx) => {
+    const partialResult = parserA(rawValue, ctx);
+    if (isFailure(partialResult)) {
+      return partialResult;
+    }
+    return parserB(partialResult.value, ctx);
+  };
+}
+
 function record(parseKey, parseValue) {
   return (rawValue, ctx) => {
     if (!isObject(rawValue)) {
@@ -48331,6 +48455,20 @@ function either(parseA, parseB) {
   };
 }
 
+function defaulted(parser, fallback) {
+  return (rawValue, ctx) => {
+    if (rawValue == null) {
+      return success(fallback(rawValue));
+    }
+    return parser(rawValue, ctx);
+  };
+}
+
+const parseImages = defaulted(record(string, object({
+  width: number,
+  height: number
+})), () => ({}));
+
 function parseWidget(parseType, parseOptions) {
   return object({
     type: parseType,
@@ -48339,10 +48477,21 @@ function parseWidget(parseType, parseOptions) {
     alignment: optional(string),
     options: parseOptions,
     key: optional(number),
-    version: object({
+    version: optional(object({
       major: number,
       minor: number
-    })
+    }))
+  });
+}
+function parseWidgetWithVersion(parseVersion, parseType, parseOptions) {
+  return object({
+    type: parseType,
+    static: optional(boolean),
+    graded: optional(boolean),
+    alignment: optional(string),
+    options: parseOptions,
+    key: optional(number),
+    version: parseVersion
   });
 }
 
@@ -48350,7 +48499,7 @@ const parseCategorizerWidget = parseWidget(constant("categorizer"), object({
   items: array(string),
   categories: array(string),
   randomizeItems: boolean,
-  static: boolean,
+  static: defaulted(boolean, () => false),
   values: array(number),
   highlightLint: optional(boolean),
   linterContext: optional(object({
@@ -48382,7 +48531,9 @@ const parseDefinitionWidget = parseWidget(constant("definition"), object({
 
 const parseDropdownWidget = parseWidget(constant("dropdown"), object({
   placeholder: string,
-  static: boolean,
+  ariaLabel: optional(string),
+  visibleLabel: optional(string),
+  static: defaulted(boolean, () => false),
   choices: array(object({
     content: string,
     correct: boolean
@@ -48405,9 +48556,12 @@ const parseAnswerForm = object({
   form: boolean,
   simplify: boolean,
   considered: enumeration("correct", "wrong", "ungraded"),
-  key: optional(string)
+  key: pipeParsers(optional(union(string).or(number).parser)).then((key, ctx) => ctx.success(String(key))).parser
 });
-const parseExpressionWidget = parseWidget(constant("expression"), object({
+const parseExpressionWidgetV1 = parseWidgetWithVersion(object({
+  major: constant(1),
+  minor: number
+}), constant("expression"), object({
   answerForms: array(parseAnswerForm),
   functions: array(string),
   times: boolean,
@@ -48416,23 +48570,68 @@ const parseExpressionWidget = parseWidget(constant("expression"), object({
   buttonSets: array(enumeration("basic", "basic+div", "trig", "prealgebra", "logarithms", "basic relations", "advanced relations")),
   buttonsVisible: optional(enumeration("always", "never", "focused"))
 }));
+const parseExpressionWidgetV0 = parseWidgetWithVersion(optional(object({
+  major: constant(0),
+  minor: number
+})), constant("expression"), object({
+  functions: array(string),
+  times: boolean,
+  visibleLabel: optional(string),
+  ariaLabel: optional(string),
+  form: boolean,
+  simplify: boolean,
+  value: string,
+  buttonSets: array(enumeration("basic", "basic+div", "trig", "prealgebra", "logarithms", "basic relations", "advanced relations")),
+  buttonsVisible: optional(enumeration("always", "never", "focused"))
+}));
+function migrateV0ToV1(widget, ctx) {
+  const {
+    options
+  } = widget;
+  return ctx.success(_extends({}, widget, {
+    version: {
+      major: 1,
+      minor: 0
+    },
+    options: {
+      times: options.times,
+      buttonSets: options.buttonSets,
+      functions: options.functions,
+      buttonsVisible: options.buttonsVisible,
+      visibleLabel: options.visibleLabel,
+      ariaLabel: options.ariaLabel,
+      answerForms: [{
+        considered: "correct",
+        form: options.form,
+        simplify: options.simplify,
+        value: options.value
+      }]
+    }
+  }));
+}
+const parseExpressionWidget = union(parseExpressionWidgetV1).or(pipeParsers(parseExpressionWidgetV0).then(migrateV0ToV1).parser).parser;
 
-const parsePerseusRenderer = object({
-  content: string,
+const parsePerseusRenderer = defaulted(object({
+  // TODO(benchristel): content is also defaulted to empty string in
+  // renderer.tsx. See if we can remove one default or the other.
+  content: defaulted(string, () => ""),
   // This module has an import cycle with parseWidgetsMap, because the
   // `group` widget can contain another renderer.
   // The anonymous function below ensures that we don't try to access
   // parseWidgetsMap before it's defined.
-  widgets: (rawVal, ctx) => parseWidgetsMap(rawVal, ctx),
+  widgets: defaulted((rawVal, ctx) => parseWidgetsMap(rawVal, ctx), () => ({})),
   metadata: optional(array(string)),
-  images: record(string, object({
-    width: number,
-    height: number
-  }))
-});
+  images: parseImages
+}),
+// Default value
+() => ({
+  content: "",
+  widgets: {},
+  images: {}
+}));
 
 const parseGradedGroupWidgetOptions = object({
-  title: string,
+  title: defaulted(string, () => ""),
   hasHint: optional(nullable(boolean)),
   // This module has an import cycle with parsePerseusRenderer.
   // The anonymous function below ensures that we don't try to access
@@ -48526,7 +48725,7 @@ const parseIframeWidget = parseWidget(constant("iframe"), object({
   height: union(number).or(string).parser,
   allowFullScreen: boolean,
   allowTopNavigation: optional(boolean),
-  static: boolean
+  static: defaulted(boolean, () => false)
 }));
 
 const parsePerseusImageBackground = object({
@@ -48905,13 +49104,13 @@ const parseMatcherWidget = parseWidget(constant("matcher"), object({
   padding: boolean
 }));
 
-const parseMatrixWidget = parseWidget(constant("matrix"), object({
-  prefix: string,
-  suffix: string,
+const parseMatrixWidget = parseWidget(defaulted(constant("matrix"), () => "matrix"), object({
+  prefix: optional(string),
+  suffix: optional(string),
   answers: array(array(number)),
-  cursorPosition: array(number),
+  cursorPosition: optional(array(number)),
   matrixBoardSize: array(number),
-  static: boolean
+  static: optional(boolean)
 }));
 
 const parseMeasurerWidget = parseWidget(constant("measurer"), object({
@@ -48981,8 +49180,8 @@ const parseOrdererWidget = parseWidget(constant("orderer"), object({
   options: array(parseRenderer),
   correctOptions: array(parseRenderer),
   otherOptions: array(parseRenderer),
-  height: string,
-  layout: string
+  height: enumeration("normal", "auto"),
+  layout: enumeration("horizontal", "vertical")
 }));
 
 const parsePassageRefWidget = parseWidget(constant("passage-ref"), object({
@@ -49027,7 +49226,7 @@ const parsePythonProgramWidget = parseWidget(constant("python-program"), object(
 
 const parseRadioWidget = parseWidget(constant("radio"), object({
   choices: array(object({
-    content: string,
+    content: defaulted(string, () => ""),
     clue: optional(string),
     correct: optional(boolean),
     isNoneOfTheAbove: optional(boolean),
@@ -49188,26 +49387,42 @@ const parseWidgetMapKeyComponents = pair(string, parseStringToPositiveInt);
 const parseHint = object({
   replace: optional(boolean),
   content: string,
-  widgets: parseWidgetsMap,
+  widgets: defaulted(parseWidgetsMap, () => ({})),
   metadata: optional(array(string)),
-  images: record(string, object({
-    width: number,
-    height: number
-  }))
+  images: parseImages
 });
 
+const _excluded = ["type", "options"];
 object({
   question: parsePerseusRenderer,
-  hints: array(parseHint),
-  answerArea: record(enumeration(...ItemExtras), boolean),
-  itemDataVersion: object({
+  hints: defaulted(array(parseHint), () => []),
+  answerArea: pipeParsers(defaulted(object({}), () => ({}))).then(migrateAnswerArea).then(record(enumeration(...ItemExtras), boolean)).parser,
+  itemDataVersion: optional(object({
     major: number,
     minor: number
-  }),
+  })),
   // Deprecated field
   answer: any
 });
 
+// Some answerAreas have extra fields, like:
+//
+//   "answerArea": {
+//     "type": "multiple",
+//     "options": {
+//       "content": "",
+//       "images": {},
+//       "widgets": {}
+//     }
+//   }
+//
+// The "type" and "options" fields don't seem to be used anywhere. This
+// migration function removes them.
+function migrateAnswerArea(rawValue, ctx) {
+  const rest = _objectWithoutPropertiesLoose(rawValue, _excluded);
+  return ctx.success(rest);
+}
+
 /**
  * Helper to parse PerseusItem JSON
  * Why not just use JSON.parse? We want: