@instructure/quiz-interactions/lib/components/formula/Edit/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
var _get = _interopRequireDefault(require("lodash/get"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));
var _uiA11yContent = require("@instructure/ui-a11y-content");
var _uiText = require("@instructure/ui-text");
var _uiTable = require("@instructure/ui-table");
var _emotion = require("@instructure/emotion");
var _quizScientificNotation = require("@instructure/quiz-scientific-notation");
var _QuestionSettingsContainer = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsContainer"));
var _QuestionContainer = _interopRequireDefault(require("../../common/edit/components/QuestionContainer"));
var util = _interopRequireWildcard(require("./util"));
var _FormulaSection = _interopRequireDefault(require("./FormulaSection"));
var _GenerateSolutionsService = _interopRequireDefault(require("./GenerateSolutionsService"));
var _VariableInput = _interopRequireDefault(require("./VariableInput"));
var _util2 = require("../common/util");
var _instUIMessages = require("../../../util/instUIMessages");
var _formula = require("../../../util/formula");
var _formula2 = _interopRequireDefault(require("../../../records/interactions/formula"));
var _withEditTools = _interopRequireDefault(require("../../../util/withEditTools"));
var _withAsyncDeps = _interopRequireDefault(require("../../../util/withAsyncDeps"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _QuestionSettingsPanel = _interopRequireDefault(require("../../common/edit/components/QuestionSettingsPanel"));
var _CalculatorOptionWithOqaatAlert = _interopRequireDefault(require("../../common/edit/components/CalculatorOptionWithOqaatAlert"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _dec2, _class, _FormulaEdit;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = (0, _getPrototypeOf2["default"])(derived);
  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } /** @jsx jsx */
/**
---
category: Formula
---

  Formula Edit component

  ```jsx_example
  class Example extends React.Component {
    render () {
      const variables = 'abcdefghijklmnopqrstuvwxyz'.split('')
      const exampleProps = {
        itemBody: variables.map(v => `\`${v}\``).join('+'),
        scoringData: {
          value: {
            answerCount: '10',
            answerPrecision: 0,
            formula: variables.join('+'),
            generatedSolutions: [],
            numeric: {
              marginType: 'absolute',
              margin: 1,
            },
            scientificNotation: false,
            variables: variables.map(char => ({
              name: char,
              min: 90000,
              max: 99999,
              precision: 0
            }))
          }
        },
        overrideEditableForRegrading: false,
        additionalOptions: [{
          key: 'outcomes',
          title: 'Align to Outcomes',
          component: 'Placeholder'
        }]
      }

      return (
        <FormulaEdit {...exampleProps} {...this.props} />
      )
    }
  }

  <SettingsSwitcher locales={LOCALES}>
    <EditStateProvider>
      <Example />
    </EditStateProvider>
  </SettingsSwitcher>
  ```
**/

var formatNumber = function formatNumber(n) {
  return (0, _quizScientificNotation.isScientificNotation)(n) ? n : Number(n);
};
var normalizeVariables = function normalizeVariables(variables) {
  return variables.map(function (group) {
    return _objectSpread(_objectSpread({}, group), {}, {
      min: formatNumber(group.min),
      max: formatNumber(group.max),
      precision: Number(group.precision)
    });
  });
};
var FormulaEdit = exports["default"] = (_dec = (0, _withAsyncDeps["default"])(_util2.mathjsIsLoaded, _util2.loadMathjs), _dec2 = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (0, _withEditTools["default"])(_class = _dec2(_class = (_FormulaEdit = /*#__PURE__*/function (_Component) {
  function FormulaEdit(props) {
    var _this2;
    (0, _classCallCheck2["default"])(this, FormulaEdit);
    _this2 = _callSuper(this, FormulaEdit, [props]);
    // ==============================
    // HOOKS FOR GENERATING SOLUTIONS
    // ==============================
    (0, _defineProperty2["default"])(_this2, "serviceOnStart", function () {
      _this2.setState({
        status: util.STATUS_RUNNING
      });
    });
    (0, _defineProperty2["default"])(_this2, "serviceOnComplete", function (status) {
      return function (solutions) {
        _this2.setState({
          status: status
        });
        var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
          value: {
            generatedSolutions: {
              $set: solutions
            }
          }
        });
        _this2.props.changeItemState({
          scoringData: scoringData
        });
        var message = util.buildSolutionsGeneratedMessage(status, solutions.length);
        _this2.props.notifyScreenreader("".concat((0, _formatMessage["default"])('Solutions updated.'), " ").concat(message));
      };
    });
    (0, _defineProperty2["default"])(_this2, "serviceOnCancel", function () {
      _this2.setState({
        status: util.STATUS_CANCELED
      });
    });
    // ====================
    // INPUT EVENT HANDLERS
    // ====================
    (0, _defineProperty2["default"])(_this2, "handleCalculatorTypeChange", function (e, value) {
      _this2.props.changeItemState({
        calculatorType: value
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleItemBodyChange", function (itemBody) {
      var newVariableNames = (0, _formula.variablesFromItemBody)(itemBody);
      var oldVariables = _this2.props.scoringData.value.variables;
      var newVariables = [];
      newVariableNames.forEach(function (variableName) {
        var defaultVariable = {
          name: variableName,
          min: 0,
          max: 10,
          precision: 0
        };
        var newVariable = oldVariables.find(function (v) {
          return v.name === variableName;
        }) || defaultVariable;
        newVariables.push(newVariable);
      });
      var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
        value: {
          generatedSolutions: {
            $set: []
          },
          variables: {
            $set: (0, _sortBy["default"])(newVariables, function (v) {
              return v.name;
            })
          }
        }
      });
      _this2.props.changeItemState({
        itemBody: itemBody,
        scoringData: scoringData
      });
      _this2.generateSolutionsService.cancel();
    });
    (0, _defineProperty2["default"])(_this2, "handleVariableChange", function (variableIdx, field) {
      return function (value) {
        var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
          value: {
            generatedSolutions: {
              $set: []
            },
            variables: (0, _defineProperty2["default"])({}, variableIdx, (0, _defineProperty2["default"])({}, field, {
              $set: value
            }))
          }
        });
        _this2.props.changeItemState({
          scoringData: scoringData
        });
        _this2.generateSolutionsService.cancel();
      };
    });
    (0, _defineProperty2["default"])(_this2, "handlePrecisionChange", function (variableIdx) {
      return function (e, value, normalized) {
        if (normalized === null) return;
        var variable = _this2.props.scoringData.value.variables[variableIdx];
        if (normalized == variable.precision) return; // intentional double-equals

        var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
          value: {
            generatedSolutions: {
              $set: []
            },
            variables: (0, _defineProperty2["default"])({}, variableIdx, {
              $set: {
                name: variable.name,
                precision: normalized,
                min: util.toPrecision(variable.min, normalized),
                max: util.toPrecision(variable.max, normalized)
              }
            })
          }
        });
        _this2.props.changeItemState({
          scoringData: scoringData
        });
        _this2.generateSolutionsService.cancel();
      };
    });
    (0, _defineProperty2["default"])(_this2, "handleFormulaChange", function (e) {
      var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
        value: {
          generatedSolutions: {
            $set: []
          },
          formula: {
            $set: e.target.value
          }
        }
      });
      _this2.props.changeItemState({
        scoringData: scoringData
      });
      _this2.generateSolutionsService.cancel();
    });
    (0, _defineProperty2["default"])(_this2, "handleMarginOfErrorTypeChange", function (e, _ref) {
      var value = _ref.value;
      var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
        value: {
          numeric: {
            marginType: {
              $set: value
            }
          }
        }
      });
      _this2.props.changeItemState({
        scoringData: scoringData
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleMarginOfErrorChange", function (e, value, normalizedValue) {
      if (normalizedValue == _this2.props.scoringData.value.numeric.margin) return; // intentional double-equals

      var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
        value: {
          numeric: {
            margin: {
              $set: Number(normalizedValue).toString()
            }
          }
        }
      });
      _this2.props.changeItemState({
        scoringData: scoringData
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleScientificNotationChange", function (e) {
      var scientificNotation = !_this2.props.scoringData.value.scientificNotation;

      // The numeric scoring algorithm doesn't support scientific notation for margin of error
      var numeric = scientificNotation ? {
        type: 'exactResponse'
      } : {
        type: 'marginOfError',
        marginType: 'absolute',
        margin: 0
      };
      var scoringData = _objectSpread(_objectSpread({}, _this2.props.scoringData), {}, {
        value: _objectSpread(_objectSpread({}, _this2.props.scoringData.value), {}, {
          generatedSolutions: [],
          numeric: numeric,
          scientificNotation: scientificNotation
        })
      });
      _this2.props.changeItemState({
        scoringData: scoringData
      });
    });
    (0, _defineProperty2["default"])(_this2, "handleAnswerCountChange", function (e, answerCount) {
      var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
        value: {
          generatedSolutions: {
            $set: []
          },
          answerCount: {
            $set: answerCount
          }
        }
      });
      _this2.props.changeItemState({
        scoringData: scoringData
      });
      _this2.generateSolutionsService.cancel();
    });
    (0, _defineProperty2["default"])(_this2, "handleAnswerPrecisionChange", function (_e, _answerPrecision, answerPrecisionNormalized) {
      var answerPrecision = Number(answerPrecisionNormalized);
      if (answerPrecision === Number(_this2.props.scoringData.value.answerPrecision || 0)) return;
      var scoringData = (0, _immutabilityHelper["default"])(_this2.props.scoringData, {
        value: {
          generatedSolutions: {
            $set: []
          },
          answerPrecision: {
            $set: answerPrecision
          }
        }
      });
      _this2.props.changeItemState({
        scoringData: scoringData
      });
      _this2.generateSolutionsService.cancel();
    });
    (0, _defineProperty2["default"])(_this2, "handleGenerateSolutions", function () {
      var _this2$props$scoringD = _this2.props.scoringData.value,
        answerCount = _this2$props$scoringD.answerCount,
        answerPrecision = _this2$props$scoringD.answerPrecision,
        variables = _this2$props$scoringD.variables,
        formula = _this2$props$scoringD.formula,
        scientificNotation = _this2$props$scoringD.scientificNotation;
      var parsedAnswerCount = parseInt(answerCount, 10) || 0;
      var scoringDataSetupErrors = _this2.scoringDataSetupErrors();
      if (Object.keys(scoringDataSetupErrors).length > 0) {
        _this2.notifyScreenreaderOfSetupErrors(scoringDataSetupErrors);
        _this2.setState({
          status: util.STATUS_FORMULA_SETUP_INVALID
        });
        return;
      } else if (_this2.state.status === util.STATUS_FORMULA_SETUP_INVALID) {
        _this2.setState({
          status: util.STATUS_STOPPED
        });
      }
      _this2.generateSolutionsService.start(parsedAnswerCount, normalizeVariables(variables), (0, _formula.parseFormulaDecimalSeparator)(_this2.getLocale(), formula), answerPrecision, scientificNotation);
    });
    (0, _defineProperty2["default"])(_this2, "getLocale", function () {
      return _this2.context.locale || 'en-US';
    });
    // ===================
    // RENDERING FUNCTIONS
    // ===================
    (0, _defineProperty2["default"])(_this2, "renderVariable", function (variableRecord, idx) {
      var variableName = variableRecord.name;
      var precision = Number(variableRecord.precision);
      var errorPath = ['scoringData', 'value', 'variables', idx];
      return (0, _emotion.jsx)(_uiTable.Table.Row, {
        key: variableName
      }, (0, _emotion.jsx)(_uiTable.Table.RowHeader, null, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, variableName), (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, {
        tabIndex: 0
      }, (0, _formatMessage["default"])('Variable {variable}', {
        variable: variableName
      }))), (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _emotion.jsx)(_VariableInput["default"], {
        disabled: _this2.props.overrideEditableForRegrading,
        decimalPrecision: precision,
        messages: (0, _instUIMessages.toErrors)(_this2.errorsFor([].concat(errorPath, ['min']))),
        onUpdate: _this2.handleVariableChange(idx, 'min'),
        value: variableRecord.min,
        width: "6rem",
        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Minimum value for variable {variable}', {
          variable: variableName
        }))
      })), (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _emotion.jsx)(_VariableInput["default"], {
        disabled: _this2.props.overrideEditableForRegrading,
        decimalPrecision: precision,
        messages: (0, _instUIMessages.toErrors)(_this2.errorsFor([].concat(errorPath, ['max']))),
        onUpdate: _this2.handleVariableChange(idx, 'max'),
        value: variableRecord.max,
        width: "6rem",
        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Maximum value for variable {variable}', {
          variable: variableName
        }))
      })), (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _emotion.jsx)(_quizNumberInput["default"], {
        disabled: _this2.props.overrideEditableForRegrading,
        max: 10,
        messages: (0, _instUIMessages.toErrors)(_this2.errorsFor([].concat(errorPath, ['precision']))),
        min: 0,
        onChange: _this2.handlePrecisionChange(idx),
        showArrows: true,
        step: 1,
        value: variableRecord.precision,
        width: "6rem",
        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('decimals of precision for variable {variable}', {
          variable: variableName
        }))
      })));
    });
    _this2.generateSolutionsService = new _GenerateSolutionsService["default"]({
      onStart: _this2.serviceOnStart,
      onSuccess: _this2.serviceOnComplete(util.STATUS_STOPPED),
      onFailure: _this2.serviceOnComplete(util.STATUS_FAILED),
      onCancel: _this2.serviceOnCancel
    });
    _this2.state = {
      status: util.STATUS_STOPPED
    };
    return _this2;
  }
  (0, _inherits2["default"])(FormulaEdit, _Component);
  return (0, _createClass2["default"])(FormulaEdit, [{
    key: "scoringDataSetupErrors",
    value:
    // =================
    // UTILITY FUNCTIONS
    // =================

    function scoringDataSetupErrors() {
      var scoringDataErrors = (0, _get["default"])(this.errors(), ['scoringData', 'value'], {});
      return (0, _omit["default"])(scoringDataErrors, ['generatedSolutions']);
    }
  }, {
    key: "notifyScreenreaderOfSetupErrors",
    value: function notifyScreenreaderOfSetupErrors(sdSetupErrors) {
      var _this3 = this;
      var vars = Object.keys(sdSetupErrors.variables || {}).map(function (v) {
        return _this3.props.scoringData.value.variables[v].name.replace(/`/g, '');
      });
      var errorMsg;
      if (vars.length > 0) {
        errorMsg = (0, _formatMessage["default"])('variables containing errors: {vars}', {
          vars: vars.join(', ')
        });
      }
      if (this.props.scoringData.value.variables.length === 0) {
        errorMsg = (0, _formatMessage["default"])('must define at least one variable');
      }
      if (errorMsg) {
        this.props.notifyScreenreader((0, _formatMessage["default"])('The following error prevented generating solutions: {errorMsg}', {
          errorMsg: errorMsg
        }));
      }
    }
  }, {
    key: "renderVariablesTable",
    value: function renderVariablesTable() {
      var variables = normalizeVariables(this.props.scoringData.value.variables);
      return (0, _emotion.jsx)(_uiTable.Table, {
        caption: ""
      }, (0, _emotion.jsx)(_uiTable.Table.Body, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
        id: "formula-edit-variable"
      }, (0, _formatMessage["default"])('Variable')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
        id: "formula-edit-min"
      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Minimum Value')), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("div", {
        title: (0, _formatMessage["default"])('Minimum Value')
      }, (0, _formatMessage["default"])('Min')))), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
        id: "formula-edit-max"
      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Maximum Value')), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("div", {
        title: (0, _formatMessage["default"])('Maximum Value')
      }, (0, _formatMessage["default"])('Max')))), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
        id: "formula-edit-decimals"
      }, (0, _formatMessage["default"])('Decimals'))), variables.map(this.renderVariable)));
    }
  }, {
    key: "errorsFor",
    value: function errorsFor(path) {
      if (!this.props.errorsAreShowing && this.state.status !== util.STATUS_FORMULA_SETUP_INVALID) {
        return [];
      }
      return (0, _get["default"])(this.errors(), path, []);
    }
  }, {
    key: "errors",
    value: function errors() {
      return new _formula2["default"](_objectSpread(_objectSpread({}, (0, _omit["default"])(this.props, ['getErrors', 'scoringData'])), {}, {
        scoringData: this.props.scoringData
      })).getErrors();
    }
  }, {
    key: "renderOptionsDescription",
    value: function renderOptionsDescription() {
      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage["default"])('Formula options'));
    }
  }, {
    key: "render",
    value: function render() {
      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, (0, _formatMessage["default"])('Enter your question, build a formula, and generate a set of possible answer' + ' combinations. Students will see the question with a randomly selected set' + ' of variables filled in and have to type the correct numerical answer.'))), (0, _emotion.jsx)("div", {
        css: this.props.styles.sectionHeading
      }, (0, _emotion.jsx)(_uiText.Text, {
        size: "large"
      }, (0, _formatMessage["default"])('Question'))), (0, _emotion.jsx)("div", {
        css: this.props.styles.instructions
      }, (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, (0, _formatMessage["default"])('You can define variables by typing variable names surrounded by backticks (e.g., "what is 5 plus `x`?")'))), (0, _emotion.jsx)(_QuestionContainer["default"], {
        disabled: this.props.overrideEditableForRegrading,
        enableRichContentEditor: this.props.enableRichContentEditor,
        itemBody: this.props.itemBody,
        onDescriptionChange: this.handleItemBodyChange,
        onModalClose: this.props.onModalClose,
        onModalOpen: this.props.onModalOpen,
        openImportModal: this.props.openImportModal,
        stemErrors: this.errorsFor(['itemBody']),
        textareaRef: this.handleStemRef
      }, (0, _emotion.jsx)("div", {
        css: this.props.styles.sectionHeading
      }, (0, _emotion.jsx)(_uiText.Text, {
        size: "large"
      }, (0, _formatMessage["default"])('Answers'))), (0, _emotion.jsx)("div", {
        css: this.props.styles.instructions
      }, (0, _emotion.jsx)(_uiText.Text, {
        color: "primary"
      }, (0, _formatMessage["default"])('Once you have entered your variables above, you should see them' + ' listed below. You can specify the range of possible values for' + ' each variable below.'))), (0, _emotion.jsx)("div", {
        "data-section": "variable_definitions"
      }, this.renderVariablesTable()), (0, _emotion.jsx)("div", {
        "data-section": "formula"
      }, (0, _emotion.jsx)(_FormulaSection["default"], {
        locale: this.getLocale(),
        formulaErrors: this.errorsFor(['scoringData', 'value', 'formula']),
        generatedSolutionsErrors: this.errorsFor(['scoringData', 'value', 'generatedSolutions', '$errors']),
        handleAnswerCountChange: this.handleAnswerCountChange,
        handleAnswerPrecisionChange: this.handleAnswerPrecisionChange,
        handleFormulaChange: this.handleFormulaChange,
        handleGenerateSolutions: this.handleGenerateSolutions,
        handleMarginOfErrorTypeChange: this.handleMarginOfErrorTypeChange,
        handleMarginOfErrorChange: this.handleMarginOfErrorChange,
        handleScientificNotationChange: this.handleScientificNotationChange,
        overrideEditableForRegrading: this.props.overrideEditableForRegrading,
        scoringData: this.props.scoringData,
        status: this.state.status
      }))), (0, _emotion.jsx)(_QuestionSettingsContainer["default"], {
        additionalOptions: this.props.additionalOptions
      }, this.props.showCalculatorOption && (0, _emotion.jsx)(_QuestionSettingsPanel["default"], {
        label: (0, _formatMessage["default"])('Options'),
        defaultExpanded: true
      }, (0, _emotion.jsx)(_quizCommon.FormFieldGroup, {
        rowSpacing: "small",
        description: this.renderOptionsDescription()
      }, (0, _emotion.jsx)(_CalculatorOptionWithOqaatAlert["default"], {
        disabled: this.props.overrideEditableForRegrading,
        calculatorValue: this.props.calculatorType,
        onCalculatorTypeChange: this.handleCalculatorTypeChange,
        oqaatChecked: this.props.oneQuestionAtATime,
        onOqaatChange: this.props.setOneQuestionAtATime
      })))));
    }
  }]);
}(_react.Component), (0, _defineProperty2["default"])(_FormulaEdit, "displayName", 'FormulaEdit'), (0, _defineProperty2["default"])(_FormulaEdit, "componentId", "Quizzes".concat(_FormulaEdit.displayName)), (0, _defineProperty2["default"])(_FormulaEdit, "interactionType", _formula2["default"]), (0, _defineProperty2["default"])(_FormulaEdit, "propTypes", _objectSpread(_objectSpread({
  additionalOptions: _propTypes["default"].array,
  calculatorType: _propTypes["default"].string,
  changeItemState: _propTypes["default"].func,
  enableRichContentEditor: _propTypes["default"].bool,
  errorsAreShowing: _propTypes["default"].bool,
  interactionData: _propTypes["default"].object,
  itemBody: _propTypes["default"].string,
  notifyScreenreader: _propTypes["default"].func.isRequired,
  onModalClose: _propTypes["default"].func,
  onModalOpen: _propTypes["default"].func,
  oneQuestionAtATime: _propTypes["default"].bool,
  openImportModal: _propTypes["default"].func,
  overrideEditableForRegrading: _propTypes["default"].bool,
  properties: _propTypes["default"].object,
  scoringData: _propTypes["default"].object,
  setOneQuestionAtATime: _propTypes["default"].func
}, _withEditTools["default"].injectedProps), {}, {
  styles: _propTypes["default"].object,
  showCalculatorOption: _propTypes["default"].bool,
  separatorConfig: _propTypes["default"].shape({
    decimalSeparator: _propTypes["default"].string,
    thousandSeparator: _propTypes["default"].string
  })
})), (0, _defineProperty2["default"])(_FormulaEdit, "defaultProps", {
  additionalOptions: [],
  calculatorType: 'none',
  enableRichContentEditor: true,
  oneQuestionAtATime: false,
  overrideEditableForRegrading: false,
  setOneQuestionAtATime: Function.prototype,
  changeItemState: void 0,
  errorsAreShowing: void 0,
  interactionData: void 0,
  itemBody: void 0,
  onModalClose: void 0,
  onModalOpen: void 0,
  openImportModal: void 0,
  properties: void 0,
  scoringData: void 0,
  showCalculatorOption: true
}), (0, _defineProperty2["default"])(_FormulaEdit, "contextTypes", {
  locale: _propTypes["default"].string
}), _FormulaEdit)) || _class) || _class) || _class);