quiz-interactions/lib/components/true_false/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 _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: 'eGxXD',
  template: function template(theme) {
    return "\n\n.eGxXD_ehlM{margin-top:".concat(theme.choiceWrapperMargin || 'inherit', "}\n\n.eGxXD_cfgF{margin-top:").concat(theme.noResponseWrapperMargin || 'inherit', "}");
  },
  'choiceWrapper': 'eGxXD_ehlM',
  'noResponseWrapper': 'eGxXD_cfgF'
};
var TRUE_CHOICE = 'trueChoice';
var FALSE_CHOICE = 'falseChoice';
/**
---
category: TrueFalse
---
  True False Result component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <TrueFalseResult
      itemBody="The sun is a star"
      itemId="12"
      interactionData={{
        trueChoice: 'True',
        falseChoice: 'False'
      }}
      scoredData={{
        value: {
          true: { resultScore: 1, userResponded: true },
          false: { resultScore: 0, userResponded: false }
        }}
      }
    />
  </SettingsSwitcher>
  ```
**/

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

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

  (0, _createClass2.default)(TrueFalseResult, [{
    key: "getUserResponse",
    value: function getUserResponse() {
      var value = this.props.scoredData.value;
      if (!value) return void 0;
      if (value.true && value.true.userResponded) return true;
      if (value.false && value.false.userResponded) return false;
      return null;
    }
  }, {
    key: "getCorrectAnswer",
    value: function getCorrectAnswer() {
      var value = this.props.scoredData.value;
      if (!value) return void 0;
      var trueScore = value.true && value.true.resultScore;
      var falseScore = value.false && value.false.resultScore;

      if (typeof trueScore !== 'undefined') {
        return trueScore > 0;
      } else if (typeof falseScore !== 'undefined') {
        return falseScore <= 0; // if we're > 0 we want this to return false
      } // unknown answer!


      return void 0;
    }
  }, {
    key: "getCorrectAnswerLabel",
    value: function getCorrectAnswerLabel() {
      var _this$props = this.props,
          interactionData = _this$props.interactionData,
          scoredData = _this$props.scoredData;
      var value = scoredData.value;
      if (!value) return null;

      if (value.true && value.true.resultScore > 0) {
        return interactionData[TRUE_CHOICE];
      } else if (value.false && value.false.resultScore > 0) {
        return interactionData[FALSE_CHOICE];
      }

      return null;
    }
  }, {
    key: "renderUngradedChoice",
    value: function renderUngradedChoice(name, label, checked) {
      return _react.default.createElement(_uiForms.RadioInput, {
        checked: checked,
        value: checked.toString(),
        readOnly: true,
        name: name,
        label: label
      });
    }
  }, {
    key: "renderChoice",
    value: function renderChoice(choiceType, correctAnswer, userResponse) {
      var interactionData = this.props.interactionData;
      var isChecked = choiceType === userResponse;
      var label = interactionData[choiceType ? TRUE_CHOICE : FALSE_CHOICE];

      if (typeof correctAnswer === 'undefined' || !isChecked) {
        return this.renderUngradedChoice(name, label, !!isChecked);
      }

      var status;

      if (choiceType === correctAnswer) {
        status = 'correct';
      } else {
        status = 'incorrect';
      }

      var correctAnswerLabel = this.getCorrectAnswerLabel();
      var name = "interaction_".concat(this.props.itemId, "_").concat(choiceType);
      return _react.default.createElement(_FeedbackWrapper.default, {
        correctAnswer: correctAnswerLabel,
        hiddenCorrectAnswerText: (0, _formatMessage.default)('Correct answer: '),
        hiddenIncorrectAnswerText: (0, _formatMessage.default)('Incorrect answer: '),
        status: status,
        userResponse: label
      }, _react.default.createElement(_uiForms.RadioInput, {
        checked: true,
        value: "true",
        readOnly: true,
        name: name,
        label: label
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var userResponse = this.getUserResponse();
      var correctAnswer = this.getCorrectAnswer();
      var correctnessKnown = typeof this.props.scoredData.correct !== 'undefined';
      var responseHidden = typeof userResponse === 'undefined';
      return _react.default.createElement(_quizRce.ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, _react.default.createElement("div", {
        className: styles.choiceWrapper
      }, this.renderChoice(true, correctAnswer, userResponse)), _react.default.createElement("div", {
        className: styles.choiceWrapper
      }, this.renderChoice(false, correctAnswer, userResponse)), userResponse == null && _react.default.createElement(_NoResponse.default, {
        className: styles.noResponseWrapper,
        correctAnswerLabel: this.getCorrectAnswerLabel(correctAnswer),
        responseHidden: responseHidden,
        status: userResponse === null && correctnessKnown ? 'incorrect' : 'unknown'
      }));
    }
  }]);
  TrueFalseResult.displayName = "TrueFalseResult";
  return TrueFalseResult;
}(_react.Component), _class2.propTypes = {
  interactionData: _propTypes.default.shape({
    trueChoice: _propTypes.default.string,
    falseChoice: _propTypes.default.string
  }).isRequired,
  itemBody: _propTypes.default.string.isRequired,
  itemId: _propTypes.default.string,
  scoredData: _propTypes.default.shape({
    correct: _propTypes.default.bool,
    value: _propTypes.default.shape({
      true: _propTypes.default.shape({
        resultScore: _propTypes.default.number,
        userResponded: _propTypes.default.bool
      }),
      false: _propTypes.default.shape({
        resultScore: _propTypes.default.number,
        userResponded: _propTypes.default.bool
      })
    })
  }).isRequired
}, _class2.defaultProps = {
  itemId: void 0
}, _temp)) || _class);
exports.default = TrueFalseResult;