@khanacademy/perseus-editor 2.14.2 → 2.15.1

package/dist/index.js

@@ -64,7 +64,7 @@ var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n$1);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "2.14.2";
+const libVersion = "2.15.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23837,36 +23837,99 @@ class ItemExtrasEditor extends React__namespace.Component {
   static defaultProps = {
     calculator: false,
     chi2Table: false,
+    financialCalculatorMonthlyPayment: false,
+    financialCalculatorTotalAmount: false,
+    financialCalculatorTimeToPayOff: false,
     periodicTable: false,
     periodicTableWithKey: false,
     tTable: false,
     zTable: false
   };
+  state = {
+    financialCalculatorOptionsExpanded: false
+  };
+  componentDidUpdate(prevProps) {
+    // If no financial calculator options are checked, uncheck the
+    // financial calculator option.
+    if (this.state.financialCalculatorOptionsExpanded && !this.props.financialCalculatorMonthlyPayment && !this.props.financialCalculatorTotalAmount && !this.props.financialCalculatorTimeToPayOff) {
+      this.setState({
+        financialCalculatorOptionsExpanded: false
+      });
+    }
+  }
   serialize = () => {
-    return {
-      calculator: this.props.calculator,
-      chi2Table: this.props.chi2Table,
-      periodicTable: this.props.periodicTable,
-      periodicTableWithKey: this.props.periodicTableWithKey,
-      tTable: this.props.tTable,
-      zTable: this.props.zTable
+    const data = {
+      ...ItemExtrasEditor.defaultProps
     };
+    for (const key of perseus.ItemExtras) {
+      data[key] = !!this.props[key];
+    }
+    return data;
   };
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-answer-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-answer-options"
-    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Show calculator:", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    }, /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Show calculator:",
+      infoTip: "Use the calculator when completing difficult calculations is NOT the intent of the question. DON\u2019T use the calculator when testing the student\u2019s ability to complete different types of computations.",
       checked: this.props.calculator,
       onChange: e => {
         this.props.onChange({
           calculator: e.target.checked
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, "Use the calculator when completing difficult calculations is NOT the intent of the question. DON\u2019T use the calculator when testing the student\u2019s ability to complete different types of computations.")), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Show periodic table:", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    }), /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Show financial calculator:",
+      infoTip: "This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked.",
+      checked: this.state.financialCalculatorOptionsExpanded,
+      onChange: e => {
+        this.setState({
+          financialCalculatorOptionsExpanded: e.target.checked
+        });
+        // If the financial calculator is unchecked,
+        // this needs to be reset. All checked by
+        // default.
+        this.props.onChange({
+          financialCalculatorMonthlyPayment: e.target.checked,
+          financialCalculatorTotalAmount: e.target.checked,
+          financialCalculatorTimeToPayOff: e.target.checked
+        });
+      }
+    }), this.state.financialCalculatorOptionsExpanded && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Include monthly payment:",
+      infoTip: "This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?",
+      checked: this.props.financialCalculatorMonthlyPayment,
+      onChange: e => {
+        this.props.onChange({
+          financialCalculatorMonthlyPayment: e.target.checked
+        });
+      },
+      indent: true
+    }), /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Include total amount:",
+      infoTip: "This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?",
+      checked: this.props.financialCalculatorTotalAmount,
+      onChange: e => {
+        this.props.onChange({
+          financialCalculatorTotalAmount: e.target.checked
+        });
+      },
+      indent: true
+    }), /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Include time-to-pay-off:",
+      infoTip: "This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?",
+      checked: this.props.financialCalculatorTimeToPayOff,
+      onChange: e => {
+        this.props.onChange({
+          financialCalculatorTimeToPayOff: e.target.checked
+        });
+      },
+      indent: true
+    })), /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Show periodic table:",
+      infoTip: "This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.",
       checked: this.props.periodicTable,
       onChange: e => {
         this.props.onChange({
@@ -23877,41 +23940,55 @@ class ItemExtrasEditor extends React__namespace.Component {
           periodicTableWithKey: false
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, "This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.")), this.props.periodicTable && /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Include key/legend with periodic table:", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    }), this.props.periodicTable && /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Include key/legend with periodic table:",
+      infoTip: "Include a key for HS courses; omit for AP chemistry.",
       checked: this.props.periodicTableWithKey,
       onChange: e => {
         this.props.onChange({
           periodicTableWithKey: e.target.checked
         });
-      }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, "Include a key for HS courses, omit for AP chemistry.")), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Show z table (statistics):", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+      },
+      indent: true
+    }), /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Show z table (statistics):",
+      infoTip: "This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions.",
       checked: this.props.zTable,
       onChange: e => {
         this.props.onChange({
           zTable: e.target.checked
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, "This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions.")), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Show t table (statistics):", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    }), /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Show t table (statistics):",
+      infoTip: "This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions.",
       checked: this.props.tTable,
       onChange: e => {
         this.props.onChange({
           tTable: e.target.checked
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, "This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions.")), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Show chi-squared table (statistics):", " ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    }), /*#__PURE__*/React__namespace.createElement(ItemExtraCheckbox, {
+      label: "Show chi-squared table (statistics):",
+      infoTip: "This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions.",
       checked: this.props.chi2Table,
       onChange: e => {
         this.props.onChange({
           chi2Table: e.target.checked
         });
       }
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, "This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions."))));
+    })));
   }
 }
+const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement("div", {
+  style: {
+    marginLeft: props.indent ? "10px" : "0px"
+  }
+}, /*#__PURE__*/React__namespace.createElement("label", null, props.label, /*#__PURE__*/React__namespace.createElement("input", {
+  type: "checkbox",
+  checked: props.checked,
+  onChange: props.onChange
+})), /*#__PURE__*/React__namespace.createElement(InfoTip$m, null, props.infoTip));
 
 const ITEM_DATA_VERSION = perseus.itemDataVersion;
 class ItemEditor extends React__namespace.Component {