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

package/src/delivery/feedback-tick.tsx

@@ -0,0 +1,156 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/feedback-tick.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 { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
+import { color } from '@pie-lib/render-ui';
+
+const FeedbackTickContainer: any = styled(Box)({
+  width: '33px',
+  height: '33px',
+  '& svg': {
+    position: 'absolute',
+    display: 'inline-block',
+    width: '33px',
+    height: '33px',
+    verticalAlign: 'middle',
+    '& hide': {
+      display: 'none',
+    },
+  },
+});
+
+const StyledSVG: any = styled('svg')({
+  '& .incorrect-fill': {
+    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,
+  },
+  '& .correct-fill': {
+    fill: `var(--feedback-correct-bg-color, ${color.correct()})`,
+  },
+});
+
+const TransitionWrapper: any = styled('div')({
+  position: 'relative',
+  '&.feedback-tick-enter': {
+    opacity: '0',
+    left: '-50px',
+  },
+  '&.feedback-tick-enter-active': {
+    opacity: '1',
+    left: '0px',
+    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',
+  },
+  '&.feedback-tick-exit': {
+    opacity: '1',
+    left: '0px',
+  },
+  '&.feedback-tick-exit-active': {
+    opacity: '0',
+    left: '-50px',
+    transition: 'left 300ms ease-in, opacity 300ms',
+  },
+});
+
+class FeedbackTick extends React.Component {
+  static propTypes = {
+    correctness: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    this.nodeRef = React.createRef();
+  }
+
+  getIncorrectIcon = () => (
+    <StyledSVG
+      key="1"
+      preserveAspectRatio="xMinYMin meet"
+      x="0px"
+      y="0px"
+      viewBox="0 0 44 40"
+      style={{ enableBackground: 'new 0 0 44 40' }}
+    >
+      <g>
+        <rect
+          x="11"
+          y="17.3"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)"
+          className="incorrect-fill"
+          width="16.6"
+          height="3.7"
+        />
+        <rect
+          x="17.4"
+          y="10.7"
+          transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)"
+          className="incorrect-fill"
+          width="3.7"
+          height="16.6"
+        />
+      </g>
+    </StyledSVG>
+  );
+
+  getCorrectIcon = () => (
+    <StyledSVG
+      key="2"
+      preserveAspectRatio="xMinYMin meet"
+      version="1.1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 44 40"
+      style={{ enableBackground: 'new 0 0 44 40' }}
+    >
+      <polygon
+        className="correct-fill"
+        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"
+      />
+    </StyledSVG>
+  );
+
+  render() {
+    const { correctness } = this.props;
+
+    const icon = (() => {
+      if (correctness === 'incorrect') {
+        return this.getIncorrectIcon();
+      } else if (correctness === 'correct') {
+        return this.getCorrectIcon();
+      }
+      return null;
+    })();
+
+    return (
+      <FeedbackTickContainer>
+        <TransitionGroup>
+          {correctness && (
+            <CSSTransition
+              nodeRef={this.nodeRef}
+              classNames={{
+                enter: 'feedback-tick-enter',
+                enterActive: 'feedback-tick-enter-active',
+                exit: 'feedback-tick-exit',
+                exitActive: 'feedback-tick-exit-active',
+              }}
+              timeout={{ enter: 700, exit: 300 }}
+            >
+              <TransitionWrapper ref={this.nodeRef}>{icon}</TransitionWrapper>
+            </CSSTransition>
+          )}
+        </TransitionGroup>
+      </FeedbackTickContainer>
+    );
+  }
+}
+
+export default FeedbackTick;

package/src/delivery/index.ts

@@ -0,0 +1,489 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/index.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 Main from './main.js';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { debounce } from 'lodash-es';
+import debug from 'debug';
+import { ModelSetEvent, SessionChangedEvent } from '@pie-element/shared-player-events';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import { EnableAudioAutoplayImage as EnableAudioAutoplayImageImport } 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 EnableAudioAutoplayImage = unwrapReactInteropSymbol(EnableAudioAutoplayImageImport, 'EnableAudioAutoplayImage') || unwrapReactInteropSymbol(renderUi.EnableAudioAutoplayImage, 'EnableAudioAutoplayImage');
+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 { updateSessionValue, updateSessionMetadata } from './session-updater.js';
+
+const log = debug('pie-ui:multiple-choice');
+
+export const isComplete = (session, model, audioComplete, elementContext) => {
+  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};
+
+  // check audio completion if audio settings are enabled and audio actually exists
+  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {
+    if (elementContext) {
+      const audio = elementContext.querySelector('audio');
+      const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+      // only require audio completion if audio exists and is inside the prompt
+      if (audio && isInsidePrompt) {
+        return false;
+      }
+    }
+  }
+
+  if (!session || !session.value) {
+    return false;
+  }
+
+  const { choiceMode, minSelections = 1, maxSelections } = model || {};
+  const selections = session.value.length || 0;
+
+  if (choiceMode === 'radio') {
+    return !!selections;
+  }
+
+  if (selections < minSelections || selections > maxSelections) {
+    return false;
+  }
+
+  return true;
+};
+
+function getPlayerAttributes(element) {
+  const player =
+    element.closest('pie-player') ||
+    element.closest('pie-item-player');
+
+  if (!player) {
+    return { baseHeadingLevel: undefined, includeSrHeading: true };
+  }
+
+  const getRaw = (camelCaseName, hyphenatedName, allLowerName) => {
+    let raw = player[camelCaseName];
+
+    // fallback in case someone sets via HTML attribute manually
+    if (raw == null) {
+      raw =
+        player.getAttribute(hyphenatedName) ??
+        player.getAttribute(allLowerName);
+    }
+
+    return raw;
+  };
+
+  const levelRaw = getRaw('baseHeadingLevel', 'base-heading-level', 'baseheadinglevel');
+  const level = parseInt(levelRaw, 10);
+  const baseHeadingLevel = Number.isFinite(level) && level >= 1 && level <= 6 ? level : undefined;
+
+  const srRaw = getRaw('includeSrHeading', 'include-sr-heading', 'includesrheading');
+  const includeSrHeading = srRaw == null ? true : srRaw !== false && srRaw !== 'false';
+
+  console.log('getPlayerAttributes', { baseHeadingLevel, includeSrHeading });
+  return { baseHeadingLevel, includeSrHeading };
+}
+
+// Resolves heading attributes for a custom element, preferring explicit instance
+// properties (set by a parent element such as EBSR) over player-level attributes.
+function resolveHeadingProps(element) {
+  const fromPlayer = getPlayerAttributes(element);
+
+  console.log('element._baseHeadingLevel', element._baseHeadingLevel, 'element._includeSrHeading', element._includeSrHeading);
+  return {
+    baseHeadingLevel: element._baseHeadingLevel !== undefined ? element._baseHeadingLevel : fromPlayer.baseHeadingLevel,
+    includeSrHeading: element._includeSrHeading !== undefined ? element._includeSrHeading : fromPlayer.includeSrHeading,
+  };
+}
+
+export default class MultipleChoice extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+    this._options = null; // added for ebsr print mode detection
+    this.audioComplete = false;
+    this._boundHandleKeyDown = this.handleKeyDown.bind(this);
+    this._keyboardEventsEnabled = false;
+    this._audioInitialized = false;
+    this._root = null;
+    this._mathObserver = null;
+    this._mathRenderPending = false;
+
+    this._rerender = debounce(
+      () => {
+        if (this._model && this._session) {
+          var element = React.createElement(Main, {
+            model: this._model,
+            session: this._session,
+            options: this._options,
+            onChoiceChanged: this._onChange.bind(this),
+            onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
+            ...resolveHeadingProps(this),
+          });
+
+          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender
+          this.setAttribute(
+            'aria-label',
+            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',
+          );
+          this.setAttribute('role', 'region');
+          this.setLangAttribute();
+
+          this._initMathObserver();
+
+          if (!this._root) {
+            this._root = createRoot(this);
+          }
+          this._root.render(element);
+
+          if (this._model.keyboardEventsEnabled === true && !this._keyboardEventsEnabled) {
+            this.enableKeyboardEvents();
+          }
+        } else {
+          log('skip');
+        }
+      },
+      50,
+      { leading: false, trailing: true },
+    );
+
+    this._dispatchResponseChanged = debounce(() => {
+      this.dispatchEvent(
+        new SessionChangedEvent(
+          this.tagName.toLowerCase(),
+          isComplete(this._session, this._model, this.audioComplete, this),
+        ),
+      );
+    });
+
+    this._dispatchModelSet = debounce(
+      () => {
+        this.dispatchEvent(
+          new ModelSetEvent(
+            this.tagName.toLowerCase(),
+            isComplete(this._session, this._model, this.audioComplete, this),
+            this._model !== undefined,
+          ),
+        );
+      },
+      50,
+      { leading: false, trailing: true },
+    );
+  }
+
+  _scheduleMathRender: any = () => {
+    if (this._mathRenderPending) return;
+    this._mathRenderPending = true;
+
+    requestAnimationFrame(() => {
+      if (this._mathObserver) {
+        this._mathObserver.disconnect();
+      }
+      log('render complete - render math');
+      renderMath(this);
+      this._mathRenderPending = false;
+      setTimeout(() => {
+        if (this._mathObserver) {
+          this._mathObserver.observe(this, { childList: true, subtree: true });
+        }
+      }, 50);
+    });
+  };
+
+  _initMathObserver() {
+    if (this._mathObserver) return;
+    this._mathObserver = new MutationObserver(this._scheduleMathRender);
+    this._mathObserver.observe(this, { childList: true, subtree: true });
+  }
+
+  _disconnectMathObserver() {
+    if (this._mathObserver) {
+      this._mathObserver.disconnect();
+      this._mathObserver = null;
+    }
+  }
+
+  onShowCorrectToggle() {
+    renderMath(this);
+  }
+
+  setLangAttribute() {
+    const language = this._model && typeof this._model.language ? this._model.language : '';
+    const lang = language ? language.slice(0, 2) : 'en';
+    this.setAttribute('lang', lang);
+  }
+
+  set model(s) {
+    this._model = s;
+    this._rerender();
+    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
+    this._audioInitialized = false;
+    this._dispatchModelSet();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  get options() {
+    return this._options;
+  }
+
+  set options(o) {
+    this._options = o;
+    this._rerender();
+  }
+
+  set baseHeadingLevel(level) {
+    this._baseHeadingLevel = level;
+    this._rerender();
+  }
+
+  set includeSrHeading(value) {
+    this._includeSrHeading = value;
+    this._rerender();
+  }
+
+  set session(s) {
+    this._session = s;
+    this._rerender();
+    //TODO: remove this session-changed should only be emit on user change
+    this._dispatchResponseChanged();
+  }
+
+  _onChange(data) {
+    updateSessionValue(this._session, this._model.choiceMode, data);
+    this._dispatchResponseChanged();
+    this._rerender();
+  }
+
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+
+    Object.assign(info.style, {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: 'white',
+      zIndex: '1000',
+      cursor: 'pointer',
+    });
+
+    const img = document.createElement('img');
+    img.src = EnableAudioAutoplayImage;
+    img.alt = 'Click anywhere to enable audio autoplay';
+    img.width = 500;
+    img.height = 300;
+
+    info.appendChild(img);
+    return info;
+  }
+
+  connectedCallback() {
+    this._initMathObserver();
+    this._initPlayerObserver();
+    this._rerender();
+
+    // Observation:  audio in Chrome will have the autoplay attribute,
+    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
+    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          if (this._audioInitialized) return;
+
+          const audio = this.querySelector('audio');
+          const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
+          if (audio && !isInsidePrompt) return;
+          if (!audio) return;
+
+          const info = this._createAudioInfoToast();
+          const container = this.querySelector('#main-container');
+          const enableAudio = () => {
+            if (this.querySelector('#play-audio-info')) {
+              audio.play();
+              container.removeChild(info);
+            }
+
+            document.removeEventListener('click', enableAudio);
+          };
+
+          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
+          setTimeout(() => {
+            if (audio.paused && !this.querySelector('#play-audio-info')) {
+              // add info message as a toast to enable audio playback
+              container.appendChild(info);
+              document.addEventListener('click', enableAudio);
+            } else {
+              document.removeEventListener('click', enableAudio);
+            }
+          }, 500);
+
+          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+          const handlePlaying = () => {
+            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });
+
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              container.removeChild(info);
+            }
+
+            audio.removeEventListener('playing', handlePlaying);
+          };
+
+          audio.addEventListener('playing', handlePlaying);
+
+          // we need to listen for the ended event to update the isComplete state
+          const handleEnded = () => {
+            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });
+            this.audioComplete = true;
+            this._dispatchResponseChanged();
+            audio.removeEventListener('ended', handleEnded);
+          };
+
+          audio.addEventListener('ended', handleEnded);
+
+          // store references to remove later
+          this._audio = audio;
+          this._handlePlaying = handlePlaying;
+          this._handleEnded = handleEnded;
+          this._enableAudio = enableAudio;
+          // set to true to prevent multiple initializations
+          this._audioInitialized = true;
+
+          observer.disconnect();
+        }
+      });
+    });
+
+    observer.observe(this, { childList: true, subtree: true });
+  }
+
+  enableKeyboardEvents() {
+    if (!this._keyboardEventsEnabled) {
+      window.addEventListener('keydown', this._boundHandleKeyDown);
+      this._keyboardEventsEnabled = true;
+    }
+  }
+
+  _initPlayerObserver() {
+    const player = this.closest('pie-player') || this.closest('pie-item-player');
+    if (!player) return;
+
+    this._playerObserver = new MutationObserver(() => {
+      this._rerender();
+    });
+    this._playerObserver.observe(player, {
+      attributes: true,
+      attributeFilter: ['base-heading-level', 'baseheadinglevel', 'include-sr-heading', 'includesrheading'],
+    });
+  }
+
+  _disconnectPlayerObserver() {
+    if (this._playerObserver) {
+      this._playerObserver.disconnect();
+      this._playerObserver = null;
+    }
+  }
+
+  disconnectedCallback() {
+    this._disconnectMathObserver();
+    this._disconnectPlayerObserver();
+    if (this._keyboardEventsEnabled) {
+      window.removeEventListener('keydown', this._boundHandleKeyDown);
+      this._keyboardEventsEnabled = false;
+    }
+
+    document.removeEventListener('click', this._enableAudio);
+
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+
+  /**
+   * Handles global keyboard events for selecting or toggling multiple-choice answers.
+   * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.
+   * Ensures valid key presses toggle or select the appropriate choice based on the model.
+   */
+  handleKeyDown(event) {
+    if (!this._model || !this._session) {
+      return;
+    }
+
+    const { mode } = this._model;
+    if (mode !== 'gather') {
+      return;
+    }
+
+    const keyToIndex = (key) => {
+      const numOffset = key >= '1' && key <= '9' ? key - '1' : key === '0' ? 9 : -1;
+      const letterOffset = /^[a-jA-J]$/.test(key) ? key.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0) : -1;
+      return numOffset >= 0 ? numOffset : letterOffset;
+    };
+
+    const choiceIndex = keyToIndex(event.key);
+
+    if (choiceIndex === undefined || choiceIndex <= -1 || choiceIndex >= this._model.choices?.length) {
+      return;
+    }
+
+    const currentValue = this._session.value || [];
+    const choiceId = this._model.choices[choiceIndex].value;
+
+    const newValue = {
+      value: choiceId,
+      selected: !currentValue.includes(choiceId),
+      selector: 'Keyboard',
+    };
+
+    this._onChange(newValue);
+  }
+}