@pie-element/ebsr 9.12.1-next.13 → 9.12.1-next.14

package/module/demo.js

@@ -0,0 +1,77 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  partA: {
+    choiceMode: 'radio',
+    choices: [
+      {
+        value: 'yellow',
+        label: 'Yellow',
+      },
+      {
+        value: 'green',
+        label: 'Green',
+      },
+      {
+        correct: true,
+        value: 'blue',
+        label: 'Blue',
+      },
+    ],
+    choicePrefix: 'numbers',
+    partialScoring: false,
+    prompt: 'What color is the sky?',
+    promptEnabled: true,
+  },
+  partB: {
+    choiceMode: 'radio',
+    choices: [
+      {
+        value: 'orange',
+        label: 'Orange',
+      },
+      {
+        correct: true,
+        value: 'purple',
+        label: 'Purple',
+      },
+      {
+        value: 'pink',
+        label: 'Pink',
+      },
+      {
+        value: 'green',
+        label: 'Green',
+      },
+    ],
+    choicePrefix: 'numbers',
+    partialScoring: false,
+    prompt: 'What color do you get when you mix Red with your answer in Part 1?',
+    promptEnabled: true,
+  },
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'ebsr-element': '../..',
+  },
+  models: [model('1', 'ebsr-element') /*, model('2', 'ebsr-element')*/],
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });

package/{configure/node_modules/@pie-element/multiple-choice/module → module}/element.js

@@ -20,6 +20,43 @@ function getAugmentedNamespace(n) {
   });
   return a;
 }
+var lib$8 = {};
+Object.defineProperty(lib$8, "__esModule", {
+  value: true
+});
+class ModelSetEvent extends CustomEvent {
+  constructor(component, complete, hasModel) {
+    super(ModelSetEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component,
+        hasModel
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+ModelSetEvent.TYPE = 'model-set';
+lib$8.ModelSetEvent = ModelSetEvent;
+class SessionChangedEvent extends CustomEvent {
+  constructor(component, complete) {
+    super(SessionChangedEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+SessionChangedEvent.TYPE = 'session-changed';
+var SessionChangedEvent_1 = lib$8.SessionChangedEvent = SessionChangedEvent;
 var styles$b = {};
 var interopRequireDefault = {
   exports: {}
@@ -9667,9 +9704,9 @@ function updateSessionValue(session, choiceMode, data) {
 const React = _dll_react;
 const ReactDOM = _dll_react_dom;
 const {debounce: debounce} = _dll_lodash;
-const debug = _dll_debug;
+const debug$1 = _dll_debug;
 const {renderMath: renderMath} = _dll_pie_lib__pie_toolbox_math_rendering_accessible;
-const log = debug('pie-ui:multiple-choice');
+const log$1 = debug$1('pie-ui:multiple-choice');
 const isComplete = session => !!(session && session.value && session.value.length);
 class MultipleChoice extends HTMLElement {
   constructor() {
@@ -9686,11 +9723,11 @@ class MultipleChoice extends HTMLElement {
         this.setAttribute('aria-label', this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
         this.setAttribute('role', 'region');
         ReactDOM.render(element, this, () => {
-          log('render complete - render math');
+          log$1('render complete - render math');
           renderMath(this);
         });
       } else {
-        log('skip');
+        log$1('skip');
       }
     }, 50, {
       leading: false,
@@ -9744,4 +9781,131 @@ class MultipleChoice extends HTMLElement {
     this._rerender();
   }
 }
-export {MultipleChoice as default, isComplete};
+const {get: get} = _dll_lodash;
+const debug = _dll_debug;
+const SESSION_CHANGED = SessionChangedEvent_1.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;
+const isSessionComplete = session => {
+  const a = get(session, 'value.partA.value');
+  const b = get(session, 'value.partB.value');
+  return isNonEmptyArray(a) && isNonEmptyArray(b);
+};
+class Ebsr extends HTMLElement {
+  constructor() {
+    super();
+    Ebsr.prototype.__init.call(this);
+    this._model = {};
+    this._session = {};
+  }
+  __init() {
+    this.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;
+        }
+        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
+      };
+    }
+  }
+  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_1(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.ariaLabel = 'Two-Part Question';
+    this.role = 'region';
+    this.innerHTML = `
+      <style>
+        .srOnly {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        left: -10000px;
+        top: auto;
+      }
+      </style>
+        <h2 class="srOnly">Two-Part Question</h2>
+        <${MC_TAG_NAME} id="a"></${MC_TAG_NAME}>
+        <${MC_TAG_NAME} id="b"></${MC_TAG_NAME}>
+    `;
+    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');
+    }
+  }
+}
+export {Ebsr as default, isSessionComplete};

package/{configure/node_modules/@pie-element/multiple-choice/module → module}/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@8.14.0</title>
+      <title>@pie-element/ebsr@9.12.0</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/{configure/node_modules/@pie-element/multiple-choice/module → module}/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "@pie-element/multiple-choice",
-  "version": "8.14.0",
+  "name": "@pie-element/ebsr",
+  "version": "9.12.0",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",

package/{configure/node_modules/@pie-element/multiple-choice/module → module}/print-demo.js

@@ -5,64 +5,63 @@ var generate = {};
 generate.model = (id, element) => ({
   id,
   element,
-  choiceMode: 'checkbox',
-  choicePrefix: 'numbers',
-  choices: [
-    {
-      correct: true,
-      value: 'sweden',
-      label: 'Sweden',
-      feedback: {
-        type: 'none',
-        value: '',
+  partA: {
+    choiceMode: 'radio',
+    choices: [
+      {
+        value: 'yellow',
+        label: 'Yellow',
       },
-      accessibility: 'sweden',
-    },
-    {
-      value: 'iceland',
-      label: 'Iceland',
-      feedback: {
-        type: 'none',
-        value: '',
+      {
+        value: 'green',
+        label: 'Green',
       },
-      rationale: 'Rationale for Iceland',
-      accessibility: 'iceland',
-    },
-    {
-      value: 'norway',
-      label: 'Norway',
-      feedback: {
-        type: 'none',
-        value: '',
+      {
+        correct: true,
+        value: 'blue',
+        label: 'Blue',
       },
-      rationale: 'Rationale for Norway',
-      accessibility: 'norway',
-    },
-    {
-      correct: true,
-      value: 'finland',
-      label: 'Finland',
-      feedback: {
-        type: 'none',
-        value: '',
+    ],
+    choicePrefix: 'numbers',
+    partialScoring: false,
+    prompt: 'What color is the sky?',
+    promptEnabled: true,
+  },
+  partB: {
+    choiceMode: 'radio',
+    choices: [
+      {
+        value: 'orange',
+        label: 'Orange',
+      },
+      {
+        correct: true,
+        value: 'purple',
+        label: 'Purple',
+      },
+      {
+        value: 'pink',
+        label: 'Pink',
       },
-      rationale: 'Rationale for Finland',
-      accessibility: 'finland',
-    },
-  ],
-  prompt: "",
-  promptEnabled: true,
-  toolbarEditorPosition: 'bottom',
-  rubricEnabled: false,
+      {
+        value: 'green',
+        label: 'Green',
+      },
+    ],
+    choicePrefix: 'numbers',
+    partialScoring: false,
+    prompt: 'What color do you get when you mix Red with your answer in Part 1?',
+    promptEnabled: true,
+  },
 });
 
 const { model } = generate;
 
 var config = {
   elements: {
-    'multiple-choice': '../..',
+    'ebsr-element': '../..',
   },
-  models: [model('1', 'multiple-choice')],
+  models: [model('1', 'ebsr-element') /*, model('2', 'ebsr-element')*/],
 };
 
 // new init - just shows off print!

package/{configure/node_modules/@pie-element/multiple-choice/module → module}/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@8.14.0</title>
+      <title>@pie-element/ebsr@9.12.0</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"