@pie-element/ebsr 9.12.1 → 9.12.2-next.19

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/rubric/authoring.jsx

@@ -0,0 +1,446 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
+import times from 'lodash/times';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import grey from '@material-ui/core/colors/grey';
+import Typography from '@material-ui/core/Typography';
+import DragIndicator from '@material-ui/icons/DragIndicator';
+import EditableHtml from '../editable-html';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import debug from 'debug';
+import takeRight from 'lodash/takeRight';
+import PointMenu from './point-menu';
+
+import range from 'lodash/range';
+import { InputContainer } from '../config-ui';
+
+const log = debug('pie-lib:rubric:authoring');
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+export const RubricType = PropTypes.shape({
+  excludeZero: PropTypes.bool,
+  points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+  maxPoints: PropTypes.number,
+  rubriclessInstruction: PropTypes.string,
+});
+
+const MaxPoints = withStyles((theme) => ({
+  formControl: {
+    minWidth: '120px',
+    margin: theme.spacing.unit,
+  },
+}))((props) => {
+  const { value, onChange, max, classes } = props;
+
+  return (
+    <FormControl className={classes.formControl} variant="outlined">
+      <InputLabel width={100} htmlFor="...">
+        Max Points
+      </InputLabel>
+      <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
+        {range(1, max + 1).map((v) => (
+          <MenuItem key={`${v}`} value={v}>
+            {v}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+});
+
+// if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
+// if the value is '', the Sample Answer input field will be empty
+const checkSampleAnswer = (sampleAnswer) => sampleAnswer === null || sampleAnswer === 'null';
+
+export const PointConfig = withStyles((theme) => ({
+  pointConfig: {},
+  row: {
+    display: 'flex',
+    width: '100%',
+    position: 'relative',
+  },
+  editor: {
+    width: '100%',
+    backgroundColor: `${theme.palette.common.white} !important`,
+  },
+  dragIndicator: {
+    paddingTop: theme.spacing.unit,
+    color: grey[500],
+  },
+  pointsLabel: {
+    color: grey[500],
+    paddingBottom: theme.spacing.unit,
+    textTransform: 'uppercase',
+  },
+  sampleAnswersEditor: {
+    paddingLeft: theme.spacing.unit * 3,
+  },
+  pointMenu: {
+    position: 'absolute',
+    right: 0,
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingLeft: theme.spacing.unit * 3,
+    paddingTop: theme.spacing.unit,
+  },
+}))((props) => {
+  const { points, content, classes, sampleAnswer, mathMlOptions = {}, error, pluginOpts = {} } = props;
+  const pointsLabel = `${points} ${points <= 1 ? 'pt' : 'pts'}`;
+  const showSampleAnswer = checkSampleAnswer(sampleAnswer);
+
+  return (
+    <div className={classes.pointConfig}>
+      <Typography variant="overline" className={classes.pointsLabel}>
+        {pointsLabel}
+      </Typography>
+
+      <div className={classes.row}>
+        <DragIndicator className={classes.dragIndicator} />
+        <EditableHtml
+          className={classes.editor}
+          error={error}
+          pluginProps={pluginOpts}
+          markup={content}
+          onChange={props.onChange}
+          mathMlOptions={mathMlOptions}
+        />
+        <PointMenu
+          classes={{
+            icon: classes.pointMenu,
+          }}
+          showSampleAnswer={showSampleAnswer}
+          onChange={props.onMenuChange}
+        />
+      </div>
+      {error && <div className={classes.errorText}>{error}</div>}
+      {!showSampleAnswer && (
+        <div className={classes.sampleAnswersEditor}>
+          <Typography variant="overline" className={classes.dragIndicator}>
+            Sample Response
+          </Typography>
+          <EditableHtml
+            className={classes.editor}
+            markup={sampleAnswer}
+            pluginProps={pluginOpts}
+            onChange={props.onSampleChange}
+            mathMlOptions={mathMlOptions}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export class RawAuthoring extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    value: RubricType,
+    config: PropTypes.object,
+    pluginOpts: PropTypes.object,
+    rubricless: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+
+  static defaultProps = {};
+
+  dragEnd = (result) => {
+    if (!result.destination) {
+      return;
+    }
+
+    const { value, onChange } = this.props;
+
+    const points = reorder(value.points, result.source.index, result.destination.index);
+    const sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
+
+    onChange({ ...value, points, sampleAnswers });
+  };
+
+  changeRubriclessInstruction = (input) => {
+    const { value, onChange } = this.props;
+    onChange({ ...value, rubriclessInstruction: input });
+  };
+
+  changeMaxPoints = (maxPoints) => {
+    const { value, onChange, rubricless } = this.props;
+    const currentMax = value.points.length - 1;
+
+    log('current', currentMax, 'new: ', maxPoints);
+
+    let points, sampleAnswers;
+    if (maxPoints > currentMax) {
+      points = times(maxPoints - currentMax)
+        .map(() => '')
+        .concat(value.points);
+      sampleAnswers = times(maxPoints - currentMax)
+        .map(() => null)
+        .concat(value.sampleAnswers);
+    }
+
+    if (maxPoints < currentMax) {
+      log('less than');
+      points = takeRight(value.points, maxPoints + 1);
+      sampleAnswers = takeRight(value.sampleAnswers, maxPoints + 1);
+    }
+
+    if (points && !rubricless) {
+      onChange({ ...value, points, sampleAnswers, maxPoints });
+    } else {
+      onChange({ ...value, maxPoints });
+    }
+  };
+
+  changeContent = (index, content, type) => {
+    // type could be 'points' or 'sampleAnswers'
+    log(`changeModel[${type}]:`, index, content);
+
+    if (type !== 'points' && type !== 'sampleAnswers') {
+      return;
+    }
+
+    const { value, onChange } = this.props;
+    const items = value[type] && Array.from(value[type]);
+
+    items.splice(index, 1, content);
+    log(`changeModel[${type}]:`, items);
+
+    onChange({ ...value, [type]: items });
+  };
+
+  excludeZeros = () => {
+    const { value, onChange } = this.props;
+
+    onChange({ ...value, excludeZero: !value.excludeZero });
+  };
+
+  shouldRenderPoint = (index, value) => {
+    if (!value.excludeZero) {
+      return true;
+    } else {
+      if (index < value.points.length - 1) {
+        return true;
+      } else if (index === value.points.length - 1) {
+        return false;
+      }
+
+      return true;
+    }
+  };
+
+  onPointMenuChange = (index, clickedItem) => {
+    if (clickedItem === 'sample') {
+      const { value } = this.props;
+      const sampleAnswers = Array.from(value.sampleAnswers || []);
+
+      if (checkSampleAnswer(sampleAnswers[index])) {
+        // an empty string will display an empty Sample Answer input field
+        this.changeContent(index, '', 'sampleAnswers');
+      } else {
+        // when the content is null or 'null', the Sample Answer input field will not be displayed
+        this.changeContent(index, null, 'sampleAnswers');
+      }
+    }
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      value,
+      mathMlOptions = {},
+      config = {},
+      rubricless = false,
+      pluginOpts = {},
+    } = this.props;
+    let {
+      excludeZeroEnabled = true,
+      maxPointsEnabled = true,
+      errors = {},
+      rubriclessInstructionEnabled = false,
+      maxPoints = 10,
+    } = value || {};
+    // rubric will contain a max value for maxPoints
+    const { rubriclessInstruction = {}, maxMaxPoints = 10 } = config || {};
+    const { pointsDescriptorsErrors } = errors || {};
+    if (value && Number.isFinite(value.maxPoints)) {
+      // eslint-disable-next-line no-console
+      console.warn('maxPoints is deprecated - remove from model');
+    }
+
+    // for rubric value is computed based on points
+    const maxPointsValue = !rubricless ? value.points.length - 1 : maxPoints;
+
+    return (
+      <div className={classNames(classes.class, className)}>
+        <Typography variant="h5" className={classes.rubricTitle}>
+          Rubric
+        </Typography>
+        <FormGroup row>
+          {maxPointsEnabled && (
+            <MaxPoints
+              max={maxMaxPoints < 100 ? maxMaxPoints : 100}
+              value={maxPointsValue}
+              onChange={this.changeMaxPoints}
+              pluginOpts={pluginOpts}
+            />
+          )}
+          {excludeZeroEnabled && (
+            <FormControlLabel
+              label="Exclude zeros"
+              control={<Checkbox checked={value.excludeZero} onChange={this.excludeZeros} />}
+            />
+          )}
+        </FormGroup>
+
+        {rubriclessInstructionEnabled && rubricless && (
+          <InputContainer label={rubriclessInstruction.label} className={classes.inputContainer}>
+            <EditableHtml
+              className={classes.input}
+              markup={value.rubriclessInstruction || ''}
+              onChange={this.changeRubriclessInstruction}
+              pluginProps={pluginOpts}
+              nonEmpty={false}
+              disableUnderline
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+          </InputContainer>
+        )}
+
+        <div className={rubricless ? classes.rubricless : classes.container}>
+          <DragDropContext onDragEnd={this.dragEnd}>
+            <Droppable droppableId="droppable">
+              {(provided) => (
+                <div {...provided.droppableProps} ref={provided.innerRef}>
+                  {value.points.map(
+                    (p, index) =>
+                      this.shouldRenderPoint(index, value) && (
+                        <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
+                          {(provided) => (
+                            <div
+                              className={classes.configHolder}
+                              ref={provided.innerRef}
+                              {...provided.draggableProps}
+                              {...provided.dragHandleProps}
+                            >
+                              <PointConfig
+                                points={value.points.length - 1 - index}
+                                content={p}
+                                error={
+                                  pointsDescriptorsErrors && pointsDescriptorsErrors[value.points.length - 1 - index]
+                                }
+                                sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
+                                onChange={(content) => this.changeContent(index, content, 'points')}
+                                onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
+                                onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
+                                mathMlOptions={mathMlOptions}
+                                pluginOpts={pluginOpts}
+                              />
+                            </div>
+                          )}
+                        </Draggable>
+                      ),
+                  )}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  container: {
+    backgroundColor: grey[200],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: grey[300],
+    padding: theme.spacing.unit * 2,
+    margin: theme.spacing.unit,
+  },
+  inputContainer: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+  },
+  rubricless: {
+    display: 'none',
+  },
+  configHolder: {
+    paddingTop: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+  },
+  rubricTitle: {
+    paddingLeft: theme.spacing.unit,
+    margin: theme.spacing.unit,
+  },
+});
+
+const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
+
+const Reverse = (props) => {
+  const { rubricless = false, config = {}, pluginOpts = {} } = props || {};
+  const points = Array.from(props.value.points || []).reverse();
+  let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
+
+  if (points.length > sampleAnswers.length) {
+    sampleAnswers = times(points.length - sampleAnswers.length)
+      .map(() => null)
+      .concat(sampleAnswers);
+  }
+
+  const value = { ...props.value, points, sampleAnswers };
+
+  const onChange = (value) => {
+    props.onChange({
+      ...value,
+      points: Array.from(value.points || []).reverse(),
+      sampleAnswers: Array.from(value.sampleAnswers || []).reverse(),
+    });
+  };
+
+  return (
+    <StyledRawAuthoring
+      value={value}
+      config={config}
+      onChange={onChange}
+      rubricless={rubricless}
+      pluginOpts={pluginOpts}
+    />
+  );
+};
+
+Reverse.propTypes = {
+  value: RubricType,
+  config: PropTypes.object,
+  pluginOpts: PropTypes.object,
+  rubricless: PropTypes.bool,
+  getIndex: PropTypes.func,
+  onChange: PropTypes.func,
+};
+
+export default Reverse;

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/rubric/index.js

@@ -0,0 +1,9 @@
+import Authoring from './authoring';
+
+const RUBRIC_TYPES = {
+  SIMPLE_RUBRIC: 'simpleRubric',
+  MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
+  RUBRICLESS: 'rubricless',
+};
+
+export { Authoring, RUBRIC_TYPES };

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/rubric/point-menu.jsx

@@ -0,0 +1,94 @@
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import IconButton from '@material-ui/core/IconButton';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export class IconMenu extends React.Component {
+  static propTypes = {
+    opts: PropTypes.object,
+    onClick: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      anchorEl: undefined,
+      open: false,
+    };
+  }
+
+  handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });
+
+  handleRequestClose = () => this.setState({ open: false });
+
+  render() {
+    const { opts, onClick, classes } = this.props;
+    const { open, anchorEl } = this.state;
+    const keys = Object.keys(opts) || [];
+
+    const handleMenuClick = (key) => () => {
+      onClick(key);
+      this.handleRequestClose();
+    };
+
+    const iconColor = open ? 'inherit' : 'disabled';
+
+    return (
+      <div>
+        <div onClick={this.handleClick}>
+          <IconButton className={classes.icon}>
+            {open ? <MoreVertIcon color={iconColor} /> : <MoreHorizIcon color={iconColor} />}
+          </IconButton>
+        </div>
+        <Menu
+          id="point-menu"
+          anchorEl={anchorEl}
+          open={open}
+          onClose={this.handleRequestClose}
+          style={{ transform: 'translate(-15px, -15px)' }}
+          transformOrigin={{
+            vertical: 'center',
+            horizontal: 'right',
+          }}
+        >
+          {keys.map((k, index) => (
+            <MenuItem key={index} onClick={handleMenuClick(k)}>
+              {opts[k]}
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default class PointMenu extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    showSampleAnswer: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    classes: {},
+  };
+
+  render() {
+    const { onChange, classes, showSampleAnswer } = this.props;
+    const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
+
+    return (
+      <IconMenu
+        onClick={(key) => onChange(key)}
+        opts={{
+          sample: sampleText,
+        }}
+        classes={classes}
+      />
+    );
+  }
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/scoring-config/index.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Checkbox from '@material-ui/core/Checkbox';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+export class PartialScoringConfig extends React.Component {
+  static propTypes = {
+    label: PropTypes.string,
+    partialScoring: PropTypes.bool,
+    classes: PropTypes.object.isRequired,
+    onChange: PropTypes.func,
+  };
+
+  state = {
+    checked: false,
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { partialScoring } = props;
+
+    this.state.checked = partialScoring;
+  }
+
+  onCheckboxChanged = () => {
+    const checked = !this.state.checked;
+    const { onChange } = this.props;
+
+    this.setState({
+      checked,
+    });
+    onChange(checked);
+  };
+
+  render() {
+    const { classes, label } = this.props;
+    const { checked } = this.state;
+    const textLabel = label || 'Each correct response is worth 1/X where X is the number of correct answer selections.';
+
+    return (
+      <div className={classes.scoringConfig}>
+        <Typography type="subheading">Partial Scoring Rules</Typography>
+        <br />
+        <Typography>{textLabel}</Typography>
+        <Checkbox checked={checked} onChange={this.onCheckboxChanged} label={''} />
+      </div>
+    );
+  }
+}
+
+export default withStyles((theme) => ({
+  scoringConfig: {
+    paddingTop: theme.spacing.unit,
+  },
+}))(PartialScoringConfig);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/style-utils/index.js

@@ -0,0 +1,10 @@
+/**
+ *  disable text selection
+ */
+export const noSelect = () => ({
+  cursor: 'default',
+  '-webkit-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none',
+});

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/test-utils/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+export function shallowChild(Component, defaultProps = {}, nestLevel) {
+  return function innerRender(props = {}) {
+    let rendered = shallow(<Component {...defaultProps} {...props} />);
+
+    if (nestLevel) {
+      let repeat = nestLevel;
+
+      while (repeat--) {
+        rendered = rendered.first().shallow();
+      }
+    }
+
+    return rendered;
+  };
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/text-select/index.js

@@ -0,0 +1,8 @@
+import Tokenizer from './tokenizer';
+import TokenSelect, { TokenTypes } from './token-select';
+import TextSelect from './text-select';
+import { Legend } from './legend';
+import Token from './token-select/token';
+import { prepareText } from './utils';
+
+export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };