quiz-interactions/lib/components/matching/Result/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 _find = _interopRequireDefault(require("lodash/fp/find"));

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

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

var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));

var _quizRce = require("@instructure/quiz-rce");

var _FeedbackWrapper = _interopRequireDefault(require("@instructure/quiz-results-feedback/lib/components/FeedbackWrapper"));

var _NoResponse = _interopRequireDefault(require("@instructure/quiz-results-feedback/lib/components/NoResponse"));

var _theme = _interopRequireDefault(require("./theme"));

var _dec, _class, _class2, _temp;

var styles = {
  componentId: 'bUPem',
  template: function template(theme) {
    return "\n\n.bUPem_ewEu{align-items:flex-start;display:flex;margin-bottom:".concat(theme.itemMargin || 'inherit', ";margin-top:1.5rem;position:relative}\n\n.bUPem_ewEu:before{top:calc(").concat(theme.itemBeforeMargin || 'inherit', " + 1rem);width:100%}\n\n.bUPem_ewEu>*{flex:0 1 100%;padding:").concat(theme.itemPadding || 'inherit', "}\n\n.bUPem_cSuF{background-color:").concat(theme.questionColor || 'inherit', ";border:").concat(theme.questionBorder || 'inherit', " solid ").concat(theme.questionBorderColor || 'inherit', ";margin-top:").concat(theme.questionMargin || 'inherit', "}\n\n.bUPem_fxMt{background-color:#fff;margin-right:0;padding:0}\n\n.bUPem_fUtg{border-bottom:").concat(theme.dividerBorder || 'inherit', " solid ").concat(theme.dividerBorderColor || 'inherit', ";flex-shrink:1.3;margin-top:calc(").concat(theme.dividerMargin || 'inherit', "*1.6);padding:0}");
  },
  'item': 'bUPem_ewEu',
  'question': 'bUPem_cSuF',
  'answer': 'bUPem_fxMt',
  'divider': 'bUPem_fUtg'
};

/**
---
category: Matching
---
  Matching Result component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <MatchingResult
      itemBody="Match the name of the celestial body on the left with its correct classification."
      interactionData={{
        questions: [
          { id: 'quuid1', itemBody: 'Mars' },
          { id: 'quuid2', itemBody: 'Phobos' },
          { id: 'quuid3', itemBody: 'Andromeda' },
          { id: 'quuid4', itemBody: 'Alpha Centauri' }
        ],
        answers: [
          'Planet',
          'Moon',
          'Nebula',
          'Star',
          'Galaxy - this is a very long answer - this is a very long answer - this is a very long answer'
        ]
      }}
      scoredData={{
        value: [{
          id: 'quuid1',
          userResponded: 'Planet',
          value: 'Planet'
        }, {
          id: 'quuid2',
          userResponded: 'Moon',
          value: 'Moon'
        }, {
          id: 'quuid3',
          userResponded: 'Nebula',
          value: 'Nebula'
        }, {
          id: 'quuid4',
          userResponded: 'Star',
          value: 'GalaxyGalaxy - this is a very long answer - this is a very long answer - this is a very long answer'
        }]
      }}
    />
  </SettingsSwitcher>
  ```
**/
var MatchingResult = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(MatchingResult, _Component);

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

  (0, _createClass2.default)(MatchingResult, [{
    key: "getAnswerBodyForQuestion",
    value: function getAnswerBodyForQuestion(questionId) {
      var answer = (0, _find.default)({
        id: questionId
      }, this.props.scoredData.value || {});
      return answer && answer.value;
    }
  }, {
    key: "renderAnswer",
    value: function renderAnswer(response, answerBody) {
      var correctnessKnown = typeof this.props.scoredData.correct !== 'undefined';
      var status = 'incorrect';

      if (response && response.resultScore) {
        status = 'correct';
      } else if ((!response || !response.resultScore) && correctnessKnown) {
        status = 'incorrect';
      } else {
        status = 'unknown';
      }

      return _react.default.createElement("div", {
        className: styles.answer
      }, response && response.userResponded ? _react.default.createElement(_FeedbackWrapper.default, {
        userResponse: response.userResponded,
        correctAnswer: answerBody,
        status: status,
        hiddenCorrectAnswerText: (0, _formatMessage.default)('Correct match: '),
        hiddenIncorrectAnswerText: (0, _formatMessage.default)('Incorrect match: ')
      }) : _react.default.createElement(_NoResponse.default, {
        correctAnswerLabel: answerBody,
        responseHidden: !this.props.scoredData.value,
        status: status
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this = this;

      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement("div", null, this.props.interactionData.questions.map(function (question) {
        var response = (0, _find.default)({
          id: question.id
        }, _this.props.scoredData.value || {});

        var answerBody = _this.getAnswerBodyForQuestion(question.id);

        return _react.default.createElement("div", {
          className: styles.item,
          key: question.id
        }, _react.default.createElement("div", {
          className: styles.question
        }, _react.default.createElement(_uiElements.Text, {
          color: "primary"
        }, question.itemBody)), _react.default.createElement("div", {
          className: styles.divider
        }), _this.renderAnswer(response, answerBody));
      })));
    }
  }]);
  MatchingResult.displayName = "MatchingResult";
  return MatchingResult;
}(_react.Component), _class2.propTypes = {
  interactionData: _propTypes.default.shape({
    questions: _propTypes.default.arrayOf(_propTypes.default.shape({
      id: _propTypes.default.string,
      itemBody: _propTypes.default.string
    }))
  }).isRequired,
  itemBody: _propTypes.default.string.isRequired,
  scoredData: _propTypes.default.shape({
    correct: _propTypes.default.bool,
    value: _propTypes.default.arrayOf(_propTypes.default.shape({
      id: _propTypes.default.string.isRequired,
      resultScore: _propTypes.default.number,
      userResponded: _propTypes.default.string,
      value: _propTypes.default.string
    }))
  }).isRequired
}, _temp)) || _class);
var _default = MatchingResult;
exports.default = _default;