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

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

@@ -0,0 +1,94 @@
+import { InputContainer } from '../render-ui';
+import PropTypes from 'prop-types';
+import RadioWithLabel from './radio-with-label';
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  group: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    paddingLeft: 0,
+    marginTop: theme.spacing.unit,
+  },
+  vertical: {
+    flexDirection: 'column',
+  },
+});
+
+class RawNChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    customLabel: PropTypes.func,
+    opts: PropTypes.array.isRequired,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    direction: PropTypes.oneOf(['horizontal', 'vertical']),
+    classes: PropTypes.object.isRequired,
+  };
+
+  handleChange = (event) => {
+    this.props.onChange(event.currentTarget.value);
+  };
+
+  render() {
+    const { header, className, classes, customLabel, opts, value, direction } = this.props;
+
+    const preppedOpts = opts.map((o) => {
+      return typeof o === 'string' ? { label: o, value: o } : o;
+    });
+    const LabelComponent = customLabel || RadioWithLabel;
+
+    return (
+      <InputContainer label={header} className={className}>
+        <div className={classNames(classes.group, classes[direction])}>
+          {preppedOpts.map((o, index) => (
+            <LabelComponent
+              value={o.value}
+              key={index}
+              checked={o.value === value}
+              onChange={this.handleChange}
+              label={o.label}
+            />
+          ))}
+        </div>
+      </InputContainer>
+    );
+  }
+}
+
+export const NChoice = withStyles(styles)(RawNChoice);
+
+const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
+
+class TwoChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    one: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    two: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    className: PropTypes.string,
+    customLabel: PropTypes.func,
+  };
+
+  render() {
+    const { one, two, header, className, customLabel, value, onChange } = this.props;
+    const opts = [one, two];
+
+    return (
+      <NChoice
+        customLabel={customLabel}
+        header={header}
+        className={className}
+        opts={opts}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
+export default withStyles(styles)(TwoChoice);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/config-ui/with-stateful-model.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const withStatefulModel = (Component) => {
+  class Stateful extends React.Component {
+    static propTypes = {
+      model: PropTypes.object.isRequired,
+      onChange: PropTypes.func.isRequired,
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        model: props.model,
+      };
+    }
+
+    UNSAFE_componentWillReceiveProps(props) {
+      this.setState({ model: props.model });
+    }
+
+    onChange = (model) => {
+      this.setState({ model }, () => {
+        this.props.onChange(this.state.model);
+      });
+    };
+
+    render() {
+      return <Component model={this.state.model} onChange={this.onChange} />;
+    }
+  }
+
+  return Stateful;
+};
+
+export default withStatefulModel;

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

@@ -0,0 +1,4 @@
+import * as partialScoring from './partial-scoring';
+
+export { lockChoices, getShuffledChoices } from './persistence';
+export { partialScoring };

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/controller-utils/partial-scoring.js

@@ -0,0 +1,21 @@
+import _ from 'lodash';
+
+export const enabled = (config, env, defaultValue) => {
+  // if model.partialScoring = false
+  //  - if env.partialScoring = false || env.partialScoring = true => use dichotomous scoring
+  // else if model.partialScoring = true || undefined
+  //  - if env.partialScoring = false, use dichotomous scoring
+  //  - else if env.partialScoring = true, use partial scoring
+  config = config || {};
+  env = env || {};
+
+  if (config.partialScoring === false) {
+    return false;
+  }
+
+  if (env.partialScoring === false) {
+    return false;
+  }
+
+  return _.isBoolean(defaultValue) ? defaultValue : true;
+};

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

@@ -0,0 +1,105 @@
+import get from 'lodash/get';
+import shuffle from 'lodash/shuffle';
+import isEmpty from 'lodash/isEmpty';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
+
+// eslint-disable-next-line no-console
+const lg = (n) => console[n].bind(console, 'controller-utils:');
+const debug = lg('debug');
+const log = lg('log');
+const warn = lg('warn');
+const error = lg('error');
+
+export const compact = (arr) => {
+  if (Array.isArray(arr)) {
+    return arr.filter((v) => !isNull(v) && !isUndefined(v));
+  }
+  return arr;
+};
+
+export const getShuffledChoices = (choices, session, updateSession, choiceKey) =>
+  new Promise((resolve) => {
+    log('updateSession type: ', typeof updateSession);
+    log('session: ', session);
+
+    const currentShuffled = compact((session || {}).shuffledValues);
+
+    if (!session) {
+      // eslint-disable-next-line quotes
+      warn("unable to save shuffled choices because there's no session.");
+      resolve(undefined);
+    } else if (!isEmpty(currentShuffled)) {
+      debug('use shuffledValues to sort the choices...', session.shuffledValues);
+      resolve(compact(currentShuffled.map((v) => choices.find((c) => c[choiceKey] === v))));
+    } else {
+      const shuffledChoices = shuffle(choices);
+
+      if (updateSession && typeof updateSession === 'function') {
+        try {
+          //Note: session.id refers to the id of the element within a session
+          const shuffledValues = compact(shuffledChoices.map((c) => c[choiceKey]));
+          log('try to save shuffledValues to session...', shuffledValues);
+          log('call updateSession... ', session.id, session.element);
+          if (isEmpty(shuffledValues)) {
+            error(
+              `shuffledValues is an empty array? - refusing to call updateSession: shuffledChoices: ${JSON.stringify(
+                shuffledChoices,
+              )}, key: ${choiceKey}`,
+            );
+          } else {
+            updateSession(session.id, session.element, { shuffledValues }).catch((e) =>
+              // eslint-disable-next-line no-console
+              console.error('update session failed for: ', session.id, e),
+            );
+          }
+        } catch (e) {
+          warn('unable to save shuffled order for choices');
+          error(e);
+        }
+      } else {
+        warn('unable to save shuffled choices, shuffle will happen every time.');
+      }
+      //save this shuffle to the session for later retrieval
+      resolve(shuffledChoices);
+    }
+  });
+
+/**
+ * If we return:
+ * - true - that means that the order of the choices will be ordinal (as is created in the configure item)
+ * - false - that means the getShuffledChoices above will be called and that in turn means that we either
+ * return the shuffled values on the session (if any exists) or we shuffle the choices
+ * @param model - model to check if we should lock order
+ * @param session - session to check if we should lock order
+ * @param env - env to check if we should lock order
+ * @returns {boolean}
+ */
+export const lockChoices = (model, session, env) => {
+  if (model.lockChoiceOrder) {
+    return true;
+  }
+
+  log('lockChoiceOrder: ', get(env, ['@pie-element', 'lockChoiceOrder'], false));
+
+  if (get(env, ['@pie-element', 'lockChoiceOrder'], false)) {
+    return true;
+  }
+
+  const role = get(env, 'role', 'student');
+
+  if (role === 'instructor') {
+    // TODO: .. in the future the instructor can toggle between ordinal and shuffled here, so keeping this code until then
+    /*const alreadyShuffled = hasShuffledValues(session);
+
+    if (alreadyShuffled) {
+      return false;
+    }
+
+    return true;*/
+    return true;
+  }
+
+  // here it's a student, so don't lock and it will shuffle if needs be
+  return false;
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/correct-answer-toggle/expander.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { CSSTransition } from 'react-transition-group';
+
+const Expander = (props) => {
+  const { classes, show, children } = props;
+
+  return (
+    <CSSTransition in={show} appear={true} mountOnEnter={false} timeout={300} classNames={{ ...classes }}>
+      <div className={classes.expander}>{children}</div>
+    </CSSTransition>
+  );
+};
+
+Expander.propTypes = {
+  show: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+const transition = 'height ease-in 300ms, opacity ease-in 300ms';
+
+export default withStyles(() => ({
+  expander: {
+    position: 'relative',
+    height: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    visibility: 'hidden',
+    width: 0,
+  },
+  enter: {
+    transition,
+    opacity: 1,
+    height: '25px',
+    width: 'auto',
+    visibility: 'visible',
+  },
+  enterDone: {
+    height: '25px',
+    visibility: 'visible',
+    width: 'auto',
+  },
+  exit: {
+    transition,
+    opacity: 0,
+    height: 0,
+    visibility: 'visible',
+    width: 0,
+  },
+  exitDone: {
+    opacity: 0,
+    visibility: 'hidden',
+    height: 0,
+    width: 0,
+  },
+}))(Expander);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/correct-answer-toggle/index.jsx

@@ -0,0 +1,94 @@
+import styles from './styles';
+import { withStyles } from '@material-ui/core/styles';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { CorrectResponse } from '../icons';
+import { Readable } from '../render-ui';
+import Expander from './expander';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Translator from '../translator';
+
+const { translator } = Translator;
+
+/**
+ * We export the raw unstyled class for testability. For public use please use the default export.
+ */
+export class CorrectAnswerToggle extends React.Component {
+  static propTypes = {
+    onToggle: PropTypes.func,
+    toggled: PropTypes.bool,
+    show: PropTypes.bool,
+    hideMessage: PropTypes.string,
+    showMessage: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {
+    showMessage: 'Show correct answer',
+    hideMessage: 'Hide correct answer',
+    show: false,
+    toggled: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: props.show,
+    };
+
+    CorrectAnswerToggle.defaultProps = {
+      ...CorrectAnswerToggle.defaultProps,
+      showMessage: translator.t('common:showCorrectAnswer', { lng: props.language }),
+      hideMessage: translator.t('common:hideCorrectAnswer', { lng: props.language }),
+    };
+  }
+
+  onClick() {
+    this.props.onToggle(!this.props.toggled);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      show: nextProps.show,
+    });
+
+    if (nextProps.language !== this.props?.language) {
+      CorrectAnswerToggle.defaultProps = {
+        ...CorrectAnswerToggle.defaultProps,
+        showMessage: translator.t('common:showCorrectAnswer', { lng: nextProps.language }),
+        hideMessage: translator.t('common:hideCorrectAnswer', { lng: nextProps.language }),
+      };
+    }
+  }
+
+  render() {
+    const { classes, className, toggled, hideMessage, showMessage } = this.props;
+
+    return (
+      <div className={classNames(classes.root, className)}>
+        <Expander show={this.state.show} className={classes.expander}>
+          <div className={classes.content} onClick={this.onClick.bind(this)}>
+            <div className={classes.iconHolder}>
+              <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>
+                <CorrectResponse open={toggled} key="correct-open" className={classes.icon} />
+              </CSSTransition>
+              <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>
+                <CorrectResponse open={toggled} key="correct-closed" className={classes.icon} />
+              </CSSTransition>
+            </div>
+            <Readable false>
+              <div className={classes.label} aria-hidden={!this.state.show}>
+                {toggled ? hideMessage : showMessage}
+              </div>
+            </Readable>
+          </div>
+        </Expander>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(CorrectAnswerToggle);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/correct-answer-toggle/styles.js

@@ -0,0 +1,61 @@
+import { color } from '../render-ui';
+
+const noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none',
+};
+
+export default {
+  root: {
+    width: '100%',
+    cursor: 'pointer',
+  },
+  content: {
+    margin: '0 auto',
+    textAlign: 'center',
+    display: 'flex',
+  },
+  label: Object.assign(
+    {
+      width: 'fit-content',
+      minWidth: '140px',
+      // eslint-disable-next-line
+      fontFamily: "'Roboto', sans-serif",
+      height: '25px',
+      lineHeight: '25px',
+      verticalAlign: 'middle',
+      color: `var(--correct-answer-toggle-label-color,  ${color.text()})`,
+      fontSize: '15px',
+      fontWeight: 'normal',
+    },
+    noTouch,
+  ),
+  icon: {
+    position: 'absolute',
+    width: '25px',
+  },
+  iconHolder: {
+    width: '25px',
+    marginRight: '5px',
+  },
+  enter: {
+    opacity: '0',
+  },
+  enterActive: {
+    opacity: '1',
+    transition: 'opacity 0.3s ease-in',
+  },
+  exit: {
+    opacity: '1',
+  },
+  exitActive: {
+    opacity: '0',
+    transition: 'opacity 0.3s ease-in',
+  },
+};
+
+export const animationStyles = {};

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import grey from '@material-ui/core/colors/grey';
+
+import { DragSource } from 'react-dnd';
+import { withUid } from './uid-context';
+
+export const DRAG_TYPE = 'CHOICE';
+
+export class Choice extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    connectDragSource: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { classes, className, children, connectDragSource } = this.props;
+
+    return connectDragSource(<div className={classNames(classes.choice, className)}>{children}</div>);
+  }
+}
+
+const styles = (theme) => ({
+  choice: {
+    backgroundColor: theme.palette.background.paper,
+    border: `solid 1px ${grey[400]}`,
+    padding: theme.spacing.unit,
+    minHeight: '30px',
+    minWidth: theme.spacing.unit * 20,
+    maxWidth: theme.spacing.unit * 75,
+  },
+});
+
+const choiceSource = {
+  canDrag(props) {
+    return !props.disabled;
+  },
+  beginDrag(props) {
+    const out = {
+      choiceId: props.choice.id,
+      from: props.category.id,
+      alternateResponseIndex: props.alternateResponseIndex,
+      choiceIndex: props.choiceIndex,
+    };
+    return out;
+  },
+
+  endDrag: (props, monitor) => {
+    if (!monitor.didDrop()) {
+      const item = monitor.getItem();
+      if (item.from) {
+        props.onRemoveChoice(item);
+      }
+    }
+  },
+};
+
+const styledChoice = withStyles(styles)(Choice);
+
+const DraggableChoice = DragSource(
+  ({ uid }) => uid,
+  choiceSource,
+  (connect, monitor) => ({
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging(),
+  }),
+)(styledChoice);
+
+export default withUid(DraggableChoice);

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/drag-in-the-blank-dp.jsx

@@ -0,0 +1,19 @@
+import { DropTarget } from 'react-dnd';
+import { DroppablePlaceholder } from './droppable-placeholder';
+import dragType from './drag-type';
+
+export const spec = {
+  canDrop: (props) => {
+    return !props.disabled;
+  },
+  drop: () => ({
+    dropped: true,
+  }),
+};
+
+const WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(DroppablePlaceholder);
+
+export default WithTarget;

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

@@ -0,0 +1,7 @@
+export default {
+  types: {
+    ica: 'react-dnd-response',
+    ml: 'Answer',
+    db: 'MaskBlank',
+  },
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/droppable-placeholder.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PlaceHolder from './placeholder';
+import PropTypes from 'prop-types';
+
+const preventInteractionStyle = {
+  flex: 1,
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  KhtmlUserSelect: 'none',
+  MozUserSelect: 'none',
+  MsUserSelect: 'none',
+  UserSelect: 'none',
+};
+
+export class DroppablePlaceholder extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    connectDropTarget: PropTypes.func.isRequired,
+    isOver: PropTypes.bool,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    disabled: PropTypes.bool,
+  };
+
+  render() {
+    const { children, connectDropTarget, isOver, disabled, classes } = this.props;
+
+    return connectDropTarget(
+      <div style={preventInteractionStyle}>
+        <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>
+          {children}
+        </PlaceHolder>
+      </div>,
+    );
+  }
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/ica-dp.jsx

@@ -0,0 +1,23 @@
+import { DropTarget } from 'react-dnd';
+import { DroppablePlaceholder } from './droppable-placeholder';
+import dragType from './drag-type';
+
+export const spec = {
+  canDrop: (props) => {
+    return !props.disabled;
+  },
+  drop: (props, monitor) => {
+    const item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item);
+    }
+  },
+};
+
+const WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(DroppablePlaceholder);
+
+export default WithTarget;

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

@@ -0,0 +1,23 @@
+import { DragSource, DropTarget } from 'react-dnd';
+
+import PlaceHolder from './placeholder';
+import Choice from './choice';
+import withDragContext from './with-drag-context';
+import swap from './swap';
+import * as uid from './uid-context';
+import MatchDroppablePlaceholder from './match-list-dp';
+import DragDroppablePlaceholder from './drag-in-the-blank-dp';
+import ICADroppablePlaceholder from './ica-dp';
+
+export {
+  PlaceHolder,
+  MatchDroppablePlaceholder,
+  DragDroppablePlaceholder,
+  ICADroppablePlaceholder,
+  withDragContext,
+  Choice,
+  swap,
+  uid,
+  DragSource,
+  DropTarget,
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/drag/match-list-dp.jsx

@@ -0,0 +1,23 @@
+import { DropTarget } from 'react-dnd';
+import { DroppablePlaceholder } from './droppable-placeholder';
+import dragType from './drag-type';
+
+export const spec = {
+  canDrop: (props) => {
+    return !props.disabled;
+  },
+  drop: (props, monitor) => {
+    const item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item.promptId);
+    }
+  },
+};
+
+const WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(DroppablePlaceholder);
+
+export default WithTarget;