@pie-element/rubric 1.5.16 → 1.5.17-beta.587

package/src/__tests__/rubric-view.test.jsx

@@ -3,16 +3,16 @@ import React from 'react';
 import Rubric from '../main';
 import Link from '@material-ui/core/Link';
 
-
 describe('rubric viewer', () => {
-
-
-  const wrapper = extras => {
-    const props = {value: {
-      points: ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'],
-      excludeZero: false,
-      ...extras
-    }};
+  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} />);
   };
@@ -36,12 +36,11 @@ describe('rubric viewer', () => {
     it('renders correctly with exluded zeroes', () => {
       let w = wrapper({ excludeZero: true });
       w.find(Link).simulate('click');
-      expect(w.find('li').length).toEqual(3);
+      expect(w.find('li').length).toEqual(5);
 
       w = wrapper({ excludeZero: false });
       w.find(Link).simulate('click');
-      expect(w.find('li').length).toEqual(4);
+      expect(w.find('li').length).toEqual(6);
     });
   });
-
 });

package/src/index.js

@@ -3,9 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import debug from 'debug';
 
-
 export default class RubricRender extends HTMLElement {
-
   constructor() {
     super();
     debug.log('constructor called');
@@ -28,9 +26,8 @@ export default class RubricRender extends HTMLElement {
 
   _render() {
     if (this._model) {
-      const el = (
-        <Rubric value={this._model}/>
-      );
+      const el = <Rubric value={this._model} />;
+
       ReactDOM.render(el, this);
     }
   }

package/src/main.jsx

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 export const RubricType = PropTypes.shape({
   excludeZero: PropTypes.bool,
   points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
 });
 
 class Rubric extends React.Component {
@@ -26,6 +27,7 @@ class Rubric extends React.Component {
 
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    animationsDisabled: PropTypes.bool,
     value: RubricType,
   };
 
@@ -43,34 +45,59 @@ class Rubric extends React.Component {
   };
 
   render() {
-    const { value, classes } = this.props;
+    const { value, classes, animationsDisabled } = this.props;
+
     if (value && value.points) {
-      const points = value.points;
-      return (
-        <div className={classes.root}>
-          <Link href={this.dudUrl} onClick={this.toggleRubric}>
-            {this.state.linkPrefix} Rubric
-          </Link>
-          <Collapse in={this.state.rubricOpen} timeout="auto">
-            <List component="nav">
-              {points.map(
-                (desc, index) =>
-                  this.shouldRenderPoint(index, value) && (
-                    <ListItem key={index}>
+      const { points, sampleAnswers } = value;
+
+      const rubricList = (
+        <List component="nav">
+          {points
+            .slice(0)
+            .reverse()
+            .map((desc, index) => {
+              index = points.length - index - 1;
+              return (
+                this.shouldRenderPoint(index, value) && (
+                  <React.Fragment key={index}>
+                    <ListItem key={`P${index}`}>
                       <ListItemText
                         className={classes.rubricCol}
-                        primary={`${index} PTS`}
-                      />
-                      <ListItemText
-                        primary={
-                          <div dangerouslySetInnerHTML={{ __html: desc }} />
-                        }
+                        primary={index === 1 ? `${index} PT` : `${index} PTS`}
                       />
+                      <ListItemText primary={<div dangerouslySetInnerHTML={{ __html: desc }} />} />
                     </ListItem>
-                  )
-              )}
-            </List>
-          </Collapse>
+                    {sampleAnswers && sampleAnswers[index] && (
+                      <ListItem key={`S${index}`}>
+                        <ListItemText
+                          className={classes.rubricCol}
+                          style={{ marginLeft: '20px' }}
+                          primary={'Sample Answer'}
+                        />
+                        <ListItemText primary={<div dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />} />
+                      </ListItem>
+                    )}
+                  </React.Fragment>
+                )
+              );
+            })}
+        </List>
+      );
+
+      return (
+        <div className={classes.root}>
+          {!animationsDisabled ? (
+            <React.Fragment>
+              <Link href={this.dudUrl} onClick={this.toggleRubric}>
+                {this.state.linkPrefix} Rubric
+              </Link>
+              <Collapse in={this.state.rubricOpen} timeout="auto">
+                {rubricList}
+              </Collapse>
+            </React.Fragment>
+          ) : (
+            rubricList
+          )}
         </div>
       );
     } else {
@@ -82,6 +109,7 @@ class Rubric extends React.Component {
 const styles = () => ({
   rubricCol: {
     flex: '0 1 auto',
+    minWidth: 'fit-content',
   },
 });
 

package/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/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() {}
+}