quiz-interactions
Version:
A React UI component Library for quiz interaction types.
304 lines (243 loc) • 10.8 kB
JavaScript
;
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _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 _minBy = _interopRequireDefault(require("lodash/fp/minBy"));
var _maxBy = _interopRequireDefault(require("lodash/fp/maxBy"));
var _uiThemeable = require("@instructure/ui-themeable");
var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/lib/format-message"));
var _quizRce = require("@instructure/quiz-rce");
var _NoResponse = _interopRequireDefault(require("@instructure/quiz-results-feedback/lib/components/NoResponse"));
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 _theme = _interopRequireDefault(require("./theme"));
var _index = _interopRequireDefault(require("./FeedbackPopover/index"));
var _dec, _class, _class2, _temp;
var styles = {
componentId: 'bCcHs',
template: function template(theme) {
return "\n\n.bCcHs_xYrH{align-items:center;display:flex;height:1.2rem;justify-content:center;position:absolute;transform:translate(-50%,-50%);width:1.2rem}\n\n.bCcHs_INpq,.bCcHs_xYrH{border-radius:50%;box-shadow:0 0 0 1px ".concat(theme.userResponseShadowColor || 'inherit', "}\n\n.bCcHs_INpq{height:0.5rem;width:0.5rem}\n\n.bCcHs_fAWS{border:").concat(theme.wrapperBorderWidth || 'inherit', " solid ").concat(theme.correctColor || 'inherit', "}\n\n.bCcHs_bHQu{border:").concat(theme.wrapperBorderWidth || 'inherit', " solid ").concat(theme.incorrectColor || 'inherit', "}\n\n.bCcHs_dHSw{border:").concat(theme.wrapperBorderWidth || 'inherit', " solid ").concat(theme.unknownColor || 'inherit', "}\n\n.bCcHs_DiIh{background-color:").concat(theme.correctColor || 'inherit', "}\n\n.bCcHs_fxod{background-color:").concat(theme.incorrectColor || 'inherit', "}\n\n.bCcHs_cpFx{background-color:").concat(theme.unknownColor || 'inherit', "}");
},
'userResponseWrapper': 'bCcHs_xYrH',
'userResponseTarget': 'bCcHs_INpq',
'correctWrapper': 'bCcHs_fAWS',
'incorrectWrapper': 'bCcHs_bHQu',
'unknownWrapper': 'bCcHs_dHSw',
'correctTarget': 'bCcHs_DiIh',
'incorrectTarget': 'bCcHs_fxod',
'unknownTarget': 'bCcHs_cpFx'
};
var coordinates = _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
});
function getDrawingType(type) {
if (type === 'oval') {
return _Oval.default;
}
if (type === 'polygon') {
return _Polygon.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 = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(HotSpotResult, _Component);
function HotSpotResult() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, HotSpotResult);
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)(HotSpotResult)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.renderScoringDataFeedbackPolygon = function (currentCoordinates, flipVertically) {
return _react.default.createElement(_index.default, {
coordinates: (flipVertically ? _maxBy.default : _minBy.default)('y', currentCoordinates),
flipVertically: flipVertically
});
};
_this.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 _react.default.createElement(_index.default, {
coordinates: {
x: (x1 + x2) * 0.5,
y: (flipVertically ? Math.max : Math.min)(y1, y2)
},
flipVertically: flipVertically
});
};
_this.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 _react.default.createElement(_index.default, {
coordinates: {
x: (x1 + x2) * 0.5,
y: (flipVertically ? Math.max : Math.min)(y1, y2)
},
flipVertically: flipVertically
});
};
_this.renderUserResponseFeedback = function (coordinates, flipVertically) {
var _classNames, _classNames2;
var status = _this.status;
if (!coordinates) {
var _ref5 = _this.props.scoredData.value || {},
userResponse = _ref5.userResponse;
var responseHidden = typeof userResponse === 'undefined';
return _react.default.createElement(_NoResponse.default, {
responseHidden: responseHidden,
status: status
});
}
var wrapperClasses = (0, _classnames.default)(styles.userResponseWrapper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.correctWrapper, status === 'correct'), (0, _defineProperty2.default)(_classNames, styles.incorrectWrapper, status === 'incorrect'), (0, _defineProperty2.default)(_classNames, styles.unknownWrapper, status === 'unknown'), _classNames));
var targetClasses = (0, _classnames.default)(styles.userResponseTarget, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles.correctTarget, status === 'correct'), (0, _defineProperty2.default)(_classNames2, styles.incorrectTarget, status === 'incorrect'), (0, _defineProperty2.default)(_classNames2, styles.unknownTarget, status === 'unknown'), _classNames2));
var text;
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 _react.default.createElement(_index.default, {
coordinates: coordinates,
flipVertically: flipVertically,
text: text,
status: status,
targetContent: _react.default.createElement("div", {
className: wrapperClasses
}, _react.default.createElement("div", {
className: targetClasses
}))
});
};
return _this;
}
(0, _createClass2.default)(HotSpotResult, [{
key: "getFeedbackRendering",
value: function getFeedbackRendering(type) {
if (status === 'correct' || !this.correctAnswer) {
return Function.prototype;
}
if (type === 'oval') {
return this.renderScoringDataFeedbackOval;
}
if (type === 'polygon') {
return this.renderScoringDataFeedbackPolygon;
}
return this.renderScoringDataFeedbackSquare;
}
}, {
key: "render",
value: function render() {
var _ref6 = this.props.scoredData.value || {},
type = _ref6.type,
correctAnswer = _ref6.correctAnswer,
userResponse = _ref6.userResponse;
return _react.default.createElement(_quizRce.ItemBodyWrapper, {
itemBody: this.props.itemBody
}, _react.default.createElement(_TargetContainer.default, {
readOnly: true,
results: true,
coordinates: correctAnswer,
drawingType: getDrawingType(type),
url: this.props.interactionData.imageUrl,
userResponseCoordinate: userResponse,
renderScoringDataFeedback: this.getFeedbackRendering(type),
renderUserResponseFeedback: this.renderUserResponseFeedback
}));
}
}, {
key: "status",
get: function get() {
var _ref7 = this.props.scoredData.value || {},
resultScore = _ref7.resultScore;
if (resultScore === 1) {
return 'correct';
} else if (resultScore <= 0) {
return 'incorrect';
}
return 'unknown';
}
}, {
key: "correctAnswer",
get: function get() {
var scoredData = this.props.scoredData;
return scoredData.value && scoredData.value.correctAnswer;
}
}]);
HotSpotResult.displayName = "HotSpotResult";
return HotSpotResult;
}(_react.Component), _class2.propTypes = {
interactionData: _propTypes.default.shape({
imageUrl: _propTypes.default.string.isRequired
}).isRequired,
itemBody: _propTypes.default.string.isRequired,
scoredData: _propTypes.default.shape({
value: _propTypes.default.shape({
type: _propTypes.default.oneOf(['square', 'oval', 'polygon']),
resultScore: _propTypes.default.number,
userResponse: coordinates,
correctAnswer: _propTypes.default.arrayOf(coordinates)
})
}).isRequired
}, _temp)) || _class);
exports.default = HotSpotResult;