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

A React UI component Library for quiz interaction types.

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

import {ItemBodyWrapper} from '@instructure/quiz-rce/components/ItemBodyWrapper/index'

import ChoiceBody from '../components/ChoiceBody'

/**
---
category: TrueFalse
---
  True False Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <TrueFalseShow
      itemBody="The sun is a star"
      itemId="12"
      interactionData={{ trueChoice: 'True', falseChoice: 'False' }}
      scoringData={{ value: false }}
    />
  </SettingsSwitcher>
  ```
**/

export default class TrueFalseShow extends Component {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    itemId: PropTypes.string,
    interactionData: PropTypes.shape({
      trueChoice: PropTypes.string,
      falseChoice: PropTypes.string,
    }).isRequired,
    scoringData: PropTypes.shape({
      value: PropTypes.bool,
    }).isRequired,
    isSurvey: PropTypes.bool.isRequired,
  }

  static defaultProps = {
    itemId: void 0,
  }

  render() {
    const {falseChoice, trueChoice} = this.props.interactionData

    return (
      <ItemBodyWrapper>
        <ChoiceBody
          selectedValue={this.props.scoringData.value ? 'trueChoice' : 'falseChoice'}
          name={`${this.props.itemId}_show`}
          falseChoiceLabel={falseChoice}
          trueChoiceLabel={trueChoice}
          itemBody={this.props.itemBody}
          readOnly
          hideChoices={this.props.isSurvey}
        />
      </ItemBodyWrapper>
    )
  }
}