@pie-element/multiple-choice 5.9.2 → 5.9.3-next.1016

package/module/element.js

@@ -1,1221 +0,0 @@
-import {_dll_react, _dll_react_transition_group, _dll_material_ui__core_styles, _dll_prop_types, _dll_pie_lib__render_ui, _dll_material_ui__core, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_react_dom, _dll_pie_lib__math_rendering} 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 {TransitionGroup: TransitionGroup} = _dll_react_transition_group;
-const {CSSTransition: CSSTransition} = _dll_react_transition_group;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const PropTypes = _dll_prop_types;
-const {color: color} = _dll_pie_lib__render_ui;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/multiple-choice/src/feedback-tick.jsx";
-const stylesheet = {
-  incorrect: {
-    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`
-  },
-  correct: {
-    fill: `var(--feedback-correct-bg-color, ${color.correct()})`
-  },
-  feedbackTick: {
-    width: '33px',
-    height: '33px',
-    '& svg': {
-      position: 'absolute',
-      display: 'inline-block',
-      width: '33px',
-      height: '33px',
-      verticalAlign: 'middle',
-      '& hide': {
-        display: 'none'
-      }
-    }
-  },
-  feedbackTickEnter: {
-    opacity: '0',
-    left: '-50px'
-  },
-  feedbackTickEnterActive: {
-    opacity: '1',
-    left: '0px',
-    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms'
-  },
-  feedbackTickLeave: {
-    opacity: '1',
-    left: '0px'
-  },
-  feedbackTickLeaveActive: {
-    opacity: '0',
-    left: '-50px',
-    transition: 'left 300ms ease-in, opacity 300ms'
-  }
-};
-class FeedbackTick extends React.Component {
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes.object.isRequired,
-      correctness: PropTypes.string
-    };
-  }
-  constructor(props) {
-    super(props);
-    this.incorrectIcon = React.createElement('svg', {
-      key: "1",
-      preserveAspectRatio: "xMinYMin meet",
-      x: "0px",
-      y: "0px",
-      viewBox: "0 0 44 40",
-      style: {
-        enableBackground: 'new 0 0 44 40'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 56
-      }
-    }, React.createElement('g', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 64
-      }
-    }, React.createElement('rect', {
-      x: "11",
-      y: "17.3",
-      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
-      className: this.props.classes.incorrect,
-      width: "16.6",
-      height: "3.7",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 65
-      }
-    }), React.createElement('rect', {
-      x: "17.4",
-      y: "10.7",
-      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
-      className: this.props.classes.incorrect,
-      width: "3.7",
-      height: "16.6",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 73
-      }
-    })));
-    this.correctIcon = React.createElement('svg', {
-      key: "2",
-      preserveAspectRatio: "xMinYMin meet",
-      version: "1.1",
-      x: "0px",
-      y: "0px",
-      viewBox: "0 0 44 40",
-      style: {
-        enableBackground: 'new 0 0 44 40'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 86
-      }
-    }, React.createElement('polygon', {
-      className: this.props.classes.correct,
-      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",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 95
-      }
-    }));
-  }
-  render() {
-    const {correctness, classes} = this.props;
-    const icon = (() => {
-      if (correctness === 'incorrect') {
-        return this.incorrectIcon;
-      } else if (correctness === 'correct') {
-        return this.correctIcon;
-      }
-    })();
-    return React.createElement('div', {
-      className: classes.feedbackTick,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 115
-      }
-    }, React.createElement(TransitionGroup, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 116
-      }
-    }, correctness && React.createElement(CSSTransition, {
-      classNames: {
-        enter: classes.feedbackTickEnter,
-        enterActive: classes.feedbackTickEnterActive,
-        exit: classes.feedbackTickLeave,
-        exitActive: classes.feedbackTickLeaveActive
-      },
-      timeout: {
-        enter: 700,
-        exit: 300
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 118
-      }
-    }, icon)));
-  }
-}
-FeedbackTick.__initStatic();
-var FeedbackTick$1 = withStyles(stylesheet, {
-  name: 'FeedbackTick'
-})(FeedbackTick);
-const {FormControlLabel: FormControlLabel} = _dll_material_ui__core;
-const {Checkbox: Checkbox} = _dll_material_ui__core;
-const {Radio: Radio} = _dll_material_ui__core;
-const React$1 = _dll_react;
-const PropTypes$1 = _dll_prop_types;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const {Feedback: Feedback} = _dll_pie_lib__render_ui;
-const {color: color$1} = _dll_pie_lib__render_ui;
-const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__render_ui;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/multiple-choice/src/choice-input.jsx";
-const styleSheet = () => ({
-  row: {
-    display: 'flex',
-    alignItems: 'center',
-    backgroundColor: color$1.background()
-  },
-  checkboxHolder: {
-    display: 'flex',
-    alignItems: 'center',
-    backgroundColor: color$1.background(),
-    flex: 1,
-    '& label': {
-      color: color$1.text()
-    }
-  }
-});
-const formStyleSheet = {
-  label: {
-    color: `${color$1.text()} !important`,
-    backgroundColor: color$1.background()
-  }
-};
-const StyledFormControlLabel = withStyles$1(formStyleSheet, {
-  name: 'FormControlLabel'
-})(props => React$1.createElement(FormControlLabel, {
-  ...props,
-  classes: {
-    label: props.classes.label
-  },
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$1,
-    lineNumber: 39
-  }
-}));
-const CLASS_NAME = 'multiple-choice-component';
-const colorStyle = (varName, fallback) => ({
-  [`&.${CLASS_NAME}`]: {
-    color: `var(--choice-input-${varName}, ${fallback}) !important`
-  }
-});
-const inputStyles = {
-  'correct-root': colorStyle('correct-color', color$1.text()),
-  'correct-checked': colorStyle('correct-selected-color', color$1.correct()),
-  'correct-disabled': colorStyle('correct-disabled-color', color$1.disabled()),
-  'incorrect-root': colorStyle('incorrect-color', color$1.incorrect()),
-  'incorrect-checked': colorStyle('incorrect-checked', color$1.incorrect()),
-  'incorrect-disabled': colorStyle('incorrect-disabled-color', color$1.disabled()),
-  root: {
-    ...colorStyle('color', color$1.text()),
-    '&:hover': {
-      color: `${color$1.primaryLight()} !important`
-    }
-  },
-  checked: colorStyle('selected-color', color$1.primary()),
-  disabled: {
-    ...colorStyle('disabled-color', color$1.text()),
-    opacity: 0.6,
-    cursor: 'not-allowed !important',
-    pointerEvents: 'initial !important'
-  }
-};
-const StyledCheckbox = withStyles$1(inputStyles)(props => {
-  const {correctness, classes, checked, onChange, disabled} = props;
-  const key = k => correctness ? `${correctness}-${k}` : k;
-  const resolved = {
-    root: classes[key('root')],
-    checked: classes[key('checked')],
-    disabled: classes[key('disabled')]
-  };
-  const miniProps = {
-    checked,
-    onChange,
-    disabled
-  };
-  return React$1.createElement(Checkbox, {
-    ...miniProps,
-    className: CLASS_NAME,
-    classes: {
-      root: resolved.root,
-      checked: resolved.checked,
-      disabled: resolved.disabled
-    },
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 85
-    }
-  });
-});
-const StyledRadio = withStyles$1(inputStyles)(props => {
-  const {correctness, classes, checked, onChange, disabled} = props;
-  const key = k => correctness ? `${correctness}-${k}` : k;
-  const resolved = {
-    root: classes[key('root')],
-    checked: classes[key('checked')],
-    disabled: classes[key('disabled')]
-  };
-  const miniProps = {
-    checked,
-    onChange,
-    disabled
-  };
-  return React$1.createElement(Radio, {
-    ...miniProps,
-    className: CLASS_NAME,
-    classes: {
-      root: resolved.root,
-      checked: resolved.checked
-    },
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 110
-    }
-  });
-});
-class ChoiceInput extends React$1.Component {
-  static __initStatic() {
-    this.propTypes = {
-      choiceMode: PropTypes$1.oneOf(['radio', 'checkbox']),
-      displayKey: PropTypes$1.string.isRequired,
-      checked: PropTypes$1.bool.isRequired,
-      correctness: PropTypes$1.string,
-      disabled: PropTypes$1.bool.isRequired,
-      feedback: PropTypes$1.string,
-      label: PropTypes$1.string.isRequired,
-      rationale: PropTypes$1.string,
-      onChange: PropTypes$1.func.isRequired,
-      value: PropTypes$1.string.isRequired,
-      classes: PropTypes$1.object,
-      className: PropTypes$1.string
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {
-      rationale: null,
-      checked: false
-    };
-  }
-  constructor(props) {
-    super(props);
-    this.onToggleChoice = this.onToggleChoice.bind(this);
-  }
-  onToggleChoice() {
-    this.props.onChange({
-      value: this.props.value,
-      selected: !this.props.checked
-    });
-  }
-  render() {
-    const {choiceMode, disabled, displayKey, feedback, label, checked, correctness, classes, className, rationale} = this.props;
-    const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
-    const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
-    return React$1.createElement('div', {
-      className: classnames(className, 'corespring-' + classSuffix),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 172
-      }
-    }, React$1.createElement('div', {
-      className: classes.row,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 173
-      }
-    }, React$1.createElement(FeedbackTick$1, {
-      correctness: correctness,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 174
-      }
-    }), React$1.createElement('div', {
-      className: classes.checkboxHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 175
-      }
-    }, React$1.createElement(StyledFormControlLabel, {
-      disabled: disabled,
-      label: displayKey ? displayKey + '. ' : '',
-      control: React$1.createElement(Tag, {
-        checked: checked,
-        correctness: correctness,
-        onChange: this.onToggleChoice,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 180
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 176
-      }
-    }), React$1.createElement(PreviewPrompt, {
-      className: "label",
-      onClick: this.onToggleChoice,
-      prompt: label,
-      tagName: "span",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 187
-      }
-    }))), rationale && React$1.createElement(PreviewPrompt, {
-      className: "rationale",
-      prompt: rationale,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 196
-      }
-    }), React$1.createElement(Feedback, {
-      feedback: feedback,
-      correctness: correctness,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 198
-      }
-    }));
-  }
-}
-ChoiceInput.__initStatic();
-ChoiceInput.__initStatic2();
-var ChoiceInput$1 = withStyles$1(styleSheet)(ChoiceInput);
-const React$2 = _dll_react;
-const PropTypes$2 = _dll_prop_types;
-const CorrectAnswerToggle = _dll_pie_lib__correct_answer_toggle;
-const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
-const {color: color$2} = _dll_pie_lib__render_ui;
-const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
-const {PreviewPrompt: PreviewPrompt$1} = _dll_pie_lib__render_ui;
-const _jsxFileName$2 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/multiple-choice/src/multiple-choice.jsx";
-class Choice extends React$2.Component {
-  constructor(...args) {
-    super(...args);
-    Choice.prototype.__init.call(this);
-  }
-  __init() {
-    this.onChange = choice => {
-      const {disabled, onChoiceChanged} = this.props;
-      if (!disabled) {
-        onChoiceChanged(choice);
-      }
-    };
-  }
-  render() {
-    const {choice, index, choicesLength, showCorrect, isEvaluateMode, choiceMode, disabled, checked, correctness, displayKey, classes} = this.props;
-    const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
-    const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
-    const choiceProps = {
-      ...choice,
-      checked,
-      choiceMode,
-      disabled,
-      feedback,
-      correctness,
-      displayKey,
-      onChange: this.onChange
-    };
-    const names = classnames(classes.choice, {
-      [classes.last]: index === choicesLength - 1
-    });
-    return React$2.createElement('div', {
-      className: choiceClass,
-      key: index,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 54
-      }
-    }, React$2.createElement(ChoiceInput$1, {
-      ...choiceProps,
-      className: names,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 55
-      }
-    }));
-  }
-}
-Choice.propTypes = {
-  choiceMode: PropTypes$2.oneOf(['radio', 'checkbox']),
-  choice: PropTypes$2.object,
-  disabled: PropTypes$2.bool.isRequired,
-  onChoiceChanged: PropTypes$2.func.isRequired,
-  classes: PropTypes$2.object.isRequired,
-  index: PropTypes$2.number,
-  choicesLength: PropTypes$2.number,
-  showCorrect: PropTypes$2.bool,
-  isEvaluateMode: PropTypes$2.bool,
-  checked: PropTypes$2.bool,
-  correctness: PropTypes$2.string,
-  displayKey: PropTypes$2.string
-};
-const StyledChoice = withStyles$2({
-  choice: {
-    paddingTop: '20px',
-    paddingBottom: '10px',
-    borderBottom: '1px solid #E0DEE0'
-  },
-  last: {
-    borderBottom: 'none'
-  }
-})(Choice);
-const styles = {
-  corespringChoice: {
-    backgroundColor: color$2.background(),
-    padding: '5px',
-    '& *': {
-      '-webkit-font-smoothing': 'antialiased'
-    }
-  }
-};
-class MultipleChoice extends React$2.Component {
-  static __initStatic() {
-    this.propTypes = {
-      mode: PropTypes$2.oneOf(['gather', 'view', 'evaluate']),
-      choiceMode: PropTypes$2.oneOf(['radio', 'checkbox']),
-      keyMode: PropTypes$2.oneOf(['numbers', 'letters', 'none']),
-      choices: PropTypes$2.array,
-      prompt: PropTypes$2.string,
-      teacherInstructions: PropTypes$2.string,
-      session: PropTypes$2.object,
-      disabled: PropTypes$2.bool.isRequired,
-      onChoiceChanged: PropTypes$2.func.isRequired,
-      responseCorrect: PropTypes$2.bool,
-      classes: PropTypes$2.object.isRequired,
-      correctResponse: PropTypes$2.array
-    };
-  }
-  constructor(props) {
-    super(props);
-    MultipleChoice.prototype.__init2.call(this);
-    this.state = {
-      showCorrect: false
-    };
-    this.onToggle = this.onToggle.bind(this);
-  }
-  onToggle() {
-    if (this.props.mode === 'evaluate') {
-      this.setState({
-        showCorrect: !this.state.showCorrect
-      });
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.correctResponse) {
-      this.setState({
-        showCorrect: false
-      });
-    }
-  }
-  isSelected(value) {
-    const sessionValue = this.props.session && this.props.session.value;
-    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
-  }
-  indexToSymbol(index) {
-    if (this.props.keyMode === 'numbers') {
-      return `${index + 1}`;
-    }
-    if (this.props.keyMode === 'letters') {
-      return String.fromCharCode(97 + index).toUpperCase();
-    }
-    return '';
-  }
-  __init2() {
-    this.getCorrectness = (choice = {}) => {
-      const isCorrect = choice.correct;
-      const isChecked = this.isSelected(choice.value);
-      if (this.state.showCorrect) {
-        return isCorrect ? 'correct' : undefined;
-      }
-      if (isCorrect) {
-        if (isChecked) {
-          return 'correct';
-        } else {
-          return 'incorrect';
-        }
-      } else {
-        if (isChecked) {
-          return 'incorrect';
-        } else {
-          return undefined;
-        }
-      }
-    };
-  }
-  render() {
-    const {mode, disabled, choices = [], choiceMode, prompt, onChoiceChanged, responseCorrect, teacherInstructions, classes} = this.props;
-    const {showCorrect} = this.state;
-    const isEvaluateMode = mode === 'evaluate';
-    return React$2.createElement('div', {
-      className: classes.corespringChoice,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 200
-      }
-    }, teacherInstructions && React$2.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Teacher Instructions',
-        visible: 'Hide Teacher Instructions'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 202
-      }
-    }, React$2.createElement(PreviewPrompt$1, {
-      className: "prompt",
-      prompt: teacherInstructions,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 208
-      }
-    })), React$2.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 211
-      }
-    }), React$2.createElement(CorrectAnswerToggle, {
-      show: isEvaluateMode && !responseCorrect,
-      toggled: this.state.showCorrect,
-      onToggle: this.onToggle.bind(this),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 212
-      }
-    }), React$2.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 217
-      }
-    }), React$2.createElement(PreviewPrompt$1, {
-      className: "prompt",
-      prompt: prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 218
-      }
-    }), choices.map((choice, index) => React$2.createElement(StyledChoice, {
-      key: `choice-${index}`,
-      choice: choice,
-      index: index,
-      choicesLength: choices.length,
-      showCorrect: showCorrect,
-      isEvaluateMode: isEvaluateMode,
-      choiceMode: choiceMode,
-      disabled: disabled,
-      onChoiceChanged: onChoiceChanged,
-      checked: showCorrect ? choice.correct || false : this.isSelected(choice.value),
-      correctness: isEvaluateMode ? this.getCorrectness(choice) : undefined,
-      displayKey: this.indexToSymbol(index),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 220
-      }
-    })));
-  }
-}
-MultipleChoice.__initStatic();
-MultipleChoice.defaultProps = {
-  session: {
-    value: []
-  }
-};
-var MultipleChoice$1 = withStyles$2(styles)(MultipleChoice);
-const React$3 = _dll_react;
-const PropTypes$3 = _dll_prop_types;
-const {withStyles: withStyles$3} = _dll_material_ui__core_styles;
-const {createMuiTheme: createMuiTheme} = _dll_material_ui__core_styles;
-const {MuiThemeProvider: MuiThemeProvider} = _dll_material_ui__core_styles;
-const {PreviewLayout: PreviewLayout} = _dll_pie_lib__render_ui;
-const _jsxFileName$3 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/multiple-choice/src/main.jsx";
-class Main extends React$3.Component {
-  static __initStatic() {
-    this.propTypes = {
-      model: PropTypes$3.object,
-      session: PropTypes$3.object,
-      onChoiceChanged: PropTypes$3.func,
-      classes: PropTypes$3.object.isRequired
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {
-      model: {},
-      session: {}
-    };
-  }
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    const {model, onChoiceChanged, session, classes} = this.props;
-    return React$3.createElement(PreviewLayout, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 30
-      }
-    }, model.partLabel && React$3.createElement('p', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 31
-      }
-    }, model.partLabel), React$3.createElement('div', {
-      className: classnames(classes.root, classes[model.className]),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 32
-      }
-    }, React$3.createElement(MultipleChoice$1, {
-      ...model,
-      session: session,
-      onChoiceChanged: onChoiceChanged,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 33
-      }
-    })));
-  }
-}
-Main.__initStatic();
-Main.__initStatic2();
-const Styled = withStyles$3({}, {
-  name: 'Main'
-})(Main);
-const theme = createMuiTheme({
-  typography: {
-    useNextVariants: true
-  }
-});
-const Root = props => React$3.createElement(MuiThemeProvider, {
-  theme: theme,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$3,
-    lineNumber: 53
-  }
-}, React$3.createElement(Styled, {
-  ...props,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$3,
-    lineNumber: 54
-  }
-}));
-var s = 1000;
-var m = s * 60;
-var h = m * 60;
-var d = h * 24;
-var w = d * 7;
-var y = d * 365.25;
-var ms = function (val, options) {
-  options = options || ({});
-  var type = typeof val;
-  if (type === 'string' && val.length > 0) {
-    return parse(val);
-  } else if (type === 'number' && isFinite(val)) {
-    return options.long ? fmtLong(val) : fmtShort(val);
-  }
-  throw new Error('val is not a non-empty string or a valid number. val=' + JSON.stringify(val));
-};
-function parse(str) {
-  str = String(str);
-  if (str.length > 100) {
-    return;
-  }
-  var match = (/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i).exec(str);
-  if (!match) {
-    return;
-  }
-  var n = parseFloat(match[1]);
-  var type = (match[2] || 'ms').toLowerCase();
-  switch (type) {
-    case 'years':
-    case 'year':
-    case 'yrs':
-    case 'yr':
-    case 'y':
-      return n * y;
-    case 'weeks':
-    case 'week':
-    case 'w':
-      return n * w;
-    case 'days':
-    case 'day':
-    case 'd':
-      return n * d;
-    case 'hours':
-    case 'hour':
-    case 'hrs':
-    case 'hr':
-    case 'h':
-      return n * h;
-    case 'minutes':
-    case 'minute':
-    case 'mins':
-    case 'min':
-    case 'm':
-      return n * m;
-    case 'seconds':
-    case 'second':
-    case 'secs':
-    case 'sec':
-    case 's':
-      return n * s;
-    case 'milliseconds':
-    case 'millisecond':
-    case 'msecs':
-    case 'msec':
-    case 'ms':
-      return n;
-    default:
-      return undefined;
-  }
-}
-function fmtShort(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return Math.round(ms / d) + 'd';
-  }
-  if (msAbs >= h) {
-    return Math.round(ms / h) + 'h';
-  }
-  if (msAbs >= m) {
-    return Math.round(ms / m) + 'm';
-  }
-  if (msAbs >= s) {
-    return Math.round(ms / s) + 's';
-  }
-  return ms + 'ms';
-}
-function fmtLong(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return plural(ms, msAbs, d, 'day');
-  }
-  if (msAbs >= h) {
-    return plural(ms, msAbs, h, 'hour');
-  }
-  if (msAbs >= m) {
-    return plural(ms, msAbs, m, 'minute');
-  }
-  if (msAbs >= s) {
-    return plural(ms, msAbs, s, 'second');
-  }
-  return ms + ' ms';
-}
-function plural(ms, msAbs, n, name) {
-  var isPlural = msAbs >= n * 1.5;
-  return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');
-}
-function setup(env) {
-  createDebug.debug = createDebug;
-  createDebug.default = createDebug;
-  createDebug.coerce = coerce;
-  createDebug.disable = disable;
-  createDebug.enable = enable;
-  createDebug.enabled = enabled;
-  createDebug.humanize = ms;
-  createDebug.destroy = destroy;
-  Object.keys(env).forEach(key => {
-    createDebug[key] = env[key];
-  });
-  createDebug.names = [];
-  createDebug.skips = [];
-  createDebug.formatters = {};
-  function selectColor(namespace) {
-    let hash = 0;
-    for (let i = 0; i < namespace.length; i++) {
-      hash = (hash << 5) - hash + namespace.charCodeAt(i);
-      hash |= 0;
-    }
-    return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
-  }
-  createDebug.selectColor = selectColor;
-  function createDebug(namespace) {
-    let prevTime;
-    let enableOverride = null;
-    function debug(...args) {
-      if (!debug.enabled) {
-        return;
-      }
-      const self = debug;
-      const curr = Number(new Date());
-      const ms = curr - (prevTime || curr);
-      self.diff = ms;
-      self.prev = prevTime;
-      self.curr = curr;
-      prevTime = curr;
-      args[0] = createDebug.coerce(args[0]);
-      if (typeof args[0] !== 'string') {
-        args.unshift('%O');
-      }
-      let index = 0;
-      args[0] = args[0].replace(/%([a-zA-Z%])/g, (match, format) => {
-        if (match === '%%') {
-          return '%';
-        }
-        index++;
-        const formatter = createDebug.formatters[format];
-        if (typeof formatter === 'function') {
-          const val = args[index];
-          match = formatter.call(self, val);
-          args.splice(index, 1);
-          index--;
-        }
-        return match;
-      });
-      createDebug.formatArgs.call(self, args);
-      const logFn = self.log || createDebug.log;
-      logFn.apply(self, args);
-    }
-    debug.namespace = namespace;
-    debug.useColors = createDebug.useColors();
-    debug.color = createDebug.selectColor(namespace);
-    debug.extend = extend;
-    debug.destroy = createDebug.destroy;
-    Object.defineProperty(debug, 'enabled', {
-      enumerable: true,
-      configurable: false,
-      get: () => enableOverride === null ? createDebug.enabled(namespace) : enableOverride,
-      set: v => {
-        enableOverride = v;
-      }
-    });
-    if (typeof createDebug.init === 'function') {
-      createDebug.init(debug);
-    }
-    return debug;
-  }
-  function extend(namespace, delimiter) {
-    const newDebug = createDebug(this.namespace + (typeof delimiter === 'undefined' ? ':' : delimiter) + namespace);
-    newDebug.log = this.log;
-    return newDebug;
-  }
-  function enable(namespaces) {
-    createDebug.save(namespaces);
-    createDebug.names = [];
-    createDebug.skips = [];
-    let i;
-    const split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
-    const len = split.length;
-    for (i = 0; i < len; i++) {
-      if (!split[i]) {
-        continue;
-      }
-      namespaces = split[i].replace(/\*/g, '.*?');
-      if (namespaces[0] === '-') {
-        createDebug.skips.push(new RegExp('^' + namespaces.substr(1) + '$'));
-      } else {
-        createDebug.names.push(new RegExp('^' + namespaces + '$'));
-      }
-    }
-  }
-  function disable() {
-    const namespaces = [...createDebug.names.map(toNamespace), ...createDebug.skips.map(toNamespace).map(namespace => '-' + namespace)].join(',');
-    createDebug.enable('');
-    return namespaces;
-  }
-  function enabled(name) {
-    if (name[name.length - 1] === '*') {
-      return true;
-    }
-    let i;
-    let len;
-    for ((i = 0, len = createDebug.skips.length); i < len; i++) {
-      if (createDebug.skips[i].test(name)) {
-        return false;
-      }
-    }
-    for ((i = 0, len = createDebug.names.length); i < len; i++) {
-      if (createDebug.names[i].test(name)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function toNamespace(regexp) {
-    return regexp.toString().substring(2, regexp.toString().length - 2).replace(/\.\*\?$/, '*');
-  }
-  function coerce(val) {
-    if (val instanceof Error) {
-      return val.stack || val.message;
-    }
-    return val;
-  }
-  function destroy() {
-    console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
-  }
-  createDebug.enable(createDebug.load());
-  return createDebug;
-}
-var common = setup;
-var browser = createCommonjsModule(function (module, exports) {
-  exports.formatArgs = formatArgs;
-  exports.save = save;
-  exports.load = load;
-  exports.useColors = useColors;
-  exports.storage = localstorage();
-  exports.destroy = (() => {
-    let warned = false;
-    return () => {
-      if (!warned) {
-        warned = true;
-        console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
-      }
-    };
-  })();
-  exports.colors = ['#0000CC', '#0000FF', '#0033CC', '#0033FF', '#0066CC', '#0066FF', '#0099CC', '#0099FF', '#00CC00', '#00CC33', '#00CC66', '#00CC99', '#00CCCC', '#00CCFF', '#3300CC', '#3300FF', '#3333CC', '#3333FF', '#3366CC', '#3366FF', '#3399CC', '#3399FF', '#33CC00', '#33CC33', '#33CC66', '#33CC99', '#33CCCC', '#33CCFF', '#6600CC', '#6600FF', '#6633CC', '#6633FF', '#66CC00', '#66CC33', '#9900CC', '#9900FF', '#9933CC', '#9933FF', '#99CC00', '#99CC33', '#CC0000', '#CC0033', '#CC0066', '#CC0099', '#CC00CC', '#CC00FF', '#CC3300', '#CC3333', '#CC3366', '#CC3399', '#CC33CC', '#CC33FF', '#CC6600', '#CC6633', '#CC9900', '#CC9933', '#CCCC00', '#CCCC33', '#FF0000', '#FF0033', '#FF0066', '#FF0099', '#FF00CC', '#FF00FF', '#FF3300', '#FF3333', '#FF3366', '#FF3399', '#FF33CC', '#FF33FF', '#FF6600', '#FF6633', '#FF9900', '#FF9933', '#FFCC00', '#FFCC33'];
-  function useColors() {
-    if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
-      return true;
-    }
-    if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
-      return false;
-    }
-    return typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance || typeof window !== 'undefined' && window.console && (window.console.firebug || window.console.exception && window.console.table) || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31 || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/);
-  }
-  function formatArgs(args) {
-    args[0] = (this.useColors ? '%c' : '') + this.namespace + (this.useColors ? ' %c' : ' ') + args[0] + (this.useColors ? '%c ' : ' ') + '+' + module.exports.humanize(this.diff);
-    if (!this.useColors) {
-      return;
-    }
-    const c = 'color: ' + this.color;
-    args.splice(1, 0, c, 'color: inherit');
-    let index = 0;
-    let lastC = 0;
-    args[0].replace(/%[a-zA-Z%]/g, match => {
-      if (match === '%%') {
-        return;
-      }
-      index++;
-      if (match === '%c') {
-        lastC = index;
-      }
-    });
-    args.splice(lastC, 0, c);
-  }
-  exports.log = console.debug || console.log || (() => {});
-  function save(namespaces) {
-    try {
-      if (namespaces) {
-        exports.storage.setItem('debug', namespaces);
-      } else {
-        exports.storage.removeItem('debug');
-      }
-    } catch (error) {}
-  }
-  function load() {
-    let r;
-    try {
-      r = exports.storage.getItem('debug');
-    } catch (error) {}
-    if (!r && typeof process !== 'undefined' && ('env' in process)) {
-      r = process.env.DEBUG;
-    }
-    return r;
-  }
-  function localstorage() {
-    try {
-      return localStorage;
-    } catch (error) {}
-  }
-  module.exports = common(exports);
-  const {formatters} = module.exports;
-  formatters.j = function (v) {
-    try {
-      return JSON.stringify(v);
-    } catch (error) {
-      return '[UnexpectedJSONParseError]: ' + error.message;
-    }
-  };
-});
-browser.formatArgs;
-browser.save;
-browser.load;
-browser.useColors;
-browser.storage;
-browser.destroy;
-browser.colors;
-browser.log;
-const {concat: concat} = _dll_lodash;
-const {uniq: uniq} = _dll_lodash;
-const {without: without} = _dll_lodash;
-function updateSessionValue(session, choiceMode, data) {
-  session.value = session.value || [];
-  if (choiceMode === 'checkbox') {
-    if (data.selected) {
-      session.value = uniq(concat(session.value, [data.value]));
-    } else {
-      session.value = without(session.value, data.value);
-    }
-  }
-  if (choiceMode === 'radio') {
-    if (data.selected) {
-      session.value = [data.value];
-    } else {
-      session.value = [];
-    }
-  }
-}
-const React$4 = _dll_react;
-const ReactDOM = _dll_react_dom;
-const {debounce: debounce} = _dll_lodash;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const log = browser('pie-ui:multiple-choice');
-const isComplete = session => !!(session && session.value && session.value.length);
-class MultipleChoice$2 extends HTMLElement {
-  constructor() {
-    super();
-    this._model = null;
-    this._session = null;
-    this._rerender = debounce(() => {
-      if (this._model && this._session) {
-        var element = React$4.createElement(Root, {
-          model: this._model,
-          session: this._session,
-          onChoiceChanged: this._onChange.bind(this)
-        });
-        ReactDOM.render(element, this, () => {
-          log('render complete - render math');
-          renderMath(this);
-        });
-      } else {
-        log('skip');
-      }
-    }, 50, {
-      leading: false,
-      trailing: true
-    });
-    this._dispatchResponseChanged = debounce(() => {
-      var event = new CustomEvent('session-changed', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(this._session),
-          component: this.tagName.toLowerCase()
-        }
-      });
-      this.dispatchEvent(event);
-    });
-    this._dispatchModelSet = debounce(() => {
-      this.dispatchEvent(new CustomEvent('model-set', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(this._session),
-          component: this.tagName.toLowerCase(),
-          hasModel: this._model !== undefined
-        }
-      }));
-    }, 50, {
-      leading: false,
-      trailing: true
-    });
-  }
-  set model(s) {
-    this._model = s;
-    this._rerender();
-    this._dispatchModelSet();
-  }
-  get session() {
-    return this._session;
-  }
-  set session(s) {
-    this._session = s;
-    this._rerender();
-    this._dispatchResponseChanged();
-  }
-  _onChange(data) {
-    updateSessionValue(this._session, this._model.choiceMode, data);
-    this._dispatchResponseChanged();
-    this._rerender();
-  }
-  connectedCallback() {
-    this._rerender();
-  }
-}
-export default MultipleChoice$2;
-export {isComplete};