@pie-element/ebsr 14.2.1 → 14.2.2-next.1

package/src/__tests__/index.test.js

@@ -1,129 +0,0 @@
-import React from 'react';
-import { SessionChangedEvent } from '@pie-framework/pie-player-events';
-import { isSessionComplete } from '..';
-
-jest.mock('@pie-lib/math-rendering', () => ({ renderMath: jest.fn() }));
-jest.mock('@pie-element/multiple-choice', () => jest.fn());
-
-const PART_A = 'partA';
-const PART_B = 'partB';
-
-const defaultModel = {
-  disabled: false,
-  mode: 'gather',
-  partA: {
-    choiceMode: 'radio',
-    choices: [
-      { value: 'a', label: 'label a' },
-      { value: 'b', label: 'label b' },
-      { value: 'c', label: 'label c', correct: true, feedback: 'great' },
-    ],
-    choicePrefix: 'numbers',
-    prompt: `prompt ${PART_A}`,
-  },
-  partB: {
-    choiceMode: 'radio',
-    choices: [
-      { value: 'd', label: 'label d', correct: true, feedback: 'great' },
-      { value: 'e', label: 'label e' },
-      { value: 'f', label: 'label f' },
-    ],
-    choicePrefix: 'numbers',
-    prompt: `prompt ${PART_B}`,
-  },
-};
-
-const defaultSession = { id: 1 };
-
-describe('ebsr', () => {
-  let Def;
-  let el;
-  let ebsr;
-
-  beforeAll(() => {
-    Def = require('../index').default;
-
-    // Register the custom element if not already registered
-    if (!customElements.get('ebsr-element')) {
-      customElements.define('ebsr-element', Def);
-    }
-  });
-
-  beforeEach(() => {
-    el = document.createElement('ebsr-element');
-
-    // Mock createElement for part elements
-    ebsr = {
-      partA: document.createElement('div'),
-      partB: document.createElement('div'),
-    };
-    el.querySelector = jest.fn((s) => {
-      if (s === '#part-a') {
-        return ebsr.partA;
-      } else {
-        return ebsr.partB;
-      }
-    });
-
-    // Mock _render to avoid innerHTML issues with custom elements
-    el._render = jest.fn();
-
-    // Mock dispatchEvent for testing
-    el.dispatchEvent = jest.fn();
-
-    el.connectedCallback();
-    el.model = defaultModel;
-    el.session = defaultSession;
-  });
-
-  describe('model', () => {
-    it('should have set the model', () => {
-      expect(el._model).toEqual(defaultModel);
-    });
-  });
-
-  describe('session', () => {
-    const dispatchesSessionEvent = (key, value) => {
-      it(`${key} dispatches session changed event`, () => {
-        const session = { id: key, value };
-        el.dispatchSessionChanged(session, key);
-
-        expect(el.dispatchEvent).toBeCalledWith(new SessionChangedEvent('ebsr-element', false));
-        expect(el._session.value[key]).toEqual(session);
-      });
-    };
-
-    it('should have set the session', () => {
-      expect(el._session).toEqual(defaultSession);
-    });
-
-    describe('changeAnswers', () => {
-      dispatchesSessionEvent(PART_A, 'a');
-      dispatchesSessionEvent(PART_B, 'd');
-    });
-  });
-
-  describe('setPartSession', () => {
-    it('sets the session object even if missing from session.value', () => {
-      const part = {};
-      el.model = {};
-      el.session = {
-        value: {},
-      };
-      el.setPartSession(part, 'partA');
-      expect(part.session).toEqual({ id: 'partA' });
-    });
-  });
-});
-
-describe('isSessionComplete', () => {
-  const assertComplete = (s, expected) => {
-    it(`${JSON.stringify(s)} => ${expected}`, () => {
-      const result = isSessionComplete(s);
-      expect(result).toEqual(expected);
-    });
-  };
-
-  assertComplete({}, false);
-  assertComplete({ value: { partA: { value: [1] }, partB: { value: [2] } } }, true);
-});

package/src/index.js

@@ -1,222 +0,0 @@
-import { SessionChangedEvent } from '@pie-framework/pie-player-events';
-import MultipleChoice from '@pie-element/multiple-choice';
-import { get } from 'lodash-es';
-import debug from 'debug';
-
-const SESSION_CHANGED = SessionChangedEvent.TYPE;
-const MC_TAG_NAME = 'ebsr-multiple-choice';
-const log = debug('pie-elements:ebsr');
-
-class EbsrMC extends MultipleChoice {}
-
-const defineMultipleChoice = () => {
-  if (!customElements.get(MC_TAG_NAME)) {
-    customElements.define(MC_TAG_NAME, EbsrMC);
-  }
-};
-
-defineMultipleChoice();
-
-const isNonEmptyArray = (a) => Array.isArray(a) && a.length > 0;
-
-export const isSessionComplete = (session) => {
-  const a = get(session, 'value.partA.value');
-  const b = get(session, 'value.partB.value');
-
-  return isNonEmptyArray(a) && isNonEmptyArray(b);
-};
-
-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';
-
-  return { baseHeadingLevel, includeSrHeading };
-}
-
-export default class Ebsr extends HTMLElement {
-  constructor() {
-    super();
-    this._model = {};
-    this._session = {};
-  }
-
-  onSessionUpdated = (e) => {
-    if (e.target === this) {
-      return;
-    }
-
-    e.preventDefault();
-    e.stopImmediatePropagation();
-
-    const id = e.target.getAttribute('id');
-
-    if (id) {
-      const key = `part${id.toUpperCase()}`;
-
-      if (e.update) {
-        this._model[key] = e.update;
-      }
-      //TODO: accessing a private property here. The session event should contain the update in future to prevent this.
-      this.dispatchSessionChanged(e.srcElement._session, key);
-    }
-  };
-
-  set model(m) {
-    this._model = m;
-
-    customElements.whenDefined(MC_TAG_NAME).then(() => {
-      this.setPartModel(this.partA, 'partA');
-      this.setPartModel(this.partB, 'partB');
-    });
-  }
-
-  set session(s) {
-    this._session = s;
-
-    customElements.whenDefined(MC_TAG_NAME).then(() => {
-      this.setPartSession(this.partA, 'partA');
-      this.setPartSession(this.partB, 'partB');
-    });
-  }
-
-  get session() {
-    return this._session;
-  }
-
-  setPartModel(part, key) {
-    if (this._model && this._model[key] && part) {
-      const { mode } = this._model;
-
-      part.model = {
-        ...this._model[key],
-        mode,
-        keyMode: this._model[key].choicePrefix,
-      };
-
-      // Parts of an EBSR item should not render their own SR headings —
-      // the EBSR element itself provides the item-level heading.
-      const { includeSrHeading, baseHeadingLevel } = getPlayerAttributes(this);
-      part.includeSrHeading = includeSrHeading;
-      part.baseHeadingLevel = baseHeadingLevel;
-    }
-  }
-
-  setPartSession(part, key) {
-    if (this._session && this._model && part) {
-      const { value } = this._session;
-      part.session = value && value[key] ? value[key] : { id: key };
-    }
-  }
-
-  dispatchSessionChanged(partSession, key) {
-    this._session.value = {
-      ...this._session.value,
-      [key]: partSession,
-    };
-
-    log('[onSessionChanged] session: ', this._session);
-    const complete = isSessionComplete(this._session);
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));
-  }
-
-  get partA() {
-    return this.querySelector(`${MC_TAG_NAME}#a`);
-  }
-
-  get partB() {
-    return this.querySelector(`${MC_TAG_NAME}#b`);
-  }
-
-  connectedCallback() {
-    this._render();
-    this._initPlayerObserver();
-    this.addEventListener(SESSION_CHANGED, this.onSessionUpdated);
-  }
-
-  disconnectedCallback() {
-    this._disconnectPlayerObserver();
-    this.removeEventListener(SESSION_CHANGED, this.onSessionUpdated);
-  }
-
-  _initPlayerObserver() {
-    const player = this.closest('pie-player') || this.closest('pie-item-player');
-    if (!player) return;
-
-    this._playerObserver = new MutationObserver(() => {
-      this._render();
-    });
-    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;
-    }
-  }
-
-  _render() {
-    this.ariaLabel = 'Two-Part Question';
-    this.role = 'region';
-
-    const { baseHeadingLevel: ebsrLevel, includeSrHeading } = getPlayerAttributes(this);
-    const headingTag = ebsrLevel ? `h${Math.min(6, ebsrLevel)}` : 'h2';
-    const srHeading = includeSrHeading ? `<${headingTag} class="srOnly">Two-Part Question</${headingTag}>` : '';
-
-    this.innerHTML = `
-      <style>
-        .srOnly {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        left: -10000px;
-        top: auto;
-      }
-      ${this._model?.extraCSSRules?.rules}
-      </style>
-        ${srHeading}
-        <${MC_TAG_NAME} id="a"></${MC_TAG_NAME}>
-        <${MC_TAG_NAME} id="b"></${MC_TAG_NAME}>
-    `;
-
-    // when item is re-rendered (due to connectedCallback), if the custom element is already defined,
-    // we need to set the model and session, otherwise the setters are not reached again
-    if (customElements.get(MC_TAG_NAME)) {
-      this.setPartModel(this.partA, 'partA');
-      this.setPartModel(this.partB, 'partB');
-      this.setPartSession(this.partA, 'partA');
-      this.setPartSession(this.partB, 'partB');
-    }
-  }
-}

package/src/print.js

@@ -1,207 +0,0 @@
-import { cloneDeep, get } from 'lodash-es';
-import MultipleChoice from '@pie-element/multiple-choice';
-import debug from 'debug';
-import { SessionChangedEvent } from '@pie-framework/pie-player-events';
-const MC_TAG_NAME = 'ebsr-multiple-choice';
-const SESSION_CHANGED = SessionChangedEvent.TYPE;
-import Translator from '@pie-lib/translator';
-
-const { translator } = Translator;
-
-const log = debug('pie-element:ebsr: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';
-  const printModel = cloneDeep(model);
-
-  printModel.prompt = printModel.promptEnabled !== false ? printModel.prompt : undefined;
-  printModel.teacherInstructions =
-    instr && printModel.teacherInstructionsEnabled !== false ? printModel.teacherInstructions : undefined;
-  printModel.showTeacherInstructions = instr;
-  printModel.alwaysShowCorrect = instr;
-  printModel.mode = instr ? 'evaluate' : 'gather';
-
-  printModel.disabled = true;
-  printModel.animationsDisabled = true;
-  printModel.lockChoiceOrder = true;
-  printModel.choicesLayout = printModel.choicesLayout || 'vertical';
-
-  printModel.choices = (printModel.choices || []).map((c) => {
-    c.rationale = instr && printModel.rationaleEnabled !== false ? c.rationale : undefined;
-    c.hideTick = instr;
-    c.feedback = undefined;
-    return c;
-  });
-
-  printModel.keyMode = printModel.choicePrefix || 'letters';
-
-  return printModel;
-};
-
-class EbsrMC extends MultipleChoice {}
-
-const defineMultipleChoice = () => {
-  if (!customElements.get(MC_TAG_NAME)) {
-    customElements.define(MC_TAG_NAME, EbsrMC);
-  }
-};
-
-defineMultipleChoice();
-
-const isNonEmptyArray = (a) => Array.isArray(a) && a.length > 0;
-
-export const isSessionComplete = (session) => {
-  const a = get(session, 'value.partA.value');
-  const b = get(session, 'value.partB.value');
-
-  return isNonEmptyArray(a) && isNonEmptyArray(b);
-};
-
-export default class Ebsr extends HTMLElement {
-  constructor() {
-    super();
-    this._model = {};
-    this._session = {};
-    this._options = null;
-  }
-
-  onSessionUpdated = (e) => {
-    if (e.target === this) {
-      return;
-    }
-
-    e.preventDefault();
-    e.stopImmediatePropagation();
-
-    const id = e.target.getAttribute('id');
-
-    if (id) {
-      const key = `part${id.toUpperCase()}`;
-
-      if (e.update) {
-        this._model[key] = e.update;
-      }
-      //TODO: accessing a private property here. The session event should contain the update in future to prevent this.
-      this.dispatchSessionChanged(e.srcElement._session, key);
-    }
-  };
-
-  set model(m) {
-    this._model = m;
-    this._updateParts();
-  }
-
-  set session(s) {
-    this._session = s;
-
-    customElements.whenDefined(MC_TAG_NAME).then(() => {
-      this.setPartSession(this.partA, 'partA');
-      this.setPartSession(this.partB, 'partB');
-    });
-  }
-
-  _updateParts() {
-    customElements.whenDefined(MC_TAG_NAME).then(() => {
-      this.setPartModel(this.partA, 'partA');
-      this.setPartModel(this.partB, 'partB');
-    });
-  }
-
-  setPartModel(part, key) {
-    if (this._model && this._model[key] && part && this._options) {
-      let labels = {
-        partA: undefined,
-        partB: undefined,
-      };
-
-      if (this._model.partLabels) {
-        const language = this._model.language;
-
-        labels = {
-          partA: translator.t('ebsr.part', {
-            lng: language,
-            index: this._model.partLabelType === 'Letters' ? 'A' : '1',
-          }),
-          partB: translator.t('ebsr.part', {
-            lng: language,
-            index: this._model.partLabelType === 'Letters' ? 'B' : '2',
-          }),
-        };
-      }
-
-      part.model = {
-        ...preparePrintModel(this._model[key], this._options),
-        keyMode: this._model[key].choicePrefix,
-        partLabel: labels[key],
-      };
-
-      // pass options to enable print mode detection in multiple-choice component
-      part.options = this._options;
-
-      if (!part._session) {
-        // for print, "set session" is not called,
-        // but ebsr needs sessions in order to render the elements,
-        // so we set it here it was not set already
-        part.session = {};
-      }
-    }
-  }
-
-  set options(o) {
-    this._options = o;
-    // re-render parts so role changes (student/instructor) propagate to each part
-    this._updateParts();
-  }
-
-  setPartSession(part, key) {
-    if (this._session && this._model && part) {
-      const { value } = this._session;
-      part.session = value && value[key] ? value[key] : { id: key };
-    }
-  }
-
-  dispatchSessionChanged(partSession, key) {
-    this._session.value = {
-      ...this._session.value,
-      [key]: partSession,
-    };
-
-    log('[onSessionChanged] session: ', this._session);
-    const complete = isSessionComplete(this._session);
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));
-  }
-
-  get partA() {
-    return this.querySelector(`${MC_TAG_NAME}#a`);
-  }
-
-  get partB() {
-    return this.querySelector(`${MC_TAG_NAME}#b`);
-  }
-
-  connectedCallback() {
-    this._render();
-    this.addEventListener(SESSION_CHANGED, this.onSessionUpdated);
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener(SESSION_CHANGED, this.onSessionUpdated);
-  }
-
-  _render() {
-    this.innerHTML = `
-      <div>
-        <${MC_TAG_NAME} id="a"></${MC_TAG_NAME}>
-        <${MC_TAG_NAME} id="b"></${MC_TAG_NAME}>
-      </div>
-    `;
-  }
-}