@instructure/quiz-interactions/es/components/multiple_answer/Result/index.js

A React UI component Library for quiz interaction types.

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _MultipleAnswerResult;
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = _getPrototypeOf(derived);
  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
/** @jsx jsx */
import { Component } from 'react';
import PropTypes from 'prop-types';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { Checkbox } from '@instructure/ui-checkbox';
import { jsx } from '@instructure/emotion';
import t from '@instructure/quiz-i18n/es/format-message';
import { ItemBodyWrapper, RichContentRenderer } from '@instructure/quiz-rce';
import { FeedbackWrapper, NoResponse } from '@instructure/quiz-results-feedback';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import { withStyleOverrides } from '@instructure/quiz-common';

/**
---
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>
  ```
**/
var MultipleAnswerResult = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_MultipleAnswerResult = /*#__PURE__*/function (_Component) {
  function MultipleAnswerResult() {
    var _this2;
    _classCallCheck(this, MultipleAnswerResult);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, MultipleAnswerResult, [].concat(args));
    _defineProperty(_this2, "renderPlainChoice", function (_ref, checked) {
      var id = _ref.id,
        itemBody = _ref.itemBody;
      var srtext = t('Answer, ');
      if (typeof checked !== 'undefined') {
        srtext = checked ? t('Selected Answer, ') : t('Unselected Answer, ');
      }
      return jsx("div", {
        key: id,
        css: _this2.props.styles.responseWrapper
      }, jsx(Checkbox, {
        value: id,
        label: jsx("div", null, jsx(ScreenReaderContent, null, srtext), jsx(RichContentRenderer, {
          content: itemBody
        })),
        checked: checked,
        onChange: function onChange() {},
        readOnly: true
      }));
    });
    _defineProperty(_this2, "renderFeedbackChoice", function (_ref2, checked, status) {
      var id = _ref2.id,
        itemBody = _ref2.itemBody;
      var feedbackText,
        wrapperStatus = 'unknown';
      if (checked) {
        if (status === 'correct') {
          feedbackText = t('Selected Answer - Correct');
          wrapperStatus = 'correct';
        } else if (status === 'incorrect') {
          feedbackText = t('Selected Answer - Incorrect');
          wrapperStatus = 'incorrect';
        }
      } else if (status === 'correct') {
        feedbackText = t('Missed Option - Incorrect');
        wrapperStatus = 'incorrect';
      }
      return jsx("div", {
        key: id,
        css: _this2.props.styles.responseWrapper
      }, jsx(FeedbackWrapper, {
        correctAnswer: feedbackText,
        hiddenCorrectAnswerText: t('Correct answer: '),
        hiddenIncorrectAnswerText: t('Incorrect answer: '),
        status: wrapperStatus,
        subTitleDescription: "",
        richContent: true
      }, jsx(Checkbox, {
        value: id,
        label: jsx(RichContentRenderer, {
          content: itemBody
        }),
        checked: checked,
        onChange: function onChange() {},
        readOnly: true
      })));
    });
    return _this2;
  }
  _inherits(MultipleAnswerResult, _Component);
  return _createClass(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 _this3 = 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 jsx(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 _this3.renderPlainChoice(choice, checked);
        } else {
          return _this3.renderFeedbackChoice(choice, checked, status);
        }
      }), nothingSelected && jsx(NoResponse, {
        css: this.props.styles.noResponseWrapper,
        responseHidden: !scoredData.value,
        status: this.noResponseStatus()
      }));
    }
  }]);
}(Component), _defineProperty(_MultipleAnswerResult, "displayName", 'MultipleAnswerResult'), _defineProperty(_MultipleAnswerResult, "componentId", "Quizzes".concat(_MultipleAnswerResult.displayName)), _defineProperty(_MultipleAnswerResult, "propTypes", {
  interactionData: PropTypes.shape({
    choices: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.string,
      itemBody: PropTypes.string,
      position: PropTypes.number
    }))
  }).isRequired,
  itemBody: PropTypes.string.isRequired,
  scoredData: PropTypes.shape({
    correct: PropTypes.bool,
    value: PropTypes.objectOf(PropTypes.shape({
      correct: PropTypes.bool,
      resultScore: PropTypes.number,
      userResponded: PropTypes.bool
    }))
  }).isRequired,
  styles: PropTypes.object
}), _MultipleAnswerResult)) || _class);
export { MultipleAnswerResult as default };