@instructure/quiz-interactions/src/components/multiple_choice/Show/index.js

A React UI component Library for quiz interaction types.

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

import Take from '../Take'

/**
---
category: MultipleChoice
---
  Multiple Choice Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <MultipleChoiceShow
      itemId="mc_type"
      itemBody="Who was the first President of the United States?"
      interactionData={{
        choices: [
          { id: 'uuid1', itemBody: 'George Washington', position: 1 },
          { id: 'uuid2', itemBody: 'Alexander Hamilton.', position: 2 },
          { id: 'uuid3', itemBody: 'John Adams', position: 3 },
          { id: 'uuid4', itemBody: 'Thomas Jefferson', position: 4 }
        ]
      }}
      scoringData={{ value: 'uuid1' }}
    />
  </SettingsSwitcher>
  ```
**/

export default class MultipleChoiceShow extends Component {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    itemId: PropTypes.string.isRequired,
    interactionData: Take.propTypes.interactionData,
    scoringData: Take.propTypes.userResponse,
    isSurvey: PropTypes.bool.isRequired,
  }

  static defaultProps = {
    interactionData: void 0,
    scoringData: void 0,
  }

  render() {
    return (
      <Take
        interactionData={this.props.interactionData}
        itemBody={this.props.itemBody}
        itemId={this.props.itemId}
        userResponse={!this.props.isSurvey ? {value: this.props.scoringData.value} : null}
        readOnly
      />
    )
  }
}