@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.
- package/configure/lib/defaults.js +2 -3
- package/configure/lib/defaults.js.map +1 -1
- package/configure/lib/index.js +90 -152
- package/configure/lib/index.js.map +1 -1
- package/configure/lib/main.js +90 -149
- package/configure/lib/main.js.map +1 -1
- package/configure/package.json +11 -7
- package/configure/src/__tests__/index.test.jsx +12 -2
- package/configure/src/index.js +12 -2
- package/configure/src/main.jsx +11 -13
- package/controller/lib/defaults.js +2 -3
- package/controller/lib/defaults.js.map +1 -1
- package/controller/lib/index.js +15 -28
- package/controller/lib/index.js.map +1 -1
- package/controller/package.json +1 -1
- package/lib/index.js +38 -80
- package/lib/index.js.map +1 -1
- package/lib/main.js +182 -244
- package/lib/main.js.map +1 -1
- package/lib/print.js +41 -84
- package/lib/print.js.map +1 -1
- package/package.json +8 -9
- package/src/__tests__/rubric-view.test.jsx +12 -24
- package/src/index.js +14 -3
- package/src/main.jsx +100 -93
- package/src/print.js +13 -2
- package/configure/lib/pie-toolbox-rubric/authoring.js +0 -573
- package/configure/lib/pie-toolbox-rubric/authoring.js.map +0 -1
- package/configure/lib/pie-toolbox-rubric/index.js +0 -24
- package/configure/lib/pie-toolbox-rubric/index.js.map +0 -1
- package/configure/lib/pie-toolbox-rubric/point-menu.js +0 -172
- package/configure/lib/pie-toolbox-rubric/point-menu.js.map +0 -1
- package/configure/src/pie-toolbox-rubric/authoring.jsx +0 -449
- package/configure/src/pie-toolbox-rubric/index.js +0 -9
- package/configure/src/pie-toolbox-rubric/point-menu.jsx +0 -94
- package/module/configure.js +0 -1
- package/module/controller.js +0 -113
- package/module/demo.js +0 -33
- package/module/element.js +0 -1
- package/module/index.html +0 -21
- package/module/manifest.json +0 -14
- package/module/print-demo.js +0 -71
- package/module/print.html +0 -18
- package/module/print.js +0 -1
- 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":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,Q;;;;;AAOX,oBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,oGAQL,UAACC,KAAD;AAAA,aAAW,MAAKC,QAAL,CAAc;AAAEC,QAAAA,IAAI,EAAE,IAAR;AAAcC,QAAAA,QAAQ,EAAEH,KAAK,CAACI;AAA9B,OAAd,CAAX;AAAA,KARK;AAAA,2GAUE;AAAA,aAAM,MAAKH,QAAL,CAAc;AAAEC,QAAAA,IAAI,EAAE;AAAR,OAAd,CAAN;AAAA,KAVF;AAEjB,UAAKG,KAAL,GAAa;AACXF,MAAAA,QAAQ,EAAEG,SADC;AAEXJ,MAAAA,IAAI,EAAE;AAFK,KAAb;AAFiB;AAMlB;;;;WAMD,kBAAS;AAAA;;AACP,wBAAmC,KAAKH,KAAxC;AAAA,UAAQQ,IAAR,eAAQA,IAAR;AAAA,UAAcC,OAAd,eAAcA,OAAd;AAAA,UAAuBC,OAAvB,eAAuBA,OAAvB;AACA,wBAA2B,KAAKJ,KAAhC;AAAA,UAAQH,IAAR,eAAQA,IAAR;AAAA,UAAcC,QAAd,eAAcA,QAAd;AACA,UAAMO,IAAI,GAAGC,MAAM,CAACD,IAAP,CAAYH,IAAZ,KAAqB,EAAlC;;AAEA,UAAMK,eAAe,GAAG,SAAlBA,eAAkB,CAACC,GAAD;AAAA,eAAS,YAAM;AACrCL,UAAAA,OAAO,CAACK,GAAD,CAAP;;AACA,UAAA,MAAI,CAACC,kBAAL;AACD,SAHuB;AAAA,OAAxB;;AAKA,UAAMC,SAAS,GAAGb,IAAI,GAAG,SAAH,GAAe,UAArC;AAEA,0BACE,0DACE;AAAK,QAAA,OAAO,EAAE,KAAKc;AAAnB,sBACE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAEP,OAAO,CAACQ;AAA/B,SACGf,IAAI,gBAAG,gCAAC,oBAAD;AAAc,QAAA,KAAK,EAAEa;AAArB,QAAH,gBAAwC,gCAAC,qBAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QAD/C,CADF,CADF,eAME,gCAAC,gBAAD;AACE,QAAA,EAAE,EAAC,YADL;AAEE,QAAA,QAAQ,EAAEZ,QAFZ;AAGE,QAAA,IAAI,EAAED,IAHR;AAIE,QAAA,OAAO,EAAE,KAAKY,kBAJhB;AAKE,QAAA,KAAK,EAAE;AAAEI,UAAAA,SAAS,EAAE;AAAb,SALT;AAME,QAAA,eAAe,EAAE;AACfC,UAAAA,QAAQ,EAAE,QADK;AAEfC,UAAAA,UAAU,EAAE;AAFG;AANnB,SAWGV,IAAI,CAACW,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA,4BACR,gCAAC,oBAAD;AAAU,UAAA,GAAG,EAAEA,KAAf;AAAsB,UAAA,OAAO,EAAEX,eAAe,CAACU,CAAD;AAA9C,WACGf,IAAI,CAACe,CAAD,CADP,CADQ;AAAA,OAAT,CAXH,CANF,CADF;AA0BD;;;EAzD2BE,kBAAMC,S;;;iCAAvB3B,Q,eACQ;AACjBS,EAAAA,IAAI,EAAEmB,sBAAUC,MADC;AAEjBnB,EAAAA,OAAO,EAAEkB,sBAAUE,IAAV,CAAeC,UAFP;AAGjBpB,EAAAA,OAAO,EAAEiB,sBAAUC,MAAV,CAAiBE;AAHT,C;;IA2DAC,S;;;;;;;;;;;;WAWnB,kBAAS;AACP,yBAAgD,KAAK/B,KAArD;AAAA,UAAQgC,QAAR,gBAAQA,QAAR;AAAA,UAAkBtB,OAAlB,gBAAkBA,OAAlB;AAAA,UAA2BuB,gBAA3B,gBAA2BA,gBAA3B;AACA,UAAMC,UAAU,GAAGD,gBAAgB,GAAG,yBAAH,GAA+B,wBAAlE;AAEA,0BACE,gCAAC,QAAD;AACE,QAAA,OAAO,EAAE,iBAACnB,GAAD;AAAA,iBAASkB,QAAQ,CAAClB,GAAD,CAAjB;AAAA,SADX;AAEE,QAAA,IAAI,EAAE;AACJqB,UAAAA,MAAM,EAAED;AADJ,SAFR;AAKE,QAAA,OAAO,EAAExB;AALX,QADF;AASD;;;EAxBoCe,kBAAMC,S;;;iCAAxBK,S,eACA;AACjBC,EAAAA,QAAQ,EAAEL,sBAAUE,IAAV,CAAeC,UADR;AAEjBpB,EAAAA,OAAO,EAAEiB,sBAAUC,MAAV,CAAiBE,UAFT;AAGjBG,EAAAA,gBAAgB,EAAEN,sBAAUS,IAAV,CAAeN;AAHhB,C;iCADAC,S,kBAOG;AACpBrB,EAAAA,OAAO,EAAE;AADW,C","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;
|