@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
193 lines (191 loc) • 7.63 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";
var _dec, _class, _MultipleChoiceResult;
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 { RadioInput } from '@instructure/ui-radio-input';
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';
export var correctChoice = function correctChoice(_ref) {
var interactionData = _ref.interactionData,
scoredData = _ref.scoredData;
return interactionData.choices.find(function (item) {
var choiceData = scoredData.value && scoredData.value[item.id] || {};
return choiceData.hasOwnProperty('correct') ? choiceData.correct : choiceData.resultScore;
}) || {};
};
/**
---
category: MultipleChoice
---
Multiple Choice Result component
```jsx_example
<SettingsSwitcher locales={LOCALES}>
<MultipleChoiceResult
itemBody="<p>Who was the first <strong>President</strong> of the United States?</p>"
itemId="44"
interactionData={{
choices: [{
id: 'uuid1',
position: 1,
itemBody: '<p>George Washington</p><p>was the first</p><p>president</p>'
},
{ id: 'uuid2', position: 2, itemBody: '<p>Alexander Hamilton</p>' },
{ id: 'uuid3', position: 3, itemBody: '<p>John Adams</p>' },
{ id: 'uuid4', position: 4, itemBody: '<p>Thomas Jefferson</p>' }
]
}}
scoredData={{
correct: false,
value: {
uuid1: { resultScore: 1, correct: true },
uuid2: { resultScore: 0, userResponded: true }
}
}}
/>
</SettingsSwitcher>
```
**/
var MultipleChoiceResult = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_MultipleChoiceResult = /*#__PURE__*/function (_Component) {
function MultipleChoiceResult() {
var _this2;
_classCallCheck(this, MultipleChoiceResult);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this2 = _callSuper(this, MultipleChoiceResult, [].concat(args));
_defineProperty(_this2, "renderFeedbackChoice", function (_ref2, status) {
var id = _ref2.id,
itemBody = _ref2.itemBody;
return jsx("div", {
key: id,
css: _this2.props.styles.responseWrapper
}, jsx(FeedbackWrapper, {
correctAnswer: correctChoice(_this2.props).itemBody,
hiddenCorrectAnswerText: t('Correct answer: '),
hiddenIncorrectAnswerText: t('Incorrect answer: '),
status: status,
richContent: true
}, jsx(RadioInput, {
value: id,
name: "interaction_".concat(_this2.props.itemId),
label: jsx(RichContentRenderer, {
content: itemBody
}),
checked: true,
readOnly: true
})));
});
_defineProperty(_this2, "renderUngradedChoice", function (_ref3, checked) {
var id = _ref3.id,
itemBody = _ref3.itemBody;
return jsx("div", {
key: id,
css: [_this2.props.styles.responseWrapper, _this2.props.styles.radioWrapper]
}, jsx(RadioInput, {
value: id,
name: "interaction_".concat(_this2.props.itemId),
label: jsx("div", null, jsx(RichContentRenderer, {
content: itemBody
}), !checked && jsx(ScreenReaderContent, null, t(', Not Selected'))),
checked: checked,
readOnly: true
}));
});
return _this2;
}
_inherits(MultipleChoiceResult, _Component);
return _createClass(MultipleChoiceResult, [{
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 noResponse = choices.every(function (_ref4) {
var checked = _ref4.checked;
return !checked;
});
var correctnessKnown = typeof scoredData.correct !== 'undefined';
return jsx(ItemBodyWrapper, {
itemBody: this.props.itemBody
}, jsx("div", null, choices.map(function (_ref5) {
var choice = _ref5.choice,
correct = _ref5.correct,
checked = _ref5.checked;
var status;
if (correct === true || correct > 0) {
status = 'correct';
} else if (correctnessKnown && checked) {
status = 'incorrect';
}
if (!status || !checked) {
// Choice has no feedback
return _this3.renderUngradedChoice(choice, checked);
}
return _this3.renderFeedbackChoice(choice, status);
})), noResponse && jsx(NoResponse, {
css: this.props.styles.noResponseWrapper,
correctAnswerLabel: correctChoice(this.props).itemBody,
responseHidden: !scoredData.value,
richContent: true,
status: correctnessKnown ? 'incorrect' : 'unknown'
}));
}
}]);
}(Component), _defineProperty(_MultipleChoiceResult, "displayName", 'MultipleChoiceResult'), _defineProperty(_MultipleChoiceResult, "componentId", "Quizzes".concat(_MultipleChoiceResult.displayName)), _defineProperty(_MultipleChoiceResult, "propTypes", {
interactionData: PropTypes.shape({
choices: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
itemBody: PropTypes.string,
position: PropTypes.number
}))
}).isRequired,
itemBody: PropTypes.string.isRequired,
itemId: PropTypes.string,
scoredData: PropTypes.shape({
correct: PropTypes.bool,
value: PropTypes.objectOf(PropTypes.shape({
correct: PropTypes.bool,
resultScore: PropTypes.number,
userResponded: PropTypes.bool
}))
}).isRequired,
styles: PropTypes.object
}), _defineProperty(_MultipleChoiceResult, "defaultProps", {
itemId: void 0
}), _MultipleChoiceResult)) || _class);
export { MultipleChoiceResult as default };