@pie-element/ebsr 14.2.1-next.2 → 14.2.1-next.29

package/src/__tests__/index.test.js

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,222 @@
+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

@@ -0,0 +1,207 @@
+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>
+    `;
+  }
+}

package/dist/author/defaults.d.ts

@@ -1,66 +0,0 @@
-/**
- * @synced-from pie-elements/packages/ebsr/configure/src/defaults.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.
- */
-declare const _default: {
-    model: {
-        partLabels: boolean;
-        partLabelType: string;
-        partA: any;
-        partB: any;
-    };
-    configuration: {
-        baseInputConfiguration: {
-            h3: {
-                disabled: boolean;
-            };
-            audio: {
-                disabled: boolean;
-            };
-            video: {
-                disabled: boolean;
-            };
-            image: {
-                disabled: boolean;
-            };
-            textAlign: {
-                disabled: boolean;
-            };
-            showParagraphs: {
-                disabled: boolean;
-            };
-            separateParagraphs: {
-                disabled: boolean;
-            };
-        };
-        partialScoring: {
-            label: string;
-            settings: boolean;
-        };
-        scoringType: {
-            settings: boolean;
-            label: string;
-        };
-        partA: any;
-        partB: any;
-        partLabels: {
-            settings: boolean;
-            label: string;
-        };
-        settingsPanelDisabled: boolean;
-        language: {
-            settings: boolean;
-            label: string;
-            enabled: boolean;
-        };
-        languageChoices: {
-            label: string;
-            options: never[];
-        };
-    };
-};
-export default _default;