quiz-interactions/lib/components/ordering/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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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 _uiThemeable = require("@instructure/ui-themeable");

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

var _classnames = _interopRequireDefault(require("classnames"));

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: 'dTaOS',
  template: function template(theme) {
    return "\n\n.dTaOS_eYfB{display:flex}\n\n.dTaOS_eiZV,.dTaOS_YIqF{padding-top:".concat(theme.bottomLabelPadding || 'inherit', "}\n\n.dTaOS_bxxq{flex-basis:25rem;margin-top:").concat(theme.choicesWrapperMargin || 'inherit', "}\n\n.dTaOS_blpB{display:flex;flex-direction:column;flex-wrap:wrap}\n\n.dTaOS_dROR{margin-bottom:").concat(theme.feedbackWrapperMarginBottom || 'inherit', ";margin-left:").concat(theme.feedbackWrapperMargin || 'inherit', "}\n\n.dTaOS_bLsK{min-width:5rem}");
  },
  'holder': 'dTaOS_eYfB',
  'bottomLabel': 'dTaOS_eiZV',
  'topLabel': 'dTaOS_YIqF',
  'choicesWrapper': 'dTaOS_bxxq',
  'flexWrap': 'dTaOS_blpB',
  'feedbackWrapper': 'dTaOS_dROR',
  'userResponse': 'dTaOS_bLsK'
};
var OrderingResult = (
/**
---
category: Ordering
---
  Ordering Result component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <OrderingResult
      itemBody="Order these characters from tallest to shortest:"
      interactionData={{
        choices: {
          uuid4: { id: 'uuid4', itemBody: '<p>Aragorn</p>' },
          uuid3: { id: 'uuid3', itemBody: '<p>Gimli</p>' },
          uuid2: { id: 'uuid2', itemBody: '<p>Frodo</p>' },
          uuid1: { id: 'uuid1', itemBody: '<p>Gollum</p>' }
        }
      }}
      properties={{
        displayAnswersParagraph: true,
        includeLabels: true,
        topLabel: 'Taller',
        bottomLabel: 'Shorter'
      }}
      scoredData={{
        value: [{
          userResponded: 'uuid3',
          resultScore: 0,
          value: 'uuid4'
        }, {
          userResponded: 'uuid4',
          resultScore: 0,
          value: 'uuid3'
        }, {
          userResponded: 'uuid2',
          resultScore: 1,
          value: 'uuid2'
        }, {
          userResponded: 'uuid1',
          resultScore: 1,
          value: 'uuid1'
        }]
      }}
    />
  </SettingsSwitcher>
  ```
**/
_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(OrderingResult, _Component);

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

  (0, _createClass2.default)(OrderingResult, [{
    key: "renderLabel",
    value: function renderLabel(labelPosition) {
      var properties = this.props.properties;

      if (properties.includeLabels) {
        return _react.default.createElement("div", {
          className: styles[labelPosition]
        }, _react.default.createElement(_uiElements.Text, {
          color: "primary"
        }, properties[labelPosition]));
      }
    }
  }, {
    key: "renderChoices",
    value: function renderChoices() {
      var choices = this.props.interactionData.choices;
      var _this$props$scoredDat = this.props.scoredData,
          correct = _this$props$scoredDat.correct,
          value = _this$props$scoredDat.value;

      if (!value || value.length === 0) {
        return _react.default.createElement(_NoResponse.default, {
          responseHidden: !value,
          status: typeof correct === 'undefined' ? 'unknown' : 'incorrect',
          richContent: true
        });
      }

      return value.map(function (answer, idx) {
        var status;

        if (answer.resultScore >= 1) {
          status = 'correct';
        } else if (answer.resultScore <= 0) {
          status = 'incorrect';
        } else {
          status = 'unknown';
        }

        var userChoice = choices[answer.userResponded];
        var correctAnswer = choices[answer.value] ? choices[answer.value].itemBody : null;
        var key = "choice_".concat(idx);
        return _react.default.createElement("div", {
          className: styles.feedbackWrapper,
          key: key
        }, userChoice ? _react.default.createElement(_FeedbackWrapper.default, {
          hiddenCorrectAnswerText: (0, _formatMessage.default)('Correct Order Answer: '),
          hiddenIncorrectAnswerText: (0, _formatMessage.default)('Incorrect Order Answer: '),
          correctAnswer: correctAnswer,
          status: status,
          richContent: true
        }, _react.default.createElement(_quizRce.RichContentRenderer, {
          customStyles: styles.userResponse,
          content: userChoice.itemBody
        })) : _react.default.createElement(_NoResponse.default, {
          correctAnswerLabel: correctAnswer,
          responseHidden: answer.userResponded === void 0,
          status: status,
          richContent: true
        }));
      });
    }
  }, {
    key: "render",
    value: function render() {
      var classes = (0, _classnames.default)(styles.choicesWrapper, (0, _defineProperty2.default)({}, styles.flexWrap, this.props.properties.displayAnswersParagraph));
      return _react.default.createElement("div", {
        className: styles.holder
      }, _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, this.renderLabel('topLabel'), _react.default.createElement("div", {
        className: classes
      }, this.renderChoices()), this.renderLabel('bottomLabel')));
    }
  }]);
  OrderingResult.displayName = "OrderingResult";
  return OrderingResult;
}(_react.Component), _class2.propTypes = {
  interactionData: _propTypes.default.shape({
    choices: _propTypes.default.objectOf(_propTypes.default.shape({
      id: _propTypes.default.string.isRequired,
      itemBody: _propTypes.default.string.isRequired
    })).isRequired
  }).isRequired,
  itemBody: _propTypes.default.string.isRequired,
  properties: _propTypes.default.shape({
    displayAnswersParagraph: _propTypes.default.bool,
    includeLabels: _propTypes.default.bool,
    topLabel: _propTypes.default.string,
    bottomLabel: _propTypes.default.string
  }).isRequired,
  scoredData: _propTypes.default.shape({
    correct: _propTypes.default.bool,
    value: _propTypes.default.arrayOf(_propTypes.default.shape({
      resultScore: _propTypes.default.number,
      userResponded: _propTypes.default.string,
      value: _propTypes.default.string
    }))
  }).isRequired
}, _temp)) || _class);
exports.default = OrderingResult;