@khanacademy/perseus-editor 14.10.3 → 14.11.1

package/dist/index.js

@@ -98,7 +98,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23657,7 +23657,7 @@ class StructuredItemDiff extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
+  InfoTip: InfoTip$o,
   InlineIcon: InlineIcon$7
 } = perseus.components;
 /* Renders a hint editor box
@@ -23725,7 +23725,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: ___default["default"].partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$n, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React__namespace.createElement(InfoTip$o, null, /*#__PURE__*/React__namespace.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23953,7 +23953,7 @@ class CombinedHintsEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$n
 } = perseus.components;
 class ItemExtrasEditor extends React__namespace.Component {
   static defaultProps = {
@@ -24097,7 +24097,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(w
     style: {
       flexDirection: "row"
     }
-  }, props.label, " ", /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, props.infoTip)),
+  }, props.label, " ", /*#__PURE__*/React__namespace.createElement(InfoTip$n, null, props.infoTip)),
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
@@ -25780,7 +25780,7 @@ class BlurInput extends React__namespace.Component {
 
 /* eslint-disable no-useless-escape */
 const {
-  InfoTip: InfoTip$l
+  InfoTip: InfoTip$m
 } = perseus.components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25971,7 +25971,7 @@ class CSProgramEditor extends React__namespace.Component {
           showEditor: value
         });
       }
-    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show Buttons",
       checked: this.props.showButtons,
       onChange: value => {
@@ -25983,7 +25983,7 @@ class CSProgramEditor extends React__namespace.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React__namespace.createElement("code", null, "Program.settings()"))));
   }
 }
 
@@ -26060,7 +26060,7 @@ class DeprecatedStandinEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
+  InfoTip: InfoTip$l,
   InlineIcon: InlineIcon$5
 } = perseus.components;
 class DropdownEditor extends React__namespace.Component {
@@ -26137,14 +26137,14 @@ class DropdownEditor extends React__namespace.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React__namespace.createElement("ul", {
       className: "dropdown-choices"
@@ -26462,7 +26462,7 @@ const styles$N = aphrodite.StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$j
+  InfoTip: InfoTip$k
 } = perseus.components;
 
 // types for iterables
@@ -26594,14 +26594,15 @@ class ExpressionEditor extends React__namespace.Component {
     });
   };
 
-  // called when the options (including the expression itself) to an answer
-  // form change
-  updateForm = (i, props) => {
+  // 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
     });
-  };
+  }
   handleReorder = components => {
     const answerForms = components.map(component => {
       const form = ___default["default"](component.props).pick("considered", "form", "simplify", "value");
@@ -26661,6 +26662,43 @@ class ExpressionEditor extends React__namespace.Component {
     newProps.functions = value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
     this.props.onChange(newProps);
   };
+  changeSimplify(key, simplify) {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      key: `${key}`,
+      simplify
+    };
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeForm(key, form) {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      form,
+      key: `${key}`
+    };
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeConsidered(key, considered) {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      key: `${key}`,
+      considered
+    };
+    this.updateAnswerForm(key, answerForm);
+  }
+  changeTimes(times) {
+    this.change({
+      times: times
+    });
+  }
+  changeExpressionWidget = (key, props) => {
+    const answerForm = {
+      ...this.props.answerForms[key],
+      key: `${key}`,
+      value: props.value
+    };
+    this.updateAnswerForm(key, answerForm);
+  };
   render() {
     const answerOptions = this.props.answerForms.map(ans => {
       const key = parseAnswerKey(ans);
@@ -26672,23 +26710,25 @@ class ExpressionEditor extends React__namespace.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__namespace.createElement(AnswerOption, {
         draggable: true,
-        onChange: props => this.updateForm(Number.parseInt(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__namespace.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__namespace.createElement(SortableArea, {
       components: answerOptions,
       onReorder: this.handleReorder
@@ -26720,13 +26760,13 @@ class ExpressionEditor extends React__namespace.Component {
       label: "Visible label",
       value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("a", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
     }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", {
@@ -26735,17 +26775,15 @@ class ExpressionEditor extends React__namespace.Component {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: aphrodite.css(styles$M.paddedY)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
@@ -26791,10 +26829,9 @@ class AnswerOption extends React__namespace.Component {
     });
   };
   toggleConsidered = () => {
+    // Update findNextIn to have stronger typing.
     const newVal = findNextIn(perseus.PerseusExpressionAnswerFormConsidered, this.props.considered);
-    this.change({
-      considered: newVal
-    });
+    this.props.onChangeConsidered(newVal);
   };
   render() {
     const removeButton = this.state.deleteFocused ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
@@ -26828,22 +26865,14 @@ class AnswerOption extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must have the same form.",
       checked: this.props.form,
-      onChange: value => {
-        this.props.onChange({
-          form: value
-        });
-      }
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
+      onChange: this.props.onChangeForm
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Answer expression must be fully expanded and simplified.",
       checked: this.props.simplify,
-      onChange: value => {
-        this.props.onChange({
-          simplify: value
-        });
-      }
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      onChange: this.props.onChangeSimplify
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$k, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: aphrodite.css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
   }
@@ -27093,7 +27122,7 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$7,
-  InfoTip: InfoTip$i,
+  InfoTip: InfoTip$j,
   RangeInput: RangeInput$6
 } = perseus.components;
 const defaultBackgroundImage$3 = {
@@ -27557,7 +27586,7 @@ const GraphSettings = createReactClass__default["default"]({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$j, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), ___default["default"].contains(this.props.editableSettings, "measure") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -27603,7 +27632,7 @@ const GraphSettings = createReactClass__default["default"]({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$i,
   MultiButtonGroup: MultiButtonGroup$1
 } = perseus.components;
 const Grapher = perseus.GrapherWidget.widget;
@@ -27693,7 +27722,7 @@ class GrapherEditor extends React__namespace.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.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__namespace.createElement(GraphSettings, {
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: perseus.getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.graph.range,
@@ -27953,7 +27982,7 @@ class IframeEditor extends React__namespace.Component {
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$h,
   InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = perseus.components;
@@ -28154,7 +28183,7 @@ class ImageEditor extends React__namespace.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
+    }))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Dimensions:"), /*#__PURE__*/React__namespace.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("div", null, "Alt text:", /*#__PURE__*/React__namespace.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__namespace.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28178,7 +28207,7 @@ class ImageEditor extends React__namespace.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Image url:", /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28189,7 +28218,7 @@ class ImageEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$g
 } = perseus.components;
 const answerTypes = {
   number: {
@@ -28282,7 +28311,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28318,7 +28347,7 @@ class InputNumberEditor extends React__namespace.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Width", " ", /*#__PURE__*/React__namespace.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28330,7 +28359,7 @@ class InputNumberEditor extends React__namespace.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React__namespace.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React__namespace.createElement(InfoTip$g, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -29857,7 +29886,7 @@ const styles$F = aphrodite.StyleSheet.create({
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$e,
+  InfoTip: InfoTip$f,
   RangeInput: RangeInput$4
 } = perseus.components;
 const defaultBackgroundImage$1 = {
@@ -30273,7 +30302,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$f, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: styles$E.protractorSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: styles$E.checkboxRow
@@ -30775,7 +30804,7 @@ const styles$v = aphrodite.StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$e
 } = perseus.components;
 function LockedFigureAria(props) {
   const {
@@ -30792,7 +30821,7 @@ function LockedFigureAria(props) {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
     htmlFor: ariaLabelId
-  }, "Aria label"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "Aria label is used by screen readers to describe content to users who may be visually impaired. ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement(Strut, {
+  }, "Aria label"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(InfoTip$e, null, "Aria label is used by screen readers to describe content to users who may be visually impaired. ", /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelXSmall, {
     style: styles$u.caption
@@ -30904,6 +30933,9 @@ const styles$t = aphrodite.StyleSheet.create({
  *
  * Used in the interactive graph editor's locked figures section.
  */
+const {
+  InfoTip: InfoTip$d
+} = perseus.components;
 function LockedLabelSettings(props) {
   const {
     type,
@@ -30940,10 +30972,14 @@ function LockedLabelSettings(props) {
       });
     },
     style: styles$s.spaceUnder
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$s.row
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$s.row, styles$s.spaceUnder]
-  }, "TeX", /*#__PURE__*/React__namespace.createElement(Strut, {
+    style: [styles$s.row, styles$s.spaceUnder, {
+      flexGrow: 1
+    }]
+  }, "text", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     value: text,
@@ -30951,7 +30987,7 @@ function LockedLabelSettings(props) {
     onChange: newValue => onChangeProps({
       text: newValue
     })
-  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  })), /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "Surround your text with $ for TeX.", /*#__PURE__*/React__namespace.createElement("br", null), "Example: ", `This circle has radius $\\frac{1}{2}$ units.`, /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
     style: styles$s.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
@@ -33987,8 +34023,7 @@ class InteractiveGraphEditor extends React__namespace.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({
@@ -34024,8 +34059,7 @@ class InteractiveGraphEditor extends React__namespace.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
           }
         });