@pie-element/math-templated 0.1.0

package/src/author/index.ts

@@ -0,0 +1,195 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/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 debug from 'debug';
+import { defaults, isArray } from 'lodash-es';
+import {
+  ModelUpdatedEvent,
+  DeleteImageEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-element/shared-configure-events';
+
+import Main from './design';
+
+import sensibleDefaults from './defaults';
+import { processMarkup, createSlateMarkup } from './markupUtils';
+
+const log = debug('math-templated:configure');
+
+export default class MathTemplateConfigure extends HTMLElement {
+  static prepareModel = (model = {}) => {
+    const { validationDefault, allowTrailingZerosDefault, ignoreOrderDefault, responses = {} } = model;
+
+    const updatedResponses = Object.keys(responses).reduce((acc, responseId) => {
+      const correctResponse = responses[responseId];
+
+      acc[responseId] = {
+        ...correctResponse,
+        validation: correctResponse.validation || validationDefault,
+        allowTrailingZeros: correctResponse.allowTrailingZeros || allowTrailingZerosDefault,
+        ignoreOrder: correctResponse.ignoreOrder || ignoreOrderDefault,
+      };
+
+      return acc;
+    }, {});
+
+    const joinedObj = {
+      ...sensibleDefaults.model,
+      ...model,
+      responses: updatedResponses,
+    };
+
+    const slateMarkup = joinedObj.slateMarkup || createSlateMarkup(joinedObj.markup, joinedObj.responses);
+    const processedMarkup = processMarkup(slateMarkup);
+
+    // this was added to treat an exception, when the model has responses without the "answer" property
+    if (joinedObj.responses) {
+      Object.keys(joinedObj.responses).forEach((key) => {
+        if (isArray(joinedObj.responses[key])) {
+          joinedObj.responses[key] = (joinedObj.responses[key] || []).map((item, index) => {
+            if (!item.answer) {
+              log('Choice does not contain "answer" property, which is required.', item);
+              return { answer: `${index}`, ...item };
+            }
+
+            return item;
+          });
+        }
+      });
+    }
+
+    return {
+      ...joinedObj,
+      slateMarkup,
+      markup: processedMarkup,
+    };
+  };
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = MathTemplateConfigure.prepareModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = MathTemplateConfigure.prepareModel(s);
+    this._render();
+  }
+
+  set configuration(c) {
+    this._configuration = defaults(c, sensibleDefaults.configuration);
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (c.language?.enabled) {
+      if (c.languageChoices?.options?.length) {
+        this._model.language = c.languageChoices.options[0].value;
+      }
+    } else if (c.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language,
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this._render();
+  }
+
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = MathTemplateConfigure.prepareModel(m);
+    this._render();
+    this.dispatchModelUpdated(reset);
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = c;
+    this._render();
+  }
+
+  /** @param {done, progress, file} handler */
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    log('_render');
+
+    let element = React.createElement(Main, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged,
+      onConfigurationChanged: this.onConfigurationChanged,
+      disableSidePanel: this._disableSidePanel,
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this),
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
+    });
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/src/author/markupUtils.tsx

@@ -0,0 +1,55 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/src/markupUtils.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.
+ */
+
+// do not remove \t from \times, \triangle, \tan, \theta or \therefore
+const tSymbols = 'imes|riangle|an|heta|herefore';
+// do not remove \n from \nthroot, \nparallel, \ncong, \napprox, \neq, \ne or \nsim
+const nSymbols = 'throot|parallel|cong|approx|eq|e|sim';
+// match all \t and \n that are not part of math symbols that starts with \t or \n
+const matchTabAndNewLine = new RegExp(
+  `(\\t(?!${tSymbols}))|(\\n(?!${nSymbols}))|(\\\\t(?!${tSymbols}))|(\\\\n(?!${nSymbols}))`,
+  'g'
+);
+
+export const removeUnwantedCharacters = (markup) =>
+  markup.replace(matchTabAndNewLine, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
+
+const createElementFromHTML = (htmlString = '') => {
+  const div = document.createElement('div');
+
+  div.innerHTML = htmlString.trim();
+
+  return div;
+};
+
+export const processMarkup = (markup) => {
+  const newMarkup = removeUnwantedCharacters(markup || '');
+  const slateMarkup = createElementFromHTML(newMarkup || '');
+
+  slateMarkup.querySelectorAll('[data-type="math_templated"]')
+    .forEach((s) => s.replaceWith(`{{${s.dataset.index}}}`));
+
+  return slateMarkup.innerHTML;
+};
+
+const REGEX = /\{\{(\d+)\}\}/g;
+
+export const createSlateMarkup = (markup, responses) => {
+  if (!markup) {
+    return '';
+  }
+
+  const newMarkup = removeUnwantedCharacters(markup);
+
+  return newMarkup.replace(REGEX, (match, groupIndex) => {
+    const responseValue = responses[groupIndex]?.answer || '';
+    return `<span data-type="math_templated" data-index="${groupIndex}" data-value="${responseValue}"></span>`;
+  });
+};

package/src/author/response.tsx

@@ -0,0 +1,397 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/src/response.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 * as React from 'react';
+import PropTypes from 'prop-types';
+import { InputContainer } from '@pie-lib/config-ui';
+import { MathToolbar } from '@pie-lib/math-toolbar';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
+import InputLabel from '@mui/material/InputLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Delete from '@mui/icons-material/Delete';
+import { color } from '@pie-lib/render-ui';
+
+const ResponseContainer: any = styled(Card)(({ theme }) => ({
+  marginBottom: theme.spacing(2.5),
+  width: '100%',
+  minWidth: '548px',
+  border: `1px solid ${theme.palette.grey[700]}`,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+}));
+
+const StyledCardContent: any = styled(CardContent)(({ theme }) => ({
+  paddingBottom: `${theme.spacing(2)}px !important`,
+}));
+
+const StyledTitle: any = styled(Typography)({
+  fontWeight: 700,
+  fontSize: '1.2rem',
+  flex: 3,
+});
+
+const StyledSelectContainer: any = styled(InputContainer)(({ theme }) => ({
+  flex: 2,
+  '& > *:not(label)': {
+    marginTop: theme.spacing(1),
+  },
+}));
+
+const InputContainerWrapper: any = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+}));
+
+const TitleBar: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+const FlexContainer: any = styled('div')({
+  display: 'flex',
+});
+
+const AlternateButton: any = styled(Button)(({ theme }) => ({
+  border: `1px solid ${theme.palette.grey['A400']}`,
+  color: color.text(),
+}));
+
+const RemoveAlternateButton: any = styled(IconButton)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
+const ResponseBox: any = styled('div')(({ theme }) => ({
+  background: theme.palette.grey['A100'],
+  color: theme.palette.grey['A700'],
+  display: 'inline',
+  minWidth: '50px',
+  padding: '8px',
+  border: '1px solid #C0C3CF',
+}));
+
+const AlternateBar: any = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+const CustomColorCheckbox: any = styled(Checkbox)({
+  color: `${color.tertiary()} !important`,
+});
+
+// CSS for MathToolbar classNames (used as strings)
+if (typeof document !== 'undefined') {
+  const styleId = 'math-templated-response-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .response-editor {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-width: 500px;
+        max-width: 900px;
+        height: auto;
+        min-height: 40px;
+      }
+      .math-toolbar {
+        width: 100%;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+export class Response extends React.Component {
+  static propTypes = {
+    defaultResponse: PropTypes.bool,
+    error: PropTypes.object,
+    mode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    onResponseChange: PropTypes.func.isRequired,
+    onResponseDone: PropTypes.func.isRequired,
+    response: PropTypes.object.isRequired,
+    cIgnoreOrder: PropTypes.object.isRequired,
+    cAllowTrailingZeros: PropTypes.object.isRequired,
+    responseKey: PropTypes.number.isRequired,
+  };
+
+  static defaultProps = {
+    defaultResponse: false,
+    mode: '8',
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { response: { alternates } = {} } = props || {};
+    const alternatesLength = Object.keys(alternates || {}).length;
+
+    this.state = {
+      alternateIdCounter: alternatesLength + 1,
+      showKeypad: {
+        openCount: 0,
+        main: false,
+      },
+    };
+  }
+
+  onChange = (name) => (evt) => {
+    const { response, onResponseChange, responseKey } = this.props;
+    const newResponse = { ...response };
+
+    newResponse[name] = evt.target.value;
+
+    onResponseChange(newResponse, responseKey);
+  };
+
+  onConfigChanged = (name) => (evt) => {
+    const { response, onResponseChange, responseKey } = this.props;
+    const newResponse = { ...response };
+
+    newResponse[name] = evt.target.checked;
+
+    onResponseChange(newResponse, responseKey);
+  };
+
+  onLiteralOptionsChange = (name) => () => {
+    const { response, onResponseChange, responseKey } = this.props;
+    const newResponse = { ...response };
+
+    newResponse[name] = !response[name];
+
+    onResponseChange(newResponse, responseKey);
+  };
+
+  onAnswerChange: any = (answer) => {
+    const { response, onResponseChange, responseKey } = this.props;
+    const newResponse = { ...response };
+
+    newResponse.answer = answer;
+
+    onResponseChange(newResponse, responseKey);
+  };
+
+  onAlternateAnswerChange = (alternateId) => (answer) => {
+    const { response, onResponseChange, responseKey } = this.props;
+    const newResponse = { ...response };
+
+    newResponse.alternates[alternateId] = answer;
+
+    onResponseChange(newResponse, responseKey);
+  };
+
+  onAddAlternate: any = () => {
+    const { response, onResponseChange, responseKey } = this.props;
+    const { alternateIdCounter } = this.state;
+    const newResponse = { ...response };
+
+    if (!newResponse.alternates) {
+      newResponse.alternates = {};
+    }
+
+    newResponse.alternates[alternateIdCounter] = '';
+
+    onResponseChange(newResponse, responseKey);
+
+    this.setState({
+      alternateIdCounter: alternateIdCounter + 1,
+    });
+  };
+
+  onRemoveAlternate = (alternateId) => () => {
+    const { response, onResponseChange, responseKey } = this.props;
+    const newResponse = { ...response };
+
+    delete newResponse.alternates[alternateId];
+
+    onResponseChange(newResponse, responseKey);
+
+    this.setState((state) => ({
+      showKeypad: {
+        ...state.showKeypad,
+        openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount : state.showKeypad.openCount - 1,
+      },
+    }));
+  };
+
+  onDone: any = () => {
+    const { onResponseDone } = this.props;
+    this.setState((state) => ({
+      showKeypad: {
+        ...state.showKeypad,
+        openCount: state.showKeypad.openCount - 1,
+        main: false,
+      },
+    }));
+
+    onResponseDone();
+  };
+
+  onFocus: any = () => {
+    this.setState((state) => ({
+      showKeypad: {
+        ...state.showKeypad,
+        openCount: !state.showKeypad.main ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+        main: true,
+      },
+    }));
+  };
+
+  onAlternateFocus = (alternateId) => () => {
+    this.setState((state) => ({
+      showKeypad: {
+        ...state.showKeypad,
+        openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+        [alternateId]: true,
+      },
+    }));
+  };
+
+  onAlternateDone = (alternateId) => () => {
+    this.setState((state) => ({
+      showKeypad: {
+        ...state.showKeypad,
+        openCount: state.showKeypad.openCount - 1,
+        [alternateId]: false,
+      },
+    }));
+  };
+
+  render() {
+    const { mode, responseKey, response, cAllowTrailingZeros, cIgnoreOrder, error } = this.props;
+    const { showKeypad } = this.state;
+    const { validation, answer, alternates, ignoreOrder, allowTrailingZeros } = response;
+    const hasAlternates = Object.keys(alternates || {}).length > 0;
+    const classNames = {
+      editor: 'response-editor',
+      mathToolbar: 'math-toolbar',
+    };
+    const styles = {
+      minHeight: `${showKeypad.openCount > 0 ? 430 : 230}px`,
+    };
+    // add 1 to index to display R 1 instead of R 0
+    const keyToDisplay = `R ${parseInt(responseKey) + 1}`;
+
+    return (
+      <ResponseContainer style={styles}>
+        <StyledCardContent>
+          <TitleBar>
+            <StyledTitle component="div">
+              Response for <ResponseBox>{keyToDisplay}</ResponseBox>
+            </StyledTitle>
+
+            <StyledSelectContainer label="Validation">
+              <Select onChange={this.onChange('validation')} value={validation || 'literal'} MenuProps={{transitionDuration: { enter: 225, exit: 195 } }}>
+                <MenuItem value="literal">Literal Validation</MenuItem>
+                <MenuItem value="symbolic">Symbolic Validation</MenuItem>
+              </Select>
+            </StyledSelectContainer>
+          </TitleBar>
+
+          {validation === 'literal' && (
+            <FlexContainer>
+              {cAllowTrailingZeros.enabled && (
+                <FormControlLabel
+                  label={cAllowTrailingZeros.label}
+                  control={
+                    <CustomColorCheckbox
+                      checked={allowTrailingZeros}
+                      onChange={this.onLiteralOptionsChange('allowTrailingZeros')}
+                    />
+                  }
+                />
+              )}
+
+              {cIgnoreOrder.enabled && (
+                <FormControlLabel
+                  label={cIgnoreOrder.label}
+                  control={
+                    <CustomColorCheckbox
+                      checked={ignoreOrder}
+                      onChange={this.onLiteralOptionsChange('ignoreOrder')}
+                    />
+                  }
+                />
+              )}
+            </FlexContainer>
+          )}
+
+          <InputContainerWrapper>
+            <InputLabel>Correct Answer</InputLabel>
+            <MathToolbar
+              keypadMode={mode}
+              classNames={classNames}
+              controlledKeypad
+              showKeypad={showKeypad.main}
+              latex={answer || ''}
+              onChange={this.onAnswerChange}
+              onFocus={this.onFocus}
+              onDone={this.onDone}
+              error={error && error.answer}
+            />
+            {error && error.answer ? <ErrorText>{error.answer}</ErrorText> : null}
+          </InputContainerWrapper>
+
+          {hasAlternates &&
+            Object.keys(alternates).map((alternateId, altIdx) => (
+              <InputContainerWrapper key={alternateId}>
+                <InputLabel>
+                  Alternate
+                  {Object.keys(alternates).length > 1 ? ` ${altIdx + 1}` : ''}
+                </InputLabel>
+                <AlternateBar>
+                  <MathToolbar
+                    classNames={classNames}
+                    controlledKeypad
+                    keypadMode={mode}
+                    showKeypad={showKeypad[alternateId] || false}
+                    latex={alternates[alternateId] || ''}
+                    onChange={this.onAlternateAnswerChange(alternateId)}
+                    onFocus={this.onAlternateFocus(alternateId)}
+                    onDone={this.onAlternateDone(alternateId)}
+                    error={error && error[alternateId]}
+                  />
+                  <RemoveAlternateButton
+                    onClick={this.onRemoveAlternate(alternateId)}
+                    size="large">
+                    <Delete />
+                  </RemoveAlternateButton>
+                </AlternateBar>
+                {error && error[alternateId] ? <ErrorText>{error[alternateId]}</ErrorText> : null}
+              </InputContainerWrapper>
+            ))}
+
+          <AlternateButton type="primary" onClick={this.onAddAlternate}>
+            ADD ALTERNATE
+          </AlternateButton>
+        </StyledCardContent>
+      </ResponseContainer>
+    );
+  }
+}
+
+export default Response;

package/src/author/utils.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/math-templated/configure/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 generateValidationMessage = (config) => {
+  const { maxResponseAreas } = config;
+
+  const responseAreasMessage =
+    '\nCorrect answers should not be blank.' +
+    '\nEach answer defined for a response area should be unique.' +
+    '\nThere should be at least 1 ' +
+    (maxResponseAreas ? `and at most ${maxResponseAreas} ` : '') +
+    'response area' +
+    (maxResponseAreas ? 's' : '') +
+    ' defined.';
+
+  return 'Validation requirements:' + responseAreasMessage;
+};

package/src/controller/defaults.ts

@@ -0,0 +1,31 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/math-templated/controller/src/defaults.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.
+ */
+
+// Should be exactly the same as configure/defaults.js
+export default {
+  model: {
+    allowTrailingZerosDefault: false,
+    equationEditor: '8',
+    ignoreOrderDefault: false,
+    markup: '',
+    playerSpellCheckEnabled: true,
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    responses: {},
+    spellCheckEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    validationDefault: 'literal',
+  },
+  configuration: {},
+};