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

A React UI component Library for quiz interaction types.

"use strict";

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

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

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 _lodash = require("lodash");

var _uiElements = require("@instructure/ui-elements");

var _uiThemeable = require("@instructure/ui-themeable");

var _find = _interopRequireDefault(require("lodash/find"));

var _Edit = _interopRequireDefault(require("../Edit"));

var _Show = _interopRequireDefault(require("../Show"));

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

var _Result = _interopRequireDefault(require("../Result"));

var _defaultTheme = _interopRequireDefault(require("../../common/example/defaultTheme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'beqzy',
  template: function template(theme) {
    return "\n\n.egxol_dXOl{flex:1;padding:".concat(theme.panelPadding || 'inherit', "}\n\n.egxol_qOas{display:flex}");
  },
  'panel': 'egxol_dXOl',
  'row': 'egxol_qOas'
};

var _ref =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Edit");

var _ref2 =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Show");

var _ref3 =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Take");

var _ref4 =
/*#__PURE__*/
_react.default.createElement(_uiElements.Heading, {
  level: "h2"
}, "Result");

var FillBlankExample = (
/**
---
category: FillInTheBlank
---
  FillInTheBlank Example.

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

    <SettingsSwitcher locales={LOCALES}>
      <WrappedExample />
    </SettingsSwitcher>
  ```
**/
_dec = (0, _uiThemeable.themeable)(_defaultTheme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(FillBlankExample, _Component);

  function FillBlankExample(props) {
    var _this;

    (0, _classCallCheck2.default)(this, FillBlankExample);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FillBlankExample).call(this));

    _this.handleChangeItemState = function (itemState) {
      var newState = {};

      if (itemState.interactionData) {
        newState.takeInteractionData = _this.transformTakeInteractionData(itemState.interactionData);
      }

      var updatedState = Object.assign({}, itemState, newState);

      _this.setState(updatedState);
    };

    _this.handleResponseUpdate = function (userResponse) {
      _this.setState({
        userResponse: {
          value: userResponse
        }
      });
    };

    _this.state = {};

    if (props.useDefaultData) {
      Object.assign(_this.state, {
        interactionData: {
          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: ' . Where the people were '
          }, {
            id: 'stem_uuid12',
            position: 14,
            type: 'blank',
            blankId: 'fitb_uuid7'
          }, {
            id: 'stem_uuid13',
            position: 15,
            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',
            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'
            }],
            answerType: 'wordbank'
          }, {
            id: 'fitb_uuid7',
            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'
            }],
            answerType: 'dropdown'
          }]
        },
        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'
            }
          }]
        },
        userResponse: {
          value: [{
            id: 'fitb_uuid1',
            value: 'Christopher',
            type: 'Text'
          }, {
            id: 'fitb_uuid2',
            value: '1493',
            type: 'Text'
          }, {
            id: 'fitb_uuid3',
            value: 'Span',
            type: 'Text'
          }, {
            id: 'fitb_uuid4',
            value: 'Europe',
            type: 'Text'
          }, {
            id: 'fitb_uuid5',
            value: 'Atlantic',
            type: 'Text'
          }, {
            id: 'fitb_uuid6',
            value: 'choice_uuid12_austria',
            type: 'Text'
          }, {
            id: 'fitb_uuid7',
            value: 'choice_uuid13_confused',
            type: 'Text'
          }]
        }
      });
      _this.state.scoredData = _this.transformScoredData();
      _this.state.takeInteractionData = _this.transformTakeInteractionData(_this.state.interactionData);
    }

    return _this;
  }

  (0, _createClass2.default)(FillBlankExample, [{
    key: "transformScoredData",
    value: function transformScoredData() {
      var _this2 = this;

      var scoredData = {};
      this.state.scoringData.value.forEach(function (item) {
        var blank = (0, _find.default)(_this2.state.interactionData.blanks, ['id', item.id]);
        var correctAnswer = item.scoringData.blankText;
        var userResponseObj = (0, _find.default)(_this2.state.userResponse.value, ['id', item.id]) || {};
        var userResponse = '';

        if (blank.answerType !== 'openEntry' && userResponseObj.value) {
          var choice = (0, _find.default)(blank.choices, ['id', userResponseObj.value]) || {};
          userResponse = choice.itemBody || '';
        } else {
          userResponse = userResponseObj.value;
        }

        var resultScore = userResponse === correctAnswer ? 1 : 0;
        scoredData[item.id] = {
          resultScore: resultScore,
          userResponse: userResponse,
          correctAnswer: correctAnswer,
          userResponded: 1
        };
      });
      return {
        value: scoredData
      };
    }
  }, {
    key: "transformTakeInteractionData",
    value: function transformTakeInteractionData(interactionData) {
      return (0, _lodash.cloneDeep)(interactionData);
    }
  }, {
    key: "renderEdit",
    value: function renderEdit() {
      return _react.default.createElement("div", {
        title: "edit"
      }, _ref, _react.default.createElement(_Edit.default, {
        changeItemState: this.handleChangeItemState,
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        scoringData: this.state.scoringData
      }));
    }
  }, {
    key: "renderShow",
    value: function renderShow() {
      return _react.default.createElement("div", {
        title: "show"
      }, _ref2, _react.default.createElement(_Show.default, {
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        scoringData: this.state.scoringData
      }));
    }
  }, {
    key: "renderTake",
    value: function renderTake() {
      return _react.default.createElement("div", {
        title: "take"
      }, _ref3, _react.default.createElement(_Take.default, {
        interactionData: this.state.takeInteractionData,
        itemBody: this.state.itemBody,
        userResponse: this.state.userResponse,
        handleResponseUpdate: this.handleResponseUpdate
      }));
    }
  }, {
    key: "renderResult",
    value: function renderResult() {
      return _react.default.createElement("div", {
        title: "result"
      }, _ref4, _react.default.createElement(_Result.default, {
        interactionData: this.state.takeInteractionData,
        itemBody: this.state.itemBody,
        scoredData: this.transformScoredData()
      }));
    }
  }, {
    key: "render",
    value: function render() {
      return _react.default.createElement("div", null, _react.default.createElement("div", {
        className: styles.row
      }, _react.default.createElement("div", {
        className: styles.panel
      }, this.renderEdit()), _react.default.createElement("div", {
        className: styles.panel
      }, this.renderShow())), _react.default.createElement("div", {
        className: styles.row
      }, _react.default.createElement("div", {
        className: styles.panel
      }, this.renderTake()), _react.default.createElement("div", {
        className: styles.panel
      }, this.renderResult())));
    }
  }]);
  FillBlankExample.displayName = "FillBlankExample";
  return FillBlankExample;
}(_react.Component), _class2.propTypes = {
  useDefaultData: _propTypes.default.bool
}, _class2.defaultProps = {
  useDefaultData: true
}, _temp)) || _class);
exports.default = FillBlankExample;