@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
311 lines (308 loc) • 13.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _minBy = _interopRequireDefault(require("lodash/fp/minBy"));
var _maxBy = _interopRequireDefault(require("lodash/fp/maxBy"));
var _emotion = require("@instructure/emotion");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
var _quizRce = require("@instructure/quiz-rce");
var _quizResultsFeedback = require("@instructure/quiz-results-feedback");
var _Oval = _interopRequireDefault(require("../common/Oval"));
var _Square = _interopRequireDefault(require("../common/Square"));
var _Polygon = _interopRequireDefault(require("../common/Polygon"));
var _TargetContainer = _interopRequireDefault(require("../common/TargetContainer"));
var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _index = _interopRequireDefault(require("./FeedbackPopover/index"));
var _quizCommon = require("@instructure/quiz-common");
var _dec, _class, _HotSpotResult;
/** @jsx jsx */
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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(derived);
return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
}
var CORRECT = 'correct';
var INCORRECT = 'incorrect';
var UNKNOWN = 'unknown';
var coordinates = _propTypes["default"].shape({
x: _propTypes["default"].number,
y: _propTypes["default"].number
});
function getDrawingType(type) {
switch (type) {
case 'oval':
return _Oval["default"];
case 'polygon':
return _Polygon["default"];
default:
return _Square["default"];
}
}
/**
---
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 = exports["default"] = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_HotSpotResult = /*#__PURE__*/function (_Component) {
function HotSpotResult() {
var _this2;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])(_this2, "renderScoringDataFeedbackPolygon", function (currentCoordinates, flipVertically) {
return (0, _emotion.jsx)(_index["default"], {
coordinates: (flipVertically ? _maxBy["default"] : _minBy["default"])('y', currentCoordinates),
flipVertically: flipVertically
});
});
(0, _defineProperty2["default"])(_this2, "renderScoringDataFeedbackOval", function (_ref, flipVertically) {
var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
_ref2$ = _ref2[0],
x1 = _ref2$.x,
y1 = _ref2$.y,
_ref2$2 = _ref2[1],
x2 = _ref2$2.x,
y2 = _ref2$2.y;
return (0, _emotion.jsx)(_index["default"], {
coordinates: {
x: (x1 + x2) * 0.5,
y: (flipVertically ? Math.max : Math.min)(y1, y2)
},
flipVertically: flipVertically
});
});
(0, _defineProperty2["default"])(_this2, "renderScoringDataFeedbackSquare", function (_ref3, flipVertically) {
var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
_ref4$ = _ref4[0],
x1 = _ref4$.x,
y1 = _ref4$.y,
_ref4$2 = _ref4[1],
x2 = _ref4$2.x,
y2 = _ref4$2.y;
return (0, _emotion.jsx)(_index["default"], {
coordinates: {
x: (x1 + x2) * 0.5,
y: (flipVertically ? Math.max : Math.min)(y1, y2)
},
flipVertically: flipVertically
});
});
(0, _defineProperty2["default"])(_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 (0, _emotion.jsx)(_quizResultsFeedback.NoResponse, {
responseHidden: responseHidden,
status: _this2.status
});
}
switch (status) {
case CORRECT:
text = (0, _formatMessage["default"])('Selected Answer - Correct');
break;
case INCORRECT:
text = (0, _formatMessage["default"])('Selected Answer - Incorrect');
break;
case UNKNOWN:
text = (0, _formatMessage["default"])('Selected Answer');
}
return (0, _emotion.jsx)(_index["default"], {
coordinates: coordinates,
flipVertically: flipVertically,
text: text,
status: status,
targetContent: (0, _emotion.jsx)("div", {
css: _this2.props.styles.userResponseWrapper
}, (0, _emotion.jsx)("div", {
css: _this2.props.styles.userResponseTarget
}))
});
});
(0, _defineProperty2["default"])(_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;
}
(0, _inherits2["default"])(HotSpotResult, _Component);
return (0, _createClass2["default"])(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 (0, _emotion.jsx)(_quizRce.ItemBodyWrapper, {
itemBody: this.props.itemBody
}, (0, _emotion.jsx)(_TargetContainer["default"], {
readOnly: true,
results: true,
hotspots: hotspots,
url: this.props.interactionData.imageUrl,
userResponseCoordinate: this.userResponse,
renderUserResponseFeedback: this.renderUserResponseFeedback
}));
}
}]);
}(_react.Component), (0, _defineProperty2["default"])(_HotSpotResult, "displayName", 'HotSpotResult'), (0, _defineProperty2["default"])(_HotSpotResult, "componentId", "Quizzes".concat(_HotSpotResult.displayName)), (0, _defineProperty2["default"])(_HotSpotResult, "propTypes", {
interactionData: _propTypes["default"].shape({
imageUrl: _propTypes["default"].string.isRequired
}).isRequired,
itemBody: _propTypes["default"].string.isRequired,
scoredData: _propTypes["default"].shape({
value: _propTypes["default"].shape({
resultScore: _propTypes["default"].number,
type: _propTypes["default"].string,
correctAnswer: _propTypes["default"].oneOfType([_propTypes["default"].shape({
value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
type: _propTypes["default"].string,
coordinates: _propTypes["default"].arrayOf(coordinates)
}))
}), _propTypes["default"].arrayOf(coordinates)]),
userResponse: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].shape({
x: _propTypes["default"].number,
y: _propTypes["default"].number,
correct: _propTypes["default"].bool
})), coordinates])
})
}).isRequired,
makeStyles: _propTypes["default"].func,
styles: _propTypes["default"].object
}), _HotSpotResult)) || _class);