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

A React UI component Library for quiz interaction types.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
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, _HotSpotResult;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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 minBy from 'lodash/fp/minBy';
import maxBy from 'lodash/fp/maxBy';
import { jsx } from '@instructure/emotion';
import t from '@instructure/quiz-i18n/es/format-message';
import { ItemBodyWrapper } from '@instructure/quiz-rce';
import { NoResponse } from '@instructure/quiz-results-feedback';
import Oval from '../common/Oval';
import Square from '../common/Square';
import Polygon from '../common/Polygon';
import TargetContainer from '../common/TargetContainer';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import FeedbackPopover from './FeedbackPopover/index';
import { withStyleOverrides } from '@instructure/quiz-common';
var CORRECT = 'correct';
var INCORRECT = 'incorrect';
var UNKNOWN = 'unknown';
var coordinates = PropTypes.shape({
  x: PropTypes.number,
  y: PropTypes.number
});
function getDrawingType(type) {
  switch (type) {
    case 'oval':
      return Oval;
    case 'polygon':
      return Polygon;
    default:
      return Square;
  }
}

/**
---
category: HotSpot
---
  HotSpot Result component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <HotSpotResult
      itemBody='Which of these players is David Ferrer'
      interactionData={{
        imageUrl: 'https://i.ytimg.com/vi/LgkAebhJ7iE/maxresdefault.jpg'
      }}
      scoredData={{
        value: {
          type: 'square',
          resultScore: 0,
          userResponse: { x: 0.99, y: 0.5 },
          correctAnswer: [
            { x: 0.1, y: 0.3 },
            { x: 0.2, y: 0.2 }
          ]
        }
      }}
    />
  </SettingsSwitcher>
  ```
**/
var HotSpotResult = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_HotSpotResult = /*#__PURE__*/function (_Component) {
  function HotSpotResult() {
    var _this2;
    _classCallCheck(this, HotSpotResult);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _callSuper(this, HotSpotResult, [].concat(args));
    _defineProperty(_this2, "renderScoringDataFeedbackPolygon", function (currentCoordinates, flipVertically) {
      return jsx(FeedbackPopover, {
        coordinates: (flipVertically ? maxBy : minBy)('y', currentCoordinates),
        flipVertically: flipVertically
      });
    });
    _defineProperty(_this2, "renderScoringDataFeedbackOval", function (_ref, flipVertically) {
      var _ref2 = _slicedToArray(_ref, 2),
        _ref2$ = _ref2[0],
        x1 = _ref2$.x,
        y1 = _ref2$.y,
        _ref2$2 = _ref2[1],
        x2 = _ref2$2.x,
        y2 = _ref2$2.y;
      return jsx(FeedbackPopover, {
        coordinates: {
          x: (x1 + x2) * 0.5,
          y: (flipVertically ? Math.max : Math.min)(y1, y2)
        },
        flipVertically: flipVertically
      });
    });
    _defineProperty(_this2, "renderScoringDataFeedbackSquare", function (_ref3, flipVertically) {
      var _ref4 = _slicedToArray(_ref3, 2),
        _ref4$ = _ref4[0],
        x1 = _ref4$.x,
        y1 = _ref4$.y,
        _ref4$2 = _ref4[1],
        x2 = _ref4$2.x,
        y2 = _ref4$2.y;
      return jsx(FeedbackPopover, {
        coordinates: {
          x: (x1 + x2) * 0.5,
          y: (flipVertically ? Math.max : Math.min)(y1, y2)
        },
        flipVertically: flipVertically
      });
    });
    _defineProperty(_this2, "renderUserResponseFeedback", function (coordinates, flipVertically, status) {
      var text;
      if (!coordinates) {
        var _ref5 = _this2.props.scoredData.value || {},
          userResponse = _ref5.userResponse;
        var responseHidden = typeof userResponse === 'undefined';
        return jsx(NoResponse, {
          responseHidden: responseHidden,
          status: _this2.status
        });
      }
      switch (status) {
        case CORRECT:
          text = t('Selected Answer - Correct');
          break;
        case INCORRECT:
          text = t('Selected Answer - Incorrect');
          break;
        case UNKNOWN:
          text = t('Selected Answer');
      }
      return jsx(FeedbackPopover, {
        coordinates: coordinates,
        flipVertically: flipVertically,
        text: text,
        status: status,
        targetContent: jsx("div", {
          css: _this2.props.styles.userResponseWrapper
        }, jsx("div", {
          css: _this2.props.styles.userResponseTarget
        }))
      });
    });
    _defineProperty(_this2, "prepareHotspotsWithFeedback", function () {
      var _this2$correctAnswers, _this2$correctAnswers2;
      if (!((_this2$correctAnswers = _this2.correctAnswers) !== null && _this2$correctAnswers !== void 0 && _this2$correctAnswers.length)) {
        var _this2$userResponse;
        return (_this2$userResponse = _this2.userResponse) === null || _this2$userResponse === void 0 ? void 0 : _this2$userResponse.map(function () {
          return {
            coordinates: [],
            drawingType: getDrawingType(),
            renderScoringDataFeedback: Function.prototype
          };
        });
      }
      return (_this2$correctAnswers2 = _this2.correctAnswers) === null || _this2$correctAnswers2 === void 0 ? void 0 : _this2$correctAnswers2.map(function (hotspot) {
        return {
          coordinates: hotspot.coordinates,
          drawingType: getDrawingType(hotspot.type),
          renderScoringDataFeedback: _this2.getFeedbackRendering(hotspot)
        };
      });
    });
    return _this2;
  }
  _inherits(HotSpotResult, _Component);
  return _createClass(HotSpotResult, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.makeStyles();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.props.makeStyles();
    }
  }, {
    key: "correctAnswers",
    get: function get() {
      var _ref6 = this.props.scoredData.value || {},
        correctAnswer = _ref6.correctAnswer;
      if (!correctAnswer) {
        return [];
      }
      if (Array.isArray(correctAnswer) && !(correctAnswer !== null && correctAnswer !== void 0 && correctAnswer.value)) {
        return [{
          type: this.props.scoredData.value.type,
          coordinates: correctAnswer
        }];
      }
      return correctAnswer !== null && correctAnswer !== void 0 && correctAnswer.value && !Array.isArray(correctAnswer.value) ? [correctAnswer === null || correctAnswer === void 0 ? void 0 : correctAnswer.value] : correctAnswer === null || correctAnswer === void 0 ? void 0 : correctAnswer.value;
    }
  }, {
    key: "status",
    get: function get() {
      var _ref7 = this.props.scoredData.value || {},
        resultScore = _ref7.resultScore;
      if (resultScore === 1) {
        return CORRECT;
      }
      if (resultScore <= 0) {
        return INCORRECT;
      }
      return UNKNOWN;
    }
  }, {
    key: "userResponse",
    get: function get() {
      var _this3 = this;
      var _ref8 = this.props.scoredData.value || {},
        userResponse = _ref8.userResponse,
        resultScore = _ref8.resultScore;
      var userResponseArray = Array.isArray(userResponse) ? userResponse : [userResponse];
      return userResponseArray === null || userResponseArray === void 0 ? void 0 : userResponseArray.map(function (response) {
        if ((response === null || response === void 0 ? void 0 : response.correct) == null) {
          return _objectSpread(_objectSpread({}, response), {}, {
            correct: _this3.status
          });
        }
        return _objectSpread(_objectSpread({}, response), {}, {
          correct: resultScore != null ? response.correct ? CORRECT : INCORRECT : UNKNOWN
        });
      });
    }
  }, {
    key: "getFeedbackRendering",
    value: function getFeedbackRendering(hotspot) {
      var type = hotspot.type;
      if (!this.correctAnswers.length) {
        return Function.prototype;
      }
      switch (type) {
        case 'oval':
          return this.renderScoringDataFeedbackOval;
        case 'polygon':
          return this.renderScoringDataFeedbackPolygon;
        default:
          return this.renderScoringDataFeedbackSquare;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var hotspots = this.prepareHotspotsWithFeedback() || [];
      return jsx(ItemBodyWrapper, {
        itemBody: this.props.itemBody
      }, jsx(TargetContainer, {
        readOnly: true,
        results: true,
        hotspots: hotspots,
        url: this.props.interactionData.imageUrl,
        userResponseCoordinate: this.userResponse,
        renderUserResponseFeedback: this.renderUserResponseFeedback
      }));
    }
  }]);
}(Component), _defineProperty(_HotSpotResult, "displayName", 'HotSpotResult'), _defineProperty(_HotSpotResult, "componentId", "Quizzes".concat(_HotSpotResult.displayName)), _defineProperty(_HotSpotResult, "propTypes", {
  interactionData: PropTypes.shape({
    imageUrl: PropTypes.string.isRequired
  }).isRequired,
  itemBody: PropTypes.string.isRequired,
  scoredData: PropTypes.shape({
    value: PropTypes.shape({
      resultScore: PropTypes.number,
      type: PropTypes.string,
      correctAnswer: PropTypes.oneOfType([PropTypes.shape({
        value: PropTypes.arrayOf(PropTypes.shape({
          type: PropTypes.string,
          coordinates: PropTypes.arrayOf(coordinates)
        }))
      }), PropTypes.arrayOf(coordinates)]),
      userResponse: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
        x: PropTypes.number,
        y: PropTypes.number,
        correct: PropTypes.bool
      })), coordinates])
    })
  }).isRequired,
  makeStyles: PropTypes.func,
  styles: PropTypes.object
}), _HotSpotResult)) || _class);
export { HotSpotResult as default };