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

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import map from 'lodash/fp/map'

import FillInTheBlankTake from '../Take'

const noop = () => {}

/**
---
category: FillInTheBlank
---
  Fill in the Blank Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <DndProvider backend={HTML5Backend}>
    <FillBlankShow
      interactionData={{
        prompt: '<p><strong>Please</strong> fill in all the blanks</p>',
        stemItems: [
          { id: 'stem_uuid-1', position: 1, type: 'text', value: ' ' },
          { id: 'stem_uuid0', position: 2, type: 'blank', blankId: 'fitb_uuid1' },
          { id: 'stem_uuid1', position: 3, type: 'text', value: ' Columbus sailed in ' },
          { id: 'stem_uuid2', position: 4, type: 'blank', blankId: 'fitb_uuid2' },
          { id: 'stem_uuid3', position: 5, type: 'text', value: ' from the country of ' },
          { id: 'stem_uuid4', position: 6, type: 'blank', blankId: 'fitb_uuid3' },
          { id: 'stem_uuid5', position: 7, type: 'text', value: ' on the continent of ' },
          { id: 'stem_uuid6', position: 8, type: 'blank', blankId: 'fitb_uuid4' },
          { id: 'stem_uuid7', position: 9, type: 'text', value: ' across the ' },
          { id: 'stem_uuid8', position: 10, type: 'blank', blankId: 'fitb_uuid5' },
          { id: 'stem_uuid9', position: 11, type: 'text', value: ' and found ' },
          { id: 'stem_uuid10', position: 12, type: 'blank', blankId: 'fitb_uuid6' },
          { id: 'stem_uuid11', position: 13, type: 'text', value: '.'  },
          { id: 'stem_uuid12', position: 14, type: 'text', value: ' Where the people were ' },
          { id: 'stem_uuid13', position: 15, type: 'blank', blankId: 'fitb_uuid7' },
          { id: 'stem_uuid14', position: 16, type: 'text', value: '.' }
        ],
        blanks: [{
          id: 'fitb_uuid1',
          answerType: 'openEntry'
        }, {
          id: 'fitb_uuid2',
          answerType: 'openEntry'
        }, {
          id: 'fitb_uuid3',
          answerType: 'openEntry'
        }, {
          id: 'fitb_uuid4',
          answerType: 'openEntry'
        }, {
          id: 'fitb_uuid5',
          answerType: 'openEntry'
        }, {
          id: 'fitb_uuid6',
          answerType: 'wordbank',
          choices: [
            { id: 'choice_uuid11_brazil', position: 1, itemBody: 'Brazil' },
            { id: 'choice_uuid12_austria', position: 2, itemBody: 'Austria' },
            { id: 'choice_uuid13_america', position: 3, itemBody: 'America' }
          ]
        }, {
          id: 'fitb_uuid7',
          answerType: 'dropdown',
          choices: [
            { id: 'choice_uuid11_peaceful', position: 1, itemBody: 'peaceful' },
            { id: 'choice_uuid12_war-torn', position: 2, itemBody: 'war-torn' },
            { id: 'choice_uuid13_confused', position: 3, itemBody: 'confused' }
          ]
        }]
      }}
      scoringData={{
        value: [{
          id: 'fitb_uuid1',
          scoringAlgorithm: 'TextRegex',
          scoringData: { value: '.*Christopher', blankText: 'Christopher' }
        }, {
          id: 'fitb_uuid2',
          scoringAlgorithm: 'TextCloseEnough',
          scoringData: { value: '1492', editDistance: 1, blankText: '1492' }
        }, {
          id: 'fitb_uuid3',
          scoringAlgorithm: 'TextInChoices',
          scoringData: { value: ['Spain', 'Espana', 'Kingdom of Spain'], blankText: 'Spain' }
        }, {
          id: 'fitb_uuid4',
          scoringAlgorithm: 'TextEquivalence',
          scoringData: { value: 'Europe', blankText: 'Europe' }
        }, {
          id: 'fitb_uuid5',
          scoringAlgorithm: 'TextContainsAnswer',
          scoringData: { value: 'Atlantic', blankText: 'Atlantic' }
        }, {
          id: 'fitb_uuid6',
          scoringAlgorithm: 'Equivalence',
          scoringData: { value: 'choice_uuid13_america', blankText: 'America' }
        }, {
          id: 'fitb_uuid7',
          scoringAlgorithm: 'Equivalence',
          scoringData: { value: 'choice_uuid13_confused', blankText: 'Confused' }
        }]
      }}
    />
    </DndProvider>
  </SettingsSwitcher>
  ```
**/

export default class FillBlankShow extends Component {
  static propTypes = {
    interactionData: PropTypes.object.isRequired,
    scoringData: PropTypes.object.isRequired,
  }

  render() {
    return (
      <FillInTheBlankTake
        userResponse={{
          value: map(
            ({id, scoringData: {value}}) => ({
              id,
              value: Array.isArray(value) ? value[0] : value,
              type: 'Text',
            }),
            this.props.scoringData.value,
          ),
        }}
        interactionData={this.props.interactionData}
        handleResponseUpdate={noop}
        readOnly
      />
    )
  }
}