@instructure/quiz-interactions/src/components/formula/Result/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import PropTypes from 'prop-types'

import {withI18nSupport} from '@instructure/quiz-common/with-i18n-support'

import NumericResult from '../../numeric/Result'
import {substituteVars} from '../common/util'

/**
---
category: Formula
---
  Formula Result component

  ```jsx_example
  function Example (props) {
    const exampleProps = {
      itemBody: 'Solve the equation \\(y = `m` \\cdot x + `b`\\) where x = `x`',
      interactionData: {
        variables: [
          { name: 'm', value: 2 },
          { name: 'b', value: 17.23456 },
          { name: 'x', value: 1000 }
        ]
      },
      scoredData: {
        value: {
          userResponse: '2017.23456',
          correctAnswer: '2017.23456',
          resultScore: 1
        }
      }
    }

    return (
      <FormulaResult {...exampleProps} {...props} />
    )
  }

  <SettingsSwitcher locales={LOCALES}>
      <Example />
  </SettingsSwitcher>
  ```
**/
export default class FormulaResult extends withI18nSupport(Component) {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    interactionData: PropTypes.object.isRequired,
    scoredData: PropTypes.shape({
      value: PropTypes.shape({
        userResponse: PropTypes.string,
        correctAnswer: PropTypes.string,
        resultScore: PropTypes.number,
      }),
    }).isRequired,
    locale: PropTypes.string,
  }

  static defaultProps = {
    locale: null,
  }

  static contextTypes = {
    locale: PropTypes.string,
  }

  render() {
    const {itemBody, interactionData, ...other} = this.props
    const transformedBody = substituteVars(itemBody, interactionData.variables, this.locale)

    return <NumericResult {...other} itemBody={transformedBody} />
  }
}