@pie-element/ebsr 10.3.4-next.3 → 10.3.5-next.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.3.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/ebsr@10.3.3...@pie-element/ebsr@10.3.4) (2025-02-07)
+
+**Note:** Version bump only for package @pie-element/ebsr
+
+
+
+
+
 ## [10.3.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/ebsr@10.3.2...@pie-element/ebsr@10.3.3) (2025-02-06)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.2.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/ebsr-configure@10.2.3...@pie-element/ebsr-configure@10.2.4) (2025-02-07)
+
+**Note:** Version bump only for package @pie-element/ebsr-configure
+
+
+
+
+
 ## [10.2.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/ebsr-configure@10.2.2...@pie-element/ebsr-configure@10.2.3) (2025-02-06)
 
 

package/configure/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/ebsr-configure",
   "private": true,
-  "version": "10.2.3",
+  "version": "10.2.4",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multiple-choice": "^9.10.0",
+    "@pie-element/multiple-choice": "^9.11.0",
     "@pie-framework/pie-configure-events": "^1.2.0",
     "@pie-lib/pie-toolbox": "2.9.0",
     "lodash": "^4.17.15",

package/module/element.js

@@ -12719,6 +12719,8 @@ class MultipleChoice$1 extends React$2.Component {
     this.handleChange = event => {
       const {value, checked} = event.target;
       const {maxSelections, onChoiceChanged, session} = this.props;
+      const {detail} = event.nativeEvent;
+      let selector = detail ? 'Mouse' : 'Keyboard';
       if (session.value && session.value.length >= maxSelections) {
         this.setState({
           maxSelectionsErrorState: checked
@@ -12729,7 +12731,8 @@ class MultipleChoice$1 extends React$2.Component {
       }
       onChoiceChanged({
         value,
-        selected: checked
+        selected: checked,
+        selector
       });
     };
   }
@@ -12813,14 +12816,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 210
+        lineNumber: 214
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 212
+        lineNumber: 216
       }
     }, "Multiple Select Question");
   }
@@ -12842,7 +12845,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 247
+        lineNumber: 251
       }
     });
     const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12869,21 +12872,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 270
+        lineNumber: 274
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 271
+        lineNumber: 275
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 280
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12893,14 +12896,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 282
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 292
+        lineNumber: 296
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12911,7 +12914,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 293
+        lineNumber: 297
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12921,7 +12924,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 302
+        lineNumber: 306
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12932,7 +12935,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 310
+        lineNumber: 314
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12955,21 +12958,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 322
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 342
+        lineNumber: 346
       }
     }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 347
+        lineNumber: 351
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13080,6 +13083,7 @@ function updateSessionValue(session, choiceMode, data) {
       session.value = [];
     }
   }
+  session.selector = data.selector;
 }
 const React = _dll_react;
 const ReactDOM = _dll_react_dom;
@@ -13126,6 +13130,9 @@ class MultipleChoice extends HTMLElement {
           log$1('render complete - render math');
           renderMath(this);
         });
+        if (this._model.keyboardEventsEnabled === true) {
+          this.enableKeyboardEvents();
+        }
       } else {
         log$1('skip');
       }
@@ -13238,6 +13245,33 @@ class MultipleChoice extends HTMLElement {
       subtree: true
     });
   }
+  enableKeyboardEvents() {
+    window.addEventListener('keydown', this.handleKeyDown.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.handleKeyDown.bind(this));
+  }
+  handleKeyDown(event) {
+    if (!this._model || !this._session) {
+      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 >= 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)
+    };
+    this._onChange(newValue);
+  }
 }
 const {get: get} = _dll_lodash;
 const debug = _dll_debug;

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/ebsr@10.3.3</title>
+      <title>@pie-element/ebsr@10.3.4</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/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/ebsr",
-  "version": "10.3.3",
+  "version": "10.3.4",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",

package/module/print.html

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

package/module/print.js

@@ -12682,6 +12682,8 @@ class MultipleChoice$1 extends React$2.Component {
     this.handleChange = event => {
       const {value, checked} = event.target;
       const {maxSelections, onChoiceChanged, session} = this.props;
+      const {detail} = event.nativeEvent;
+      let selector = detail ? 'Mouse' : 'Keyboard';
       if (session.value && session.value.length >= maxSelections) {
         this.setState({
           maxSelectionsErrorState: checked
@@ -12692,7 +12694,8 @@ class MultipleChoice$1 extends React$2.Component {
       }
       onChoiceChanged({
         value,
-        selected: checked
+        selected: checked,
+        selector
       });
     };
   }
@@ -12776,14 +12779,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 210
+        lineNumber: 214
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 212
+        lineNumber: 216
       }
     }, "Multiple Select Question");
   }
@@ -12805,7 +12808,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 247
+        lineNumber: 251
       }
     });
     const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12832,21 +12835,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 270
+        lineNumber: 274
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 271
+        lineNumber: 275
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 276
+        lineNumber: 280
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12856,14 +12859,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 282
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 292
+        lineNumber: 296
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12874,7 +12877,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 293
+        lineNumber: 297
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12884,7 +12887,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 302
+        lineNumber: 306
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12895,7 +12898,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 310
+        lineNumber: 314
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12918,21 +12921,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 322
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 342
+        lineNumber: 346
       }
     }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 347
+        lineNumber: 351
       }
     }, translator$1.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13080,6 +13083,7 @@ function updateSessionValue(session, choiceMode, data) {
       session.value = [];
     }
   }
+  session.selector = data.selector;
 }
 const React = _dll_react;
 const ReactDOM = _dll_react_dom;
@@ -13126,6 +13130,9 @@ class MultipleChoice extends HTMLElement {
           log$1('render complete - render math');
           renderMath(this);
         });
+        if (this._model.keyboardEventsEnabled === true) {
+          this.enableKeyboardEvents();
+        }
       } else {
         log$1('skip');
       }
@@ -13238,6 +13245,33 @@ class MultipleChoice extends HTMLElement {
       subtree: true
     });
   }
+  enableKeyboardEvents() {
+    window.addEventListener('keydown', this.handleKeyDown.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.handleKeyDown.bind(this));
+  }
+  handleKeyDown(event) {
+    if (!this._model || !this._session) {
+      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 >= 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)
+    };
+    this._onChange(newValue);
+  }
 }
 const {cloneDeep: cloneDeep} = _dll_lodash;
 const {get: get} = _dll_lodash;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/ebsr",
-  "version": "10.3.4-next.3+ad7e530be",
+  "version": "10.3.5-next.0+907167450",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@pie-element/multiple-choice": "^9.10.1-next.3+ad7e530be",
+    "@pie-element/multiple-choice": "^9.11.1-next.0+907167450",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/pie-toolbox": "2.9.0",
     "classnames": "^2.2.5",
@@ -16,7 +16,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "ad7e530beaeba3fd71f3af1eca713ae156e4b2b2",
+  "gitHead": "9071674501549a147810c5932d1d45a99eeab4d2",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },