@khanacademy/perseus 43.0.1 → 44.0.0

package/dist/index.js

@@ -384,7 +384,8 @@ const mockStrings = {
     } = _ref28;
     return `Interactive elements: ${elements}`;
   },
-  srNoInteractiveElements: "No interactive elements"
+  srNoInteractiveElements: "No interactive elements",
+  selectAnAnswer: "Select an answer"
 };
 
 /**
@@ -2882,8 +2883,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;
@@ -2960,8 +2959,8 @@ function shuffle$3(array, randomSeed) {
   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];
@@ -3293,13 +3292,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;
       }
     }
@@ -3317,10 +3316,10 @@ function deepEq$6(x, y) {
   if (typeof x === "object" && typeof y === "object" && !!x && !!y) {
     return x === y || ___default["default"].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);
     }) && ___default["default"].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) {
@@ -3599,7 +3598,7 @@ const Util = {
   tickStepFromNumTicks,
   constrainedTickStepsFromTickSteps,
   eq: eq$4,
-  deepEq: deepEq$6,
+  deepEq: deepEq$7,
   parseQueryString,
   updateQueryString: updateQueryString$2,
   strongEncodeURIComponent,
@@ -9002,7 +9001,6 @@ var Tex$1 = {
   }
 };
 
-/* eslint-disable @babel/no-invalid-this */
 const {
   processMath: processMath$1
 } = Tex$1;
@@ -10632,7 +10630,9 @@ const getClipPoint = function (graph, coord, angle) {
   return clipPoint;
 };
 
-/* eslint-disable @babel/no-invalid-this */
+/**
+ * Default methods for a wrapped movable.
+ */
 
 /*
  * attr() and animate() simply pass the
@@ -10890,7 +10890,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]
@@ -11050,7 +11050,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 = ___default["default"].zip(sides1, sides);
       const factors = ___default["default"].map(sidePairs, function (pair) {
         return pair[0] / pair[1];
@@ -13989,7 +13989,7 @@ ___default["default"].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
@@ -14086,7 +14086,7 @@ const createSimpleClass = function (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;
@@ -16744,7 +16744,7 @@ var Movables = {
 const GraphieMovable = GraphieClasses.GraphieMovable;
 const createGraphie = GraphUtils.createGraphie;
 const {
-  deepEq: deepEq$3,
+  deepEq: deepEq$4,
   nestedMap
 } = Util;
 const {
@@ -16782,7 +16782,7 @@ class Graphie extends React__namespace.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.", perseusCore.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();
@@ -16830,7 +16830,7 @@ class Graphie extends React__namespace.Component {
   };
   _setupGraphie = () => {
     this._removeMovables();
-    const graphieDiv = ReactDOM__default["default"].findDOMNode(this.graphieDivRef.current);
+    const graphieDiv = this.graphieDivRef.current;
     if (graphieDiv == null || graphieDiv instanceof Text) {
       throw new Error("No graphie container div found");
     }
@@ -18557,7 +18557,6 @@ const styles$C = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable no-useless-escape, no-prototype-builtins */
 const rules$1 = {
   ...pureMarkdown.pureMarkdownRules,
   // NOTE: basically ignored by JIPT. wraps everything at the outer layer
@@ -18734,7 +18733,7 @@ const rules$1 = {
       // 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'.
@@ -21144,6 +21143,7 @@ function uniqueIdForInput() {
   return `${prefix}${lastId}`;
 }
 class TextInput extends React__namespace.Component {
+  inputRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     value: "",
     disabled: false
@@ -21157,33 +21157,32 @@ class TextInput extends React__namespace.Component {
       this.id = uniqueIdForInput();
     }
   }
+  _getInput = () => {
+    if (!this.inputRef.current) {
+      throw new perseusCore.PerseusError("Input ref accessed before set", perseusCore.Errors.Internal);
+    }
+    return this.inputRef.current;
+  };
   focus = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).focus();
+    this._getInput().focus();
   };
   blur = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).blur();
+    this._getInput().blur();
   };
   getValue = () => {
-    // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this)?.value;
+    return this.inputRef.current?.value;
   };
   getStringValue = () => {
-    // @ts-expect-error - TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this)?.value.toString();
+    return this.inputRef.current?.value.toString();
   };
   setSelectionRange = (selectionStart, selectionEnd) => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
+    this._getInput().setSelectionRange(selectionStart, selectionEnd);
   };
   getSelectionStart = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionStart;
+    return this._getInput().selectionStart;
   };
   getSelectionEnd = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionEnd;
+    return this._getInput().selectionEnd;
   };
   render() {
     const {
@@ -21198,6 +21197,7 @@ class TextInput extends React__namespace.Component {
     } = this.props;
     const formattedValue = value === null ? "" : value.toString();
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+      ref: this.inputRef,
       style: style,
       disabled: disabled,
       id: this.id,
@@ -21377,6 +21377,7 @@ const HORIZONTAL_ALIGNMNENTS = {
  * ```
  */
 class Tooltip extends React__namespace.Component {
+  tooltipContainerRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     className: "",
     arrowSize: 10,
@@ -21459,8 +21460,7 @@ class Tooltip extends React__namespace.Component {
         display: this.props.show ? "block" : "none"
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      // eslint-disable-next-line react/no-string-refs
-      ref: "tooltipContainer",
+      ref: this.tooltipContainerRef,
       className: "tooltipContainer",
       style: {
         position: "absolute",
@@ -21487,10 +21487,8 @@ class Tooltip extends React__namespace.Component {
     }, this.props.children.slice(1)), arrowBelow));
   }
   _updateHeight() {
-    const tooltipContainer = ReactDOM__default["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?.offsetHeight || 0;
     if (height !== this.state.height) {
       this.setState({
         height
@@ -22219,7 +22217,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) {
@@ -26277,7 +26275,15 @@ const styles$p = aphrodite.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);
@@ -26287,6 +26293,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);
@@ -26766,18 +26783,17 @@ 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,
+      ...rest
+    } = v0props;
+    if (noneOfTheAbove) {
       throw new Error("radio widget v0 no longer supports auto noneOfTheAbove");
     }
-    return ___default["default"].extend(___default["default"].omit(v0props, "noneOfTheAbove"), {
-      choices: choices,
-      hasNoneOfTheAbove: hasNoneOfTheAbove
-    });
+    return {
+      ...rest,
+      hasNoneOfTheAbove: false
+    };
   }
 };
 var Radio = {
@@ -26814,23 +26830,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,
@@ -27384,15 +27413,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,
@@ -27402,6 +27442,7 @@ function scoreDropdown(userInput, rubric) {
 }
 
 class Dropdown extends React__namespace.Component {
+  static contextType = PerseusI18nContext;
   static defaultProps = {
     choices: [],
     selected: 0,
@@ -27444,26 +27485,44 @@ class Dropdown extends React__namespace.Component {
       value: String(i + 1),
       label: choice
     }))];
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      // NOTE(jared): These are required to prevent weird behavior
-      // When there's a dropdown in a zoomable table.
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
+      scope: "dropdown-widget",
+      mockOnFirstRender: true
+    }, ids => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    }, this.props.visibleLabel && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+      tag: "label",
+      id: ids.get("dropdown-label")
+    }, this.props.visibleLabel), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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)));
   }
 }
 const optionsTransform = widgetOptions => {
   return {
     placeholder: widgetOptions.placeholder,
+    visibleLabel: widgetOptions.visibleLabel,
+    ariaLabel: widgetOptions.ariaLabel,
     choices: widgetOptions.choices.map(choice => choice.content)
   };
 };
@@ -27782,8 +27841,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
@@ -28453,7 +28510,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 = {
@@ -28554,14 +28610,14 @@ const Linear = ___default["default"].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);
   }
 });
@@ -28585,9 +28641,9 @@ const Quadratic = ___default["default"].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) {
@@ -28599,9 +28655,9 @@ const Quadratic = ___default["default"].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);
   }
 });
@@ -28620,10 +28676,10 @@ const Sinusoid = ___default["default"].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) {
@@ -28636,10 +28692,10 @@ const Sinusoid = ___default["default"].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) {
@@ -28659,18 +28715,18 @@ const Tangent = ___default["default"].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) {
@@ -28729,9 +28785,9 @@ const Exponential = ___default["default"].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) {
@@ -28739,9 +28795,9 @@ const Exponential = ___default["default"].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);
   }
 });
@@ -28786,9 +28842,9 @@ const Logarithm = ___default["default"].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) {
@@ -28796,9 +28852,9 @@ const Logarithm = ___default["default"].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);
   }
 });
@@ -28822,16 +28878,16 @@ const AbsoluteValue = ___default["default"].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);
   }
 });
@@ -30592,6 +30648,7 @@ function numSteps$1(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
 class Graph extends React__namespace.Component {
+  graphieDivRef = /*#__PURE__*/React__namespace.createRef();
   protractor;
   ruler;
   _graphie;
@@ -30671,9 +30728,7 @@ class Graph extends React__namespace.Component {
     if (this._hasSetupGraphieThisUpdate) {
       return;
     }
-
-    // eslint-disable-next-line react/no-string-refs
-    const graphieDiv = ReactDOM__default["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'.
     $__default["default"](graphieDiv).empty();
 
@@ -30862,7 +30917,7 @@ class Graph extends React__namespace.Component {
       onClick: this.onClick
     }, image, /*#__PURE__*/React__namespace.createElement("div", {
       className: "graphie",
-      ref: "graphieDiv"
+      ref: this.graphieDivRef
     }));
   }
 }
@@ -31948,13 +32003,13 @@ class InfoTip extends React__namespace.Component {
  * this component allows multiple selection!
  */
 class MultiButtonGroup extends React__namespace.Component {
+  buttonContainerRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     values: [],
     allowEmpty: true
   };
   focus() {
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__namespace.findDOMNode(this)?.focus();
+    this.buttonContainerRef.current?.focus();
     return true;
   }
   toggleSelect = newValue => {
@@ -31989,7 +32044,8 @@ class MultiButtonGroup extends React__namespace.Component {
       display: "inline-block"
     };
     return /*#__PURE__*/React__namespace.createElement("div", {
-      style: outerStyle
+      style: outerStyle,
+      ref: this.buttonContainerRef
     }, buttons);
   }
 }
@@ -32054,6 +32110,7 @@ const getNumericFormat = KhanMath.getNumericFormat;
  */
 class NumberInput extends React__namespace.Component {
   static contextType = PerseusI18nContext;
+  inputRef = /*#__PURE__*/React__namespace.createRef();
   static propTypes = {
     value: PropTypes__default["default"].number,
     format: PropTypes__default["default"].string,
@@ -32080,23 +32137,24 @@ class NumberInput extends React__namespace.Component {
       this._setValue(this.props.value, this.state.format);
     }
   }
+  _getInput = () => {
+    if (!this.inputRef.current) {
+      throw new perseusCore.PerseusError("Input ref accessed before set", perseusCore.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
    */
   getValue = () => {
-    return this.parseInputValue(
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    ReactDOM__default["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 */
   getStringValue = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
+    return this._getInput().toString();
   };
-
   parseInputValue = value => {
     if (value === "") {
       const placeholder = this.props.placeholder;
@@ -32108,26 +32166,21 @@ class NumberInput extends React__namespace.Component {
 
   /* Set text input focus to this input */
   focus = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+    this._getInput().focus();
     this._handleFocus();
   };
   blur = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
+    this._getInput().blur();
     this._handleBlur();
   };
   setSelectionRange = (selectionStart, selectionEnd) => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-    ReactDOM__default["default"].findDOMNode(this).setSelectionRange(selectionStart, selectionEnd);
+    this._getInput().setSelectionRange(selectionStart, selectionEnd);
   };
   getSelectionStart = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionStart;
+    return this._getInput().selectionStart;
   };
   getSelectionEnd = () => {
-    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-    return ReactDOM__default["default"].findDOMNode(this).selectionEnd;
+    return this._getInput().selectionEnd;
   };
   _checkValidity = value => {
     if (value == null) {
@@ -32187,9 +32240,7 @@ class NumberInput extends React__namespace.Component {
     }
   };
   _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'.
-    $__default["default"](ReactDOM__default["default"].findDOMNode(this.refs.input)).val(toNumericString(val, format));
+    this._getInput().value = toNumericString(val, format);
   };
   render() {
     let classes = classNames__default["default"]({
@@ -32213,10 +32264,8 @@ class NumberInput extends React__namespace.Component {
     } = this.props;
     return /*#__PURE__*/React__namespace.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,
@@ -33711,15 +33760,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,
@@ -33742,6 +33794,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)
+  });
   React.useLayoutEffect(() => {
     setForwardedRef(forwardedRef, focusableHandleRef.current);
   }, [forwardedRef]);
@@ -33751,15 +33810,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);
@@ -36835,7 +36888,7 @@ const StatefulMafsGraph = /*#__PURE__*/React__namespace.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") {
@@ -36885,7 +36938,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,
@@ -36899,7 +36952,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,
@@ -36908,7 +36961,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,
@@ -36930,7 +36983,7 @@ function scoreInteractiveGraph(userInput, rubric) {
       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,
@@ -36952,7 +37005,7 @@ function scoreInteractiveGraph(userInput, rubric) {
         /* exact */
         guess.sort();
         correct.sort();
-        match = deepEq$2(guess, correct);
+        match = deepEq$3(guess, correct);
       }
       if (match) {
         return {
@@ -36967,7 +37020,7 @@ function scoreInteractiveGraph(userInput, rubric) {
       let correct = Util.deepClone(rubric.correct.coords);
       guess = ___default["default"].invoke(guess, "sort").sort();
       correct = ___default["default"].invoke(correct, "sort").sort();
-      if (deepEq$2(guess, correct)) {
+      if (deepEq$3(guess, correct)) {
         return {
           type: "points",
           earned: 1,
@@ -36978,7 +37031,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,
@@ -37005,7 +37058,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'.
@@ -41267,14 +41320,20 @@ class Measurer extends React__namespace.Component {
 }
 const propUpgrades = {
   "1": v0props => {
-    const v1props = ___default["default"](v0props).chain().omit("imageUrl", "imageTop", "imageLeft").extend({
+    const {
+      imageUrl,
+      imageTop,
+      imageLeft,
+      ...rest
+    } = v0props;
+    return {
+      ...rest,
       image: {
-        url: v0props.imageUrl,
-        top: v0props.imageTop,
-        left: v0props.imageLeft
+        url: imageUrl,
+        top: imageTop,
+        left: imageLeft
       }
-    }).value();
-    return v1props;
+    };
   }
 };
 var Measurer$1 = {
@@ -42808,14 +42867,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 = ___default["default"].isEqual(userInput.current, ___default["default"].pluck(rubric.correctOptions, "content"));
+  return null;
+}
+
+function scoreOrderer(userInput, rubric) {
+  const validateError = validateOrderer(userInput);
+  if (validateError) {
+    return validateError;
+  }
+  const correct = ___default["default"].isEqual(userInput.current, rubric.correctOptions.map(option => option.content));
   return {
     type: "points",
     earned: correct ? 1 : 0,
@@ -42991,15 +43064,13 @@ class Card extends React__namespace.Component {
     }))));
   }
 }
-const NORMAL = "normal";
-const HORIZONTAL = "horizontal";
 class Orderer extends React__namespace.Component {
   static defaultProps = {
     current: [],
     options: [],
     correctOptions: [],
-    height: NORMAL,
-    layout: HORIZONTAL,
+    height: "normal",
+    layout: "horizontal",
     linterContext: PerseusLinter.linterContextDefault
   };
   state = {
@@ -43152,7 +43223,7 @@ class Orderer extends React__namespace.Component {
   };
   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 = $__default["default"](ReactDOM__default["default"].findDOMNode(this.refs.dragList));
@@ -43202,28 +43273,24 @@ class Orderer extends React__namespace.Component {
     if (draggable == null) {
       return false;
     }
-    const isHorizontal = this.props.layout === HORIZONTAL,
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      $draggable = $__default["default"](ReactDOM__default["default"].findDOMNode(draggable)),
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      $bank = $__default["default"](ReactDOM__default["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["default"].findDOMNode(this.refs.dragList);
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'width' does not exist on type 'JQueryStatic'.
-      $__default["default"](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 = $__default["default"](ReactDOM__default["default"].findDOMNode(draggable));
+    // eslint-disable-next-line react/no-string-refs
+    // @ts-expect-error - TS2769 - No overload matches this call.
+    const $bank = $__default["default"](ReactDOM__default["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;
     }
@@ -43642,18 +43709,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
   };
@@ -44540,7 +44625,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
@@ -44553,6 +44645,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",
@@ -45127,7 +45227,7 @@ const init = function () {
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45412,7 +45512,6 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
 // Use of UNSAFE_componentWillReceiveProps:
 // eslint-disable-next-line react/no-unsafe
 class HintsRenderer extends React__namespace.Component {
@@ -48638,6 +48737,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)) {
@@ -48718,6 +48838,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,
@@ -48726,10 +48860,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
   });
 }
 
@@ -48737,7 +48882,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({
@@ -48769,7 +48914,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
@@ -48792,9 +48939,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,
@@ -48803,23 +48953,69 @@ 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({
+    ...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
@@ -48913,7 +49109,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({
@@ -49292,13 +49488,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({
@@ -49368,8 +49564,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({
@@ -49414,7 +49610,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),
@@ -49576,26 +49772,45 @@ 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
 });
 
 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 {
+    type: _,
+    options: __,
+    ...rest
+  } = rawValue;
+  return ctx.success(rest);
+}
+
 /**
  * Helper to parse PerseusItem JSON
  * Why not just use JSON.parse? We want: