@pie-element/complex-rubric 2.1.2-next.44 → 2.1.2-next.69

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/graphing-utils/index.js

@@ -0,0 +1,119 @@
+import debug from 'debug';
+import Point from '@mapbox/point-geometry';
+import _ from 'lodash';
+const log = debug('pie-lib:graphing:tools:utils');
+
+export const FREQ_DIVIDER = 16;
+
+export const getAmplitudeAndFreq = (root, edge) => {
+  if (!edge) {
+    return { freq: 0, amplitude: 0 };
+  }
+
+  if (root.x == edge.x) {
+    return { freq: 0, amplitude: 0 };
+  }
+
+  const r = new Point(root.x, root.y);
+  const e = new Point(edge.x, edge.y);
+  const d = e.sub(r);
+  // edge point describes 1/4 of the freq
+  return { freq: d.x * 4, amplitude: d.y };
+};
+
+/**
+ * build the x points with root as the anchor.
+ */
+export const xPoints = (root, freq, min, max) => {
+  freq = Math.abs(freq);
+  log('[xPoints] root:', root, 'freq:', freq, ' min:', min, ' max:', max);
+  const leftpoints = _.rangeRight(root, min - freq, freq * -1);
+  const rightpoints = _.range(root + freq, max + freq, freq);
+
+  return _.concat(leftpoints, rightpoints);
+};
+
+/**
+ * Calculate y for x value using amp, freq and shift
+ * https://www.desmos.com/calculator/f1psfoiiv6
+ */
+export const sinY = (amplitude, freq, shift) => (x) => {
+  shift = { phase: 0, vertical: 0, ...shift };
+  const TWO_PI = Math.PI * 2;
+  const num = TWO_PI * (x - shift.phase);
+  const frac = num / freq;
+  const sin = Math.sin(frac);
+  const sinFloat = parseFloat(sin).toFixed(10);
+  return amplitude * sinFloat + shift.vertical;
+};
+
+/**
+ * You need three points for the quadratic eq, so we mirror the edge point
+ * https://www.desmos.com/calculator/xhz1xqgpca
+ */
+export const parabolaFromTwoPoints = (root, edge) => {
+  edge = edge || { ...root };
+  const mirrorEdge = { x: root.x - (edge.x - root.x), y: edge.y };
+  return parabolaFromThreePoints(root, edge, mirrorEdge);
+};
+
+export const parabolaFromThreePoints = (one, two, three) => {
+  log(one, two, three);
+  const { a, b, c } = pointsToABC(one, two, three);
+  log(a, b, c);
+  return parabola(a, b, c);
+};
+/** derive a,b,c from the 3 points */
+export const pointsToABC = (one, two, three) => {
+  const a1 = Math.pow(one.x, 2) * -1 + Math.pow(two.x, 2);
+  const b1 = one.x * -1 + two.x;
+  const d1 = one.y * -1 + two.y;
+  const a2 = Math.pow(two.x, 2) * -1 + Math.pow(three.x, 2);
+  const b2 = two.x * -1 + three.x;
+  const d2 = two.y * -1 + three.y;
+  const bMult = (b2 / b1) * -1;
+  const a3 = bMult * a1 + a2;
+  const d3 = bMult * d1 + d2;
+  const a = d3 / a3;
+  const b = (d1 - a1 * a) / b1;
+  const c = one.y - a * Math.pow(one.x, 2) - b * one.x;
+  return { a, b, c };
+};
+
+/**
+ * y=ax^2+bx+c
+ */
+export const parabola = (a, b, c) => (x) => a * Math.pow(x, 2) + b * x + c;
+
+/**
+ * Generate a set of data points, add spacing before min and after max if there is space between minx + min and maxX and max
+ * @param {*} min
+ * @param {*} max
+ * @param {*} root
+ * @param {*} edge
+ * @param {*} interval
+ * @param {*} yFn
+ */
+export const buildDataPoints = (min, max, root, edge, interval, yFn) => {
+  log('[buildDataPoints] min:', min, 'max:', max, 'root:', root);
+  edge = edge ? edge : { ...root };
+  const minX = Math.min(root.x, edge.x);
+  const maxX = Math.max(root.x, edge.x);
+  const leftSpace = min - minX;
+  const rightSpace = max - maxX;
+  const xs = xPoints(minX, interval, min - rightSpace, max - leftSpace);
+  log('[buildDataPoints]:xs:', xs);
+  return xs.map((v) => new Point(v, yFn(v)));
+};
+
+export default {
+  FREQ_DIVIDER,
+  getAmplitudeAndFreq,
+  xPoints,
+  sinY,
+  parabolaFromTwoPoints,
+  parabolaFromThreePoints,
+  pointsToABC,
+  parabola,
+  buildDataPoints,
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/icons/correct-icon.jsx

@@ -0,0 +1,64 @@
+import IconBase from './icon-base';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { getStyles } from './icon-root';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = getStyles('correct', '#f8ffe2', '#4aaf46');
+
+const Emoji = ({ className }) => (
+  <g transform={'translate(1, 0)'}>
+    <path
+      className={className}
+      d="M24.7,22.1c-1.5,1.7-3.6,2.7-5.8,2.7s-4.5-1.1-5.8-2.7l-2.8,1.6c2,2.7,5.2,4.2,8.7,4.2
+    c3.4,0,6.6-1.6,8.7-4.2L24.7,22.1z"
+    />
+    <rect x="21.1" y="13.1" className={className} width="3.7" height="4.7" />
+    <rect x="12.7" y="13.1" className={className} width="3.7" height="4.7" />
+  </g>
+);
+
+Emoji.propTypes = {
+  className: PropTypes.string,
+};
+
+Emoji.defaultProps = {
+  x: 0,
+};
+
+const Check = ({ className, x, y }) => (
+  <polygon
+    transform={`translate(${x}, ${y})`}
+    className={className}
+    points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+  />
+);
+
+Check.propTypes = {
+  x: PropTypes.number,
+  y: PropTypes.number,
+  className: PropTypes.string,
+};
+
+Check.defaultProps = {
+  x: 0,
+  y: 0,
+};
+
+export const Correct = IconBase(Check, Emoji);
+
+Correct.propTypes = {
+  iconSet: PropTypes.oneOf(['emoji', 'check']),
+  shape: PropTypes.oneOf(['round', 'square']),
+  category: PropTypes.oneOf(['feedback', undefined]),
+  open: PropTypes.bool,
+};
+
+Correct.defaultProps = {
+  iconSet: 'check',
+  shape: 'round',
+  category: undefined,
+  open: false,
+};
+
+export default withStyles(styles)(Correct);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/icons/correct-response-icon.jsx

@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+
+const OpenIcon = ({ bg, fg }) => (
+  <svg
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    id="Layer_1"
+    x="0px"
+    y="0px"
+    viewBox="-283 359 34 35"
+    style={{ enableBackground: 'new -283 359 34 35' }}
+  >
+    <circle className={bg} cx="-266" cy="375.9" r="14" />
+    <path
+      className={bg}
+      d="M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z
+    M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z"
+    />
+    <polygon
+      className={fg}
+      points="-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6         "
+    />
+  </svg>
+);
+
+OpenIcon.propTypes = {
+  bg: PropTypes.string,
+  fg: PropTypes.string,
+};
+
+const CloseIcon = ({ bg, fg, border }) => (
+  <svg
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    x="0px"
+    y="0px"
+    viewBox="-129.5 127 34 35"
+    style={{ enableBackground: 'new -129.5 127 34 35' }}
+  >
+    <path
+      style={{
+        fill: '#D0CAC5',
+        stroke: '#E6E3E0',
+        strokeWidth: 0.75,
+        strokeMiterlimit: 10,
+      }}
+      d="M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5
+    C-97.4,153.5-104.3,160.4-112.9,160.4z"
+    />
+    <path
+      style={{
+        fill: '#B3ABA4',
+        stroke: '#CDC7C2',
+        strokeWidth: 0.5,
+        strokeMiterlimit: 10,
+      }}
+      d="M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
+    />
+    <circle className={bg} cx="-114.2" cy="143.5" r="14" />
+    <path
+      className={border}
+      d="M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z
+    M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z"
+    />
+    <polygon className={fg} points="-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2" />
+  </svg>
+);
+
+CloseIcon.propTypes = {
+  bg: PropTypes.string,
+  fg: PropTypes.string,
+  border: PropTypes.string,
+};
+
+const styles = {
+  root: {
+    width: (props) => props.size || '25px',
+    height: (props) => props.size || '25px',
+  },
+  hideIconBg: {
+    fill: '#bce2ff',
+  },
+  hideIconFg: {
+    fill: '#1a9cff',
+  },
+  showIconBg: {
+    fill: 'white',
+  },
+  showIconFg: {
+    fill: '#1a9cff',
+  },
+  showIconBorder: {
+    fill: '#bce2ff',
+  },
+};
+
+const CorrectResponse = ({ open, classes, className }) => (
+  <div className={classNames(className, classes.root)}>
+    {open ? (
+      <OpenIcon bg={classes.hideIconBg} fg={classes.hideIconFg} />
+    ) : (
+      <CloseIcon bg={classes.showIconBg} border={classes.showIconBorder} fg={classes.showIconFg} />
+    )}
+  </div>
+);
+
+CorrectResponse.propTypes = {
+  classes: PropTypes.object.isRequired,
+  open: PropTypes.bool,
+  size: PropTypes.string,
+  className: PropTypes.string,
+};
+
+CorrectResponse.defaultProps = {
+  open: false,
+};
+
+export default withStyles(styles)(CorrectResponse);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/icons/icon-base.jsx

@@ -0,0 +1,158 @@
+import { Circle, IconRoot, RoundFeedbackBox, Square, SquareFeedbackBox } from './icon-root';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default (Action, Emoji) => {
+  class IconBase extends React.Component {
+    static propTypes = {
+      classes: PropTypes.object.isRequired,
+      size: PropTypes.number,
+    };
+    constructor(props) {
+      super(props);
+      const { classes, size } = this.props;
+
+      this.icons = {
+        feedback: {
+          round: {
+            check: (
+              <IconRoot size={size}>
+                <RoundFeedbackBox className={classes.bg} />
+                <Action className={classes.fg} />
+              </IconRoot>
+            ),
+            emoji: (
+              <IconRoot size={size}>
+                <RoundFeedbackBox className={classes.bg} />
+                <Emoji className={classes.fg} />
+              </IconRoot>
+            ),
+            open: {
+              check: (
+                <IconRoot size={size}>
+                  <Action className={classes.bg} />
+                </IconRoot>
+              ),
+              emoji: (
+                <IconRoot size={size}>
+                  <Emoji className={classes.bg} />
+                </IconRoot>
+              ),
+            },
+          },
+          square: {
+            check: (
+              <IconRoot size={size}>
+                <SquareFeedbackBox className={classes.bg} />
+                <Action className={classes.fg} />
+              </IconRoot>
+            ),
+            emoji: (
+              <IconRoot size={size}>
+                <SquareFeedbackBox className={classes.bg} />
+                <Emoji className={classes.fg} />
+              </IconRoot>
+            ),
+            open: {
+              check: (
+                <IconRoot size={size}>
+                  <Action className={classes.bg} />
+                </IconRoot>
+              ),
+              emoji: (
+                <IconRoot size={size}>
+                  <Emoji className={classes.bg} />
+                </IconRoot>
+              ),
+            },
+          },
+        },
+        round: {
+          check: (
+            <IconRoot size={size}>
+              <Circle className={classes.bg} />
+              <Action className={classes.fg} />
+            </IconRoot>
+          ),
+          emoji: (
+            <IconRoot size={size}>
+              <Circle className={classes.bg} />
+              <Emoji className={classes.fg} />
+            </IconRoot>
+          ),
+          open: {
+            check: (
+              <IconRoot size={size}>
+                <Action className={classes.bg} />
+              </IconRoot>
+            ),
+            emoji: (
+              <IconRoot size={size}>
+                <Emoji className={classes.bg} />
+              </IconRoot>
+            ),
+          },
+        },
+        square: {
+          check: (
+            <IconRoot size={size}>
+              <Square className={classes.bg} />
+              <Action className={classes.fg} />
+            </IconRoot>
+          ),
+          emoji: (
+            <IconRoot size={size}>
+              <Square className={classes.bg} />
+              <Emoji className={classes.fg} />
+            </IconRoot>
+          ),
+          open: {
+            check: (
+              <IconRoot size={size}>
+                <Action className={classes.bg} />
+              </IconRoot>
+            ),
+            emoji: (
+              <IconRoot size={size}>
+                <Emoji className={classes.bg} />
+              </IconRoot>
+            ),
+          },
+        },
+      };
+    }
+
+    render() {
+      if (this.props.category === undefined) {
+        if (this.props.open === true) {
+          return this.icons[this.props.shape].open[this.props.iconSet];
+        } else {
+          return this.icons[this.props.shape][this.props.iconSet];
+        }
+      } else {
+        if (this.props.open === true) {
+          return this.icons.feedback[this.props.shape].open[this.props.iconSet];
+        } else {
+          return this.icons.feedback[this.props.shape][this.props.iconSet];
+        }
+      }
+    }
+  }
+
+  IconBase.propTypes = {
+    iconSet: PropTypes.oneOf(['emoji', 'check']),
+    shape: PropTypes.oneOf(['round', 'square']),
+    category: PropTypes.oneOf(['feedback', undefined]),
+    open: PropTypes.bool,
+  };
+
+  IconBase.defaultProps = {
+    iconSet: 'check',
+    shape: 'round',
+    category: undefined,
+    open: false,
+  };
+
+  return IconBase;
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/icons/icon-root.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Sized from './sized';
+
+export const normalizeSize = (size) => {
+  return typeof size === 'string' ? size : typeof size === 'number' ? `${size}px` : '30px';
+};
+
+export const IconRoot = ({ size, children }) => (
+  <Sized size={size}>
+    <svg
+      preserveAspectRatio="xMinYMin meet"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 44 40"
+      style={{ enableBackground: 'new 0 0 44 40' }}
+    >
+      {' '}
+      {children}
+    </svg>
+  </Sized>
+);
+
+IconRoot.propTypes = {
+  size: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export const getStyles = (name, fg, bg) => ({
+  bg: {
+    fill: `var(--icons-${name}-bg, ${bg})`,
+  },
+  fg: {
+    fill: `var(--icons-${name}-fg, ${fg})`,
+  },
+});
+
+export const Tick = ({ className }) => (
+  <polygon className={className} points="17.4,26.9 10.1,20.6 12.8,17.5 16.3,20.5 22.3,9.7 25.9,11.7" />
+);
+
+Tick.propTypes = {
+  className: PropTypes.string,
+};
+
+export const SquareFeedbackBox = ({ className }) => (
+  <polygon transform="translate(2, 0)" className={className} points="34.1,28.6 34.1,2.2 2,2.2 2,34.3 40.1,34.3" />
+);
+SquareFeedbackBox.propTypes = {
+  className: PropTypes.string,
+};
+
+export const RoundFeedbackBox = ({ className }) => (
+  <path
+    transform="translate(1, 0)"
+    className={className}
+    d="M31.2,29.1v-0.3c2.2-2.8,3.6-6.3,3.6-10.1c0-8.9-7.2-16.1-16.1-16.1c-8.8,0.1-16,7.3-16,16.2 s7.2,16.1,16.1,16.1h18.5L31.2,29.1z"
+  />
+);
+RoundFeedbackBox.propTypes = {
+  className: PropTypes.string,
+};
+
+export const Circle = ({ className }) => (
+  <circle transform="translate(-3, 0)" className={className} cx="23" cy="20.4" r="16" />
+);
+
+Circle.propTypes = {
+  className: PropTypes.string,
+};
+
+export const Square = ({ className }) => <rect x="3.6" y="4.1" className={className} width="32" height="32" />;
+Square.propTypes = {
+  className: PropTypes.string,
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/icons/image-konva.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Group, Image, Text, Tag, Label } from 'react-konva';
+
+class ImageComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      image: null,
+      showTooltip: false,
+    };
+  }
+
+  componentDidMount() {
+    this.loadImage();
+  }
+
+  componentDidUpdate(oldProps) {
+    if (oldProps.src !== this.props.src) {
+      this.loadImage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.image.removeEventListener('load', this.handleLoad);
+  }
+
+  loadImage() {
+    const { src } = this.props;
+
+    this.image = new window.Image();
+    this.image.src = src;
+    this.image.addEventListener('load', this.handleLoad);
+  }
+
+  handleLoad = () => {
+    this.setState({
+      image: this.image,
+    });
+  };
+
+  render() {
+    const { x, y, tooltip } = this.props;
+    const { image, showTooltip } = this.state;
+
+    return (
+      <Group>
+        <Image
+          width={20}
+          height={20}
+          x={x}
+          y={y}
+          image={image}
+          onMouseEnter={() => this.setState({ showTooltip: true })}
+          onMouseLeave={() => this.setState({ showTooltip: false })}
+        />
+
+        {showTooltip && tooltip && (
+          <Label x={x - 30} y={y + 25}>
+            <Tag fill="white" cornerRadius={5} opacity={0.9} />
+            <Text text={tooltip} padding={5} />
+          </Label>
+        )}
+      </Group>
+    );
+  }
+}
+
+ImageComponent.propTypes = {
+  src: PropTypes.string.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  tooltip: PropTypes.string,
+};
+
+export default ImageComponent;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/icons/incorrect-icon.jsx

@@ -0,0 +1,61 @@
+import IconBase from './icon-base';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { getStyles } from './icon-root';
+import { withStyles } from '@material-ui/core/styles';
+
+const Ex = ({ className }) => (
+  <g transform={'translate(0.5, 0.5)'}>
+    <rect
+      x="11"
+      y="17.3"
+      transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)"
+      className={className}
+      width="16.6"
+      height="3.7"
+    />
+    <rect
+      x="17.4"
+      y="10.7"
+      transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)"
+      className={className}
+      width="3.7"
+      height="16.6"
+    />
+  </g>
+);
+
+Ex.propTypes = {
+  className: PropTypes.string,
+};
+const Emoji = ({ className }) => (
+  <g transform={'translate(1,0)'}>
+    <rect x="21" y="12.9" className={className} width="3.7" height="4.7" />
+    <rect x="12.7" y="12.9" className={className} width="3.7" height="4.7" />
+    <rect x="12.2" y="22.5" className={className} width="13" height="3.3" />
+  </g>
+);
+
+Emoji.propTypes = {
+  className: PropTypes.string,
+};
+
+const styles = getStyles('incorrect', '#fbf2e3', '#fcb733');
+
+export const Incorrect = IconBase(Ex, Emoji);
+
+export default withStyles(styles)(Incorrect);
+
+Incorrect.propTypes = {
+  iconSet: PropTypes.oneOf(['emoji', 'check']),
+  shape: PropTypes.oneOf(['round', 'square']),
+  category: PropTypes.oneOf(['feedback', undefined]),
+  open: PropTypes.bool,
+};
+
+Incorrect.defaultProps = {
+  iconSet: 'check',
+  shape: 'round',
+  category: undefined,
+  open: false,
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/icons/index.js

@@ -0,0 +1,21 @@
+import Correct from './correct-icon';
+import CorrectResponse from './correct-response-icon';
+import Incorrect from './incorrect-icon';
+import Instructions from './instructions-icon';
+import LearnMore from './learn-more-icon';
+import NothingSubmitted from './nothing-submitted-icon';
+import PartiallyCorrect from './partially-correct-icon';
+import ShowRationale from './show-rationale-icon';
+import ImageComponent from './image-konva';
+
+export {
+  Correct,
+  CorrectResponse,
+  ImageComponent,
+  Incorrect,
+  Instructions,
+  LearnMore,
+  NothingSubmitted,
+  PartiallyCorrect,
+  ShowRationale,
+};