quiz-interactions/lib/components/multiple_choice/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 = exports.correctChoice = 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 _classnames = _interopRequireDefault(require("classnames"));

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 correctChoice = function correctChoice(_ref) {
  var interactionData = _ref.interactionData,
      scoredData = _ref.scoredData;
  return interactionData.choices.find(function (item) {
    var choiceData = scoredData.value && scoredData.value[item.id] || {};
    return choiceData.hasOwnProperty('correct') ? choiceData.correct : choiceData.resultScore;
  }) || {};
};
/**
---
category: MultipleChoice
---
  Multiple Choice Result component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <MultipleChoiceResult
      itemBody="<p>Who was the first <strong>President</strong> of the United States?</p>"
      itemId="44"
      interactionData={{
        choices: [{
            id: 'uuid1',
            position: 1,
            itemBody: '<p>George Washington</p><p>was the first</p><p>president</p>'
          },
          { id: 'uuid2', position: 2, itemBody: '<p>Alexander Hamilton</p>' },
          { id: 'uuid3', position: 3, itemBody: '<p>John Adams</p>' },
          { id: 'uuid4', position: 4, itemBody: '<p>Thomas Jefferson</p>' }
        ]
      }}
      scoredData={{
        correct: false,
        value: {
          uuid1: { resultScore: 1, correct: true },
          uuid2: { resultScore: 0, userResponded: true }
        }
      }}
    />
  </SettingsSwitcher>
  ```
**/


exports.correctChoice = correctChoice;
var MultipleChoiceResult = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(MultipleChoiceResult, _Component);

  function MultipleChoiceResult() {
    var _getPrototypeOf2;

    var _this;

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

    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)(MultipleChoiceResult)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.renderFeedbackChoice = function (_ref2, status) {
      var id = _ref2.id,
          itemBody = _ref2.itemBody;
      return _react.default.createElement("div", {
        key: id,
        className: styles.responseWrapper
      }, _react.default.createElement(_FeedbackWrapper.default, {
        correctAnswer: correctChoice(_this.props).itemBody,
        hiddenCorrectAnswerText: (0, _formatMessage.default)('Correct answer: '),
        hiddenIncorrectAnswerText: (0, _formatMessage.default)('Incorrect answer: '),
        status: status,
        richContent: true
      }, _react.default.createElement(_uiForms.RadioInput, {
        value: id,
        name: "interaction_".concat(_this.props.itemId) // eslint-disable-line react/jsx-no-literals
        ,
        label: _react.default.createElement(_quizRce.RichContentRenderer, {
          content: itemBody
        }),
        checked: true,
        readOnly: true
      })));
    };

    _this.renderUngradedChoice = function (_ref3, checked) {
      var id = _ref3.id,
          itemBody = _ref3.itemBody;
      return _react.default.createElement("div", {
        key: id,
        className: (0, _classnames.default)(styles.responseWrapper, styles.radioWrapper)
      }, _react.default.createElement(_uiForms.RadioInput, {
        value: id,
        name: "interaction_".concat(_this.props.itemId) // eslint-disable-line react/jsx-no-literals
        ,
        label: _react.default.createElement("div", null, _react.default.createElement(_quizRce.RichContentRenderer, {
          content: itemBody
        }), !checked && _react.default.createElement(_uiA11y.ScreenReaderContent, null, (0, _formatMessage.default)(', Not Selected'))),
        checked: checked,
        readOnly: true
      }));
    };

    return _this;
  }

  (0, _createClass2.default)(MultipleChoiceResult, [{
    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 noResponse = choices.every(function (_ref4) {
        var checked = _ref4.checked;
        return !checked;
      });
      var correctnessKnown = typeof scoredData.correct !== 'undefined';
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement("div", null, choices.map(function (_ref5) {
        var choice = _ref5.choice,
            correct = _ref5.correct,
            checked = _ref5.checked;
        var status;

        if (correct === true || correct > 0) {
          status = 'correct';
        } else if (correctnessKnown && checked) {
          status = 'incorrect';
        }

        if (!status || !checked) {
          // Choice has no feedback
          return _this2.renderUngradedChoice(choice, checked);
        }

        return _this2.renderFeedbackChoice(choice, status);
      })), noResponse && _react.default.createElement(_NoResponse.default, {
        className: styles.noResponseWrapper,
        correctAnswerLabel: correctChoice(this.props).itemBody,
        responseHidden: !scoredData.value,
        richContent: true,
        status: correctnessKnown ? 'incorrect' : 'unknown'
      }));
    }
  }]);
  MultipleChoiceResult.displayName = "MultipleChoiceResult";
  return MultipleChoiceResult;
}(_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,
  itemId: _propTypes.default.string,
  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
}, _class2.defaultProps = {
  itemId: void 0
}, _temp)) || _class);
exports.default = MultipleChoiceResult;