@khanacademy/perseus 43.1.0 → 45.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"
 };
 
 /**
@@ -14608,9 +14609,9 @@ const pluck = function pluck(table, subKey) {
  *   });
  * {a: 2, b: 3}
  */
-const mapObject$1 = function mapObject(obj, lambda) {
+const mapObject$2 = function mapObject(obj, lambda) {
   const result = {};
-  _.each(_.keys(obj), function (key) {
+  Object.keys(obj).forEach(key => {
     // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
     result[key] = lambda(obj[key], key);
   });
@@ -14627,14 +14628,14 @@ const mapObject$1 = function mapObject(obj, lambda) {
  */
 const mapObjectFromArray = function mapObjectFromArray(arr, lambda) {
   const result = {};
-  _.each(arr, function (elem) {
+  arr.forEach(elem => {
     result[elem] = lambda(elem);
   });
   return result;
 };
 var objective_ = {
   pluck: pluck,
-  mapObject: mapObject$1,
+  mapObject: mapObject$2,
   mapObjectFromArray: mapObjectFromArray
 };
 
@@ -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");
       }
@@ -18718,6 +18719,140 @@ class QuestionParagraph extends React.Component {
   }
 }
 
+// These are all the current widgets that require user-input and are supported for automatic scoring
+const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
+
+/**
+ * Regex for widget placeholders in a string.
+ *
+ * First capture group is the widget ID (ex. 'radio 1')
+ * Second capture group is the widget type (ex. "radio)
+ * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
+ */
+function getWidgetRegex() {
+  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
+}
+
+/**
+ * Add a widget placeholder using the widget ID.
+ * ex. addWidget("radio 1") => "[[☃ radio 1]]"
+ *
+ * @param {string} id
+ * @returns {string}
+ */
+function addWidget(id) {
+  return `[[☃ ${id}]]`;
+}
+
+/**
+ * Get a widget type by a widget's ID
+ * (please don't derive type from ID)
+ *
+ * @param {string} widgetId the ID of the widget
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {string} the widget type (ie "radio")
+ */
+function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
+  var _widget$type;
+  const widget = widgetMap[WidgetId];
+  return (_widget$type = widget == null ? void 0 : widget.type) != null ? _widget$type : null;
+}
+
+/**
+ * Does the content have a specific type of widget?
+ *
+ * @param {string} type the type of the widget in question (ie "radio")
+ * @param {string} content the string to search through
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {boolean} if the content includes the widget type
+ */
+function contentHasWidgetType(type, content, widgetMap) {
+  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
+}
+
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {ReadonlyArray<string>} widgetIds
+ */
+function getWidgetIdsFromContent(content) {
+  const widgets = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    widgets.push(match[1]);
+    match = localWidgetRegex.exec(content);
+  }
+  return widgets;
+}
+
+/**
+ * Get a list of widget IDs from content,
+ * but only for specific widget types
+ *
+ * @param {string} type the type of widget (ie "radio")
+ * @param {string} content the string to parse
+ * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
+ * @returns {ReadonlyArray<string>} the widget type (ie "radio")
+ */
+function getWidgetIdsFromContentByType(type, content, widgetMap) {
+  const rv = [];
+  const widgetIdsInContent = getWidgetIdsFromContent(content);
+  widgetIdsInContent.forEach(widgetId => {
+    const widget = widgetMap[widgetId];
+    if ((widget == null ? void 0 : widget.type) === type) {
+      rv.push(widgetId);
+    }
+  });
+  return rv;
+}
+
+/**
+ * Pull the widget map out of ItemData
+ *
+ * @param {PerseusItem} PerseusItem containing a widgetMap
+ * @returns {WidgetMap} the widget map in the PerseusItem
+ */
+function getWidgetsMapFromItemData(itemData) {
+  return itemData.question.widgets;
+}
+
+/**
+ * Get the widget information from a WidgetMap
+ *
+ * @param {string} widgetId the ID of the widget
+ * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
+ */
+function getWidgetFromWidgetMap(widgetId, widgetMap) {
+  var _widgetMap$widgetId;
+  return (_widgetMap$widgetId = widgetMap[widgetId]) != null ? _widgetMap$widgetId : null;
+}
+
+/**
+ * Get select widgets from a widget map.
+ * Useful for multi-items that needs to split
+ * one PerseusItem into several
+ *
+ * @param {ReadonlyArray<string>} widgetIds to extract
+ * @param {PerseusWidgetsMap} widgetMap to extract from
+ * @return {PerseusWidgetsMap} a new widget map with requested widgets
+ */
+function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
+  const widgets = {};
+  widgetIds.forEach(widgetId => {
+    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
+    if (widget) {
+      widgets[widgetId] = widget;
+    }
+  });
+  return widgets;
+}
+
 const DEFAULT_ALIGNMENT$1 = "block";
 // NOTE(kevinb): "default" is not one in `validAlignments`.
 const DEFAULT_SUPPORTED_ALIGNMENTS = ["default"];
@@ -19149,12 +19284,35 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   isLintable: isLintable
 });
 
+const {
+  mapObject: mapObject$1
+} = objective_;
+function getUpgradedWidgetOptions(oldWidgetOptions) {
+  // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
+  return mapObject$1(oldWidgetOptions, (widgetInfo, widgetId) => {
+    if (!widgetInfo.type || !widgetInfo.alignment) {
+      const newValues = {};
+      if (!widgetInfo.type) {
+        // TODO: why does widget have no type?
+        // We don't want to derive type from widget ID
+        // see: LEMS-1845
+        newValues.type = widgetId.split(" ")[0];
+      }
+      if (!widgetInfo.alignment) {
+        newValues.alignment = "default";
+      }
+      widgetInfo = _extends({}, widgetInfo, newValues);
+    }
+    return upgradeWidgetInfoToLatestVersion(widgetInfo);
+  });
+}
 function emptyWidgetsFunctional(widgets,
 // This is a port of old code, I'm not sure why
 // we need widgetIds vs the keys of the widgets object
 widgetIds, userInputMap, strings, locale) {
+  const upgradedWidgets = getUpgradedWidgetOptions(widgets);
   return widgetIds.filter(id => {
-    const widget = widgets[id];
+    const widget = upgradedWidgets[id];
     if (!widget || widget.static) {
       // Static widgets shouldn't count as empty
       return false;
@@ -19173,12 +19331,27 @@ widgetIds, userInputMap, strings, locale) {
     }
   });
 }
+
+// TODO: combine scorePerseusItem with scoreWidgetsFunctional
+// once scorePerseusItem is the only one calling scoreWidgetsFunctional
+function scorePerseusItem(perseusRenderData, userInputMap,
+// TODO(LEMS-2461,LEMS-2391): these probably
+// need to be removed before we move this to the server
+strings, locale) {
+  // There seems to be a chance that PerseusRenderer.widgets might include
+  // widget data for widgets that are not in PerseusRenderer.content,
+  // so this checks that the widgets are being used before scoring them
+  const usedWidgetIds = getWidgetIdsFromContent(perseusRenderData.content);
+  const scores = scoreWidgetsFunctional(perseusRenderData.widgets, usedWidgetIds, userInputMap, strings, locale);
+  return Util.flattenScores(scores);
+}
 function scoreWidgetsFunctional(widgets,
 // This is a port of old code, I'm not sure why
 // we need widgetIds vs the keys of the widgets object
 widgetIds, userInputMap, strings, locale) {
+  const upgradedWidgets = getUpgradedWidgetOptions(widgets);
   const gradedWidgetIds = widgetIds.filter(id => {
-    const props = widgets[id];
+    const props = upgradedWidgets[id];
     const widgetIsGraded = (props == null ? void 0 : props.graded) == null || props.graded;
     const widgetIsStatic = !!(props != null && props.static);
     // Ungraded widgets or widgets set to static shouldn't be graded.
@@ -19186,14 +19359,14 @@ widgetIds, userInputMap, strings, locale) {
   });
   const widgetScores = {};
   gradedWidgetIds.forEach(id => {
-    const widget = widgets[id];
+    const widget = upgradedWidgets[id];
     if (!widget) {
       return;
     }
     const userInput = userInputMap[id];
     const scorer = getWidgetScorer(widget.type);
     if (widget.type === "group") {
-      const scores = scoreWidgetsFunctional(widget.options.widgets, Object.keys(widget.options.widgets), userInputMap[id], strings, locale);
+      const scores = scoreWidgetsFunctional(widget.options.widgets, getWidgetIdsFromContent(widget.options.content), userInputMap[id], strings, locale);
       widgetScores[id] = Util.flattenScores(scores);
     } else if (scorer) {
       widgetScores[id] = scorer(userInput, widget.options, strings, locale);
@@ -19555,31 +19728,12 @@ class Renderer extends React.Component {
       return _extends({}, ApiOptions.defaults, this.props.apiOptions);
     };
     this._getInitialWidgetState = props => {
-      const allWidgetInfo = this._getAllWidgetsInfo(props);
+      const allWidgetInfo = getUpgradedWidgetOptions(props.widgets);
       return {
         widgetInfo: allWidgetInfo,
         widgetProps: this._getAllWidgetsStartProps(allWidgetInfo, props)
       };
     };
-    // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
-    this._getAllWidgetsInfo = props => {
-      return mapObject(props.widgets, (widgetInfo, widgetId) => {
-        if (!widgetInfo.type || !widgetInfo.alignment) {
-          const newValues = {};
-          if (!widgetInfo.type) {
-            // TODO: why does widget have no type?
-            // We don't want to derive type from widget ID
-            // see: LEMS-1845
-            newValues.type = widgetId.split(" ")[0];
-          }
-          if (!widgetInfo.alignment) {
-            newValues.alignment = "default";
-          }
-          widgetInfo = _.extend({}, widgetInfo, newValues);
-        }
-        return upgradeWidgetInfoToLatestVersion(widgetInfo);
-      });
-    };
     this._getAllWidgetsStartProps = (allWidgetInfo, props) => {
       const {
         apiOptions,
@@ -20025,7 +20179,7 @@ class Renderer extends React.Component {
         // Instead, we center them with css magic in styles.less
         // /cry(aria)
         this._foundTextNodes = true;
-        if (_.contains(this.widgetIds, node.id)) {
+        if (this.widgetIds.includes(node.id)) {
           // We don't want to render a duplicate widget key/ref,
           // as this causes problems with react (for obvious
           // reasons). Instead we just notify the
@@ -20329,7 +20483,7 @@ class Renderer extends React.Component {
     };
     this.getInputPaths = () => {
       const inputPaths = [];
-      _.each(this.widgetIds, widgetId => {
+      this.widgetIds.forEach(widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         if (widget && widget.getInputPaths) {
           // Grab all input paths and add widgetID to the front
@@ -20337,7 +20491,7 @@ class Renderer extends React.Component {
           // Prefix paths with their widgetID and add to collective
           // list of paths.
           // @ts-expect-error - TS2345 - Argument of type '(inputPath: string) => void' is not assignable to parameter of type 'CollectionIterator<FocusPath, void, readonly FocusPath[]>'.
-          _.each(widgetInputPaths, inputPath => {
+          widgetInputPaths.forEach(inputPath => {
             const relativeInputPath = [widgetId].concat(inputPath);
             inputPaths.push(relativeInputPath);
           });
@@ -20466,12 +20620,20 @@ class Renderer extends React.Component {
     this.getWidgetIds = () => {
       return this.widgetIds;
     };
+    /**
+     * @deprecated use scorePerseusItem
+     */
+    this.guessAndScore = () => {
+      const totalGuess = this.getUserInput();
+      const totalScore = this.score();
+      return [totalGuess, totalScore];
+    };
     this.examples = () => {
       const widgetIds = this.widgetIds;
-      const examples = _.compact(_.map(widgetIds, widgetId => {
+      const examples = widgetIds.map(widgetId => {
         const widget = this.getWidgetInstance(widgetId);
         return widget != null && widget.examples ? widget.examples() : null;
-      }));
+      }).filter(Boolean);
 
       // no widgets with examples
       if (!examples.length) {
@@ -20726,27 +20888,15 @@ class Renderer extends React.Component {
   }
 
   /**
-   * Returns an object mapping from widget ID to perseus-style score.
-   * The keys of this object are the values of the array returned
-   * from `getWidgetIds`.
-   */
-  scoreWidgets() {
-    return scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
-  }
-
-  /**
-   * Grades the content.
+   * Scores the content.
+   *
+   * @deprecated use scorePerseusItem
    */
   score() {
-    const scores = this.scoreWidgets();
+    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
     const combinedScore = Util.flattenScores(scores);
     return combinedScore;
   }
-  guessAndScore() {
-    const totalGuess = this.getUserInput();
-    const totalScore = this.score();
-    return [totalGuess, totalScore];
-  }
   render() {
     const apiOptions = this.getApiOptions();
     if (this.reuseMarkdown) {
@@ -21135,6 +21285,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
     };
@@ -21209,8 +21360,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",
@@ -21237,10 +21387,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
@@ -27224,23 +27372,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,
@@ -27250,6 +27415,8 @@ Dropdown.defaultProps = {
 const optionsTransform = widgetOptions => {
   return {
     placeholder: widgetOptions.placeholder,
+    visibleLabel: widgetOptions.visibleLabel,
+    ariaLabel: widgetOptions.ariaLabel,
     choices: widgetOptions.choices.map(choice => choice.content)
   };
 };
@@ -29309,6 +29476,9 @@ class Group extends React.Component {
         this.change("widgets", this.rendererRef.props.widgets);
       }
     };
+
+    // TODO(LEMS-2391): replace this when there's a separate check
+    // for valid/invalid state
     const score = (_this$rendererRef12 = this.rendererRef) == null ? void 0 : _this$rendererRef12.score();
     const isValid = score && score.type !== "invalid";
     const isInvalid = score && score.type === "invalid";
@@ -30345,6 +30515,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;
@@ -30388,9 +30559,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();
 
@@ -30598,7 +30767,7 @@ class Graph extends React.Component {
       onClick: this.onClick
     }, image, /*#__PURE__*/React.createElement("div", {
       className: "graphie",
-      ref: "graphieDiv"
+      ref: this.graphieDivRef
     }));
   }
 }
@@ -31686,6 +31855,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;
@@ -31702,9 +31872,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() {
@@ -31725,7 +31894,8 @@ class MultiButtonGroup extends React.Component {
       display: "inline-block"
     };
     return /*#__PURE__*/React.createElement("div", {
-      style: outerStyle
+      style: outerStyle,
+      ref: this.buttonContainerRef
     }, buttons);
   }
 }
@@ -44843,7 +45013,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.1.0";
+const libVersion = "45.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45467,6 +45637,13 @@ class ServerItemRenderer extends React.Component {
         this.props.onRendered(true);
       }
     }
+    if (this.props.score && this.props.score !== prevProps.score) {
+      const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
+      this.setState({
+        questionCompleted: this.props.score.correct,
+        questionHighlightedWidgets: emptyQuestionAreaWidgets
+      });
+    }
   }
   componentWillUnmount() {
     if (this.blurTimeoutID != null) {
@@ -45584,18 +45761,37 @@ class ServerItemRenderer extends React.Component {
     return this.questionRenderer.getPromptJSON();
   }
 
+  /**
+   * Returns an array of the widget `.getUserInput()` results
+   *
+   * TODO: can we remove this? Seems to be just for backwards
+   * compatibility with old Perseus Chrome logging
+   * @deprecated use getUserInput
+   */
+  getUserInputLegacy() {
+    return this.questionRenderer.getUserInput();
+  }
+
+  /**
+   * Returns an object of the widget `.getUserInput()` results
+   */
+  getUserInput() {
+    return this.questionRenderer.getUserInputMap();
+  }
+
   /**
    * Grades the item.
+   *
+   * @deprecated use scorePerseusItem
    */
   scoreInput() {
-    const guessAndScore = this.questionRenderer.guessAndScore();
-    const guess = guessAndScore[0];
-    const score = guessAndScore[1];
+    const guess = this.getUserInput();
+    const score = scorePerseusItem(this.props.item.question, guess, this.context.strings, this.context.locale);
 
     // Continue to include an empty guess for the now defunct answer area.
     // TODO(alex): Check whether we rely on the format here for
     //             analyzing ProblemLogs. If not, remove this layer.
-    const maxCompatGuess = [guess, []];
+    const maxCompatGuess = [this.questionRenderer.getUserInput(), []];
     const keScore = Util.keScoreFromPerseusScore(score, maxCompatGuess, this.questionRenderer.getSerializedState());
     const emptyQuestionAreaWidgets = this.questionRenderer.emptyWidgets();
     this.setState({
@@ -47443,140 +47639,6 @@ const registerAllWidgetsForTesting = () => {
   replaceDeprecatedWidgets();
 };
 
-// These are all the current widgets that require user-input and are supported for automatic scoring
-const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
-
-/**
- * Regex for widget placeholders in a string.
- *
- * First capture group is the widget ID (ex. 'radio 1')
- * Second capture group is the widget type (ex. "radio)
- * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
- */
-function getWidgetRegex() {
-  return /\[\[☃ ([A-Za-z0-9- ]+)\]\]/g;
-}
-
-/**
- * Add a widget placeholder using the widget ID.
- * ex. addWidget("radio 1") => "[[☃ radio 1]]"
- *
- * @param {string} id
- * @returns {string}
- */
-function addWidget(id) {
-  return `[[☃ ${id}]]`;
-}
-
-/**
- * Get a widget type by a widget's ID
- * (please don't derive type from ID)
- *
- * @param {string} widgetId the ID of the widget
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {string} the widget type (ie "radio")
- */
-function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
-  var _widget$type;
-  const widget = widgetMap[WidgetId];
-  return (_widget$type = widget == null ? void 0 : widget.type) != null ? _widget$type : null;
-}
-
-/**
- * Does the content have a specific type of widget?
- *
- * @param {string} type the type of the widget in question (ie "radio")
- * @param {string} content the string to search through
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {boolean} if the content includes the widget type
- */
-function contentHasWidgetType(type, content, widgetMap) {
-  return getWidgetIdsFromContentByType(type, content, widgetMap).length > 0;
-}
-
-/**
- * Extract all widget IDs, which includes the widget type and instance number.
- * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
- *
- * Content should contain Perseus widget placeholders,
- * which look like: '[[☃ radio 1]]'.
- *
- * @param {string} content
- * @returns {ReadonlyArray<string>} widgetIds
- */
-function getWidgetIdsFromContent(content) {
-  const widgets = [];
-  const localWidgetRegex = getWidgetRegex();
-  let match = localWidgetRegex.exec(content);
-  while (match !== null) {
-    widgets.push(match[1]);
-    match = localWidgetRegex.exec(content);
-  }
-  return widgets;
-}
-
-/**
- * Get a list of widget IDs from content,
- * but only for specific widget types
- *
- * @param {string} type the type of widget (ie "radio")
- * @param {string} content the string to parse
- * @param {PerseusWidgetsMap} widgetMap widget ID to widget map
- * @returns {ReadonlyArray<string>} the widget type (ie "radio")
- */
-function getWidgetIdsFromContentByType(type, content, widgetMap) {
-  const rv = [];
-  const widgetIdsInContent = getWidgetIdsFromContent(content);
-  widgetIdsInContent.forEach(widgetId => {
-    const widget = widgetMap[widgetId];
-    if ((widget == null ? void 0 : widget.type) === type) {
-      rv.push(widgetId);
-    }
-  });
-  return rv;
-}
-
-/**
- * Pull the widget map out of ItemData
- *
- * @param {PerseusItem} PerseusItem containing a widgetMap
- * @returns {WidgetMap} the widget map in the PerseusItem
- */
-function getWidgetsMapFromItemData(itemData) {
-  return itemData.question.widgets;
-}
-
-/**
- * Get the widget information from a WidgetMap
- *
- * @param {string} widgetId the ID of the widget
- * @returns {PerseusWidget | null} the widget data if it exists, otherwise null
- */
-function getWidgetFromWidgetMap(widgetId, widgetMap) {
-  var _widgetMap$widgetId;
-  return (_widgetMap$widgetId = widgetMap[widgetId]) != null ? _widgetMap$widgetId : null;
-}
-
-/**
- * Get select widgets from a widget map.
- * Useful for multi-items that needs to split
- * one PerseusItem into several
- *
- * @param {ReadonlyArray<string>} widgetIds to extract
- * @param {PerseusWidgetsMap} widgetMap to extract from
- * @return {PerseusWidgetsMap} a new widget map with requested widgets
- */
-function getWidgetsFromWidgetMap(widgetIds, widgetMap) {
-  const widgets = {};
-  widgetIds.forEach(widgetId => {
-    const widget = getWidgetFromWidgetMap(widgetId, widgetMap);
-    if (widget) {
-      widgets[widgetId] = widget;
-    }
-  });
-  return widgets;
-}
-
 /**
  * This function extracts the answers from the widgets.
  *
@@ -48513,6 +48575,8 @@ const parseDefinitionWidget = parseWidget(constant("definition"), object({
 
 const parseDropdownWidget = parseWidget(constant("dropdown"), object({
   placeholder: string,
+  ariaLabel: optional(string),
+  visibleLabel: optional(string),
   static: defaulted(boolean, () => false),
   choices: array(object({
     content: string,
@@ -49631,5 +49695,5 @@ const GrapherUtil = {
   typeToButton
 };
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, addWidget, apiVersion, bodyXsmallBold, buildEmptyItemTreeForShape, buildMapper, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getClockwiseAngle, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mathOnlyParser, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map