@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
911 lines (910 loc) • 41.6 kB
JavaScript
/** @jsx jsx */ function _array_like_to_array(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr)) return arr;
}
function _assert_this_initialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _call_super(_this, derived, args) {
derived = _get_prototype_of(derived);
return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
}
function _class_call_check(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for(var i = 0; i < props.length; i++){
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _create_class(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _get_prototype_of(o) {
_get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _get_prototype_of(o);
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _set_prototype_of(subClass, superClass);
}
function _instanceof(left, right) {
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
return !!right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally{
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally{
if (_d) throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
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 _object_spread_props(target, source) {
source = source != null ? source : {};
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 _possible_constructor_return(self, call) {
if (call && (_type_of(call) === "object" || typeof call === "function")) {
return call;
}
return _assert_this_initialized(self);
}
function _set_prototype_of(o, p) {
_set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _set_prototype_of(o, p);
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _type_of(obj) {
"@swc/helpers - typeof";
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o) return;
if (typeof o === "string") return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
function _is_native_reflect_construct() {
try {
var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
} catch (_) {}
return (_is_native_reflect_construct = function() {
return !!result;
})();
}
function _ts_decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import update from 'immutability-helper';
import pick from 'lodash/fp/pick';
import find from 'lodash/fp/find';
import { Text } from '@instructure/ui-text';
import { Alert } from '@instructure/ui-alerts';
import { Button, CondensedButton, IconButton } from '@instructure/ui-buttons';
import { IconBoxLine, IconEmptyLine, IconInfoLine, IconMarkerLine, IconQuestionLine } from '@instructure/ui-icons';
import { View } from '@instructure/ui-view';
import { jsx } from '@instructure/emotion';
import { SimpleModal, withStyleOverrides, FormFieldGroup } from '@instructure/quiz-common';
import HotSpotInteractionType from '../../../records/interactions/hotspot';
import QuestionSettingsContainer from '../../common/edit/components/QuestionSettingsContainer';
import QuestionContainer from '../../common/edit/components/QuestionContainer';
import RemoveChoiceButton from '../../common/edit/components/RemoveChoiceButton';
import DrawingContainer from './DrawingContainer';
import Oval from '../common/Oval';
import Polygon from '../common/Polygon';
import Square from '../common/Square';
import generateStyle from './styles';
import generateComponentTheme from './theme';
import withEditTools from '../../../util/withEditTools';
import t from '@instructure/quiz-i18n/format-message';
import QuestionSettingsPanel from '../../common/edit/components/QuestionSettingsPanel';
import CalculatorOptionWithOqaatAlert from '../../common/edit/components/CalculatorOptionWithOqaatAlert';
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
import castArray from 'lodash/castArray';
export function drawTypes() {
return [
{
type: 'square',
title: t('Square'),
icon: IconBoxLine,
component: Square
},
{
type: 'oval',
title: t('Oval'),
icon: IconEmptyLine,
component: Oval
},
{
type: 'polygon',
title: t('Polygon'),
icon: IconMarkerLine,
component: Polygon
}
];
}
var ALL_OR_NOTHING = 'AllOrNothing';
var HotSpotEdit = /*#__PURE__*/ function(Component) {
"use strict";
_inherits(HotSpotEdit, Component);
function HotSpotEdit() {
_class_call_check(this, HotSpotEdit);
var _this;
_this = _call_super(this, HotSpotEdit, arguments), _define_property(_this, "drawingContainer", null), _define_property(_this, "state", {
file: null,
isShortcutsModalOpen: false,
currentId: null,
currentShapeType: 'square',
tempHotspot: null,
isModalOpen: false,
canvasRef: null
}), _define_property(_this, "handleCanvasRef", function(ref) {
_this.setState({
canvasRef: ref
});
}), // ===========
// HELPERS
// ===========
_define_property(_this, "updateProps", function(newProps) {
var propsToUpdate = pick([
'interactionData',
'scoringData',
'properties'
], _this.props);
_this.props.changeItemState(update(propsToUpdate, newProps));
}), _define_property(_this, "getConvertedCoordinates", function(coordinatesArray) {
return coordinatesArray.map(function(param) {
var x = param.x, y = param.y;
return {
x: x / _this.drawingContainer.currentImageWidth(),
y: y / _this.drawingContainer.currentImageHeight()
};
});
}), _define_property(_this, "addNewHotspot", function(convertedCoordinates) {
_this.updateProps({
interactionData: {
hotspotsCount: {
$set: _this.props.scoringData.value.length + 1
}
},
scoringData: {
value: {
$push: [
_object_spread_props(_object_spread({}, _this.state.tempHotspot), {
coordinates: convertedCoordinates
})
]
}
}
});
_this.setState({
tempHotspot: null,
currentId: _this.state.tempHotspot.id
});
}), _define_property(_this, "updateExistingHotspot", function(lastHotspotIndex, convertedCoordinates) {
_this.updateProps({
scoringData: {
value: _define_property({}, lastHotspotIndex, {
coordinates: {
$set: convertedCoordinates
}
})
}
});
}), _define_property(_this, "finalizeHotspot", function(lastHotspotIndex, convertedCoordinates) {
_this.updateProps({
interactionData: {
hotspotsCount: {
$set: _this.props.scoringData.value.length
}
},
scoringData: {
value: _define_property({}, lastHotspotIndex, {
coordinates: {
$set: convertedCoordinates
}
})
}
});
}), _define_property(_this, "prepareNewTempHotspot", function() {
var newId = _this.props.scoringData.value.length + 1;
_this.setState({
tempHotspot: {
type: _this.state.currentShapeType,
coordinates: [],
id: newId
}
});
}), _define_property(_this, "convertCoordinates", function(coordinatesArray, isDrawing) {
var isKeyboard = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
var convertedCoordinates = _this.getConvertedCoordinates(coordinatesArray);
if (!_this.props.multipleHotSpotEnabled) {
_this.updateProps({
scoringData: {
value: {
coordinates: {
$set: convertedCoordinates
}
}
}
});
return;
}
var value = _this.props.scoringData.value;
var hotspots = castArray(value);
var lastHotspotIndex = hotspots === null || hotspots === void 0 ? void 0 : hotspots.findIndex(function(hotspot) {
return (hotspot === null || hotspot === void 0 ? void 0 : hotspot.id) === _this.state.currentId;
});
if (isDrawing) {
if (_this.state.tempHotspot && !isKeyboard) {
_this.addNewHotspot(convertedCoordinates);
} else {
_this.updateExistingHotspot(lastHotspotIndex, convertedCoordinates);
}
} else {
_this.finalizeHotspot(lastHotspotIndex, convertedCoordinates);
_this.prepareNewTempHotspot();
}
}), // ===========
// HANDLERS
// ===========
_define_property(_this, "handleCalculatorTypeChange", function(e, value) {
_this.props.changeItemState({
calculatorType: value
});
}), _define_property(_this, "handleTypeChange", function(newType) {
var coordinates = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
var _lastHotspot_coordinates;
if (!_this.props.multipleHotSpotEnabled) {
_this.updateProps({
scoringData: {
value: {
$set: {
type: newType,
coordinates: coordinates || []
}
}
}
});
_this.setState({
currentShapeType: newType,
tempHotspot: null
});
return;
}
var value = _this.props.scoringData.value;
var hotspots = castArray(value);
var lastHotspotIndex = hotspots === null || hotspots === void 0 ? void 0 : hotspots.findIndex(function(hotspot) {
return (hotspot === null || hotspot === void 0 ? void 0 : hotspot.id) === _this.state.currentId;
});
var lastHotspot = hotspots[lastHotspotIndex];
if ((lastHotspot === null || lastHotspot === void 0 ? void 0 : (_lastHotspot_coordinates = lastHotspot.coordinates) === null || _lastHotspot_coordinates === void 0 ? void 0 : _lastHotspot_coordinates.length) > 0 || !_this.state.currentId) {
// Generate the next available sequential ID based on the current number of hotspots
var newId = hotspots.length + 1;
var tempHotspot = {
type: newType,
coordinates: [],
id: newId
};
_this.setState({
currentShapeType: newType,
tempHotspot: tempHotspot
});
} else {
_this.updateProps({
scoringData: {
value: _define_property({}, lastHotspotIndex, {
type: {
$set: newType
}
})
}
});
_this.setState({
currentShapeType: newType,
tempHotspot: null
});
}
}), _define_property(_this, "handleRemoveImage", function() {
_this.updateProps({
interactionData: {
$set: {}
},
scoringData: {
value: {
$set: []
}
}
});
}), _define_property(_this, "handleUpload", function(url) {
var hotSpot = {
type: 'square',
coordinates: [],
id: 1
};
_this.updateProps({
interactionData: {
imageUrl: {
$set: url
},
hotspotsCount: {
$set: 0
}
},
scoringData: {
value: {
$set: !_this.props.multipleHotSpotEnabled ? hotSpot : [
hotSpot
]
}
}
});
_this.setState({
tempHotspot: null,
currentId: 1,
file: null,
currentShapeType: 'square'
});
}), _define_property(_this, "openShortcutsModal", function() {
_this.setState({
isShortcutsModalOpen: true
});
}), _define_property(_this, "closeShortcutsModal", function() {
_this.setState({
isShortcutsModalOpen: false
});
}), _define_property(_this, "handleDropAccepted", function(param) {
var _param = _sliced_to_array(param, 1), file = _param[0];
if (_instanceof(file, Blob)) {
var reader = new FileReader();
reader.onload = function(e) {
_this.setState({
file: {
url: e.target.result
}
});
};
reader.readAsDataURL(file);
}
_this.setState({
file: {}
});
_this.props.mediaUpload(file, _this.handleUpload);
}), _define_property(_this, "handleDrawingRemove", function(hotspotId) {
if (!_this.props.multipleHotSpotEnabled) {
var _this_props_scoringData_value, _this_props_scoringData;
_this.drawingContainer.canvas.clearCanvas();
_this.drawingContainer.canvas.focus();
_this.handleTypeChange(((_this_props_scoringData = _this.props.scoringData) === null || _this_props_scoringData === void 0 ? void 0 : (_this_props_scoringData_value = _this_props_scoringData.value) === null || _this_props_scoringData_value === void 0 ? void 0 : _this_props_scoringData_value.type) || _this.state.currentShapeType);
return;
}
var indexToRemove = _this.props.scoringData.value.findIndex(function(hotspot) {
return hotspot.id === hotspotId;
});
if (indexToRemove !== -1 && _this.props.scoringData.value.length > 1) {
var updatedHotspots = update(_this.props.scoringData.value, {
$splice: [
[
indexToRemove,
1
]
]
});
// Reassign IDs sequentially
var reorderedHotspots = updatedHotspots.map(function(hotspot, idx) {
return _object_spread_props(_object_spread({}, hotspot), {
id: idx + 1
});
});
_this.updateProps({
interactionData: {
hotspotsCount: {
$set: reorderedHotspots.length
}
},
scoringData: {
value: {
$set: reorderedHotspots
}
}
});
var newCurrentId = reorderedHotspots.length > 0 ? reorderedHotspots[0].id : null;
_this.setState({
currentId: newCurrentId,
tempHotspot: {
type: _this.state.currentShapeType,
coordinates: [],
id: reorderedHotspots.length + 1
}
}, function() {
var _this_drawingContainer_canvas, _this_drawingContainer, _this1;
(_this1 = _this) === null || _this1 === void 0 ? void 0 : (_this_drawingContainer = _this1.drawingContainer) === null || _this_drawingContainer === void 0 ? void 0 : (_this_drawingContainer_canvas = _this_drawingContainer.canvas) === null || _this_drawingContainer_canvas === void 0 ? void 0 : _this_drawingContainer_canvas.focus();
});
} else {
_this.updateProps({
interactionData: {
hotspotsCount: {
$set: 1
}
},
scoringData: {
value: _define_property({}, indexToRemove, {
coordinates: {
$set: []
},
type: {
$set: _this.state.currentShapeType || 'square'
}
})
}
});
_this.setState({
currentId: 1,
tempHotspot: null
});
}
}), _define_property(_this, "handleDescriptionChange", function(itemBody) {
return _this.props.changeItemState({
itemBody: itemBody
});
}), _define_property(_this, "handleDrawingContainerRef", function(node) {
_this.drawingContainer = node;
}), _define_property(_this, "handleCloseModal", function() {
_this.setState({
isModalOpen: false
});
}), _define_property(_this, "handleOpenModal", function() {
_this.setState({
isModalOpen: true
});
});
return _this;
}
_create_class(HotSpotEdit, [
{
key: "componentDidMount",
value: function componentDidMount() {
var _this_props = this.props, interactionData = _this_props.interactionData, multipleHotSpotEnabled = _this_props.multipleHotSpotEnabled, scoringData = _this_props.scoringData;
if (interactionData === null || interactionData === void 0 ? void 0 : interactionData.imageUrl) {
if (multipleHotSpotEnabled) {
this.handleTypeChange(this.state.currentShapeType);
} else {
var _scoringData_value;
this.setState({
currentShapeType: (scoringData === null || scoringData === void 0 ? void 0 : (_scoringData_value = scoringData.value) === null || _scoringData_value === void 0 ? void 0 : _scoringData_value.type) || 'square'
});
}
}
}
},
{
key: "componentDidUpdate",
value: function componentDidUpdate() {
var multipleHotSpotEnabled = this.props.multipleHotSpotEnabled;
if (multipleHotSpotEnabled) {
this.ensureScoringDataIsArray();
} else {
this.handleSingleHotSpotUpdate();
}
}
},
{
key: "ensureScoringDataIsArray",
value: function ensureScoringDataIsArray() {
var scoringData = this.props.scoringData;
if ((scoringData === null || scoringData === void 0 ? void 0 : scoringData.value) && !Array.isArray(scoringData.value)) {
var normalizedValue = [
_object_spread_props(_object_spread({}, scoringData.value), {
id: 1
})
];
this.updateProps({
scoringData: {
value: {
$set: normalizedValue
}
}
});
}
}
},
{
key: "handleSingleHotSpotUpdate",
value: function handleSingleHotSpotUpdate() {
var _scoringData_value, _scoringData_value1;
var scoringData = this.props.scoringData;
if ((scoringData === null || scoringData === void 0 ? void 0 : (_scoringData_value = scoringData.value) === null || _scoringData_value === void 0 ? void 0 : _scoringData_value.length) === 1) {
var _scoringData_value2 = _sliced_to_array(scoringData.value, 1), hotSpot = _scoringData_value2[0];
this.handleTypeChange(hotSpot.type, hotSpot.coordinates);
} else if ((scoringData === null || scoringData === void 0 ? void 0 : (_scoringData_value1 = scoringData.value) === null || _scoringData_value1 === void 0 ? void 0 : _scoringData_value1.length) > 1) {
this.handleDrawingRemove();
}
}
},
{
// ===========
// RENDER
// ===========
key: "renderFooter",
value: function renderFooter() {
var _this = this;
var value = this.props.scoringData.value;
var url = this.props.interactionData.imageUrl;
var hotspots = castArray(value);
if (url && hotspots.length > 0) {
return /*#__PURE__*/ jsx(React.Fragment, null, hotspots.map(function(hotspot) {
var title = find({
type: hotspot.type
}, drawTypes()).title;
var mainText = t('{title} Hot Spot', {
title: title
});
if (hotspot.coordinates.length < 2) {
return null;
}
return /*#__PURE__*/ jsx("div", {
key: hotspot.id,
css: _this.props.styles.footerContainer
}, /*#__PURE__*/ jsx("div", {
css: _this.props.styles.footerContainerText
}, /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(Text, {
weight: "bold"
}, mainText)), /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(Text, {
color: "primary"
}, t('Clicks within the hot spot will be considered correct')))), /*#__PURE__*/ jsx(RemoveChoiceButton, {
onRemoveChoice: function() {
return _this.handleDrawingRemove(hotspot.id);
},
screenReaderText: t('Remove Drawing'),
automationData: "sdk-remove-hotspot-area-button"
}));
}));
}
return null;
}
},
{
key: "renderOptionsDescription",
value: function renderOptionsDescription() {
return /*#__PURE__*/ jsx(ScreenReaderContent, null, t('Hotspot options'));
}
},
{
key: "renderShortcutsModal",
value: function renderShortcutsModal() {
return /*#__PURE__*/ jsx(SimpleModal, {
footerContent: /*#__PURE__*/ jsx(Button, {
onClick: this.closeShortcutsModal,
color: "primary"
}, t('Close')),
isModalOpen: this.state.isShortcutsModalOpen,
onModalDismiss: this.closeShortcutsModal,
size: "medium",
title: t('Hotspot Controls & Shortcuts'),
label: t('Hotspot Controls & Shortcuts')
}, /*#__PURE__*/ jsx("div", {
css: this.props.styles.modalContent
}, /*#__PURE__*/ jsx(Text, null, t('Hotspot Controls')), /*#__PURE__*/ jsx("ul", null, /*#__PURE__*/ jsx("li", null, t('Use the Arrow keys to move the hotspot')), /*#__PURE__*/ jsx("li", null, t('Hold Shift and use the Arrow keys to resize the hotspot')), /*#__PURE__*/ jsx("li", null, t('Hold Shift + Alt and use the Arrow keys to shrink the hotspot')), /*#__PURE__*/ jsx("li", null, t('Press the Escape key to close the modal'))), /*#__PURE__*/ jsx(Text, null, t('Shortcuts')), /*#__PURE__*/ jsx("ul", null, /*#__PURE__*/ jsx("li", null, t('F: Expand Image')), /*#__PURE__*/ jsx("li", null, t('D: Remove Image')), /*#__PURE__*/ jsx("li", null, t('B: Browse for Image')), /*#__PURE__*/ jsx("li", null, t('I: Open Shortcuts Modal')), /*#__PURE__*/ jsx("li", null, t('C or ESC: Close Shortcuts Modal')), /*#__PURE__*/ jsx("li", null, t('R: Add Square Hotspot')), /*#__PURE__*/ jsx("li", null, t('O: Add Oval Hotspot')), /*#__PURE__*/ jsx("li", null, t('P: Draw Polygon Hotspot')), /*#__PURE__*/ jsx("li", null, t('E: Close Polygon Shape')), /*#__PURE__*/ jsx("li", null, t('Delete or Backspace: Remove Current Hotspot')), /*#__PURE__*/ jsx("li", null, t('Enter: Add Polygon Point')))));
}
},
{
// these are added for a way to let the user know that the current supported grading options is exact match
// as partial grading is to be added in the future
key: "renderGradingOptionsModal",
value: function renderGradingOptionsModal() {
return /*#__PURE__*/ jsx(SimpleModal, {
size: "small",
title: t('Grading'),
label: t('Grading'),
isModalOpen: this.state.isModalOpen,
onModalDismiss: this.handleCloseModal,
"data-automation": "sdk-hotspot-grading-options"
}, /*#__PURE__*/ jsx(Text, {
weight: "bold",
lineHeight: "double"
}, t('Exact match')), /*#__PURE__*/ jsx("br", null), /*#__PURE__*/ jsx(Text, null, t('Students are awarded full credit if all correct answers are selected and no incorrect answers are selected.')));
}
},
{
key: "renderGradingOptions",
value: function renderGradingOptions() {
var value = this.props.scoringData.value;
var hotspots = castArray(value);
var eligibleHotspots = hotspots.filter(function(hotspot) {
var _hotspot_coordinates;
return (hotspot === null || hotspot === void 0 ? void 0 : (_hotspot_coordinates = hotspot.coordinates) === null || _hotspot_coordinates === void 0 ? void 0 : _hotspot_coordinates.length) > 1;
});
if (eligibleHotspots.length < 2) return null;
return /*#__PURE__*/ jsx(View, {
as: "div",
margin: "medium 0",
position: "relative"
}, /*#__PURE__*/ jsx(RadioInputGroup, {
onChange: function() {},
name: t('Grading'),
value: ALL_OR_NOTHING,
description: /*#__PURE__*/ jsx("span", null, t('Grading'), /*#__PURE__*/ jsx(IconButton, {
size: "small",
withBackground: false,
withBorder: false,
renderIcon: IconQuestionLine,
onClick: this.handleOpenModal,
screenReaderLabel: t('Open grading option information')
}))
}, /*#__PURE__*/ jsx(RadioInput, {
value: ALL_OR_NOTHING,
label: t('Exact Match'),
"data-automation": "sdk-hotspot-exact"
})));
}
},
{
key: "render",
value: function render() {
var _this = this;
var hotspots = castArray(this.props.scoringData.value);
var canvasErrors = this.props.multipleHotSpotEnabled ? 'scoringData.value[0].coordinates' : 'scoringData.value.coordinates';
var typeErrors = this.props.multipleHotSpotEnabled ? 'scoringData.value[0].type' : 'scoringData.value.type';
return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx("div", {
className: "accessibilityInfo",
css: this.props.styles.accessibilityInfo
}, /*#__PURE__*/ jsx(Text, {
color: "secondary"
}, /*#__PURE__*/ jsx(IconInfoLine, {
size: "x-small",
css: this.props.styles.accessibilityInfoIcon
}), t('This question type is not accessible to users requiring screen readers.'))), /*#__PURE__*/ jsx(Alert, {
variant: "info"
}, /*#__PURE__*/ jsx(View, {
display: "inline",
css: this.props.styles.alertInfoWrapper
}, /*#__PURE__*/ jsx(Text, {
id: "hotspot-oqaat-info"
}, t.rich("Keyboard controls are available while using the hotspot. Press <1>i</1> whenever the <0>hotspot keyboard shortcuts</0> is needed.\n Just make sure that the hotspot image is focused to use these controls.", [
function(param) {
var children = param.children;
return /*#__PURE__*/ jsx(CondensedButton, {
key: "0",
onClick: _this.openShortcutsModal
}, children);
},
function(param) {
var children = param.children;
return /*#__PURE__*/ jsx("b", {
key: "1"
}, children);
}
])))), /*#__PURE__*/ jsx(QuestionContainer, {
disabled: this.props.overrideEditableForRegrading,
enableRichContentEditor: this.props.enableRichContentEditor,
itemBody: this.props.itemBody,
onDescriptionChange: this.handleDescriptionChange,
onModalClose: this.props.onModalClose,
onModalOpen: this.props.onModalOpen,
openImportModal: this.props.openImportModal,
stemErrors: this.props.getErrors('itemBody')
}, /*#__PURE__*/ jsx(DrawingContainer, {
ref: this.handleDrawingContainerRef,
canvasErrors: this.props.getErrors(canvasErrors),
hotspots: hotspots,
currentType: this.state.currentShapeType,
drawTypes: drawTypes(),
fileDropErrors: this.props.getErrors('interactionData.imageUrl'),
onModalOpen: this.props.onModalOpen,
onModalClose: this.props.onModalClose,
onDropAccepted: this.handleDropAccepted,
onSetType: this.handleTypeChange,
convertCoordinates: this.convertCoordinates,
onRemoveImage: this.handleRemoveImage,
typeErrors: this.props.getErrors(typeErrors),
url: this.props.interactionData.imageUrl || this.state.file && this.state.file.url,
isUploading: this.state.file !== null,
onRemoveHotspot: this.handleDrawingRemove,
onOpenShortcutsModal: this.openShortcutsModal,
onCloseShortcutsModal: this.closeShortcutsModal,
isShortcutsModalOpen: this.state.isShortcutsModalOpen,
tempHotspot: this.state.tempHotspot,
currentHotspotId: this.state.currentId,
setCanvasRef: this.handleCanvasRef,
canvasRef: this.state.canvasRef,
multipleHotSpotEnabled: this.props.multipleHotSpotEnabled
}), this.renderFooter()), /*#__PURE__*/ jsx(QuestionSettingsContainer, {
additionalOptions: this.props.additionalOptions
}, this.props.showCalculatorOption && /*#__PURE__*/ jsx(QuestionSettingsPanel, {
label: t('Options'),
defaultExpanded: true
}, /*#__PURE__*/ jsx(FormFieldGroup, {
rowSpacing: "small",
description: this.renderOptionsDescription()
}, /*#__PURE__*/ jsx(CalculatorOptionWithOqaatAlert, {
disabled: this.props.overrideEditableForRegrading,
calculatorValue: this.props.calculatorType,
onCalculatorTypeChange: this.handleCalculatorTypeChange,
oqaatChecked: this.props.oneQuestionAtATime,
onOqaatChange: this.props.setOneQuestionAtATime
})))), this.state.isShortcutsModalOpen && this.renderShortcutsModal(), this.renderGradingOptionsModal());
}
}
]);
return HotSpotEdit;
}(Component);
_define_property(HotSpotEdit, "displayName", 'HotSpotEdit');
_define_property(HotSpotEdit, "componentId", "Quizzes".concat(HotSpotEdit.displayName));
_define_property(HotSpotEdit, "interactionType", HotSpotInteractionType);
_define_property(HotSpotEdit, "propTypes", _object_spread_props(_object_spread({
additionalOptions: PropTypes.array,
calculatorType: PropTypes.string,
changeItemState: PropTypes.func.isRequired,
enableRichContentEditor: PropTypes.bool,
errors: PropTypes.shape({
itemBody: PropTypes.arrayOf(PropTypes.string),
interactionData: PropTypes.shape({
imageUrl: PropTypes.arrayOf(PropTypes.string)
}),
scoringData: PropTypes.shape({
value: PropTypes.arrayOf(PropTypes.shape({
type: PropTypes.arrayOf(PropTypes.string),
coordinates: PropTypes.arrayOf(PropTypes.string)
}))
})
}),
interactionData: PropTypes.shape({
imageUrl: PropTypes.string,
hotspotsCount: PropTypes.number
}).isRequired,
itemBody: PropTypes.string,
mediaUpload: PropTypes.func.isRequired,
onModalClose: PropTypes.func,
onModalOpen: PropTypes.func,
oneQuestionAtATime: PropTypes.bool,
openImportModal: PropTypes.func,
overrideEditableForRegrading: PropTypes.bool,
scoringData: PropTypes.shape({
value: PropTypes.arrayOf(PropTypes.shape({
type: PropTypes.oneOf([
'square',
'oval',
'polygon'
]),
coordinates: PropTypes.arrayOf(PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
}))
})).isRequired
}).isRequired,
setOneQuestionAtATime: PropTypes.func
}, withEditTools.injectedProps), {
styles: PropTypes.object,
multipleHotSpotEnabled: PropTypes.bool,
showCalculatorOption: PropTypes.bool
}));
_define_property(HotSpotEdit, "defaultProps", {
calculatorType: 'none',
enableRichContentEditor: true,
oneQuestionAtATime: false,
overrideEditableForRegrading: false,
setOneQuestionAtATime: Function.prototype,
additionalOptions: void 0,
errors: void 0,
itemBody: void 0,
onModalClose: void 0,
onModalOpen: void 0,
openImportModal: void 0,
multipleHotSpotEnabled: false,
showCalculatorOption: true
});
export { HotSpotEdit as default };
HotSpotEdit = _ts_decorate([
withEditTools,
withStyleOverrides(generateStyle, generateComponentTheme)
], HotSpotEdit);