@khanacademy/perseus-editor 14.10.3 → 14.11.1

package/dist/es/index.js

@@ -46,7 +46,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.10.3";
+const libVersion = "14.11.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23628,7 +23628,7 @@ class StructuredItemDiff extends React.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
+  InfoTip: InfoTip$o,
   InlineIcon: InlineIcon$7
 } = components;
 /* Renders a hint editor box
@@ -23694,7 +23694,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$n, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$o, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23940,7 +23940,7 @@ CombinedHintsEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$n
 } = components;
 class ItemExtrasEditor extends React.Component {
   constructor(...args) {
@@ -24085,7 +24085,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
     style: {
       flexDirection: "row"
     }
-  }, props.label, " ", /*#__PURE__*/React.createElement(InfoTip$m, null, props.infoTip)),
+  }, props.label, " ", /*#__PURE__*/React.createElement(InfoTip$n, null, props.infoTip)),
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
@@ -25776,7 +25776,7 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$l
+  InfoTip: InfoTip$m
 } = components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25940,7 +25940,7 @@ class CSProgramEditor extends React.Component {
           showEditor: value
         });
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Checkbox$1, {
+    }), /*#__PURE__*/React.createElement(InfoTip$m, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show Buttons",
       checked: this.props.showButtons,
       onChange: value => {
@@ -25952,7 +25952,7 @@ class CSProgramEditor extends React.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React.createElement(InfoTip$m, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
   }
 }
 CSProgramEditor.propTypes = _extends({}, Changeable.propTypes);
@@ -26038,7 +26038,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
+  InfoTip: InfoTip$l,
   InlineIcon: InlineIcon$5
 } = components;
 class DropdownEditor extends React.Component {
@@ -26103,14 +26103,14 @@ class DropdownEditor extends React.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$l, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$l, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React.createElement("ul", {
       className: "dropdown-choices"
@@ -26438,7 +26438,7 @@ const styles$N = StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$j
+  InfoTip: InfoTip$k
 } = components;
 
 // types for iterables
@@ -26551,14 +26551,6 @@ class ExpressionEditor extends React.Component {
         answerForms
       });
     };
-    // called when the options (including the expression itself) to an answer
-    // form change
-    this.updateForm = (i, props) => {
-      const answerForms = lens(this.props.answerForms).merge([i], props).freeze();
-      this.change({
-        answerForms
-      });
-    };
     this.handleReorder = components => {
       const answerForms = components.map(component => {
         const form = _(component.props).pick("considered", "form", "simplify", "value");
@@ -26615,6 +26607,13 @@ class ExpressionEditor extends React.Component {
       newProps.functions = value.split(/[ ,]+/).filter(isTruthy);
       this.props.onChange(newProps);
     };
+    this.changeExpressionWidget = (key, props) => {
+      const answerForm = _extends({}, this.props.answerForms[key], {
+        key: `${key}`,
+        value: props.value
+      });
+      this.updateAnswerForm(key, answerForm);
+    };
     this.state = {
       functionsInternal: this.props.functions.join(" ")
     };
@@ -26622,6 +26621,41 @@ class ExpressionEditor extends React.Component {
   change(...args) {
     return Changeable.change.apply(this, args);
   }
+  // This function is designed to update the answerForm property
+  // with new data. This function should not be used to update any
+  // other properties within ExpressionEditor.
+  updateAnswerForm(i, props) {
+    const answerForms = lens(this.props.answerForms).merge([i], props).freeze();
+    this.change({
+      answerForms
+    });
+  }
+  changeSimplify(key, simplify) {
+    const answerForm = _extends({}, this.props.answerForms[key], {
+      key: `${key}`,
+      simplify
+    });
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeForm(key, form) {
+    const answerForm = _extends({}, this.props.answerForms[key], {
+      form,
+      key: `${key}`
+    });
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeConsidered(key, considered) {
+    const answerForm = _extends({}, this.props.answerForms[key], {
+      key: `${key}`,
+      considered
+    });
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeTimes(times) {
+    this.change({
+      times: times
+    });
+  }
   render() {
     const answerOptions = this.props.answerForms.map(ans => {
       const key = parseAnswerKey(ans);
@@ -26633,26 +26667,25 @@ class ExpressionEditor extends React.Component {
         functions: this.props.functions,
         buttonSets: this.props.buttonSets,
         buttonsVisible: "focused",
-        form: ans.form,
-        simplify: ans.simplify,
         value: ans.value,
-        onChange: props => this.updateForm(key, props),
+        onChange: props => this.changeExpressionWidget(key, props),
         trackInteraction: () => {},
-        widgetId: this.props.widgetId + "-" + ans.key
+        widgetId: this.props.widgetId + "-" + ans.key,
+        visibleLabel: this.props.visibleLabel,
+        ariaLabel: this.props.ariaLabel
       };
-      return lens(ans).merge([], {
-        key,
+      return /*#__PURE__*/React.createElement(AnswerOption, {
         draggable: true,
-        onChange: props => {
-          var _ans$key;
-          return this.updateForm(Number.parseInt((_ans$key = ans.key) != null ? _ans$key : ""), props);
-        },
+        considered: ans.considered,
+        expressionProps: expressionProps,
+        form: ans.form,
+        simplify: ans.simplify,
         onDelete: () => this.handleRemoveForm(key),
-        expressionProps: expressionProps
-      }).freeze();
-    }).map(obj => /*#__PURE__*/React.createElement(AnswerOption, _extends({
-      key: obj.key
-    }, obj)));
+        onChangeSimplify: simplify => this.changeSimplify(key, simplify),
+        onChangeForm: form => this.changeForm(key, form),
+        onChangeConsidered: considered => this.changeConsidered(key, considered)
+      });
+    });
     const sortable = /*#__PURE__*/React.createElement(SortableArea, {
       components: answerOptions,
       onReorder: this.handleReorder
@@ -26684,13 +26717,13 @@ class ExpressionEditor extends React.Component {
       label: "Visible label",
       value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React.createElement("a", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
     }, "this article.")))), /*#__PURE__*/React.createElement("div", {
@@ -26699,17 +26732,15 @@ class ExpressionEditor extends React.Component {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
       checked: this.props.times,
-      onChange: value => {
-        this.props.onChange({
-          times: value
-        });
+      onChange: newCheckedState => {
+        this.changeTimes(newCheckedState);
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React.createElement(HeadingSmall, null, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
@@ -26758,10 +26789,9 @@ class AnswerOption extends React.Component {
       });
     };
     this.toggleConsidered = () => {
+      // Update findNextIn to have stronger typing.
       const newVal = findNextIn(PerseusExpressionAnswerFormConsidered, this.props.considered);
-      this.change({
-        considered: newVal
-      });
+      this.props.onChangeConsidered(newVal);
     };
   }
   render() {
@@ -26796,22 +26826,14 @@ class AnswerOption extends React.Component {
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
-      onChange: value => {
-        this.props.onChange({
-          form: value
-        });
-      }
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
+      onChange: this.props.onChangeForm
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
-      onChange: value => {
-        this.props.onChange({
-          simplify: value
-        });
-      }
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
+      onChange: this.props.onChangeSimplify
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
   }
@@ -27050,7 +27072,7 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 const {
   ButtonGroup: ButtonGroup$7,
-  InfoTip: InfoTip$i,
+  InfoTip: InfoTip$j,
   RangeInput: RangeInput$6
 } = components;
 const defaultBackgroundImage$3 = {
@@ -27509,7 +27531,7 @@ const GraphSettings = createReactClass({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -27555,7 +27577,7 @@ const GraphSettings = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$i,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
 const Grapher = GrapherWidget.widget;
@@ -27634,7 +27656,7 @@ class GrapherEditor extends React.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.graph.range,
@@ -27884,7 +27906,7 @@ IframeEditor.defaultProps = {
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$h,
   InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = components;
@@ -28074,7 +28096,7 @@ class ImageEditor extends React.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$h, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28098,7 +28120,7 @@ class ImageEditor extends React.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
+    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$h, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28120,7 +28142,7 @@ ImageEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$g
 } = components;
 const answerTypes = {
   number: {
@@ -28206,7 +28228,7 @@ class InputNumberEditor extends React.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28242,7 +28264,7 @@ class InputNumberEditor extends React.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28254,7 +28276,7 @@ class InputNumberEditor extends React.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -29764,7 +29786,7 @@ const styles$F = StyleSheet.create({
 
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$e,
+  InfoTip: InfoTip$f,
   RangeInput: RangeInput$4
 } = components;
 const defaultBackgroundImage$1 = {
@@ -30154,7 +30176,7 @@ class InteractiveGraphSettings extends React.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
+    }), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
       style: styles$E.protractorSection
     }, /*#__PURE__*/React.createElement(View, {
       style: styles$E.checkboxRow
@@ -30666,7 +30688,7 @@ const styles$v = StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$e
 } = components;
 function LockedFigureAria(props) {
   const {
@@ -30683,7 +30705,7 @@ function LockedFigureAria(props) {
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     htmlFor: ariaLabelId
-  }, "Aria label"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(InfoTip$d, null, "Aria label is used by screen readers to describe content to users who may be visually impaired. ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Populating this field will make it so that users can use a screen reader to navigate to this point and hear the description.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "If you leave this field blank, the point will be hidden from screen readers. Users will not be able to navigate to this point using a screen reader.")), /*#__PURE__*/React.createElement(Strut, {
+  }, "Aria label"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(InfoTip$e, null, "Aria label is used by screen readers to describe content to users who may be visually impaired. ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Populating this field will make it so that users can use a screen reader to navigate to this point and hear the description.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "If you leave this field blank, the point will be hidden from screen readers. Users will not be able to navigate to this point using a screen reader.")), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(LabelXSmall, {
     style: styles$u.caption
@@ -30795,6 +30817,9 @@ const styles$t = StyleSheet.create({
  *
  * Used in the interactive graph editor's locked figures section.
  */
+const {
+  InfoTip: InfoTip$d
+} = components;
 function LockedLabelSettings(props) {
   const {
     type,
@@ -30831,10 +30856,14 @@ function LockedLabelSettings(props) {
       });
     },
     style: styles$s.spaceUnder
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$s.row
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$s.row, styles$s.spaceUnder]
-  }, "TeX", /*#__PURE__*/React.createElement(Strut, {
+    style: [styles$s.row, styles$s.spaceUnder, {
+      flexGrow: 1
+    }]
+  }, "text", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(TextField, {
     value: text,
@@ -30842,7 +30871,7 @@ function LockedLabelSettings(props) {
     onChange: newValue => onChangeProps({
       text: newValue
     })
-  })), /*#__PURE__*/React.createElement(View, {
+  })), /*#__PURE__*/React.createElement(InfoTip$d, null, "Surround your text with $ for TeX.", /*#__PURE__*/React.createElement("br", null), "Example: ", `This circle has radius $\\frac{1}{2}$ units.`, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "It is important to use TeX when appropriate for accessibility. The above example would be read as \"This circle has radius one-half units\" by screen readers.")), /*#__PURE__*/React.createElement(View, {
     style: styles$s.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color$1,
@@ -33788,8 +33817,7 @@ class InteractiveGraphEditor extends React.Component {
           // value for `match`; a value of undefined
           // means exact matching. The code happens
           // to work because "exact" falls through
-          // to the correct else branch in
-          // InteractiveGraph.validate()
+          // to the correct else branch when scoring
           match: newValue
         });
         this.props.onChange({
@@ -33824,8 +33852,7 @@ class InteractiveGraphEditor extends React.Component {
             // value for `match`; a value of undefined
             // means exact matching. The code happens
             // to work because "exact" falls through
-            // to the correct else branch in
-            // InteractiveGraph.validate()
+            // to the correct else branch when scoring
             match: newValue
           })
         });