@pie-element/match 4.7.2 → 4.7.3-next.1008

package/module/demo.js

@@ -1,75 +0,0 @@
-import Configure from './configure.js';
-import Element from './element.js';
-import * as controller from './controller.js';
-
-var model = (id, element) => ({
-  id,
-  element,
-  enableImages: true,
-  feedback: {
-    correct: {
-      type: 'none',
-      default: 'Correct'
-    },
-    partial: {
-      type: 'none',
-      default: 'Nearly'
-    },
-    incorrect: {
-      type: 'none',
-      default: 'Incorrect'
-    }
-  },
-  headers: ['Column 1', 'Column 2', 'Column 3'],
-  layout: 3,
-  lockChoiceOrder: true,
-  partialScoring: false,
-  choiceMode: 'radio',
-  rows: [
-    {
-      id: 1,
-      title: 'Question Text 1',
-      values: [false, false]
-    },
-    {
-      id: 2,
-      title: 'Question Text 2',
-      values: [false, false]
-    },
-    {
-      id: 3,
-      title: 'Question Text 3',
-      values: [false, false]
-    },
-    {
-      id: 4,
-      title: 'Question Text 4',
-      values: [false, false]
-    }
-  ],
-  promptEnabled: true,
-  prompt: 'Select correct answers.',
-});
-
-var generate = {
-	model: model
-};
-
-const { model: model$1 } = generate;
-
-var config = {
-  elements: {
-    'match-element': '../..'
-  },
-  models: [model$1('1', 'match-element')]
-};
-
-//Note: demo-el is a custom element loaded in the markup.
-      customElements.whenDefined('demo-el').then(() => {
-        config.models.forEach(m => {
-          const de = document.createElement('demo-el');
-          document.body.appendChild(de);
-          de.def = { tagName: m.element, Element, Configure, controller };
-          de.model = m;
-        });
-      });

package/module/element.js

@@ -1,591 +0,0 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_pie_lib__correct_answer_toggle, _dll_react_dom, _dll_pie_framework__pie_player_events, _dll_pie_lib__math_rendering, _dll_lodash} from "../../../@pie-ui/shared-lib@^4.3.3/module/index.js";
-function createCommonjsModule(fn, module) {
-  return (module = {
-    exports: {}
-  }, fn(module, module.exports), module.exports);
-}
-var classnames = createCommonjsModule(function (module) {
-  (function () {
-    var hasOwn = ({}).hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-const React = _dll_react;
-const PropTypes = _dll_prop_types;
-const {Radio: Radio} = _dll_material_ui__core;
-const {Checkbox: Checkbox} = _dll_material_ui__core;
-const {Typography: Typography} = _dll_material_ui__core;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const {color: color} = _dll_pie_lib__render_ui;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/match/src/answer-grid.jsx";
-class AnswerGrid extends React.Component {
-  constructor(...args) {
-    super(...args);
-    AnswerGrid.prototype.__init.call(this);
-    AnswerGrid.prototype.__init2.call(this);
-    AnswerGrid.prototype.__init3.call(this);
-  }
-  static __initStatic() {
-    this.propTypes = {
-      allowFeedback: PropTypes.bool.isRequired,
-      classes: PropTypes.object.isRequired,
-      correctAnswers: PropTypes.object,
-      view: PropTypes.bool.isRequired,
-      showCorrect: PropTypes.bool.isRequired,
-      disabled: PropTypes.bool.isRequired,
-      onAnswerChange: PropTypes.func.isRequired,
-      choiceMode: PropTypes.string.isRequired,
-      rows: PropTypes.array.isRequired,
-      headers: PropTypes.array.isRequired,
-      answers: PropTypes.object.isRequired
-    };
-  }
-  __init() {
-    this.onRowValueChange = (rowId, answerIndex) => event => {
-      const {onAnswerChange, choiceMode, answers} = this.props;
-      const newAnswers = {
-        ...answers
-      };
-      if (choiceMode === 'radio') {
-        for (let i = 0; i < newAnswers[rowId].length; i++) {
-          newAnswers[rowId][i] = false;
-        }
-      }
-      newAnswers[rowId][answerIndex] = event.target.checked;
-      onAnswerChange(newAnswers);
-    };
-  }
-  __init2() {
-    this.answerIsCorrect = (rowId, rowValue, rowValueIndex) => {
-      const {correctAnswers} = this.props;
-      return correctAnswers[rowId][rowValueIndex] === rowValue && rowValue === true;
-    };
-  }
-  __init3() {
-    this.answerIsIncorrect = (rowId, rowValue, rowValueIndex) => {
-      const {correctAnswers} = this.props;
-      return correctAnswers[rowId][rowValueIndex] === true && rowValue === false || correctAnswers[rowId][rowValueIndex] === false && rowValue === true;
-    };
-  }
-  render() {
-    const {allowFeedback, classes, showCorrect, headers, rows, choiceMode, answers, disabled, view} = this.props;
-    const Tag = choiceMode === 'radio' ? Radio : Checkbox;
-    if (!rows || rows.length === 0) {
-      return React.createElement('div', {
-        className: classes.controlsContainer,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 60
-        }
-      }, React.createElement(Typography, {
-        className: classes.empty,
-        component: "div",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 61
-        }
-      }, "There are currently no questions to show."));
-    }
-    return React.createElement('div', {
-      className: classes.controlsContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 68
-      }
-    }, React.createElement('table', {
-      className: classes.table,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 69
-      }
-    }, React.createElement('colgroup', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 70
-      }
-    }, headers.map((header, idx) => React.createElement('col', {
-      key: `col-${idx}`,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 71
-      }
-    }))), React.createElement('thead', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 74
-      }
-    }, React.createElement('tr', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 75
-      }
-    }, headers.map((header, idx) => React.createElement('th', {
-      className: classes.rowHeader,
-      key: `th-${idx}`,
-      'data-colno': `${idx}`,
-      scope: "row",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 77
-      }
-    }, React.createElement('div', {
-      className: classnames(classes.rowItem, {
-        [classes.questionText]: idx === 0
-      }),
-      dangerouslySetInnerHTML: {
-        __html: header
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 83
-      }
-    }))))), rows.map((row, idx) => React.createElement('tbody', {
-      key: `row-${idx}`,
-      role: "group",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 93
-      }
-    }, React.createElement('tr', {
-      className: classes.separator,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 94
-      }
-    }, React.createElement('td', {
-      key: `td-title-${idx}`,
-      'data-colno': '0',
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 95
-      }
-    }, React.createElement('div', {
-      className: classnames(classes.rowItem, classes.questionText),
-      dangerouslySetInnerHTML: {
-        __html: row.title
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 99
-      }
-    })), answers[row.id].map((rowItem, answerIndex) => React.createElement('td', {
-      key: `td-${idx}-${answerIndex}`,
-      className: classes.column,
-      'data-colno': `${answerIndex + 1}`,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 106
-      }
-    }, React.createElement('div', {
-      className: classes.rowItem,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 111
-      }
-    }, React.createElement(Tag, {
-      className: classnames({
-        [classes.correct]: allowFeedback && (showCorrect && rowItem === true || disabled && !view && this.answerIsCorrect(row.id, rowItem, answerIndex)),
-        [classes.tag]: true,
-        [classes.checked]: rowItem === true,
-        [classes.tagDisabled]: disabled,
-        [classes.incorrect]: allowFeedback && disabled && !view && this.answerIsIncorrect(row.id, rowItem, answerIndex)
-      }),
-      disabled: disabled,
-      onChange: this.onRowValueChange(row.id, answerIndex),
-      checked: rowItem === true,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 112
-      }
-    })))))))));
-  }
-}
-AnswerGrid.__initStatic();
-const styles = theme => ({
-  controlsContainer: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit
-  },
-  column: {
-    padding: '10px 20px 0'
-  },
-  correct: {
-    color: `${color.correct()} !important`
-  },
-  incorrect: {
-    color: `${color.incorrect()} !important`
-  },
-  empty: {
-    margin: theme.spacing.unit * 2
-  },
-  rowContainer: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  rowHeader: {
-    padding: 0
-  },
-  rowItem: {
-    padding: '12px',
-    textAlign: 'center'
-  },
-  separator: {
-    border: 0,
-    borderTop: `2.5px solid ${color.primaryLight()}`,
-    width: '100%'
-  },
-  tag: {
-    color: color.text(),
-    '&:hover': {
-      color: color.primaryLight()
-    }
-  },
-  checked: {
-    color: `${color.primary()} !important`
-  },
-  tagDisabled: {
-    color: color.disabled(),
-    cursor: 'not-allowed !important',
-    pointerEvents: 'initial !important',
-    opacity: 0.7,
-    '&:hover': {
-      color: color.disabled()
-    }
-  },
-  table: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-    marginBottom: 0
-  },
-  questionText: {
-    textAlign: 'left'
-  }
-});
-var AnswerGrid$1 = withStyles(styles)(AnswerGrid);
-const React$1 = _dll_react;
-const PropTypes$1 = _dll_prop_types;
-const CorrectAnswerToggle = _dll_pie_lib__correct_answer_toggle;
-const {color: color$1} = _dll_pie_lib__render_ui;
-const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
-const {Feedback: Feedback} = _dll_pie_lib__render_ui;
-const {hasText: hasText} = _dll_pie_lib__render_ui;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/match/src/main.jsx";
-class Main extends React$1.Component {
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes$1.object,
-      session: PropTypes$1.object.isRequired,
-      onSessionChange: PropTypes$1.func,
-      model: PropTypes$1.object.isRequired
-    };
-  }
-  constructor(props) {
-    super(props);
-    Main.prototype.__init.call(this);
-    Main.prototype.__init2.call(this);
-    Main.prototype.__init3.call(this);
-    Main.prototype.__init4.call(this);
-    Main.prototype.__init5.call(this);
-    this.state = {
-      session: {
-        ...props.session,
-        answers: props.session && props.session.answers || this.generateAnswers(props.model)
-      },
-      showCorrect: false
-    };
-    this.callOnSessionChange();
-  }
-  __init() {
-    this.generateAnswers = model => {
-      const {config} = model;
-      const answers = {};
-      config.rows.forEach(row => {
-        answers[row.id] = new Array(config.layout - 1).fill(false);
-      });
-      return answers;
-    };
-  }
-  __init2() {
-    this.isAnswerRegenerationRequired = nextProps => {
-      let isRequired = false;
-      if (this.props.model.config.choiceMode !== nextProps.model.config.choiceMode) {
-        isRequired = true;
-      }
-      if (this.props.model.config.layout !== nextProps.model.config.layout) {
-        isRequired = true;
-      }
-      if (this.props.model.config.rows.length !== nextProps.model.config.rows.length || nextProps.session.answers && nextProps.model.config.rows.length !== Object.keys(nextProps.session.answers).length) {
-        isRequired = true;
-      }
-      return isRequired || !nextProps.session.answers;
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const regenAnswers = this.isAnswerRegenerationRequired(nextProps);
-    this.setState(state => ({
-      session: {
-        ...nextProps.session,
-        answers: regenAnswers ? this.generateAnswers(nextProps.model) : nextProps.session.answers
-      },
-      showCorrect: this.props.model.disabled && !nextProps.model.disabled && state.showCorrect ? false : state.showCorrect
-    }), () => {
-      if (regenAnswers) this.callOnSessionChange();
-    });
-  }
-  __init3() {
-    this.callOnSessionChange = () => {
-      const {onSessionChange} = this.props;
-      if (onSessionChange) {
-        onSessionChange(this.state.session);
-      }
-    };
-  }
-  __init4() {
-    this.toggleShowCorrect = show => {
-      this.setState({
-        showCorrect: show
-      });
-    };
-  }
-  __init5() {
-    this.onAnswerChange = newAnswers => {
-      this.setState(state => ({
-        session: {
-          ...state.session,
-          answers: newAnswers
-        }
-      }), this.callOnSessionChange);
-    };
-  }
-  render() {
-    const {model, classes} = this.props;
-    const {showCorrect, session} = this.state;
-    return React$1.createElement('div', {
-      className: classes.mainContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 123
-      }
-    }, model.teacherInstructions && hasText(model.teacherInstructions) && React$1.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Teacher Instructions',
-        visible: 'Hide Teacher Instructions'
-      },
-      className: classes.collapsible,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 125
-      }
-    }, React$1.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: model.teacherInstructions
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 132
-      }
-    })), model.prompt && React$1.createElement('div', {
-      className: classes.prompt,
-      dangerouslySetInnerHTML: {
-        __html: model.prompt
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 139
-      }
-    }), React$1.createElement('div', {
-      className: classes.main,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 145
-      }
-    }, React$1.createElement(CorrectAnswerToggle, {
-      className: classes.toggle,
-      show: model.correctness && model.correctness.correctness && model.correctness.correctness !== 'correct',
-      toggled: showCorrect,
-      onToggle: this.toggleShowCorrect,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 146
-      }
-    }), React$1.createElement(AnswerGrid$1, {
-      showCorrect: showCorrect,
-      allowFeedback: model.allowFeedback,
-      correctAnswers: model.correctResponse,
-      disabled: model.disabled,
-      view: model.view,
-      onAnswerChange: this.onAnswerChange,
-      choiceMode: model.config.choiceMode,
-      answers: showCorrect ? model.correctResponse : session.answers,
-      headers: model.config.headers,
-      rows: model.config.rows,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 156
-      }
-    })), model.rationale && hasText(model.rationale) && React$1.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Rationale',
-        visible: 'Hide Rationale'
-      },
-      className: classes.collapsible,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 170
-      }
-    }, React$1.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: model.rationale
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 174
-      }
-    })), model.feedback && React$1.createElement(Feedback, {
-      correctness: model.correctness.correctness,
-      feedback: model.feedback,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 178
-      }
-    }));
-  }
-}
-Main.__initStatic();
-const styles$1 = theme => ({
-  mainContainer: {
-    color: color$1.text(),
-    backgroundColor: color$1.background(),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center'
-  },
-  main: {
-    width: '100%'
-  },
-  toggle: {
-    paddingBottom: theme.spacing.unit * 3
-  },
-  prompt: {
-    verticalAlign: 'middle',
-    marginBottom: theme.spacing.unit * 2
-  },
-  collapsible: {
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2
-  }
-});
-var Main$1 = withStyles$1(styles$1)(Main);
-const React$2 = _dll_react;
-const ReactDOM = _dll_react_dom;
-const {SessionChangedEvent: SessionChangedEvent} = _dll_pie_framework__pie_player_events;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const {get: get} = _dll_lodash;
-const isComplete = (session, model) => {
-  const rows = get(model, 'config.rows');
-  const ids = rows.map(r => r.id);
-  return ids.reduce((acc, id) => {
-    if (!acc) {
-      return false;
-    }
-    const arr = session.answers && session.answers[id];
-    const hasChoice = Array.isArray(arr) && arr.includes(true);
-    return hasChoice && acc;
-  }, true);
-};
-class Match extends HTMLElement {
-  constructor() {
-    super();
-  }
-  set model(m) {
-    this._model = m;
-    this._render();
-  }
-  set session(s) {
-    this._session = s;
-    this._render();
-  }
-  sessionChanged(s) {
-    this._session.answers = s.answers;
-    const complete = isComplete(this._session, this._model);
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));
-  }
-  connectedCallback() {
-    this._render();
-  }
-  _render() {
-    if (!this._model || !this._session) {
-      return;
-    }
-    const el = React$2.createElement(Main$1, {
-      model: this._model,
-      session: this._session,
-      onSessionChange: this.sessionChanged.bind(this)
-    });
-    ReactDOM.render(el, this, () => {
-      renderMath(this);
-    });
-  }
-}
-export default Match;
-export {Main$1 as Component, isComplete};

package/module/index.html

@@ -1,16 +0,0 @@
-
-  <!doctype html>
-  <html>
-    <head>
-      <title>@pie-element/match@4.5.9</title>
-      <link
-        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
-        rel="stylesheet"
-      />
-      <script
-        type="module"
-        src="https://unpkg.com/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
-      <script type="module" src="./demo.js"></script> 
-    </head>
-    <body></body>
-  </html>

package/module/manifest.json

@@ -1,10 +0,0 @@
-{
-  "name": "@pie-element/match",
-  "version": "4.5.9",
-  "modules": [
-    {
-      "name": "@pie-ui/shared-lib",
-      "version": "^4.3.3"
-    }
-  ]
-}