@pie-element/multiple-choice 0.1.0

package/src/delivery/multiple-choice.tsx

@@ -0,0 +1,466 @@
+// @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 } 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,
+  };
+
+  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 } = this.props;
+
+    if (mode !== 'gather') {
+      return null;
+    }
+
+    return choiceMode === 'radio' ? (
+      <SrOnly>Multiple Choice Question</SrOnly>
+    ) : (
+      <SrOnly>Multiple Select Question</SrOnly>
+    );
+  }
+
+  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,
+    } = 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;
+
+    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>{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={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/delivery/session-updater.ts

@@ -0,0 +1,41 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/session-updater.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export function updateSessionValue(session, choiceMode, data) {
+  session.value = session.value || [];
+  if (choiceMode === 'checkbox') {
+    if (data.selected) {
+      session.value = Array.from(new Set([...session.value, data.value]));
+    } else {
+      session.value = session.value.filter(v => v !== data.value);
+    }
+  }
+
+  if (choiceMode === 'radio') {
+    if (data.selected) {
+      session.value = [data.value];
+    } else {
+      session.value = [];
+    }
+  }
+  
+  //update session value metadata
+  session.selector = data.selector; //the input method used to select the choice (e.g. mouse, keyboard)
+}
+
+export function updateSessionMetadata(session, metadata) {
+  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
+  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
+  
+  if(!session.waitTime && session.audioStartTime && session.audioEndTime) {
+    // waitTime is elapsed time the user waited for auto-played audio to finish
+    session.waitTime = (session.audioEndTime - session.audioStartTime);
+  }
+}

package/src/index.iife.ts

@@ -0,0 +1,16 @@
+/**
+ * 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

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

package/src/print/index.tsx

@@ -0,0 +1,112 @@
+// @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();
+    }
+  }
+}