@pie-element/rubric 6.3.4-next.0 → 7.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/configure/lib/defaults.js +2 -3
  2. package/configure/lib/defaults.js.map +1 -1
  3. package/configure/lib/index.js +90 -152
  4. package/configure/lib/index.js.map +1 -1
  5. package/configure/lib/main.js +90 -149
  6. package/configure/lib/main.js.map +1 -1
  7. package/configure/package.json +11 -7
  8. package/configure/src/__tests__/index.test.jsx +12 -2
  9. package/configure/src/index.js +12 -2
  10. package/configure/src/main.jsx +11 -13
  11. package/controller/lib/defaults.js +2 -3
  12. package/controller/lib/defaults.js.map +1 -1
  13. package/controller/lib/index.js +15 -28
  14. package/controller/lib/index.js.map +1 -1
  15. package/controller/package.json +1 -1
  16. package/lib/index.js +38 -80
  17. package/lib/index.js.map +1 -1
  18. package/lib/main.js +182 -244
  19. package/lib/main.js.map +1 -1
  20. package/lib/print.js +41 -84
  21. package/lib/print.js.map +1 -1
  22. package/package.json +8 -9
  23. package/src/__tests__/rubric-view.test.jsx +12 -24
  24. package/src/index.js +14 -3
  25. package/src/main.jsx +100 -93
  26. package/src/print.js +13 -2
  27. package/configure/lib/pie-toolbox-rubric/authoring.js +0 -573
  28. package/configure/lib/pie-toolbox-rubric/authoring.js.map +0 -1
  29. package/configure/lib/pie-toolbox-rubric/index.js +0 -24
  30. package/configure/lib/pie-toolbox-rubric/index.js.map +0 -1
  31. package/configure/lib/pie-toolbox-rubric/point-menu.js +0 -172
  32. package/configure/lib/pie-toolbox-rubric/point-menu.js.map +0 -1
  33. package/configure/src/pie-toolbox-rubric/authoring.jsx +0 -449
  34. package/configure/src/pie-toolbox-rubric/index.js +0 -9
  35. package/configure/src/pie-toolbox-rubric/point-menu.jsx +0 -94
  36. package/module/configure.js +0 -1
  37. package/module/controller.js +0 -113
  38. package/module/demo.js +0 -33
  39. package/module/element.js +0 -1
  40. package/module/index.html +0 -21
  41. package/module/manifest.json +0 -14
  42. package/module/print-demo.js +0 -71
  43. package/module/print.html +0 -18
  44. package/module/print.js +0 -1
  45. package/src/__tests__/__snapshots__/rubric-view.test.jsx.snap +0 -2521
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/pie-toolbox-rubric/index.js"],"names":["RUBRIC_TYPES","SIMPLE_RUBRIC","MULTI_TRAIT_RUBRIC","RUBRICLESS"],"mappings":";;;;;;;;;;;;;;;AAAA;;AAEA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,aAAa,EAAE,cADI;AAEnBC,EAAAA,kBAAkB,EAAE,kBAFD;AAGnBC,EAAAA,UAAU,EAAE;AAHO,CAArB","sourcesContent":["import Authoring from './authoring';\n\nconst RUBRIC_TYPES = {\n SIMPLE_RUBRIC: 'simpleRubric',\n MULTI_TRAIT_RUBRIC: 'multiTraitRubric',\n RUBRICLESS: 'rubricless',\n};\n\nexport { Authoring, RUBRIC_TYPES };\n"],"file":"index.js"}
@@ -1,172 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.IconMenu = void 0;
9
-
10
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
-
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
-
14
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
15
-
16
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
-
18
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
19
-
20
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
21
-
22
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
23
-
24
- var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
25
-
26
- var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
27
-
28
- var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
29
-
30
- var _MoreHoriz = _interopRequireDefault(require("@material-ui/icons/MoreHoriz"));
31
-
32
- var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
33
-
34
- var _propTypes = _interopRequireDefault(require("prop-types"));
35
-
36
- var _react = _interopRequireDefault(require("react"));
37
-
38
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
39
-
40
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
41
-
42
- var IconMenu = /*#__PURE__*/function (_React$Component) {
43
- (0, _inherits2["default"])(IconMenu, _React$Component);
44
-
45
- var _super = _createSuper(IconMenu);
46
-
47
- function IconMenu(props) {
48
- var _this;
49
-
50
- (0, _classCallCheck2["default"])(this, IconMenu);
51
- _this = _super.call(this, props);
52
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (event) {
53
- return _this.setState({
54
- open: true,
55
- anchorEl: event.currentTarget
56
- });
57
- });
58
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleRequestClose", function () {
59
- return _this.setState({
60
- open: false
61
- });
62
- });
63
- _this.state = {
64
- anchorEl: undefined,
65
- open: false
66
- };
67
- return _this;
68
- }
69
-
70
- (0, _createClass2["default"])(IconMenu, [{
71
- key: "render",
72
- value: function render() {
73
- var _this2 = this;
74
-
75
- var _this$props = this.props,
76
- opts = _this$props.opts,
77
- onClick = _this$props.onClick,
78
- classes = _this$props.classes;
79
- var _this$state = this.state,
80
- open = _this$state.open,
81
- anchorEl = _this$state.anchorEl;
82
- var keys = Object.keys(opts) || [];
83
-
84
- var handleMenuClick = function handleMenuClick(key) {
85
- return function () {
86
- onClick(key);
87
-
88
- _this2.handleRequestClose();
89
- };
90
- };
91
-
92
- var iconColor = open ? 'inherit' : 'disabled';
93
- return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
94
- onClick: this.handleClick
95
- }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
96
- className: classes.icon
97
- }, open ? /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], {
98
- color: iconColor
99
- }) : /*#__PURE__*/_react["default"].createElement(_MoreHoriz["default"], {
100
- color: iconColor
101
- }))), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
102
- id: "point-menu",
103
- anchorEl: anchorEl,
104
- open: open,
105
- onClose: this.handleRequestClose,
106
- style: {
107
- transform: 'translate(-15px, -15px)'
108
- },
109
- transformOrigin: {
110
- vertical: 'center',
111
- horizontal: 'right'
112
- }
113
- }, keys.map(function (k, index) {
114
- return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
115
- key: index,
116
- onClick: handleMenuClick(k)
117
- }, opts[k]);
118
- })));
119
- }
120
- }]);
121
- return IconMenu;
122
- }(_react["default"].Component);
123
-
124
- exports.IconMenu = IconMenu;
125
- (0, _defineProperty2["default"])(IconMenu, "propTypes", {
126
- opts: _propTypes["default"].object,
127
- onClick: _propTypes["default"].func.isRequired,
128
- classes: _propTypes["default"].object.isRequired
129
- });
130
-
131
- var PointMenu = /*#__PURE__*/function (_React$Component2) {
132
- (0, _inherits2["default"])(PointMenu, _React$Component2);
133
-
134
- var _super2 = _createSuper(PointMenu);
135
-
136
- function PointMenu() {
137
- (0, _classCallCheck2["default"])(this, PointMenu);
138
- return _super2.apply(this, arguments);
139
- }
140
-
141
- (0, _createClass2["default"])(PointMenu, [{
142
- key: "render",
143
- value: function render() {
144
- var _this$props2 = this.props,
145
- onChange = _this$props2.onChange,
146
- classes = _this$props2.classes,
147
- showSampleAnswer = _this$props2.showSampleAnswer;
148
- var sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
149
- return /*#__PURE__*/_react["default"].createElement(IconMenu, {
150
- onClick: function onClick(key) {
151
- return onChange(key);
152
- },
153
- opts: {
154
- sample: sampleText
155
- },
156
- classes: classes
157
- });
158
- }
159
- }]);
160
- return PointMenu;
161
- }(_react["default"].Component);
162
-
163
- exports["default"] = PointMenu;
164
- (0, _defineProperty2["default"])(PointMenu, "propTypes", {
165
- onChange: _propTypes["default"].func.isRequired,
166
- classes: _propTypes["default"].object.isRequired,
167
- showSampleAnswer: _propTypes["default"].bool.isRequired
168
- });
169
- (0, _defineProperty2["default"])(PointMenu, "defaultProps", {
170
- classes: {}
171
- });
172
- //# sourceMappingURL=point-menu.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/pie-toolbox-rubric/point-menu.jsx"],"names":["IconMenu","props","event","setState","open","anchorEl","currentTarget","state","undefined","opts","onClick","classes","keys","Object","handleMenuClick","key","handleRequestClose","iconColor","handleClick","icon","transform","vertical","horizontal","map","k","index","React","Component","PropTypes","object","func","isRequired","PointMenu","onChange","showSampleAnswer","sampleText","sample","bool"],"mappings":"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","sourcesContent":["import Menu from '@material-ui/core/Menu';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport MoreVertIcon from '@material-ui/icons/MoreVert';\nimport MoreHorizIcon from '@material-ui/icons/MoreHoriz';\nimport IconButton from '@material-ui/core/IconButton';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nexport class IconMenu extends React.Component {\n static propTypes = {\n opts: PropTypes.object,\n onClick: PropTypes.func.isRequired,\n classes: PropTypes.object.isRequired,\n };\n\n constructor(props) {\n super(props);\n this.state = {\n anchorEl: undefined,\n open: false,\n };\n }\n\n handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });\n\n handleRequestClose = () => this.setState({ open: false });\n\n render() {\n const { opts, onClick, classes } = this.props;\n const { open, anchorEl } = this.state;\n const keys = Object.keys(opts) || [];\n\n const handleMenuClick = (key) => () => {\n onClick(key);\n this.handleRequestClose();\n };\n\n const iconColor = open ? 'inherit' : 'disabled';\n\n return (\n <div>\n <div onClick={this.handleClick}>\n <IconButton className={classes.icon}>\n {open ? <MoreVertIcon color={iconColor} /> : <MoreHorizIcon color={iconColor} />}\n </IconButton>\n </div>\n <Menu\n id=\"point-menu\"\n anchorEl={anchorEl}\n open={open}\n onClose={this.handleRequestClose}\n style={{ transform: 'translate(-15px, -15px)' }}\n transformOrigin={{\n vertical: 'center',\n horizontal: 'right',\n }}\n >\n {keys.map((k, index) => (\n <MenuItem key={index} onClick={handleMenuClick(k)}>\n {opts[k]}\n </MenuItem>\n ))}\n </Menu>\n </div>\n );\n }\n}\n\nexport default class PointMenu extends React.Component {\n static propTypes = {\n onChange: PropTypes.func.isRequired,\n classes: PropTypes.object.isRequired,\n showSampleAnswer: PropTypes.bool.isRequired,\n };\n\n static defaultProps = {\n classes: {},\n };\n\n render() {\n const { onChange, classes, showSampleAnswer } = this.props;\n const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';\n\n return (\n <IconMenu\n onClick={(key) => onChange(key)}\n opts={{\n sample: sampleText,\n }}\n classes={classes}\n />\n );\n }\n}\n"],"file":"point-menu.js"}
@@ -1,449 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import { withStyles } from '@material-ui/core/styles';
4
- import classNames from 'classnames';
5
- import OutlinedInput from '@material-ui/core/OutlinedInput';
6
- import InputLabel from '@material-ui/core/InputLabel';
7
- import Select from '@material-ui/core/Select';
8
- import FormControl from '@material-ui/core/FormControl';
9
- import MenuItem from '@material-ui/core/MenuItem';
10
- import times from 'lodash/times';
11
- import Checkbox from '@material-ui/core/Checkbox';
12
- import FormGroup from '@material-ui/core/FormGroup';
13
- import FormControlLabel from '@material-ui/core/FormControlLabel';
14
- import grey from '@material-ui/core/colors/grey';
15
- import Typography from '@material-ui/core/Typography';
16
- import DragIndicator from '@material-ui/icons/DragIndicator';
17
- import EditableHtml from '@pie-lib/editable-html';
18
- import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
19
- import debug from 'debug';
20
- import PointMenu from './point-menu';
21
-
22
- import range from 'lodash/range';
23
- import { InputContainer } from '@pie-lib/config-ui';
24
- import { color } from '@pie-lib/render-ui';
25
-
26
- const log = debug('pie-lib:rubric:authoring');
27
-
28
- const reorder = (list, startIndex, endIndex) => {
29
- const result = Array.from(list);
30
- const [removed] = result.splice(startIndex, 1);
31
-
32
- result.splice(endIndex, 0, removed);
33
-
34
- return result;
35
- };
36
-
37
- export const RubricType = PropTypes.shape({
38
- excludeZero: PropTypes.bool,
39
- points: PropTypes.arrayOf(PropTypes.string),
40
- sampleAnswers: PropTypes.arrayOf(PropTypes.string),
41
- maxPoints: PropTypes.number,
42
- rubriclessInstruction: PropTypes.string,
43
- });
44
-
45
- const MaxPoints = withStyles((theme) => ({
46
- formControl: {
47
- minWidth: '120px',
48
- margin: theme.spacing.unit,
49
- },
50
- }))((props) => {
51
- const { value, onChange, max, classes } = props;
52
-
53
- return (
54
- <FormControl className={classes.formControl} variant="outlined">
55
- <InputLabel width={100} htmlFor="...">
56
- Max Points
57
- </InputLabel>
58
- <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
59
- {range(1, max + 1).map((v) => (
60
- <MenuItem key={`${v}`} value={v}>
61
- {v}
62
- </MenuItem>
63
- ))}
64
- </Select>
65
- </FormControl>
66
- );
67
- });
68
-
69
- // if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
70
- // if the value is '', the Sample Answer input field will be empty
71
- const checkSampleAnswer = (sampleAnswer) => sampleAnswer === null || sampleAnswer === 'null';
72
-
73
- export const PointConfig = withStyles((theme) => ({
74
- pointConfig: {},
75
- row: {
76
- display: 'flex',
77
- width: '100%',
78
- position: 'relative',
79
- },
80
- editor: {
81
- width: '100%',
82
- backgroundColor: `${theme.palette.common.white} !important`,
83
- },
84
- dragIndicator: {
85
- paddingTop: theme.spacing.unit,
86
- color: grey[500],
87
- },
88
- pointsLabel: {
89
- color: grey[500],
90
- paddingBottom: theme.spacing.unit,
91
- textTransform: 'uppercase',
92
- },
93
- sampleAnswersEditor: {
94
- paddingLeft: theme.spacing.unit * 3,
95
- },
96
- pointMenu: {
97
- position: 'absolute',
98
- right: 0,
99
- },
100
- errorText: {
101
- fontSize: theme.typography.fontSize - 2,
102
- color: theme.palette.error.main,
103
- paddingLeft: theme.spacing.unit * 3,
104
- paddingTop: theme.spacing.unit,
105
- },
106
- }))((props) => {
107
- const {
108
- points,
109
- content,
110
- classes,
111
- sampleAnswer,
112
- mathMlOptions = {},
113
- error,
114
- pluginOpts = {},
115
- excludeZero,
116
- imageSupport = {},
117
- } = props;
118
- const pointsCount = excludeZero ? points + 1 : points;
119
- const pointsLabel = `${pointsCount} ${pointsCount === 1 ? 'pt' : 'pts'}`;
120
- const showSampleAnswer = checkSampleAnswer(sampleAnswer);
121
-
122
- return (
123
- <div className={classes.pointConfig}>
124
- <Typography variant="overline" className={classes.pointsLabel}>
125
- {pointsLabel}
126
- </Typography>
127
-
128
- <div className={classes.row}>
129
- <DragIndicator className={classes.dragIndicator} />
130
- <EditableHtml
131
- className={classes.editor}
132
- error={error}
133
- pluginProps={pluginOpts}
134
- markup={content}
135
- onChange={props.onChange}
136
- mathMlOptions={mathMlOptions}
137
- imageSupport={imageSupport}
138
- languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
139
- />
140
- <PointMenu
141
- classes={{
142
- icon: classes.pointMenu,
143
- }}
144
- showSampleAnswer={showSampleAnswer}
145
- onChange={props.onMenuChange}
146
- />
147
- </div>
148
- {error && <div className={classes.errorText}>{error}</div>}
149
- {!showSampleAnswer && (
150
- <div className={classes.sampleAnswersEditor}>
151
- <Typography variant="overline" className={classes.dragIndicator}>
152
- Sample Response
153
- </Typography>
154
- <EditableHtml
155
- className={classes.editor}
156
- markup={sampleAnswer}
157
- pluginProps={pluginOpts}
158
- onChange={props.onSampleChange}
159
- mathMlOptions={mathMlOptions}
160
- imageSupport={imageSupport}
161
- languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
162
- />
163
- </div>
164
- )}
165
- </div>
166
- );
167
- });
168
-
169
- export class RawAuthoring extends React.Component {
170
- static propTypes = {
171
- classes: PropTypes.object.isRequired,
172
- className: PropTypes.string,
173
- value: RubricType,
174
- config: PropTypes.object,
175
- pluginOpts: PropTypes.object,
176
- rubricless: PropTypes.bool,
177
- onChange: PropTypes.func,
178
- imageSupport: PropTypes.shape({
179
- add: PropTypes.func.isRequired,
180
- delete: PropTypes.func.isRequired,
181
- }),
182
- };
183
-
184
- static defaultProps = {};
185
-
186
- dragEnd = (result) => {
187
- if (!result.destination) {
188
- return;
189
- }
190
-
191
- const { value, onChange } = this.props;
192
-
193
- const points = reorder(value.points, result.source.index, result.destination.index);
194
- const sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
195
-
196
- onChange({ ...value, points, sampleAnswers });
197
- };
198
-
199
- changeRubriclessInstruction = (input) => {
200
- const { value, onChange } = this.props;
201
- onChange({ ...value, rubriclessInstruction: input });
202
- };
203
-
204
- changeMaxPoints = (maxPoints) => {
205
- const { value, onChange } = this.props;
206
- // excludeZero should be false and disabled when maxPoints is 1
207
- const excludeZero = maxPoints === 1 ? false : value.excludeZero;
208
-
209
- onChange({ ...value, maxPoints, excludeZero });
210
- };
211
-
212
- changeContent = (index, content, type) => {
213
- // type could be 'points' or 'sampleAnswers'
214
- log(`changeModel[${type}]:`, index, content);
215
-
216
- if (type !== 'points' && type !== 'sampleAnswers') {
217
- return;
218
- }
219
-
220
- const { value, onChange } = this.props;
221
- const items = value[type] && Array.from(value[type]);
222
-
223
- items.splice(index, 1, content);
224
- log(`changeModel[${type}]:`, items);
225
-
226
- onChange({ ...value, [type]: items });
227
- };
228
-
229
- excludeZeros = () => {
230
- const { value, onChange } = this.props;
231
-
232
- onChange({ ...value, excludeZero: !value.excludeZero });
233
- };
234
-
235
- onPointMenuChange = (index, clickedItem) => {
236
- if (clickedItem === 'sample') {
237
- const { value } = this.props;
238
- const sampleAnswers = Array.from(value.sampleAnswers || []);
239
-
240
- if (checkSampleAnswer(sampleAnswers[index])) {
241
- // an empty string will display an empty Sample Answer input field
242
- this.changeContent(index, '', 'sampleAnswers');
243
- } else {
244
- // when the content is null or 'null', the Sample Answer input field will not be displayed
245
- this.changeContent(index, null, 'sampleAnswers');
246
- }
247
- }
248
- };
249
-
250
- render() {
251
- const {
252
- classes,
253
- className,
254
- value,
255
- mathMlOptions = {},
256
- config = {},
257
- rubricless = false,
258
- pluginOpts = {},
259
- imageSupport = {},
260
- } = this.props;
261
- let {
262
- excludeZeroEnabled = true,
263
- maxPointsEnabled = true,
264
- errors = {},
265
- rubriclessInstructionEnabled = false,
266
- maxPoints = 10,
267
- } = value || {};
268
- // rubric will contain a max value for maxPoints
269
- const { rubriclessInstruction = {}, maxMaxPoints = 10 } = config || {};
270
- const { pointsDescriptorsErrors } = errors || {};
271
- if (value && Number.isFinite(value.maxPoints)) {
272
- // eslint-disable-next-line no-console
273
- console.warn('maxPoints is deprecated - remove from model');
274
- }
275
-
276
- // for rubric value is computed based on points
277
- const maxPointsValue = maxPoints;
278
-
279
- return (
280
- <div className={classNames(classes.class, className)}>
281
- <Typography variant="h5" className={classes.rubricTitle}>
282
- Rubric
283
- </Typography>
284
- <FormGroup row>
285
- {maxPointsEnabled && (
286
- <MaxPoints
287
- max={maxMaxPoints < 100 ? maxMaxPoints : 100}
288
- value={maxPointsValue}
289
- onChange={this.changeMaxPoints}
290
- pluginOpts={pluginOpts}
291
- imageSupport={imageSupport}
292
- />
293
- )}
294
- {excludeZeroEnabled && (
295
- <FormControlLabel
296
- label="Exclude zeros"
297
- control={
298
- <Checkbox
299
- className={classes.customColor}
300
- checked={value.excludeZero}
301
- onChange={this.excludeZeros}
302
- disabled={maxPointsValue === 1}
303
- />
304
- }
305
- />
306
- )}
307
- </FormGroup>
308
-
309
- {rubriclessInstructionEnabled && rubricless && (
310
- <InputContainer label={rubriclessInstruction.label} className={classes.inputContainer}>
311
- <EditableHtml
312
- className={classes.input}
313
- markup={value.rubriclessInstruction || ''}
314
- onChange={this.changeRubriclessInstruction}
315
- pluginProps={pluginOpts}
316
- nonEmpty={false}
317
- disableUnderline
318
- languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
319
- mathMlOptions={mathMlOptions}
320
- imageSupport={imageSupport}
321
- />
322
- </InputContainer>
323
- )}
324
-
325
- <div className={rubricless ? classes.rubricless : classes.container}>
326
- <DragDropContext onDragEnd={this.dragEnd}>
327
- <Droppable droppableId="droppable">
328
- {(provided) => (
329
- <div {...provided.droppableProps} ref={provided.innerRef}>
330
- {value.points.map((p, index) => {
331
- return (
332
- <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
333
- {(provided) => (
334
- <div
335
- className={classes.configHolder}
336
- ref={provided.innerRef}
337
- {...provided.draggableProps}
338
- {...provided.dragHandleProps}
339
- >
340
- <PointConfig
341
- points={value.points.length - 1 - index}
342
- content={p}
343
- error={
344
- pointsDescriptorsErrors && pointsDescriptorsErrors[value.points.length - 1 - index]
345
- }
346
- sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
347
- onChange={(content) => this.changeContent(index, content, 'points')}
348
- onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
349
- onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
350
- mathMlOptions={mathMlOptions}
351
- pluginOpts={pluginOpts}
352
- imageSupport={imageSupport}
353
- excludeZero={value.excludeZero}
354
- />
355
- </div>
356
- )}
357
- </Draggable>
358
- );
359
- })}
360
- {provided.placeholder}
361
- </div>
362
- )}
363
- </Droppable>
364
- </DragDropContext>
365
- </div>
366
- </div>
367
- );
368
- }
369
- }
370
-
371
- const styles = (theme) => ({
372
- container: {
373
- backgroundColor: grey[200],
374
- borderWidth: 1,
375
- borderStyle: 'solid',
376
- borderColor: grey[300],
377
- padding: theme.spacing.unit * 2,
378
- margin: theme.spacing.unit,
379
- },
380
- inputContainer: {
381
- width: '100%',
382
- paddingTop: theme.spacing.unit * 2,
383
- marginBottom: theme.spacing.unit * 2,
384
- },
385
- rubricless: {
386
- display: 'none',
387
- },
388
- configHolder: {
389
- paddingTop: theme.spacing.unit,
390
- paddingBottom: theme.spacing.unit,
391
- },
392
- rubricTitle: {
393
- paddingLeft: theme.spacing.unit,
394
- margin: theme.spacing.unit,
395
- },
396
- customColor: {
397
- color: `${color.tertiary()} !important`,
398
- },
399
- });
400
-
401
- const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
402
-
403
- const Reverse = (props) => {
404
- const { rubricless = false, config = {}, pluginOpts = {}, imageSupport = {} } = props || {};
405
- const points = Array.from(props.value.points || []).reverse();
406
- let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
407
-
408
- if (points.length > sampleAnswers.length) {
409
- sampleAnswers = times(points.length - sampleAnswers.length)
410
- .map(() => null)
411
- .concat(sampleAnswers);
412
- }
413
-
414
- const value = { ...props.value, points, sampleAnswers };
415
-
416
- const onChange = (value) => {
417
- props.onChange({
418
- ...value,
419
- points: Array.from(value.points || []).reverse(),
420
- sampleAnswers: Array.from(value.sampleAnswers || []).reverse(),
421
- });
422
- };
423
-
424
- return (
425
- <StyledRawAuthoring
426
- value={value}
427
- config={config}
428
- onChange={onChange}
429
- rubricless={rubricless}
430
- pluginOpts={pluginOpts}
431
- imageSupport={imageSupport}
432
- />
433
- );
434
- };
435
-
436
- Reverse.propTypes = {
437
- value: RubricType,
438
- config: PropTypes.object,
439
- pluginOpts: PropTypes.object,
440
- rubricless: PropTypes.bool,
441
- getIndex: PropTypes.func,
442
- onChange: PropTypes.func,
443
- imageSupport: PropTypes.shape({
444
- add: PropTypes.func.isRequired,
445
- delete: PropTypes.func.isRequired,
446
- }),
447
- };
448
-
449
- export default Reverse;
@@ -1,9 +0,0 @@
1
- import Authoring from './authoring';
2
-
3
- const RUBRIC_TYPES = {
4
- SIMPLE_RUBRIC: 'simpleRubric',
5
- MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
6
- RUBRICLESS: 'rubricless',
7
- };
8
-
9
- export { Authoring, RUBRIC_TYPES };