@instructure/quiz-interactions/src/components/multiple_answer/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'

const noop = () => {}

/**
---
category: MultipleAnswer
---
  Multiple Answer Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <MultipleAnswerShow
      itemBody="Who was in the first cabinet of the USA?"
      interactionData={{
        choices: [
          { id: 'uuid1', itemBody: 'Thomas Jefferson', position: 1 },
          { id: 'uuid2', itemBody: 'John Marshall', position: 2 },
          { id: 'uuid3', itemBody: 'John Knox', position: 3 },
          { id: 'uuid4', itemBody: 'Alexander Hamilton', position: 4 },
          { id: 'uuid5', itemBody: 'Aaron Burr', position: 5 },
          { id: 'uuid6', itemBody: 'Ben Franklin', position: 6 }
        ]
      }}
      scoringData={{ value: ['uuid1', 'uuid3', 'uuid4'] }}
    />
  </SettingsSwitcher>
  ```
**/

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

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

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