quiz-interactions/lib/components/multiple_answer/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 _getPrototypeOf3 = _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 _uiA11y = require("@instructure/ui-a11y");

var _uiForms = require("@instructure/ui-forms");

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: 'eewuY',
  template: function template(theme) {
    return "\n\n.eewuY_bUsl{padding-top:".concat(theme.radioWrapperPadding || 'inherit', "}\n\n.eewuY_cfgF{margin-top:").concat(theme.noResponseWrapperMargin || 'inherit', "}\n\n.eewuY_fLrt{margin-top:").concat(theme.responseMarginTop || 'inherit', ";width:100%}");
  },
  'radioWrapper': 'eewuY_bUsl',
  'noResponseWrapper': 'eewuY_cfgF',
  'responseWrapper': 'eewuY_fLrt'
};
var MultipleAnswerResult = (
/**
---
category: MultipleAnswer
---
  Multiple Answer Result component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <MultipleAnswerResult
      itemBody="Who was in the first cabinet of the USA?"
      interactionData={{
        choices: [
          { id: 'uuid1', position: 1, itemBody: '<p>Thomas Jefferson</p>' },
          { id: 'uuid2', position: 2, itemBody: '<p>John Marshall</p>' },
          { id: 'uuid3', position: 3, itemBody: '<p>John Knox</p>' },
          { id: 'uuid4', position: 4, itemBody: '<p>Alexander Hamilton</p>' },
          { id: 'uuid5', position: 5, itemBody: '<p>Aaron Burr</p>' },
          { id: 'uuid6', position: 6, itemBody: '<p>Ben Franklin</p>' }
        ]
      }}
      scoredData={{
        correct: false,
        value: {
          uuid1: { resultScore: 1, userResponded: true },
          uuid2: { resultScore: 1, userResponded: false },
          uuid3: { resultScore: 0, userResponded: true }
        }
      }}
    />
  </SettingsSwitcher>
  ```
**/
_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(MultipleAnswerResult, _Component);

  function MultipleAnswerResult() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, MultipleAnswerResult);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(MultipleAnswerResult)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.renderPlainChoice = function (_ref, checked) {
      var id = _ref.id,
          itemBody = _ref.itemBody;
      var srtext = (0, _formatMessage.default)('Answer, ');

      if (typeof checked !== 'undefined') {
        srtext = checked ? (0, _formatMessage.default)('Selected Answer, ') : (0, _formatMessage.default)('Unselected Answer, ');
      }

      return _react.default.createElement("div", {
        key: id,
        className: styles.responseWrapper
      }, _react.default.createElement(_uiForms.Checkbox, {
        value: id,
        label: _react.default.createElement("div", null, _react.default.createElement(_uiA11y.ScreenReaderContent, null, srtext), _react.default.createElement(_quizRce.RichContentRenderer, {
          content: itemBody
        })),
        checked: checked,
        onChange: function onChange() {},
        readOnly: true
      }));
    };

    _this.renderFeedbackChoice = function (_ref2, checked, status) {
      var id = _ref2.id,
          itemBody = _ref2.itemBody;
      var feedbackText,
          wrapperStatus = 'unknown';

      if (checked) {
        if (status === 'correct') {
          feedbackText = (0, _formatMessage.default)('Selected Answer - Correct');
          wrapperStatus = 'correct';
        } else if (status === 'incorrect') {
          feedbackText = (0, _formatMessage.default)('Selected Answer - Incorrect');
          wrapperStatus = 'incorrect';
        }
      } else if (status === 'correct') {
        feedbackText = (0, _formatMessage.default)('Missed Option - Incorrect');
        wrapperStatus = 'incorrect';
      }

      return _react.default.createElement("div", {
        key: id,
        className: styles.responseWrapper
      }, _react.default.createElement(_FeedbackWrapper.default, {
        correctAnswer: feedbackText,
        hiddenCorrectAnswerText: (0, _formatMessage.default)('Correct answer: '),
        hiddenIncorrectAnswerText: (0, _formatMessage.default)('Incorrect answer: '),
        status: wrapperStatus,
        subTitleDescription: "",
        richContent: true
      }, _react.default.createElement(_uiForms.Checkbox, {
        value: id,
        label: _react.default.createElement(_quizRce.RichContentRenderer, {
          content: itemBody
        }),
        checked: checked,
        onChange: function onChange() {},
        readOnly: true
      })));
    };

    return _this;
  }

  (0, _createClass2.default)(MultipleAnswerResult, [{
    key: "noResponseStatus",
    value: function noResponseStatus() {
      var correct = this.props.scoredData.correct;
      if (typeof correct === 'undefined') return 'unknown';
      return correct ? 'correct' : 'incorrect';
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var scoredData = this.props.scoredData;
      var choices = this.props.interactionData.choices.map(function (choice) {
        var choiceData = scoredData.value && scoredData.value[choice.id] || {};
        var correct = choiceData.hasOwnProperty('correct') ? choiceData.correct : choiceData.resultScore;
        var checked = choiceData.userResponded;
        return {
          choice: choice,
          correct: correct,
          checked: checked
        };
      });
      var nothingSelected = choices.every(function (_ref3) {
        var checked = _ref3.checked;
        return !checked;
      });
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, choices.map(function (_ref4) {
        var choice = _ref4.choice,
            correct = _ref4.correct,
            checked = _ref4.checked;
        var status;

        if (typeof checked !== 'undefined') {
          if (correct === true || correct > 0) {
            status = 'correct';
          } else if (correct === false || correct === 0) {
            status = 'incorrect';
          }
        }

        if (!status) {
          // Choice has no feedback
          return _this2.renderPlainChoice(choice, checked);
        } else {
          return _this2.renderFeedbackChoice(choice, checked, status);
        }
      }), nothingSelected && _react.default.createElement(_NoResponse.default, {
        className: styles.noResponseWrapper,
        responseHidden: !scoredData.value,
        status: this.noResponseStatus()
      }));
    }
  }]);
  MultipleAnswerResult.displayName = "MultipleAnswerResult";
  return MultipleAnswerResult;
}(_react.Component), _class2.propTypes = {
  interactionData: _propTypes.default.shape({
    choices: _propTypes.default.arrayOf(_propTypes.default.shape({
      id: _propTypes.default.string,
      itemBody: _propTypes.default.string,
      position: _propTypes.default.number
    }))
  }).isRequired,
  itemBody: _propTypes.default.string.isRequired,
  scoredData: _propTypes.default.shape({
    correct: _propTypes.default.bool,
    value: _propTypes.default.objectOf(_propTypes.default.shape({
      correct: _propTypes.default.bool,
      resultScore: _propTypes.default.number,
      userResponded: _propTypes.default.bool
    }))
  }).isRequired
}, _temp)) || _class);
exports.default = MultipleAnswerResult;