@instructure/quiz-interactions/src/records/interactions/numeric.js

A React UI component Library for quiz interaction types.

import React from 'react'

import {rule, each} from 'instructure-validations'
import {isScientificNotation} from '@instructure/quiz-scientific-notation'
import {Text} from '@instructure/ui-text'

import {NUMERIC_SLUG} from '../../interaction_slugs'
import InteractionType from '../InteractionType'

import {numericMessage} from '../../util/validationHelpers'
import t from '@instructure/quiz-i18n/format-message'

export default class NumericInteractionType extends InteractionType {
  constructor(obj) {
    super()
    super.initializeProps(obj)
  }

  slug = NUMERIC_SLUG
  translatedName = t('Numeric')
  getDefaultScoringData = intData => {
    return {
      value: [
        {
          type: 'exactResponse',
          value: '',
          id: '1',
        },
      ],
    }
  }
  getDefaultInteractionData = () => ({})

  static validations = data => {
    const exactResponseValidations = {
      value: [rule('numeric', {message: numericMessage(t('Answer'))})],
    }
    const scientificNotationRuleOptions = {
      message: t('Scientific notation not supported with margin of error'),
    }

    const marginOfErrorValidations = {
      value: [
        rule('noScientificNotation', scientificNotationRuleOptions),
        rule('numeric', {message: numericMessage(t('Answer'))}),
      ],
      margin: [
        rule('noScientificNotation', scientificNotationRuleOptions),
        rule('numeric', {message: numericMessage(t('Margin'))}),
      ],
    }

    const withinARangeValidations = obj => {
      const startRuleOptions = {
        message: numericMessage(t('Range start')),
      }
      const endRuleOptions = {
        message: numericMessage(t('Range end')),
        min: obj.start,
        minMessage: t('Range end must be greater than range start'),
      }
      const scientificNotationRuleOptions = {
        message: t('Must be in scientific notation'),
      }

      const start = []
      const end = []

      if (isScientificNotation(obj.end)) {
        start.push(rule('scientificNotation', scientificNotationRuleOptions))
      }
      start.push(rule('numeric', startRuleOptions))

      if (isScientificNotation(obj.start)) {
        end.push(rule('scientificNotation', scientificNotationRuleOptions))
      }
      end.push(rule('numeric', endRuleOptions))

      return {start, end}
    }

    const preciseResponseValidations = obj => {
      const scientificNotationRuleOptions = {
        message: t('Scientific notation not supported with precise response'),
      }
      return {
        value: [
          rule('noScientificNotation', scientificNotationRuleOptions),
          rule('numeric', {message: numericMessage(t('Answer'))}),
        ],
        precision: [
          rule('noScientificNotation', scientificNotationRuleOptions),
          rule('numeric', {
            message: numericMessage(t('Precision')),
            type: obj.precisionType,
            value: obj.value,
          }),
        ],
      }
    }

    const scoredDatumValidator = obj => {
      return {
        exactResponse: exactResponseValidations,
        marginOfError: marginOfErrorValidations,
        withinARange: withinARangeValidations,
        preciseResponse: preciseResponseValidations,
      }[obj.type]
    }

    return {
      scoringData: {
        value: [each(scoredDatumValidator)],
      },
    }
  }

  getDefaultUserResponse() {
    return {value: ''}
  }

  getRenderedResponse = responseValue => {
    return <Text color="primary">{responseValue}</Text>
  }
}