@pie-element/multi-trait-rubric 0.1.0

package/src/controller/index.ts

@@ -0,0 +1,137 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/controller/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import defaults from './defaults.js';
+import { markupToText } from './utils.js';
+
+export function createDefaultModel(model = {}) {
+  return new Promise((resolve) => resolve({ ...defaults, ...model }));
+}
+
+export const normalize = (question) => ({ ...defaults, ...question });
+
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ */
+export async function model(question, session, env) {
+  const normalizedQuestion = normalize(question);
+
+  if (!env.role || env.role === 'student') {
+    normalizedQuestion.visible = normalizedQuestion.visibleToStudent;
+  } else {
+    normalizedQuestion.visible = true;
+  }
+
+  // todo update pie-ui instead of parsing this here:
+  const { scales, excludeZero } = normalizedQuestion || {};
+  const parsedScales = (scales || []).map((scale) => ({ ...scale, excludeZero }));
+
+  return {
+    ...normalizedQuestion,
+    scales: parsedScales,
+  };
+}
+
+export const getScore = () => 0;
+
+/**
+ * @param {Object} model - the main model
+ * @param {*} session
+ * @param {Object} env
+ */
+export function outcome() {
+  return new Promise((resolve) => resolve({ score: 0, empty: true }));
+}
+
+export const createCorrectResponseSession = (question, env) => {
+  return new Promise((resolve) => {
+    if (env.mode !== 'evaluate' && env.role === 'instructor') {
+      resolve({ id: '1' });
+    } else {
+      resolve(null);
+    }
+  });
+};
+
+// IMPORTANT! If you make any changes to this function, please make sure you also update complex-rubric/controller/validateMultiTraitRubric function!“.
+export const validate = (model, config) => {
+  const { scales, description = false, pointLabels = false } = model;
+  const errors = {};
+  const traitsErrors = {};
+  const scorePointsErrors = {};
+
+  (scales || []).forEach((scale, scaleIndex) => {
+    const { traits = [] } = scale;
+    const { scorePointsLabels = [] } = scale;
+    const scaleErrors = {};
+    const scorePointsLabelsErrors = {};
+
+    if (pointLabels) {
+      scorePointsLabels.forEach((scorePointLabel, scoreIndex) => {
+        if (!scorePointLabel || scorePointLabel === '<div></div>') {
+          scorePointsLabelsErrors[scoreIndex] = 'Points labels should not be empty.';
+        } else {
+          const identicalScorePointLabel = scorePointsLabels
+            .slice(scoreIndex + 1)
+            .some((s) => markupToText(s) === markupToText(scorePointLabel));
+
+          if (identicalScorePointLabel) {
+            scorePointsLabelsErrors[scoreIndex] = 'Points labels should be unique.';
+          }
+        }
+      });
+    }
+
+    if (Object.keys(scorePointsLabelsErrors).length > 0) {
+      scorePointsErrors[scaleIndex] = scorePointsLabelsErrors;
+    }
+
+    traits.forEach((trait, traitIndex) => {
+      if (!trait.name || trait.name === '<div></div>') {
+        scaleErrors[traitIndex] = { name: 'Trait names should not be empty.' };
+      } else {
+        const identicalTraitName = traits
+          .slice(traitIndex + 1)
+          .some((t) => markupToText(t.name) === markupToText(trait.name));
+
+        if (identicalTraitName) {
+          scaleErrors[traitIndex] = { name: 'Trait names should be unique.' };
+        }
+      }
+      if (description && (!trait.description || trait.description === '<div></div>')) {
+        scaleErrors[traitIndex] = { ...scaleErrors[traitIndex], description: 'Trait description should not be empty' };
+      } else {
+        const identicalTraitDescr = traits
+          .slice(traitIndex + 1)
+          .some((t) => markupToText(t.description) === markupToText(trait.description));
+
+        if (description && identicalTraitDescr) {
+          scaleErrors[traitIndex] = { ...scaleErrors[traitIndex], description: 'Trait descriptions should be unique.' };
+        }
+      }
+    });
+    if (Object.keys(scaleErrors).length > 0) {
+      traitsErrors[scaleIndex] = scaleErrors;
+    }
+  });
+
+  if (Object.keys(traitsErrors).length > 0) {
+    errors.traitsErrors = traitsErrors;
+  }
+
+  if (Object.keys(scorePointsErrors).length > 0) {
+    errors.scorePointsErrors = scorePointsErrors;
+  }
+
+  return errors;
+};

package/src/controller/utils.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/controller/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export const markupToText = (s) => {
+    return (s || '').replace(/(<([^>]+)>)/ig, '');
+};

package/src/delivery/index.ts

@@ -0,0 +1,61 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { ModelSetEvent } from '@pie-element/shared-player-events';
+import Main from './main.js';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+
+export default class MultiTraitRubric extends HTMLElement {
+  constructor() {
+    super();
+    this._model = {};
+    this._session = null;
+    this._root = null;
+  }
+
+  set model(s) {
+    this._model = s;
+    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this._session, !!this._model));
+
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    const el = React.createElement(Main, { model: this._model, session: this._session });
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(el);
+    queueMicrotask(() => {
+      renderMath(this);
+    });
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/src/delivery/main.tsx

@@ -0,0 +1,140 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/src/main.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Scale from './scale.js';
+import Link from '@mui/material/Link';
+import Collapse from '@mui/material/Collapse';
+import { color, UiLayout as UiLayoutImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const UiLayout = unwrapReactInteropSymbol(UiLayoutImport, 'UiLayout') || unwrapReactInteropSymbol(renderUi.UiLayout, 'UiLayout');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      rubricOpen: false,
+      linkPrefix: 'Show',
+    };
+    this.toggleRubric = this.toggleRubric.bind(this);
+  }
+
+  toggleRubric() {
+    this.setState({ rubricOpen: !this.state.rubricOpen });
+    this.setState({ linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide' });
+  }
+
+  render() {
+    const { model } = this.props;
+    let { animationsDisabled } = this.props;
+    const { extraCSSRules, halfScoring, scales, visible, pointLabels, description, standards, arrowsDisabled } =
+      model || {};
+    animationsDisabled = animationsDisabled || model.animationsDisabled;
+
+    if (!scales || !visible) {
+      return null;
+    }
+
+    const rubricItem = (
+      <UiLayout
+        extraCSSRules={extraCSSRules}
+        style={{ fontFamily: 'Cerebri Sans', color: color.text(), backgroundColor: color.background() }}
+      >
+        {halfScoring ? (
+          <div style={{ marginBottom: '16px' }}>* Half-point or in-between scores are permitted under this rubric.</div>
+        ) : null}
+
+        {scales.map((scale, scaleIndex) => (
+          <Scale
+            key={`scale_${scaleIndex}`}
+            scale={scale}
+            scaleIndex={scaleIndex}
+            showPointsLabels={pointLabels}
+            showDescription={description}
+            showStandards={standards}
+            arrowsDisabled={arrowsDisabled}
+          />
+        ))}
+      </UiLayout>
+    );
+
+    if (animationsDisabled) {
+      return rubricItem;
+    }
+
+    return (
+      <UiLayout extraCSSRules={extraCSSRules} style={{ color: color.text(), backgroundColor: color.background() }}>
+        <Link style={{ backgroundColor: color.background() }} href={this.dudUrl} onClick={this.toggleRubric}>
+          {this.state.linkPrefix} Rubric
+        </Link>
+        <Collapse style={{ marginTop: '16px' }} in={this.state.rubricOpen} timeout={{ enter: 225, exit: 195 }}>
+          {rubricItem}
+        </Collapse>
+      </UiLayout>
+    );
+  }
+}
+
+Main.propTypes = {
+  model: PropTypes.shape({
+    halfScoring: PropTypes.bool,
+    scales: PropTypes.arrayOf(
+      PropTypes.shape({
+        excludeZero: PropTypes.bool,
+        maxPoints: PropTypes.number,
+        scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
+        traitLabel: PropTypes.string,
+        traits: PropTypes.arrayOf(
+          PropTypes.shape({
+            name: PropTypes.string,
+            description: PropTypes.string,
+            scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
+            standards: PropTypes.arrayOf(PropTypes.string),
+          }),
+        ),
+      }),
+    ),
+    visible: PropTypes.bool,
+    pointLabels: PropTypes.bool,
+    description: PropTypes.bool,
+    standards: PropTypes.bool,
+    animationsDisabled: PropTypes.bool,
+  }),
+  animationsDisabled: PropTypes.bool,
+};
+
+export default Main;

package/src/delivery/scale.tsx

@@ -0,0 +1,313 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/src/scale.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import Trait from './trait.js';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+
+const Wrapper: any = styled('div')({
+  display: 'flex',
+  position: 'relative',
+});
+
+const TableWrapper: any = styled('div')({
+  width: '100%',
+  overflow: 'auto',
+});
+
+const Table: any = styled('table')(({ theme }) => ({
+  borderSpacing: 0,
+  marginBottom: theme.spacing(2),
+  borderRadius: '4px',
+  color: color.text(),
+  fontSize: theme.typography.fontSize,
+  lineHeight: '16px',
+  overflow: 'unset',
+
+  '& ul, ol': {
+    marginBlockStart: 0,
+    paddingInlineStart: theme.spacing(2),
+  },
+
+  '& th': {
+    padding: theme.spacing(2),
+    textAlign: 'left',
+    backgroundColor: color.secondaryBackground(),
+    verticalAlign: 'bottom',
+  },
+
+  '& th div': {
+    width: '200px',
+  },
+
+  '& td': {
+    width: '200px',
+    padding: `${theme.spacing(2)} ${theme.spacing(1)}`,
+    verticalAlign: 'top',
+  },
+}));
+
+const ScorePointHeaderTable: any = styled('table')({
+  '& td': {
+    border: 0,
+    padding: 0,
+    textAlign: 'center',
+    minWidth: '200px',
+  },
+});
+
+const PointLabel: any = styled('div')({
+  marginBottom: '4px',
+});
+
+const ScorePointValue: any = styled('td')({
+  fontWeight: 'normal',
+});
+
+const ArrowContainer = ({ show, onClick, extraStyles, children }) => (
+  <div
+    style={{
+      height: 'calc(100% - 1px)',
+      top: '1px',
+      display: show ? 'flex' : 'none',
+      width: '50px',
+      margin: 'auto',
+      position: 'absolute',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      ...extraStyles,
+    }}
+    onClick={onClick}
+  >
+    {children}
+  </div>
+);
+
+ArrowContainer.propTypes = {
+  show: PropTypes.bool,
+  onClick: PropTypes.func,
+  extraStyles: PropTypes.object,
+  children: PropTypes.object,
+};
+
+class Scale extends React.Component {
+  state = {};
+
+  componentDidMount() {
+    if (this.tableWrapper) {
+      if (this.tableWrapper.offsetWidth < this.tableWrapper.scrollWidth) {
+        this.setState({ showRight: true });
+      }
+    }
+  }
+
+  scrollLeft: any = () => {
+    this.tableWrapper.scrollLeft -= this.tableWrapper.offsetWidth / 2;
+
+    this.setState({
+      showRight: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
+      showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0,
+    });
+  };
+
+  scrollRight: any = () => {
+    const initialScrollLeft = this.tableWrapper.scrollLeft;
+    this.tableWrapper.scrollLeft += this.tableWrapper.offsetWidth / 2;
+
+    this.setState({
+      showRight:
+        initialScrollLeft !== this.tableWrapper.scrollLeft &&
+        this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
+      showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0,
+    });
+  };
+
+  render() {
+    const { showRight, showLeft } = this.state;
+    const { scale, scaleIndex, showDescription, showPointsLabels, showStandards, arrowsDisabled } = this.props;
+    const { excludeZero, maxPoints, traitLabel, traits, scorePointsLabels } = scale || {};
+
+    let scorePointsValues = [];
+    let descriptions;
+    let pointsLabels;
+    let standards;
+
+    try {
+      // determining the score points values
+      for (let pointValue = maxPoints; pointValue >= excludeZero ? 1 : 0; pointValue -= 1) {
+        scorePointsValues.push(pointValue);
+      }
+
+      const { traitStandards, traitDescriptions } = traits.reduce(
+        (tcc, trait) => ({
+          traitStandards: [...tcc.traitStandards, ...(trait.standards || [])],
+          traitDescriptions: [...tcc.traitDescriptions, ...(trait.description || [])],
+        }),
+        {
+          traitStandards: [],
+          traitDescriptions: [],
+        },
+      );
+
+      descriptions = showDescription && traitDescriptions.length;
+      pointsLabels = showPointsLabels && scorePointsLabels.length;
+      standards = showStandards && traitStandards.length;
+    } catch (e) {
+      descriptions = false;
+      pointsLabels = false;
+      standards = false;
+    }
+
+    return (
+      <Wrapper>
+        <ArrowContainer
+          show={showLeft && !arrowsDisabled}
+          onClick={this.scrollLeft}
+          extraStyles={{
+            left: 0,
+            background: `linear-gradient(to right, white, ${color.background()})`,
+          }}
+        >
+          <ArrowBackIosIcon />
+        </ArrowContainer>
+
+        <TableWrapper
+          ref={(ref) => {
+            this.tableWrapper = ref;
+          }}
+          onScroll={() => {
+            this.setState({
+              // 5 is a margin of error
+              showRight:
+                this.tableWrapper.scrollLeft + this.tableWrapper.offsetWidth < this.tableWrapper.scrollWidth - 5 &&
+                this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
+              showLeft:
+                this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0,
+            });
+          }}
+        >
+          {arrowsDisabled && (showRight || showLeft) ? <div>The item is too large to fit in print mode.</div> : null}
+          <Table key={`scale-${scaleIndex}`}>
+            <thead>
+              <tr>
+                <th>
+                  <div dangerouslySetInnerHTML={{ __html: traitLabel }} />
+                </th>
+
+                {standards ? (
+                  <th>
+                    <div>Standard(s)</div>
+                  </th>
+                ) : null}
+
+                {descriptions ? (
+                  <th>
+                    <div>Description</div>
+                  </th>
+                ) : null}
+
+                {scorePointsValues &&
+                  scorePointsValues.map((scorePointValue, index) => {
+                    let pointLabel = '';
+
+                    // to handle the case when there aren't enough labels
+                    try {
+                      pointLabel = scorePointsLabels[scorePointsValues.length - index - 1] || '';
+                    } catch (e) {
+                      pointLabel = '';
+                    }
+
+                    return (
+                      <th key={`table-header-${index}`}>
+                        <ScorePointHeaderTable>
+                          <thead>
+                            {pointsLabels ? (
+                              <tr>
+                                <td>
+                                  <PointLabel
+                                    dangerouslySetInnerHTML={{ __html: pointLabel }}
+                                  />
+                                </td>
+                              </tr>
+                            ) : null}
+                            <tr>
+                              <ScorePointValue>
+                                {scorePointValue === 1 ? `${scorePointValue} point` : `${scorePointValue} points`}
+                              </ScorePointValue>
+                            </tr>
+                          </thead>
+                        </ScorePointHeaderTable>
+                      </th>
+                    );
+                  })}
+              </tr>
+            </thead>
+
+            <tbody>
+              {traits &&
+                traits.map((trait, traitIndex) => (
+                  <Trait
+                    key={`trait_${scaleIndex}_${traitIndex}`}
+                    trait={trait}
+                    traitIndex={traitIndex}
+                    showDescription={!!descriptions}
+                    showStandards={!!standards}
+                    scaleIndex={scaleIndex}
+                    scorePointsValues={scorePointsValues}
+                    excludeZero={excludeZero}
+                  />
+                ))}
+            </tbody>
+          </Table>
+        </TableWrapper>
+
+        <ArrowContainer
+          show={showRight && !arrowsDisabled}
+          onClick={this.scrollRight}
+          extraStyles={{
+            right: 0,
+            background: `linear-gradient(to left, white, ${color.background()})`,
+          }}
+        >
+          <ArrowForwardIosIcon />
+        </ArrowContainer>
+      </Wrapper>
+    );
+  }
+}
+
+Scale.propTypes = {
+  scaleIndex: PropTypes.number,
+  scale: PropTypes.shape({
+    excludeZero: PropTypes.bool,
+    maxPoints: PropTypes.number,
+    scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
+    traitLabel: PropTypes.string,
+    traits: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        standards: PropTypes.arrayOf(PropTypes.string),
+        scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
+        description: PropTypes.string,
+      }),
+    ),
+  }),
+  showPointsLabels: PropTypes.bool,
+  showDescription: PropTypes.bool,
+  showStandards: PropTypes.bool,
+  arrowsDisabled: PropTypes.bool,
+};
+
+export default Scale;