@instructure/quiz-interactions/es/components/numeric/Edit/RequirementHelpModal/index.js

A React UI component Library for quiz interaction types.

import React from 'react';
import PropTypes from 'prop-types';
import t from '@instructure/quiz-i18n/es/format-message';
import { Button, CloseButton } from '@instructure/ui-buttons';
import { Text } from '@instructure/ui-text';
import { Heading } from '@instructure/ui-heading';
import { Modal } from '@instructure/ui-modal';
export default function RequirementHelpModal(_ref) {
  var mountNode = _ref.mountNode,
    onDismiss = _ref.onDismiss,
    open = _ref.open;
  return /*#__PURE__*/React.createElement(Modal, {
    label: t('Requirement help'),
    mountNode: mountNode,
    onDismiss: onDismiss,
    open: open,
    size: "medium"
  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
    onClick: onDismiss,
    placement: "end",
    screenReaderLabel: t('Close')
  }), /*#__PURE__*/React.createElement(Heading, null, t('Requirement'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Heading, {
    as: "h3",
    level: "h4"
  }, t('Exact Response')), /*#__PURE__*/React.createElement(Text, {
    as: "p"
  }, t('Student responses will be marked correct if they match the answer exactly. ' + 'Answers can be in scientific notation (Accepted format: 1.234*10^3).')), /*#__PURE__*/React.createElement(Heading, {
    as: "h3",
    level: "h4"
  }, t('Margin of Error')), /*#__PURE__*/React.createElement(Text, {
    as: "p"
  }, t('Student responses will be marked correct if they fall within the ' + 'margin above or below the answer.')), /*#__PURE__*/React.createElement(Heading, {
    as: "h3",
    level: "h4"
  }, t('Within a Range')), /*#__PURE__*/React.createElement(Text, {
    as: "p"
  }, t('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).')), /*#__PURE__*/React.createElement(Heading, {
    as: "h3",
    level: "h4"
  }, t('Precise Response')), /*#__PURE__*/React.createElement(Text, {
    as: "p"
  }, t('Student responses will be marked correct if they match the answer ' + 'to the given number of significant digits or decimal places.'))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
    onClick: onDismiss,
    color: "primary"
  }, t('Done'))));
}
RequirementHelpModal.propTypes = {
  mountNode: PropTypes.node,
  // for chromatic
  onDismiss: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired
};
RequirementHelpModal.defaultProps = {
  mountNode: void 0
};
RequirementHelpModal.displayName = 'RequirementHelpModal';