@pie-element/complex-rubric 3.8.3 → 3.8.4-next.12

package/configure/node_modules/@pie-element/rubric/src/__tests__/rubric-view.test.jsx

@@ -0,0 +1,49 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import Rubric from '../main';
+
+describe('rubric viewer', () => {
+    const wrapper = (extras) => {
+        const props = {
+            value: {
+                points: ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'],
+                sampleAnswers: [null, 'just right', 'not left', null],
+                excludeZero: false,
+                ...extras,
+            },
+        };
+
+        return mount(<Rubric {...props} />);
+    };
+
+    describe('snapshot', () => {
+        it('renders', () => {
+            const w = wrapper();
+            expect(w).toMatchSnapshot();
+        });
+    });
+
+    describe('expanded snapshot', () => {
+        it('renders', () => {
+            const w = wrapper();
+            w.find('#rubric-toggle').simulate('click');
+            expect(w).toMatchSnapshot();
+        });
+    });
+
+    describe('exclude zeros', () => {
+        it('renders correctly with excluded zeroes', () => {
+            let w = wrapper({
+                excludeZero: true,
+                points: ['a teeny bit right', 'mostly right', 'bingo'],
+                sampleAnswers: ['just right', 'not left', null]
+            });
+            w.find('#rubric-toggle').simulate('click');
+            expect(w.find('li').length).toEqual(5);
+
+            w = wrapper({excludeZero: false});
+            w.find('#rubric-toggle').simulate('click');
+            expect(w.find('li').length).toEqual(6);
+        });
+    });
+});

package/configure/node_modules/@pie-element/rubric/src/index.js

@@ -0,0 +1,37 @@
+import Rubric from './main';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import { renderMath } from '@pie-lib/pie-toolbox/math-rendering';
+
+export default class RubricRender extends HTMLElement {
+  constructor() {
+    super();
+    debug.log('constructor called');
+    this.onModelChanged = this.onModelChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = s;
+    this._render();
+  }
+
+  onModelChanged(m) {
+    this._model = m;
+    this._render();
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    if (this._model) {
+      const el = <Rubric value={this._model} />;
+
+      ReactDOM.render(el, this, () => {
+        renderMath(this);
+      });
+    }
+  }
+}

package/configure/node_modules/@pie-element/rubric/src/main.jsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import ListItem from '@material-ui/core/ListItem';
+import List from '@material-ui/core/List';
+import Collapse from '@material-ui/core/Collapse';
+import { color, UiLayout } from '@pie-lib/pie-toolbox/render-ui';
+import PropTypes from 'prop-types';
+
+export const RubricType = PropTypes.shape({
+  excludeZero: PropTypes.bool,
+  points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+  animationsDisabled: PropTypes.bool,
+});
+
+class Rubric extends React.Component {
+  dudUrl = 'javascript:;';
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      rubricOpen: false,
+      linkPrefix: 'Show',
+    };
+    this.toggleRubric = this.toggleRubric.bind(this);
+  }
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    model: PropTypes.object.isRequired,
+    animationsDisabled: PropTypes.bool,
+    value: RubricType,
+  };
+
+  toggleRubric() {
+    this.setState({ rubricOpen: !this.state.rubricOpen });
+    this.setState({ linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide' });
+  }
+
+  shouldRenderPoint = (index, value) => {
+    if (!value.excludeZero) {
+      return true;
+    } else {
+      return index !== 0;
+    }
+  };
+
+  render() {
+    const { model, value, classes } = this.props;
+    let { animationsDisabled } = this.props;
+    animationsDisabled = animationsDisabled || value.animationsDisabled;
+
+    if (value && value.points) {
+      const { extraCSSRules } = model || {};
+      const { points, sampleAnswers } = value;
+
+      const rubricList = (
+        <List component="nav">
+          {points
+            .slice(0)
+            .reverse()
+            .map((desc, index) => {
+              index = points.length - index - 1;
+              const pointsLabel = value.excludeZero ? index + 1 : index;
+
+              return (
+                <React.Fragment key={index}>
+                  <ListItem key={`P${index}`} className={classes.listColumn}>
+                    <h3 className={classes.titleText}>
+                      {pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`}
+                    </h3>
+                    <div className={classes.text} dangerouslySetInnerHTML={{ __html: desc }} />
+                  </ListItem>
+
+                  {sampleAnswers && sampleAnswers[index] && (
+                    <ListItem key={`S${index}`} className={classes.listColumn}>
+                      <h4 className={classes.titleText} style={{ fontWeight: 'normal' }}>
+                        Sample Answer
+                      </h4>
+                      <div className={classes.text} dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />
+                    </ListItem>
+                  )}
+                </React.Fragment>
+              );
+            })}
+        </List>
+      );
+
+      return (
+        <UiLayout extraCSSRules={extraCSSRules} className={classes.root}>
+          {/* screen reader only heading for navigation as per PD-5057 */}
+          <h2 className={classes.hiddenScreenReader}>Rubric</h2>
+          {!animationsDisabled ? (
+            <React.Fragment>
+              <h2
+                id={'rubric-toggle'}
+                className={classes.rubricToggle}
+                tabIndex={0}
+                role="button"
+                aria-expanded={this.state.rubricOpen}
+                onClick={this.toggleRubric}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') this.toggleRubric();
+                }}
+              >
+                {this.state.linkPrefix} Rubric
+                <span className={classes.chevronStyle} aria-hidden="true">
+                  {this.state.rubricOpen ? (
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="18 15 12 9 6 15"></polyline>
+                    </svg>
+                  ) : (
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                  )}
+                </span>
+              </h2>
+              <Collapse in={this.state.rubricOpen} timeout="auto">
+                {rubricList}
+              </Collapse>
+            </React.Fragment>
+          ) : (
+            rubricList
+          )}
+        </UiLayout>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+const styles = (theme) => ({
+  root: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    // apply styles to tables to match the rest of the UI
+    '&:not(.MathJax) table': {
+      borderCollapse: 'collapse',
+    },
+    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+      padding: '8px 12px',
+      textAlign: 'left',
+    },
+    // reset paragraph margins and line-height inside lists to override client styles
+    '& ul p, & ol p': {
+      marginBottom: 0,
+      marginTop: 0,
+      lineHeight: 'normal',
+    },
+  },
+  listColumn: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    padding: '12px 0px',
+  },
+  listColumnItem: {
+    padding: 0,
+  },
+  text: {
+    color: color.text(),
+  },
+  titleText: {
+    color: color.text(),
+    fontSize: '16px',
+    fontWeight: '700',
+    margin: 0,
+    paddingBottom: '6px',
+  },
+  rubricToggle: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    userSelect: 'none',
+    fontSize: theme.typography.fontSize,
+    fontWeight: '500',
+    color: color.tertiary(),
+    margin: 0,
+  },
+  chevronStyle: {
+    display: 'inline-flex',
+    transition: 'transform 0.2s',
+    marginLeft: 2,
+    alignSelf: 'center',
+  },
+  hiddenScreenReader: {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0,0,0,0)',
+    border: 0,
+    whiteSpace: 'nowrap',
+  },
+});
+
+export default withStyles(styles)(Rubric);

package/configure/node_modules/@pie-element/rubric/src/print.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debounce from 'lodash/debounce';
+import Main from './main';
+import { renderMath } from '@pie-lib/pie-toolbox/math-rendering';
+import debug from 'debug';
+
+const log = debug('pie-element:rubric:print');
+
+const preparePrintModel = (model, opts) => {
+  const instr = opts.role === 'instructor';
+
+  if (!instr) {
+    return {};
+  }
+
+  model.value = { ...model };
+  model.mode = 'evaluate';
+  model.animationsDisabled = true;
+
+  return model;
+};
+
+export default class RubricPrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._rerender = debounce(
+      () => {
+        if (this._model && this._session) {
+          const printModel = preparePrintModel(this._model, this._options);
+
+          const element =
+            this._options &&
+            React.createElement(Main, {
+              ...printModel,
+            });
+
+          ReactDOM.render(element, this, () => {
+            log('render complete - render math');
+            renderMath(this);
+          });
+        } else {
+          log('skip');
+        }
+      },
+      50,
+      { leading: false, trailing: true },
+    );
+  }
+  set options(o) {
+    this._options = o;
+  }
+
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+
+  connectedCallback() {}
+}