quiz-interactions/lib/components/numeric/Edit/RequirementHelpModal/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 = RequirementHelpModal;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _uiButtons = require("@instructure/ui-buttons");

var _uiElements = require("@instructure/ui-elements");

var _uiOverlays = require("@instructure/ui-overlays");

function RequirementHelpModal(_ref) {
  var mountNode = _ref.mountNode,
      onDismiss = _ref.onDismiss,
      open = _ref.open;
  return _react.default.createElement(_uiOverlays.Modal, {
    label: (0, _formatMessage.default)('Requirement help'),
    mountNode: mountNode,
    onDismiss: onDismiss,
    open: open,
    size: "medium"
  }, _react.default.createElement(_uiOverlays.Modal.Header, null, _react.default.createElement(_uiButtons.CloseButton, {
    onClick: onDismiss,
    placement: "end",
    variant: "icon"
  }, (0, _formatMessage.default)('Close')), _react.default.createElement(_uiElements.Heading, null, (0, _formatMessage.default)('Requirement'))), _react.default.createElement(_uiOverlays.Modal.Body, null, _react.default.createElement(_uiElements.Heading, {
    as: "h3",
    level: "h4"
  }, (0, _formatMessage.default)('Exact Response')), _react.default.createElement(_uiElements.Text, {
    as: "p"
  }, (0, _formatMessage.default)('Student responses will be marked correct if they match the answer exactly. ' + 'Answers can be in scientific notation (Accepted format: 1.234*10^3).')), _react.default.createElement(_uiElements.Heading, {
    as: "h3",
    level: "h4"
  }, (0, _formatMessage.default)('Margin of Error')), _react.default.createElement(_uiElements.Text, {
    as: "p"
  }, (0, _formatMessage.default)('Student responses will be marked correct if they fall within the ' + 'margin above or below the answer.')), _react.default.createElement(_uiElements.Heading, {
    as: "h3",
    level: "h4"
  }, (0, _formatMessage.default)('Within a Range')), _react.default.createElement(_uiElements.Text, {
    as: "p"
  }, (0, _formatMessage.default)('Student responses will be marked correct if they are greater than ' + 'or equal to the range start and less than or equal to the range end. ' + 'Range inputs can be in scientific notation (Accepted format: 1.234*10^3).')), _react.default.createElement(_uiElements.Heading, {
    as: "h3",
    level: "h4"
  }, (0, _formatMessage.default)('Precise Response')), _react.default.createElement(_uiElements.Text, {
    as: "p"
  }, (0, _formatMessage.default)('Student responses will be marked correct if they match the answer ' + 'to the given number of significant digits or decimal places.'))), _react.default.createElement(_uiOverlays.Modal.Footer, null, _react.default.createElement(_uiButtons.Button, {
    onClick: onDismiss,
    variant: "primary"
  }, (0, _formatMessage.default)('Done'))));
}

RequirementHelpModal.propTypes = {
  mountNode: _propTypes.default.node,
  // for chromatic
  onDismiss: _propTypes.default.func.isRequired,
  open: _propTypes.default.bool.isRequired
};
RequirementHelpModal.defaultProps = {
  mountNode: void 0
};
RequirementHelpModal.displayName = 'RequirementHelpModal';