@instructure/quiz-interactions/src/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/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({mountNode, onDismiss, open}) {
  return (
    <Modal
      label={t('Requirement help')}
      mountNode={mountNode}
      onDismiss={onDismiss}
      open={open}
      size="medium"
    >
      <Modal.Header>
        <CloseButton onClick={onDismiss} placement="end" screenReaderLabel={t('Close')} />
        <Heading>{t('Requirement')}</Heading>
      </Modal.Header>
      <Modal.Body>
        <Heading as="h3" level="h4">
          {t('Exact Response')}
        </Heading>
        <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).',
          )}
        </Text>
        <Heading as="h3" level="h4">
          {t('Margin of Error')}
        </Heading>
        <Text as="p">
          {t(
            'Student responses will be marked correct if they fall within the ' +
              'margin above or below the answer.',
          )}
        </Text>
        <Heading as="h3" level="h4">
          {t('Within a Range')}
        </Heading>
        <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).',
          )}
        </Text>
        <Heading as="h3" level="h4">
          {t('Precise Response')}
        </Heading>
        <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.',
          )}
        </Text>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={onDismiss} color="primary">
          {t('Done')}
        </Button>
      </Modal.Footer>
    </Modal>
  )
}

RequirementHelpModal.propTypes = {
  mountNode: PropTypes.node, // for chromatic
  onDismiss: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
}

RequirementHelpModal.defaultProps = {
  mountNode: void 0,
}

RequirementHelpModal.displayName = 'RequirementHelpModal'