@pie-element/ebsr 10.2.11-next.3 → 10.2.11-next.9

package/configure/package.json

@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@pie-element/multiple-choice": "^9.7.3",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/pie-toolbox": "2.7.1",
+    "@pie-lib/pie-toolbox": "2.8.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
     "react": "^16.8.1",

package/controller/package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.7.1",
+    "@pie-lib/pie-toolbox": "2.8.0",
     "lodash": "^4.17.15"
   },
   "author": "",

package/module/configure.js

@@ -1,6 +1,6 @@
 import {_dll_react, _dll_prop_types, _dll_lodash, _dll_react_dom} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.1.1/module/index.js";
 import MultipleChoiceConfigure from '@pie-element/multiple-choice/configure/lib';
-import {_dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@5.8.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@5.8.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;

package/module/element.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.1.1/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.8.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.8.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -12694,7 +12694,8 @@ class MultipleChoice$1 extends React$2.Component {
       onShowCorrectToggle: PropTypes$1.func,
       isSelectionButtonBelow: PropTypes$1.bool,
       minSelections: PropTypes$1.number,
-      maxSelections: PropTypes$1.number
+      maxSelections: PropTypes$1.number,
+      autoplayAudioEnabled: PropTypes$1.bool
     };
   }
   constructor(props) {
@@ -12810,19 +12811,19 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 209
+        lineNumber: 210
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 211
+        lineNumber: 212
       }
     }, "Multiple Select Question");
   }
   render() {
-    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
+    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, autoplayAudioEnabled, session} = this.props;
     const {showCorrect, maxSelectionsErrorState} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
@@ -12838,7 +12839,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 243
+        lineNumber: 245
       }
     });
     return React$2.createElement('div', {
@@ -12846,21 +12847,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 252
+        lineNumber: 254
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 253
+        lineNumber: 255
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 258
+        lineNumber: 260
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12870,24 +12871,25 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 260
+        lineNumber: 262
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 274
+        lineNumber: 276
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
       defaultClassName: "prompt",
       prompt: prompt,
       tagName: 'legend',
+      autoplayAudioEnabled: autoplayAudioEnabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 275
+        lineNumber: 277
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12897,7 +12899,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 286
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12908,7 +12910,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 286
+        lineNumber: 294
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12931,14 +12933,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 302
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 326
       }
     }, translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -12948,7 +12950,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 326
+        lineNumber: 334
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13066,7 +13068,10 @@ const {debounce: debounce} = _dll_lodash;
 const debug$1 = _dll_debug;
 const {renderMath: renderMath} = _dll_pie_lib__pie_toolbox_math_rendering;
 const log$1 = debug$1('pie-ui:multiple-choice');
-const isComplete = (session, model) => {
+const isComplete = (session, model, audioComplete) => {
+  if (!audioComplete) {
+    return false;
+  }
   if (!session || !session.value) {
     return false;
   }
@@ -13085,6 +13090,7 @@ class MultipleChoice extends HTMLElement {
     super();
     this._model = null;
     this._session = null;
+    this.audioComplete = false;
     this._rerender = debounce(() => {
       if (this._model && this._session) {
         var element = React.createElement(Root, {
@@ -13108,7 +13114,7 @@ class MultipleChoice extends HTMLElement {
       trailing: true
     });
     this._dispatchResponseChanged = debounce(() => {
-      this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model)));
+      this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));
     });
     this._dispatchModelSet = debounce(() => {
       this.dispatchEvent(new ModelSetEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model), this._model !== undefined));
@@ -13143,8 +13149,66 @@ class MultipleChoice extends HTMLElement {
     this._dispatchResponseChanged();
     this._rerender();
   }
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+    info.innerHTML = 'Click anywhere to enable audio autoplay. Browser restrictions require user interaction to play audio.';
+    Object.assign(info.style, {
+      position: 'fixed',
+      bottom: '20px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      backgroundColor: '#333',
+      color: '#fff',
+      padding: '10px 20px',
+      borderRadius: '5px',
+      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+      zIndex: '1000'
+    });
+    return info;
+  }
   connectedCallback() {
     this._rerender();
+    if (this._model && !this._model.autoplayAudioEnabled) {
+      return;
+    }
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach(mutation => {
+        if (mutation.type === 'childList') {
+          const audio = this.querySelector('audio[autoplay]');
+          if (!audio) return;
+          if (audio.paused && !this.querySelector('#play-audio-info')) {
+            const info = this._createAudioInfoToast();
+            this.appendChild(info);
+            const enableAudio = () => {
+              audio.play();
+              this.removeChild(info);
+              document.removeEventListener('click', enableAudio);
+            };
+            document.addEventListener('click', enableAudio);
+          }
+          const handlePlaying = () => {
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              this.removeChild(info);
+            }
+            audio.removeEventListener('playing', handlePlaying);
+          };
+          audio.addEventListener('playing', handlePlaying);
+          const handleEnded = () => {
+            this.audioComplete = true;
+            this._dispatchResponseChanged();
+            audio.removeEventListener('ended', handleEnded);
+          };
+          audio.addEventListener('ended', handleEnded);
+          observer.disconnect();
+        }
+      });
+    });
+    observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
   }
 }
 const {get: get} = _dll_lodash;

package/module/manifest.json

@@ -8,7 +8,7 @@
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.8.0"
+      "version": "5.8.1"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.1.1/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.8.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.8.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -12657,7 +12657,8 @@ class MultipleChoice$1 extends React$2.Component {
       onShowCorrectToggle: PropTypes$1.func,
       isSelectionButtonBelow: PropTypes$1.bool,
       minSelections: PropTypes$1.number,
-      maxSelections: PropTypes$1.number
+      maxSelections: PropTypes$1.number,
+      autoplayAudioEnabled: PropTypes$1.bool
     };
   }
   constructor(props) {
@@ -12773,19 +12774,19 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 209
+        lineNumber: 210
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 211
+        lineNumber: 212
       }
     }, "Multiple Select Question");
   }
   render() {
-    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
+    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, autoplayAudioEnabled, session} = this.props;
     const {showCorrect, maxSelectionsErrorState} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
@@ -12801,7 +12802,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 243
+        lineNumber: 245
       }
     });
     return React$2.createElement('div', {
@@ -12809,21 +12810,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 252
+        lineNumber: 254
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 253
+        lineNumber: 255
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 258
+        lineNumber: 260
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12833,24 +12834,25 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 260
+        lineNumber: 262
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 274
+        lineNumber: 276
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
       defaultClassName: "prompt",
       prompt: prompt,
       tagName: 'legend',
+      autoplayAudioEnabled: autoplayAudioEnabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 275
+        lineNumber: 277
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12860,7 +12862,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 286
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12871,7 +12873,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 286
+        lineNumber: 294
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12894,14 +12896,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 302
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 326
       }
     }, translator$1.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -12911,7 +12913,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 326
+        lineNumber: 334
       }
     }, translator$1.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13066,7 +13068,10 @@ const {debounce: debounce} = _dll_lodash;
 const debug$1 = _dll_debug;
 const {renderMath: renderMath} = _dll_pie_lib__pie_toolbox_math_rendering;
 const log$1 = debug$1('pie-ui:multiple-choice');
-const isComplete = (session, model) => {
+const isComplete = (session, model, audioComplete) => {
+  if (!audioComplete) {
+    return false;
+  }
   if (!session || !session.value) {
     return false;
   }
@@ -13085,6 +13090,7 @@ class MultipleChoice extends HTMLElement {
     super();
     this._model = null;
     this._session = null;
+    this.audioComplete = false;
     this._rerender = debounce(() => {
       if (this._model && this._session) {
         var element = React.createElement(Root, {
@@ -13108,7 +13114,7 @@ class MultipleChoice extends HTMLElement {
       trailing: true
     });
     this._dispatchResponseChanged = debounce(() => {
-      this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model)));
+      this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));
     });
     this._dispatchModelSet = debounce(() => {
       this.dispatchEvent(new ModelSetEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model), this._model !== undefined));
@@ -13143,8 +13149,66 @@ class MultipleChoice extends HTMLElement {
     this._dispatchResponseChanged();
     this._rerender();
   }
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+    info.innerHTML = 'Click anywhere to enable audio autoplay. Browser restrictions require user interaction to play audio.';
+    Object.assign(info.style, {
+      position: 'fixed',
+      bottom: '20px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      backgroundColor: '#333',
+      color: '#fff',
+      padding: '10px 20px',
+      borderRadius: '5px',
+      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+      zIndex: '1000'
+    });
+    return info;
+  }
   connectedCallback() {
     this._rerender();
+    if (this._model && !this._model.autoplayAudioEnabled) {
+      return;
+    }
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach(mutation => {
+        if (mutation.type === 'childList') {
+          const audio = this.querySelector('audio[autoplay]');
+          if (!audio) return;
+          if (audio.paused && !this.querySelector('#play-audio-info')) {
+            const info = this._createAudioInfoToast();
+            this.appendChild(info);
+            const enableAudio = () => {
+              audio.play();
+              this.removeChild(info);
+              document.removeEventListener('click', enableAudio);
+            };
+            document.addEventListener('click', enableAudio);
+          }
+          const handlePlaying = () => {
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              this.removeChild(info);
+            }
+            audio.removeEventListener('playing', handlePlaying);
+          };
+          audio.addEventListener('playing', handlePlaying);
+          const handleEnded = () => {
+            this.audioComplete = true;
+            this._dispatchResponseChanged();
+            audio.removeEventListener('ended', handleEnded);
+          };
+          audio.addEventListener('ended', handleEnded);
+          observer.disconnect();
+        }
+      });
+    });
+    observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
   }
 }
 const {cloneDeep: cloneDeep} = _dll_lodash;

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@pie-element/ebsr",
-  "version": "10.2.11-next.3+426069852",
+  "version": "10.2.11-next.9+3caa0b4db",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@pie-element/multiple-choice": "^9.7.4-next.3+426069852",
+    "@pie-element/multiple-choice": "^9.7.4-next.9+3caa0b4db",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.7.1",
+    "@pie-lib/pie-toolbox": "2.8.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.11"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "426069852e91cdc80d3868d67fc6e9121a6ac589",
+  "gitHead": "3caa0b4db682d6e62243f5fced08f82b790db854",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },