@pie-element/multiple-choice 13.1.1-next.0 → 13.2.0-next.1

package/lib/main.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
+var _multipleChoice = _interopRequireDefault(require("./multiple-choice"));
+class Main extends _react.default.Component {
+  render() {
+    const {
+      model,
+      onChoiceChanged,
+      session,
+      onShowCorrectToggle,
+      options,
+      baseHeadingLevel,
+      includeSrHeading
+    } = this.props;
+    const {
+      extraCSSRules,
+      fontSizeFactor
+    } = model;
+
+    // model.partLabel is a property used for ebsr
+    return /*#__PURE__*/_react.default.createElement(_renderUi.PreviewLayout, {
+      extraCSSRules: extraCSSRules,
+      fontSizeFactor: fontSizeFactor,
+      classes: {}
+    }, /*#__PURE__*/_react.default.createElement(_multipleChoice.default, (0, _extends2.default)({}, model, {
+      options: options,
+      session: session,
+      onChoiceChanged: onChoiceChanged,
+      onShowCorrectToggle: onShowCorrectToggle,
+      baseHeadingLevel: baseHeadingLevel,
+      includeSrHeading: includeSrHeading
+    })));
+  }
+}
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object,
+  session: _propTypes.default.object,
+  options: _propTypes.default.object,
+  onChoiceChanged: _propTypes.default.func,
+  onShowCorrectToggle: _propTypes.default.func,
+  extraCSSRules: _propTypes.default.shape({
+    names: _propTypes.default.arrayOf(_propTypes.default.string),
+    rules: _propTypes.default.string
+  }),
+  baseHeadingLevel: _propTypes.default.number,
+  includeSrHeading: _propTypes.default.bool
+});
+(0, _defineProperty2.default)(Main, "defaultProps", {
+  model: {},
+  session: {}
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_renderUi","_multipleChoice","Main","React","Component","render","model","onChoiceChanged","session","onShowCorrectToggle","options","baseHeadingLevel","includeSrHeading","props","extraCSSRules","fontSizeFactor","default","createElement","PreviewLayout","classes","_extends2","_defineProperty2","PropTypes","object","func","shape","names","arrayOf","string","rules","number","bool","_default","exports"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { PreviewLayout } from '@pie-lib/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nclass Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    options: PropTypes.object,\n    onChoiceChanged: PropTypes.func,\n    onShowCorrectToggle: PropTypes.func,\n    extraCSSRules: PropTypes.shape({\n      names: PropTypes.arrayOf(PropTypes.string),\n      rules: PropTypes.string,\n    }),\n    baseHeadingLevel: PropTypes.number,\n    includeSrHeading: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    model: {},\n    session: {},\n  };\n\n  render() {\n    const { model, onChoiceChanged, session, onShowCorrectToggle, options, baseHeadingLevel, includeSrHeading } = this.props;\n    const { extraCSSRules, fontSizeFactor } = model;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout extraCSSRules={extraCSSRules} fontSizeFactor={fontSizeFactor} classes={{}}>\n        <MultipleChoice\n          {...model}\n          options={options}\n          session={session}\n          onChoiceChanged={onChoiceChanged}\n          onShowCorrectToggle={onShowCorrectToggle}\n          baseHeadingLevel={baseHeadingLevel}\n          includeSrHeading={includeSrHeading}\n        />\n      </PreviewLayout>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,MAAMI,IAAI,SAASC,cAAK,CAACC,SAAS,CAAC;EAoBjCC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,KAAK;MAAEC,eAAe;MAAEC,OAAO;MAAEC,mBAAmB;MAAEC,OAAO;MAAEC,gBAAgB;MAAEC;IAAiB,CAAC,GAAG,IAAI,CAACC,KAAK;IACxH,MAAM;MAAEC,aAAa;MAAEC;IAAe,CAAC,GAAGT,KAAK;;IAE/C;IACA,oBACEV,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACjB,SAAA,CAAAkB,aAAa;MAACJ,aAAa,EAAEA,aAAc;MAACC,cAAc,EAAEA,cAAe;MAACI,OAAO,EAAE,CAAC;IAAE,gBACvFvB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAChB,eAAA,CAAAe,OAAc,MAAAI,SAAA,CAAAJ,OAAA,MACTV,KAAK;MACTI,OAAO,EAAEA,OAAQ;MACjBF,OAAO,EAAEA,OAAQ;MACjBD,eAAe,EAAEA,eAAgB;MACjCE,mBAAmB,EAAEA,mBAAoB;MACzCE,gBAAgB,EAAEA,gBAAiB;MACnCC,gBAAgB,EAAEA;IAAiB,EACpC,CACY,CAAC;EAEpB;AACF;AAAC,IAAAS,gBAAA,CAAAL,OAAA,EAvCKd,IAAI,eACW;EACjBI,KAAK,EAAEgB,kBAAS,CAACC,MAAM;EACvBf,OAAO,EAAEc,kBAAS,CAACC,MAAM;EACzBb,OAAO,EAAEY,kBAAS,CAACC,MAAM;EACzBhB,eAAe,EAAEe,kBAAS,CAACE,IAAI;EAC/Bf,mBAAmB,EAAEa,kBAAS,CAACE,IAAI;EACnCV,aAAa,EAAEQ,kBAAS,CAACG,KAAK,CAAC;IAC7BC,KAAK,EAAEJ,kBAAS,CAACK,OAAO,CAACL,kBAAS,CAACM,MAAM,CAAC;IAC1CC,KAAK,EAAEP,kBAAS,CAACM;EACnB,CAAC,CAAC;EACFjB,gBAAgB,EAAEW,kBAAS,CAACQ,MAAM;EAClClB,gBAAgB,EAAEU,kBAAS,CAACS;AAC9B,CAAC;AAAA,IAAAV,gBAAA,CAAAL,OAAA,EAbGd,IAAI,kBAec;EACpBI,KAAK,EAAE,CAAC,CAAC;EACTE,OAAO,EAAE,CAAC;AACZ,CAAC;AAAA,IAAAwB,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAuBYd,IAAI","ignoreList":[]}

package/lib/multiple-choice.js

@@ -0,0 +1,412 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultipleChoice = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require("@mui/material/styles");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _renderUi = require("@pie-lib/render-ui");
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+var _choice = _interopRequireDefault(require("./choice"));
+const {
+  translator
+} = _translator.default;
+const MainContainer = (0, _styles.styled)(_Box.default)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  '& *': {
+    '-webkit-font-smoothing': 'antialiased'
+  },
+  position: 'relative',
+  // remove border from legend tags inside main to override the OT default styles
+  '& legend': {
+    border: 'none !important'
+  }
+});
+const PartLabel = (0, _styles.styled)('h2')(({
+  theme
+}) => ({
+  display: 'block',
+  fontSize: 'inherit',
+  margin: '0',
+  fontWeight: 'normal',
+  paddingBottom: theme.spacing(2)
+}));
+const TeacherInstructions = (0, _styles.styled)(_Box.default)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const HorizontalLayout = (0, _styles.styled)(_Box.default)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap'
+});
+const GridLayout = (0, _styles.styled)(_Box.default)({
+  display: 'grid'
+});
+const StyledFieldset = (0, _styles.styled)('fieldset')({
+  border: '0px',
+  padding: '0.01em 0 0 0',
+  margin: '0px',
+  minWidth: '0px',
+  '&:focus': {
+    outline: 'none'
+  }
+});
+const SrOnly = (0, _styles.styled)('h3')({
+  position: 'absolute',
+  left: '-10000px',
+  top: 'auto',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden'
+});
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class MultipleChoice extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    // handleChange was added for accessibility. Please see comments and videos from PD-2441.
+    (0, _defineProperty2.default)(this, "handleChange", event => {
+      const {
+        value,
+        checked
+      } = event.target;
+      const {
+        maxSelections,
+        onChoiceChanged,
+        session
+      } = this.props;
+      if (session.value && session.value.length >= maxSelections) {
+        // show/hide max selections error when user select/deselect an answer
+        this.setState({
+          maxSelectionsErrorState: checked
+        });
+        if (checked) {
+          // prevent selecting more answers
+          return;
+        }
+      }
+      onChoiceChanged({
+        value,
+        selected: checked,
+        selector: 'Mouse'
+      });
+    });
+    (0, _defineProperty2.default)(this, "onToggle", () => {
+      if (this.props.mode === 'evaluate') {
+        this.setState({
+          showCorrect: !this.state.showCorrect
+        }, () => {
+          if (this.props.onShowCorrectToggle) {
+            this.props.onShowCorrectToggle();
+          }
+        });
+      }
+    });
+    (0, _defineProperty2.default)(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) {
+          // A correct answer is selected: marked with a green checkmark
+          return 'correct';
+        } else {
+          // A correct answer is NOT selected: marked with an orange X
+          return 'incorrect';
+        }
+      } else {
+        if (isChecked) {
+          // An incorrect answer is selected: marked with an orange X
+          return 'incorrect';
+        } else {
+          // An incorrect answer is NOT selected: not marked
+          return undefined;
+        }
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleGroupFocus", e => {
+      const fieldset = e.currentTarget;
+      const activeEl = document.activeElement;
+      if (fieldset.contains(activeEl) && activeEl !== fieldset) {
+        return;
+      }
+
+      // Only focus the first input if user is tabbing forward
+      if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {
+        if (this.firstInputRef?.current) {
+          this.firstInputRef.current.focus();
+        }
+      }
+    });
+    this.state = {
+      showCorrect: this.props.options && this.props.alwaysShowCorrect || false,
+      maxSelectionsErrorState: false
+    };
+    this.onToggle = this.onToggle.bind(this);
+    this.firstInputRef = /*#__PURE__*/_react.default.createRef();
+  }
+  isSelected(value) {
+    const sessionValue = this.props.session && this.props.session.value;
+    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!nextProps.correctResponse && this.state.showCorrect !== false) {
+      this.setState({
+        showCorrect: false
+      }, () => {
+        if (this.props.onShowCorrectToggle) {
+          this.props.onShowCorrectToggle();
+        }
+      });
+    }
+    if (nextProps.options && nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {
+      this.setState({
+        showCorrect: true
+      }, () => {
+        if (this.props.onShowCorrectToggle) {
+          this.props.onShowCorrectToggle();
+        }
+      });
+    }
+  }
+  indexToSymbol(index) {
+    if (this.props.keyMode === 'numbers') {
+      return `${index + 1}`;
+    }
+    if (this.props.keyMode === 'letters') {
+      return String.fromCharCode(97 + index).toUpperCase();
+    }
+    return '';
+  }
+  getChecked(choice) {
+    // check for print context: options prop is passed from print.js and alwaysShowCorrect is true
+    const isPrintMode = this.props.options && this.props.alwaysShowCorrect;
+    if (isPrintMode) {
+      return choice.correct || false;
+    }
+
+    // evaluate mode with show correct toggled
+    const isEvaluateMode = this.state.showCorrect && this.props.mode === 'evaluate';
+    if (isEvaluateMode) {
+      return choice.correct || false;
+    }
+
+    // default behavior: show what the user has selected
+    return this.isSelected(choice.value);
+  }
+
+  // renderHeading function was added for accessibility.
+  renderHeading() {
+    const {
+      mode,
+      choiceMode,
+      includeSrHeading,
+      baseHeadingLevel,
+      partLabel
+    } = this.props;
+
+    // When a part label is present the item is an EBSR part — the SR heading
+    // is provided by the EBSR element, not here.
+    const shouldRenderSrHeading = !partLabel && includeSrHeading !== false;
+    if (!shouldRenderSrHeading || mode !== 'gather') {
+      return null;
+    }
+    const clampedLevel = baseHeadingLevel ? Math.min(6, baseHeadingLevel) : 2;
+    const HeadingTag = SrOnly.withComponent(`h${clampedLevel}`);
+    const label = choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Select Question';
+    return /*#__PURE__*/_react.default.createElement(HeadingTag, null, label);
+  }
+  render() {
+    const {
+      mode,
+      disabled,
+      className,
+      choices = [],
+      choiceMode,
+      gridColumns,
+      partLabel,
+      prompt,
+      responseCorrect,
+      teacherInstructions,
+      alwaysShowCorrect,
+      animationsDisabled,
+      language,
+      isSelectionButtonBelow,
+      minSelections,
+      maxSelections,
+      autoplayAudioEnabled,
+      session,
+      customAudioButton,
+      options,
+      baseHeadingLevel
+    } = this.props;
+    const {
+      showCorrect,
+      maxSelectionsErrorState
+    } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
+    const columnsStyle = gridColumns > 1 ? {
+      gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
+    } : undefined;
+    const selections = session.value && session.value.length || 0;
+
+    // Heading levels are optional and only applied when baseHeadingLevel is provided.
+    const getContentHeadingLevel = () => {
+      if (!baseHeadingLevel) return undefined;
+      // SR heading (rendered or external) sits at baseHeadingLevel.
+      // Content is always one below that; part label (EBSR) sits between them.
+      let offset = 1; // content default: baseHeadingLevel + 1
+      if (partLabel) offset += 1; // part label at base + 1, content pushed to base + 2
+      return Math.min(6, baseHeadingLevel + offset);
+    };
+    const contentHeadingLevel = getContentHeadingLevel();
+    const transformPrompt = html => html && contentHeadingLevel ? (0, _renderUi.transformDataHeadings)(html, contentHeadingLevel) : html;
+    const teacherInstructionsDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      tagName: "div",
+      className: "prompt",
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions
+    });
+    const getMultipleChoiceMinSelectionErrorMessage = () => {
+      if (minSelections && maxSelections) {
+        return minSelections === maxSelections ? translator.t('translation:multipleChoice:minmaxSelections_equal', {
+          lng: language,
+          minSelections
+        }) : translator.t('translation:multipleChoice:minmaxSelections_range', {
+          lng: language,
+          minSelections,
+          maxSelections
+        });
+      }
+      if (minSelections) {
+        return translator.t('translation:multipleChoice:minSelections', {
+          lng: language,
+          minSelections
+        });
+      }
+      return '';
+    };
+    const LayoutComponent = this.props.choicesLayout === 'grid' ? GridLayout : this.props.choicesLayout === 'horizontal' ? HorizontalLayout : _Box.default;
+    return /*#__PURE__*/_react.default.createElement(MainContainer, {
+      id: 'main-container',
+      className: (0, _classnames.default)(className, 'multiple-choice')
+    }, partLabel && /*#__PURE__*/_react.default.createElement(PartLabel, {
+      as: baseHeadingLevel ? `h${Math.min(6, baseHeadingLevel + 1)}` : 'h2'
+    }, partLabel), this.renderHeading(), teacherInstructions && /*#__PURE__*/_react.default.createElement(TeacherInstructions, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, teacherInstructionsDiv) : teacherInstructionsDiv), /*#__PURE__*/_react.default.createElement(StyledFieldset, {
+      tabIndex: 0,
+      onFocus: this.handleGroupFocus,
+      role: choiceMode === 'radio' ? 'radiogroup' : 'group'
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      defaultClassName: "prompt",
+      prompt: transformPrompt(prompt),
+      tagName: 'legend',
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton
+    }), !(options && alwaysShowCorrect) && /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showCorrectAnswerToggle,
+      toggled: showCorrect,
+      onToggle: this.onToggle.bind(this),
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(LayoutComponent, {
+      style: columnsStyle
+    }, choices.map((choice, index) => /*#__PURE__*/_react.default.createElement(_choice.default, {
+      autoFocusRef: index === 0 ? this.firstInputRef : null,
+      choicesLayout: this.props.choicesLayout,
+      selectedAnswerBackgroundColor: this.props.selectedAnswerBackgroundColor,
+      selectedAnswerStrokeColor: this.props.selectedAnswerStrokeColor,
+      selectedAnswerStrokeWidth: this.props.selectedAnswerStrokeWidth,
+      hoverAnswerBackgroundColor: this.props.hoverAnswerBackgroundColor,
+      hoverAnswerStrokeColor: this.props.hoverAnswerStrokeColor,
+      hoverAnswerStrokeWidth: this.props.hoverAnswerStrokeWidth,
+      gridColumns: gridColumns,
+      key: `choice-${index}`,
+      choice: choice,
+      index: index,
+      choicesLength: choices.length,
+      showCorrect: showCorrect,
+      isEvaluateMode: isEvaluateMode,
+      choiceMode: choiceMode,
+      disabled: disabled,
+      tagName: partLabel ? `group-${partLabel}` : 'group',
+      onChoiceChanged: this.handleChange,
+      hideTick: choice.hideTick,
+      checked: this.getChecked(choice),
+      correctness: isEvaluateMode ? this.getCorrectness(choice) : undefined,
+      displayKey: this.indexToSymbol(index),
+      isSelectionButtonBelow: isSelectionButtonBelow
+    })))), choiceMode === 'checkbox' && selections < minSelections && /*#__PURE__*/_react.default.createElement(ErrorText, null, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && /*#__PURE__*/_react.default.createElement(ErrorText, null, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
+      lng: language,
+      maxSelections
+    })));
+  }
+}
+exports.MultipleChoice = MultipleChoice;
+(0, _defineProperty2.default)(MultipleChoice, "propTypes", {
+  className: _propTypes.default.string,
+  mode: _propTypes.default.oneOf(['gather', 'view', 'evaluate']),
+  choiceMode: _propTypes.default.oneOf(['radio', 'checkbox']),
+  keyMode: _propTypes.default.oneOf(['numbers', 'letters', 'none']),
+  choices: _propTypes.default.array,
+  partLabel: _propTypes.default.string,
+  prompt: _propTypes.default.string,
+  teacherInstructions: _propTypes.default.string,
+  session: _propTypes.default.object,
+  disabled: _propTypes.default.bool,
+  onChoiceChanged: _propTypes.default.func,
+  responseCorrect: _propTypes.default.bool,
+  correctResponse: _propTypes.default.array,
+  choicesLayout: _propTypes.default.oneOf(['vertical', 'grid', 'horizontal']),
+  gridColumns: _propTypes.default.string,
+  alwaysShowCorrect: _propTypes.default.bool,
+  animationsDisabled: _propTypes.default.bool,
+  language: _propTypes.default.string,
+  selectedAnswerBackgroundColor: _propTypes.default.string,
+  selectedAnswerStrokeColor: _propTypes.default.string,
+  selectedAnswerStrokeWidth: _propTypes.default.string,
+  hoverAnswerBackgroundColor: _propTypes.default.string,
+  hoverAnswerStrokeColor: _propTypes.default.string,
+  hoverAnswerStrokeWidth: _propTypes.default.string,
+  onShowCorrectToggle: _propTypes.default.func,
+  isSelectionButtonBelow: _propTypes.default.bool,
+  minSelections: _propTypes.default.number,
+  maxSelections: _propTypes.default.number,
+  autoplayAudioEnabled: _propTypes.default.bool,
+  customAudioButton: {
+    playImage: _propTypes.default.string,
+    pauseImage: _propTypes.default.string
+  },
+  options: _propTypes.default.object,
+  baseHeadingLevel: _propTypes.default.number,
+  includeSrHeading: _propTypes.default.bool
+});
+MultipleChoice.defaultProps = {
+  session: {
+    value: []
+  }
+};
+var _default = exports.default = MultipleChoice;
+//# sourceMappingURL=multiple-choice.js.map

package/lib/multiple-choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiple-choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_classnames","_styles","_Box","_renderUi","_translator","_choice","translator","Translator","MainContainer","styled","Box","color","text","backgroundColor","background","position","border","PartLabel","theme","display","fontSize","margin","fontWeight","paddingBottom","spacing","TeacherInstructions","marginBottom","HorizontalLayout","flexDirection","flexWrap","GridLayout","StyledFieldset","padding","minWidth","outline","SrOnly","left","top","width","height","overflow","ErrorText","typography","palette","error","main","paddingTop","MultipleChoice","React","Component","constructor","props","_defineProperty2","default","event","value","checked","target","maxSelections","onChoiceChanged","session","length","setState","maxSelectionsErrorState","selected","selector","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","e","fieldset","currentTarget","activeEl","document","activeElement","contains","relatedTarget","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","firstInputRef","current","focus","options","alwaysShowCorrect","onToggle","bind","createRef","sessionValue","indexOf","UNSAFE_componentWillReceiveProps","nextProps","correctResponse","indexToSymbol","index","keyMode","String","fromCharCode","toUpperCase","getChecked","isPrintMode","isEvaluateMode","renderHeading","choiceMode","includeSrHeading","baseHeadingLevel","partLabel","shouldRenderSrHeading","clampedLevel","Math","min","HeadingTag","withComponent","label","createElement","render","disabled","className","choices","gridColumns","prompt","responseCorrect","teacherInstructions","animationsDisabled","language","isSelectionButtonBelow","minSelections","autoplayAudioEnabled","customAudioButton","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","getContentHeadingLevel","offset","contentHeadingLevel","transformPrompt","html","transformDataHeadings","teacherInstructionsDiv","PreviewPrompt","tagName","defaultClassName","getMultipleChoiceMinSelectionErrorMessage","t","lng","LayoutComponent","choicesLayout","id","classNames","as","Collapsible","labels","hidden","visible","tabIndex","onFocus","handleGroupFocus","role","show","toggled","style","map","autoFocusRef","selectedAnswerBackgroundColor","selectedAnswerStrokeColor","selectedAnswerStrokeWidth","hoverAnswerBackgroundColor","hoverAnswerStrokeColor","hoverAnswerStrokeWidth","key","choicesLength","handleChange","hideTick","correctness","getCorrectness","displayKey","exports","PropTypes","string","oneOf","array","object","bool","func","number","playImage","pauseImage","defaultProps","_default"],"sources":["../src/multiple-choice.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport { color, Collapsible, PreviewPrompt, transformDataHeadings } from '@pie-lib/render-ui';\nimport Translator from '@pie-lib/translator';\n\nimport Choice from './choice';\n\nconst { translator } = Translator;\n\nconst MainContainer = styled(Box)({\n  color: color.text(),\n  backgroundColor: color.background(),\n  '& *': {\n    '-webkit-font-smoothing': 'antialiased',\n  },\n  position: 'relative',\n  // remove border from legend tags inside main to override the OT default styles\n  '& legend': {\n    border: 'none !important',\n  },\n});\n\nconst PartLabel = styled('h2')(({ theme }) => ({\n  display: 'block',\n  fontSize: 'inherit',\n  margin: '0',\n  fontWeight: 'normal',\n  paddingBottom: theme.spacing(2),\n}));\n\nconst TeacherInstructions = styled(Box)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst HorizontalLayout = styled(Box)({\n  display: 'flex',\n  flexDirection: 'row',\n  flexWrap: 'wrap',\n});\n\nconst GridLayout = styled(Box)({\n  display: 'grid',\n});\n\nconst StyledFieldset = styled('fieldset')({\n  border: '0px',\n  padding: '0.01em 0 0 0',\n  margin: '0px',\n  minWidth: '0px',\n  '&:focus': {\n    outline: 'none',\n  },\n});\n\nconst SrOnly = styled('h3')({\n  position: 'absolute',\n  left: '-10000px',\n  top: 'auto',\n  width: '1px',\n  height: '1px',\n  overflow: 'hidden',\n});\n\nconst ErrorText = styled('div')(({ theme }) => ({\n  fontSize: theme.typography.fontSize - 2,\n  color: theme.palette.error.main,\n  paddingTop: theme.spacing(1),\n}));\n\nexport class MultipleChoice extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n    keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n    choices: PropTypes.array,\n    partLabel: PropTypes.string,\n    prompt: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    session: PropTypes.object,\n    disabled: PropTypes.bool,\n    onChoiceChanged: PropTypes.func,\n    responseCorrect: PropTypes.bool,\n    correctResponse: PropTypes.array,\n    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n    gridColumns: PropTypes.string,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    language: PropTypes.string,\n    selectedAnswerBackgroundColor: PropTypes.string,\n    selectedAnswerStrokeColor: PropTypes.string,\n    selectedAnswerStrokeWidth: PropTypes.string,\n    hoverAnswerBackgroundColor: PropTypes.string,\n    hoverAnswerStrokeColor: PropTypes.string,\n    hoverAnswerStrokeWidth: PropTypes.string,\n    onShowCorrectToggle: PropTypes.func,\n    isSelectionButtonBelow: PropTypes.bool,\n    minSelections: PropTypes.number,\n    maxSelections: PropTypes.number,\n    autoplayAudioEnabled: PropTypes.bool,\n    customAudioButton: {\n      playImage: PropTypes.string,\n      pauseImage: PropTypes.string,\n    },\n    options: PropTypes.object,\n    baseHeadingLevel: PropTypes.number,\n    includeSrHeading: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      showCorrect: (this.props.options && this.props.alwaysShowCorrect) || false,\n      maxSelectionsErrorState: false,\n    };\n\n    this.onToggle = this.onToggle.bind(this);\n    this.firstInputRef = React.createRef();\n  }\n\n  isSelected(value) {\n    const sessionValue = this.props.session && this.props.session.value;\n\n    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n  }\n\n  // handleChange was added for accessibility. Please see comments and videos from PD-2441.\n  handleChange = (event) => {\n    const { value, checked } = event.target;\n    const { maxSelections, onChoiceChanged, session } = this.props;\n\n    if (session.value && session.value.length >= maxSelections) {\n      // show/hide max selections error when user select/deselect an answer\n      this.setState({ maxSelectionsErrorState: checked });\n\n      if (checked) {\n        // prevent selecting more answers\n        return;\n      }\n    }\n\n    onChoiceChanged({ value, selected: checked, selector: 'Mouse' });\n  };\n\n  onToggle = () => {\n    if (this.props.mode === 'evaluate') {\n      this.setState({ showCorrect: !this.state.showCorrect }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n      this.setState({ showCorrect: false }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n\n    if (nextProps.options && nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n      this.setState({ showCorrect: true }, () => {\n        if (this.props.onShowCorrectToggle) {\n          this.props.onShowCorrectToggle();\n        }\n      });\n    }\n  }\n\n  indexToSymbol(index) {\n    if (this.props.keyMode === 'numbers') {\n      return `${index + 1}`;\n    }\n\n    if (this.props.keyMode === 'letters') {\n      return String.fromCharCode(97 + index).toUpperCase();\n    }\n\n    return '';\n  }\n\n  getCorrectness = (choice = {}) => {\n    const isCorrect = choice.correct;\n    const isChecked = this.isSelected(choice.value);\n\n    if (this.state.showCorrect) {\n      return isCorrect ? 'correct' : undefined;\n    }\n\n    if (isCorrect) {\n      if (isChecked) {\n        // A correct answer is selected: marked with a green checkmark\n        return 'correct';\n      } else {\n        // A correct answer is NOT selected: marked with an orange X\n        return 'incorrect';\n      }\n    } else {\n      if (isChecked) {\n        // An incorrect answer is selected: marked with an orange X\n        return 'incorrect';\n      } else {\n        // An incorrect answer is NOT selected: not marked\n        return undefined;\n      }\n    }\n  };\n\n  getChecked(choice) {\n    // check for print context: options prop is passed from print.js and alwaysShowCorrect is true\n    const isPrintMode = this.props.options && this.props.alwaysShowCorrect;\n\n    if (isPrintMode) {\n      return choice.correct || false;\n    }\n\n    // evaluate mode with show correct toggled\n    const isEvaluateMode = this.state.showCorrect && this.props.mode === 'evaluate';\n\n    if (isEvaluateMode) {\n      return choice.correct || false;\n    }\n\n    // default behavior: show what the user has selected\n    return this.isSelected(choice.value);\n  }\n\n  // renderHeading function was added for accessibility.\n  renderHeading() {\n    const { mode, choiceMode, includeSrHeading, baseHeadingLevel, partLabel } = this.props;\n\n    // When a part label is present the item is an EBSR part — the SR heading\n    // is provided by the EBSR element, not here.\n    const shouldRenderSrHeading = !partLabel && includeSrHeading !== false;\n\n    if (!shouldRenderSrHeading || mode !== 'gather') {\n      return null;\n    }\n\n    const clampedLevel = baseHeadingLevel ? Math.min(6, baseHeadingLevel) : 2;\n    const HeadingTag = SrOnly.withComponent(`h${clampedLevel}`);\n    const label = choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Select Question';\n\n    return <HeadingTag>{label}</HeadingTag>;\n  }\n\n  handleGroupFocus = (e) => {\n    const fieldset = e.currentTarget;\n    const activeEl = document.activeElement;\n\n    if (fieldset.contains(activeEl) && activeEl !== fieldset) {\n      return;\n    }\n\n    // Only focus the first input if user is tabbing forward\n    if (!e.relatedTarget || fieldset.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) {\n      if (this.firstInputRef?.current) {\n        this.firstInputRef.current.focus();\n      }\n    }\n  };\n\n  render() {\n    const {\n      mode,\n      disabled,\n      className,\n      choices = [],\n      choiceMode,\n      gridColumns,\n      partLabel,\n      prompt,\n      responseCorrect,\n      teacherInstructions,\n      alwaysShowCorrect,\n      animationsDisabled,\n      language,\n      isSelectionButtonBelow,\n      minSelections,\n      maxSelections,\n      autoplayAudioEnabled,\n      session,\n      customAudioButton,\n      options,\n      baseHeadingLevel,\n    } = this.props;\n    const { showCorrect, maxSelectionsErrorState } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n    const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n    const selections = (session.value && session.value.length) || 0;\n\n    // Heading levels are optional and only applied when baseHeadingLevel is provided.\n    const getContentHeadingLevel = () => {\n      if (!baseHeadingLevel) return undefined;\n      // SR heading (rendered or external) sits at baseHeadingLevel.\n      // Content is always one below that; part label (EBSR) sits between them.\n      let offset = 1; // content default: baseHeadingLevel + 1\n      if (partLabel) offset += 1; // part label at base + 1, content pushed to base + 2\n      return Math.min(6, baseHeadingLevel + offset);\n    };\n    const contentHeadingLevel = getContentHeadingLevel();\n    const transformPrompt = (html) => (html && contentHeadingLevel) ? transformDataHeadings(html, contentHeadingLevel) : html;\n\n    const teacherInstructionsDiv = (\n      <PreviewPrompt\n        tagName=\"div\"\n        className=\"prompt\"\n        defaultClassName=\"teacher-instructions\"\n        prompt={teacherInstructions}\n      />\n    );\n\n    const getMultipleChoiceMinSelectionErrorMessage = () => {\n      if (minSelections && maxSelections) {\n        return minSelections === maxSelections\n          ? translator.t('translation:multipleChoice:minmaxSelections_equal', { lng: language, minSelections })\n          : translator.t('translation:multipleChoice:minmaxSelections_range', {\n              lng: language,\n              minSelections,\n              maxSelections,\n            });\n      }\n\n      if (minSelections) {\n        return translator.t('translation:multipleChoice:minSelections', { lng: language, minSelections });\n      }\n\n      return '';\n    };\n\n    const LayoutComponent = this.props.choicesLayout === 'grid'\n      ? GridLayout\n      : this.props.choicesLayout === 'horizontal'\n        ? HorizontalLayout\n        : Box;\n\n    return (\n      <MainContainer id={'main-container'} className={classNames(className, 'multiple-choice')}>\n        {partLabel && <PartLabel as={baseHeadingLevel ? `h${Math.min(6, baseHeadingLevel + 1)}` : 'h2'}>{partLabel}</PartLabel>}\n\n        {this.renderHeading()}\n\n        {teacherInstructions && (\n          <TeacherInstructions>\n            {!animationsDisabled ? (\n              <Collapsible\n                labels={{\n                  hidden: 'Show Teacher Instructions',\n                  visible: 'Hide Teacher Instructions',\n                }}\n              >\n                {teacherInstructionsDiv}\n              </Collapsible>\n            ) : (\n              teacherInstructionsDiv\n            )}\n          </TeacherInstructions>\n        )}\n\n        <StyledFieldset\n          tabIndex={0}\n          onFocus={this.handleGroupFocus}\n          role={choiceMode === 'radio' ? 'radiogroup' : 'group'}\n        >\n          <PreviewPrompt\n            className=\"prompt\"\n            defaultClassName=\"prompt\"\n            prompt={transformPrompt(prompt)}\n            tagName={'legend'}\n            autoplayAudioEnabled={autoplayAudioEnabled}\n            customAudioButton={customAudioButton}\n          />\n\n          {!(options && alwaysShowCorrect) && (\n            <CorrectAnswerToggle\n              show={showCorrectAnswerToggle}\n              toggled={showCorrect}\n              onToggle={this.onToggle.bind(this)}\n              language={language}\n            />\n          )}\n\n          <LayoutComponent style={columnsStyle}>\n            {choices.map((choice, index) => (\n              <Choice\n                autoFocusRef={index === 0 ? this.firstInputRef : null}\n                choicesLayout={this.props.choicesLayout}\n                selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\n                selectedAnswerStrokeColor={this.props.selectedAnswerStrokeColor}\n                selectedAnswerStrokeWidth={this.props.selectedAnswerStrokeWidth}\n                hoverAnswerBackgroundColor={this.props.hoverAnswerBackgroundColor}\n                hoverAnswerStrokeColor={this.props.hoverAnswerStrokeColor}\n                hoverAnswerStrokeWidth={this.props.hoverAnswerStrokeWidth}\n                gridColumns={gridColumns}\n                key={`choice-${index}`}\n                choice={choice}\n                index={index}\n                choicesLength={choices.length}\n                showCorrect={showCorrect}\n                isEvaluateMode={isEvaluateMode}\n                choiceMode={choiceMode}\n                disabled={disabled}\n                tagName={partLabel ? `group-${partLabel}` : 'group'}\n                onChoiceChanged={this.handleChange}\n                hideTick={choice.hideTick}\n                checked={this.getChecked(choice)}\n                correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n                displayKey={this.indexToSymbol(index)}\n                isSelectionButtonBelow={isSelectionButtonBelow}\n              />\n            ))}\n          </LayoutComponent>\n        </StyledFieldset>\n\n        {choiceMode === 'checkbox' && selections < minSelections && (\n          <ErrorText>{getMultipleChoiceMinSelectionErrorMessage()}</ErrorText>\n        )}\n        {choiceMode === 'checkbox' && maxSelectionsErrorState && (\n          <ErrorText>\n            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n              lng: language,\n              maxSelections,\n            })}\n          </ErrorText>\n        )}\n      </MainContainer>\n    );\n  }\n}\n\nMultipleChoice.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default MultipleChoice;\n"],"mappings":"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","ignoreList":[]}

package/lib/print.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _lodashEs = require("lodash-es");
+var _main = _interopRequireDefault(require("./main"));
+var _mathRendering = require("@pie-lib/math-rendering");
+var _debug = _interopRequireDefault(require("debug"));
+const log = (0, _debug.default)('pie-element:multiple-choice:print');
+
+/**
+ * Live in same package as main element - so we can access some of the shared comps!
+ *
+ * - update pslb to build print if src/print.js is there
+ * - update demo el
+ * - get configure/controller building
+ */
+
+const preparePrintModel = (model, opts) => {
+  const instr = opts.role === 'instructor';
+  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;
+  model.teacherInstructions = instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;
+  model.showTeacherInstructions = instr;
+  model.alwaysShowCorrect = instr;
+  model.mode = instr ? 'evaluate' : model.mode;
+  model.disabled = true;
+  model.animationsDisabled = true;
+  model.lockChoiceOrder = true;
+  model.choicesLayout = model.choicesLayout || 'vertical';
+  const choices = (0, _lodashEs.cloneDeep)(model.choices);
+  model.choices = choices.map(c => {
+    c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;
+    c.hideTick = instr;
+    c.feedback = undefined;
+    return c;
+  });
+  model.keyMode = model.choicePrefix || 'letters';
+  return model;
+};
+class MultipleChoicePrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._root = null;
+    this._rerender = (0, _lodashEs.debounce)(() => {
+      if (this._model && this._session) {
+        const printModel = preparePrintModel(this._model, this._options);
+        const element = this._options && /*#__PURE__*/_react.default.createElement(_main.default, {
+          model: printModel,
+          session: {},
+          options: this._options
+        });
+        if (!this._root) {
+          this._root = (0, _client.createRoot)(this);
+        }
+        this._root.render(element);
+        // Use double requestAnimationFrame so React has committed to the DOM before we render math
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            log('render complete - render math');
+            (0, _mathRendering.renderMath)(this);
+          });
+        });
+      } else {
+        log('skip');
+      }
+    }, 50, {
+      leading: false,
+      trailing: true
+    });
+  }
+  set options(o) {
+    this._options = o;
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+  connectedCallback() {}
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = MultipleChoicePrint;
+//# sourceMappingURL=print.js.map

package/lib/print.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"print.js","names":["_react","_interopRequireDefault","require","_client","_lodashEs","_main","_mathRendering","_debug","log","debug","preparePrintModel","model","opts","instr","role","prompt","promptEnabled","undefined","teacherInstructions","teacherInstructionsEnabled","showTeacherInstructions","alwaysShowCorrect","mode","disabled","animationsDisabled","lockChoiceOrder","choicesLayout","choices","cloneDeep","map","c","rationale","rationaleEnabled","hideTick","feedback","keyMode","choicePrefix","MultipleChoicePrint","HTMLElement","constructor","_options","_model","_session","_root","_rerender","debounce","printModel","element","React","createElement","Main","session","options","createRoot","render","requestAnimationFrame","renderMath","leading","trailing","o","s","connectedCallback","disconnectedCallback","unmount","exports","default"],"sources":["../src/print.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { cloneDeep, debounce } from 'lodash-es';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;\n  model.teacherInstructions =\n    instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;\n  model.showTeacherInstructions = instr;\n  model.alwaysShowCorrect = instr;\n  model.mode = instr ? 'evaluate' : model.mode;\n\n  model.disabled = true;\n  model.animationsDisabled = true;\n  model.lockChoiceOrder = true;\n  model.choicesLayout = model.choicesLayout || 'vertical';\n\n  const choices = cloneDeep(model.choices);\n\n  model.choices = choices.map((c) => {\n    c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;\n    c.hideTick = instr;\n    c.feedback = undefined;\n    return c;\n  });\n\n  model.keyMode = model.choicePrefix || 'letters';\n\n  return model;\n};\n\nexport default class MultipleChoicePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._root = null;\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              model: printModel,\n              session: {},\n              options: this._options,\n            });\n\n          if (!this._root) {\n            this._root = createRoot(this);\n          }\n          this._root.render(element);\n          // Use double requestAnimationFrame so React has committed to the DOM before we render math\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              log('render complete - render math');\n              renderMath(this);\n            });\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}