quiz-interactions/lib/components/fill_blank/Show/index.js

A React UI component Library for quiz interaction types.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _map = _interopRequireDefault(require("lodash/fp/map"));

var _Take = _interopRequireDefault(require("../Take"));

var noop = function noop() {};
/**
---
category: FillInTheBlank
---
  Fill in the Blank Show component

  ```jsx_example
  const WrappedExample = DragDropContext(HTML5Backend)(FillBlankShow);

  <SettingsSwitcher locales={LOCALES}>
    <WrappedExample
      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' }
        }]
      }}
    />
  </SettingsSwitcher>
  ```
**/


var FillBlankShow =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FillBlankShow, _Component);

  function FillBlankShow() {
    (0, _classCallCheck2.default)(this, FillBlankShow);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FillBlankShow).apply(this, arguments));
  }

  (0, _createClass2.default)(FillBlankShow, [{
    key: "render",
    value: function render() {
      return _react.default.createElement(_Take.default, {
        userResponse: {
          value: (0, _map.default)(function (_ref) {
            var id = _ref.id,
                value = _ref.scoringData.value;
            return {
              id: id,
              value: Array.isArray(value) ? value[0] : value,
              type: 'Text'
            };
          }, this.props.scoringData.value)
        },
        interactionData: this.props.interactionData,
        handleResponseUpdate: noop,
        readOnly: true
      });
    }
  }]);
  FillBlankShow.displayName = "FillBlankShow";
  return FillBlankShow;
}(_react.Component);

exports.default = FillBlankShow;
FillBlankShow.propTypes = {
  interactionData: _propTypes.default.object.isRequired,
  scoringData: _propTypes.default.object.isRequired
};