@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
127 lines (122 loc) • 4.55 kB
JavaScript
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";
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));
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ItemBodyWrapper } from '@instructure/quiz-rce';
import ChoicesList from '../common/ChoicesList';
import CategoriesContainer from '../common/CategoriesContainer';
import { getSortedCategories } from '../common/utils';
import setFromArray from '../../../util/setFromArray';
/**
---
category: Categorization
---
Categorization Show component
```jsx_example
<SettingsSwitcher locales={LOCALES}>
<CategorizationShow
itemBody="Match the name of the celestial body on the left with its correct classification:"
interactionData={{
categoryOrder: ['uuid1', 'uuid2'],
categories: {
uuid1: { id: 'uuid1', itemBody: 'Planet' },
uuid2: { id: 'uuid2', itemBody: 'Moon' }
},
distractors: {
uuid3: { id: 'uuid3', itemBody: 'Mars' },
uuid4: { id: 'uuid4', itemBody: 'Europa' },
uuid5: { id: 'uuid5', itemBody: 'Venus' }
}
}}
scoringData={{
value: [{
id: 'uuid1',
scoringAlgorithm: 'AllOrNothing',
scoringData: { value: ['uuid3'] }
}, {
id: 'uuid2',
scoringAlgorithm: 'AllOrNothing',
scoringData: { value: ['uuid4'] }
}]
}}
/>
</SettingsSwitcher>
```
**/
var CategorizationShow = /*#__PURE__*/function (_Component) {
function CategorizationShow() {
_classCallCheck(this, CategorizationShow);
return _callSuper(this, CategorizationShow, arguments);
}
_inherits(CategorizationShow, _Component);
return _createClass(CategorizationShow, [{
key: "filterDistractors",
value:
// ===========
// HELPERS
// ===========
function filterDistractors() {
var unavailableAnswersIds = setFromArray(this.props.scoringData.value.reduce(function (accumulator, currentValue) {
return accumulator.concat(currentValue.scoringData.value);
}, []));
var distractors = Object.values(this.props.interactionData.distractors).filter(function (distractor) {
return !unavailableAnswersIds.has(distractor.id);
});
return distractors;
}
}, {
key: "parsedScoringData",
value: function parsedScoringData() {
return this.props.scoringData.value.map(function (item) {
return {
id: item.id,
value: item.scoringData.value
};
});
}
// ===========
// RENDER
// ===========
}, {
key: "render",
value: function render() {
var _this$props$interacti = this.props.interactionData,
categories = _this$props$interacti.categories,
categoryOrder = _this$props$interacti.categoryOrder;
return /*#__PURE__*/React.createElement(ItemBodyWrapper, {
itemBody: this.props.itemBody
}, /*#__PURE__*/React.createElement(CategoriesContainer, {
sortedCategories: getSortedCategories(categories, categoryOrder),
distractors: this.props.interactionData.distractors,
userResponseValue: this.parsedScoringData()
}), /*#__PURE__*/React.createElement(ChoicesList, {
distractors: this.filterDistractors(),
isDraggable: false
}));
}
}]);
}(Component);
_defineProperty(CategorizationShow, "propTypes", {
itemBody: PropTypes.string.isRequired,
interactionData: PropTypes.object.isRequired,
scoringData: PropTypes.object.isRequired
});
export { CategorizationShow as default };