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

package/src/delivery/multiple-choice.tsx

@@ -1,485 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/src/multiple-choice.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
-import classNames from 'classnames';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import { color, Collapsible as CollapsibleImport, PreviewPrompt as PreviewPromptImport, transformDataHeadings } from '@pie-lib/render-ui';
-
-function isRenderableReactInteropType(value: any) {
-  return (
-    typeof value === 'function' ||
-    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
-  );
-}
-
-function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
-  if (!maybeSymbol) return maybeSymbol;
-  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
-  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
-  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
-    return maybeSymbol[namedExport];
-  }
-  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
-    return maybeSymbol[namedExport].default;
-  }
-  return maybeSymbol;
-}
-const PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt') || unwrapReactInteropSymbol(renderUi.PreviewPrompt, 'PreviewPrompt');
-const Collapsible = unwrapReactInteropSymbol(CollapsibleImport, 'Collapsible') || unwrapReactInteropSymbol(renderUi.Collapsible, 'Collapsible');
-import * as RenderUiNamespace from '@pie-lib/render-ui';
-const renderUiNamespaceAny = RenderUiNamespace as any;
-const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
-const renderUi =
-  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
-    ? renderUiDefaultMaybe
-    : renderUiNamespaceAny;
-import Translator from '@pie-lib/translator';
-
-import Choice from './choice.js';
-
-const { translator } = Translator;
-
-const MainContainer: any = styled(Box)({
-  color: color.text(),
-  backgroundColor: 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: any = styled('h2')(({ theme }) => ({
-  display: 'block',
-  fontSize: 'inherit',
-  margin: '0',
-  fontWeight: 'normal',
-  paddingBottom: theme.spacing(2),
-}));
-
-const TeacherInstructions: any = styled(Box)(({ theme }) => ({
-  marginBottom: theme.spacing(2),
-}));
-
-const HorizontalLayout: any = styled(Box)({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-});
-
-const GridLayout: any = styled(Box)({
-  display: 'grid',
-});
-
-const StyledFieldset: any = styled('fieldset')({
-  border: '0px',
-  padding: '0.01em 0 0 0',
-  margin: '0px',
-  minWidth: '0px',
-  '&:focus': {
-    outline: 'none',
-  },
-});
-
-const SrOnly: any = styled('h3')({
-  position: 'absolute',
-  left: '-10000px',
-  top: 'auto',
-  width: '1px',
-  height: '1px',
-  overflow: 'hidden',
-});
-
-const ErrorText: any = styled('div')(({ theme }) => ({
-  fontSize: theme.typography.fontSize - 2,
-  color: theme.palette.error.main,
-  paddingTop: theme.spacing(1),
-}));
-
-export class MultipleChoice extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),
-    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),
-    keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),
-    choices: PropTypes.array,
-    partLabel: PropTypes.string,
-    prompt: PropTypes.string,
-    teacherInstructions: PropTypes.string,
-    session: PropTypes.object,
-    disabled: PropTypes.bool,
-    onChoiceChanged: PropTypes.func,
-    responseCorrect: PropTypes.bool,
-    correctResponse: PropTypes.array,
-    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),
-    gridColumns: PropTypes.string,
-    alwaysShowCorrect: PropTypes.bool,
-    animationsDisabled: PropTypes.bool,
-    language: PropTypes.string,
-    selectedAnswerBackgroundColor: PropTypes.string,
-    selectedAnswerStrokeColor: PropTypes.string,
-    selectedAnswerStrokeWidth: PropTypes.string,
-    hoverAnswerBackgroundColor: PropTypes.string,
-    hoverAnswerStrokeColor: PropTypes.string,
-    hoverAnswerStrokeWidth: PropTypes.string,
-    onShowCorrectToggle: PropTypes.func,
-    isSelectionButtonBelow: PropTypes.bool,
-    minSelections: PropTypes.number,
-    maxSelections: PropTypes.number,
-    autoplayAudioEnabled: PropTypes.bool,
-    customAudioButton: {
-      playImage: PropTypes.string,
-      pauseImage: PropTypes.string,
-    },
-    options: PropTypes.object,
-    baseHeadingLevel: PropTypes.number,
-    includeSrHeading: PropTypes.bool,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showCorrect: (this.props.options && this.props.alwaysShowCorrect) || false,
-      maxSelectionsErrorState: false,
-    };
-
-    this.onToggle = this.onToggle.bind(this);
-    this.firstInputRef = React.createRef();
-  }
-
-  isSelected(value) {
-    const sessionValue = this.props.session && this.props.session.value;
-
-    return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
-  }
-
-  // handleChange was added for accessibility. Please see comments and videos from PD-2441.
-  handleChange: any = (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' });
-  };
-
-  onToggle: any = () => {
-    if (this.props.mode === 'evaluate') {
-      this.setState({ showCorrect: !this.state.showCorrect }, () => {
-        if (this.props.onShowCorrectToggle) {
-          this.props.onShowCorrectToggle();
-        }
-      });
-    }
-  };
-
-  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 '';
-  }
-
-  getCorrectness: any = (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;
-      }
-    }
-  };
-
-  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 <HeadingTag>{label}</HeadingTag>;
-  }
-
-  handleGroupFocus: any = (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();
-      }
-    }
-  };
-
-  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) ? transformDataHeadings(html, contentHeadingLevel) : html;
-
-    const teacherInstructionsDiv = (
-      <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;
-
-    return (
-      <MainContainer id={'main-container'} className={classNames(className, 'multiple-choice')}>
-        {partLabel && <PartLabel as={baseHeadingLevel ? `h${Math.min(6, baseHeadingLevel + 1)}` : 'h2'}>{partLabel}</PartLabel>}
-
-        {this.renderHeading()}
-
-        {teacherInstructions && (
-          <TeacherInstructions>
-            {!animationsDisabled ? (
-              <Collapsible
-                labels={{
-                  hidden: 'Show Teacher Instructions',
-                  visible: 'Hide Teacher Instructions',
-                }}
-              >
-                {teacherInstructionsDiv}
-              </Collapsible>
-            ) : (
-              teacherInstructionsDiv
-            )}
-          </TeacherInstructions>
-        )}
-
-        <StyledFieldset
-          tabIndex={0}
-          onFocus={this.handleGroupFocus}
-          role={choiceMode === 'radio' ? 'radiogroup' : 'group'}
-        >
-          <PreviewPrompt
-            className="prompt"
-            defaultClassName="prompt"
-            prompt={transformPrompt(prompt)}
-            tagName={'legend'}
-            autoplayAudioEnabled={autoplayAudioEnabled}
-            customAudioButton={customAudioButton}
-          />
-
-          {!(options && alwaysShowCorrect) && (
-            <CorrectAnswerToggle
-              show={showCorrectAnswerToggle}
-              toggled={showCorrect}
-              onToggle={this.onToggle.bind(this)}
-              language={language}
-            />
-          )}
-
-          <LayoutComponent style={columnsStyle}>
-            {choices.map((choice, index) => (
-              <Choice
-                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}
-              />
-            ))}
-          </LayoutComponent>
-        </StyledFieldset>
-
-        {choiceMode === 'checkbox' && selections < minSelections && (
-          <ErrorText>{getMultipleChoiceMinSelectionErrorMessage()}</ErrorText>
-        )}
-        {choiceMode === 'checkbox' && maxSelectionsErrorState && (
-          <ErrorText>
-            {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
-              lng: language,
-              maxSelections,
-            })}
-          </ErrorText>
-        )}
-      </MainContainer>
-    );
-  }
-}
-
-MultipleChoice.defaultProps = {
-  session: {
-    value: [],
-  },
-};
-
-export default MultipleChoice;

package/src/index.iife.ts

@@ -1,16 +0,0 @@
-/**
- * IIFE entry point for multiple-choice element
- * This file is only used for IIFE builds and includes auto-registration
- *
- * @sync-generated - Auto-generated during sync from pie-elements
- */
-
-import Element from './index.js';
-
-// Auto-register the custom element for IIFE mode
-if (typeof window !== 'undefined' && !customElements.get('multiple-choice-element')) {
-  customElements.define('multiple-choice-element', Element);
-}
-
-// Export for IIFE global
-export default Element;

package/src/index.ts

@@ -1 +0,0 @@
-export { default } from './delivery/index.js';

package/src/print/index.tsx

@@ -1,112 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/src/print.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { cloneDeep, debounce } from 'lodash-es';
-import Main from '../delivery/main.js';
-import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
-import debug from 'debug';
-
-const log = debug('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 = 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;
-};
-
-export default class MultipleChoicePrint extends HTMLElement {
-  constructor() {
-    super();
-    this._options = null;
-    this._model = null;
-    this._session = [];
-    this._root = null;
-    this._rerender = debounce(
-      () => {
-        if (this._model && this._session) {
-          const printModel = preparePrintModel(this._model, this._options);
-
-          const element =
-            this._options &&
-            React.createElement(Main, {
-              model: printModel,
-              session: {},
-              options: this._options,
-            });
-
-          if (!this._root) {
-            this._root = 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');
-              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();
-    }
-  }
-}