@pie-element/ebsr 10.3.13-next.0 → 10.3.13-next.4

package/module/element.js

@@ -12698,7 +12698,11 @@ class MultipleChoice$1 extends React$2.Component {
       isSelectionButtonBelow: PropTypes$1.bool,
       minSelections: PropTypes$1.number,
       maxSelections: PropTypes$1.number,
-      autoplayAudioEnabled: PropTypes$1.bool
+      autoplayAudioEnabled: PropTypes$1.bool,
+      customAudioButton: {
+        playImage: PropTypes$1.string,
+        pauseImage: PropTypes$1.string
+      }
     };
   }
   constructor(props) {
@@ -12815,19 +12819,19 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 211
+        lineNumber: 215
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 213
+        lineNumber: 217
       }
     }, "Multiple Select Question");
   }
   render() {
-    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, autoplayAudioEnabled, session} = this.props;
+    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, autoplayAudioEnabled, session, customAudioButton} = this.props;
     const {showCorrect, maxSelectionsErrorState} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
@@ -12835,7 +12839,6 @@ class MultipleChoice$1 extends React$2.Component {
       gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
     } : undefined;
     const selections = session.value && session.value.length || 0;
-    const addAutoplayAudio = autoplayAudioEnabled && !((/Safari|Firefox|Edg/).test(navigator.userAgent) && !(/Chrome/).test(navigator.userAgent));
     const teacherInstructionsDiv = React$2.createElement(PreviewPrompt, {
       tagName: "div",
       className: "prompt",
@@ -12844,7 +12847,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 248
+        lineNumber: 251
       }
     });
     const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12872,21 +12875,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 271
+        lineNumber: 274
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 272
+        lineNumber: 275
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 277
+        lineNumber: 280
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12896,25 +12899,26 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 279
+        lineNumber: 282
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 293
+        lineNumber: 296
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
       defaultClassName: "prompt",
       prompt: prompt,
       tagName: 'legend',
-      autoplayAudioEnabled: addAutoplayAudio,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 297
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12924,7 +12928,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 303
+        lineNumber: 307
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12935,7 +12939,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 311
+        lineNumber: 315
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12958,21 +12962,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 319
+        lineNumber: 323
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 343
+        lineNumber: 347
       }
     }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 348
+        lineNumber: 352
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13209,14 +13213,13 @@ class MultipleChoice extends HTMLElement {
   }
   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');
           const isInsidePrompt = audio && audio.closest('#preview-prompt');
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
           if (audio && !isInsidePrompt) return;
           if (!audio) return;
           const info = this._createAudioInfoToast();

package/module/print.js

@@ -12661,7 +12661,11 @@ class MultipleChoice$1 extends React$2.Component {
       isSelectionButtonBelow: PropTypes$1.bool,
       minSelections: PropTypes$1.number,
       maxSelections: PropTypes$1.number,
-      autoplayAudioEnabled: PropTypes$1.bool
+      autoplayAudioEnabled: PropTypes$1.bool,
+      customAudioButton: {
+        playImage: PropTypes$1.string,
+        pauseImage: PropTypes$1.string
+      }
     };
   }
   constructor(props) {
@@ -12778,19 +12782,19 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 211
+        lineNumber: 215
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 213
+        lineNumber: 217
       }
     }, "Multiple Select Question");
   }
   render() {
-    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, autoplayAudioEnabled, session} = this.props;
+    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, autoplayAudioEnabled, session, customAudioButton} = this.props;
     const {showCorrect, maxSelectionsErrorState} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
@@ -12798,7 +12802,6 @@ class MultipleChoice$1 extends React$2.Component {
       gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
     } : undefined;
     const selections = session.value && session.value.length || 0;
-    const addAutoplayAudio = autoplayAudioEnabled && !((/Safari|Firefox|Edg/).test(navigator.userAgent) && !(/Chrome/).test(navigator.userAgent));
     const teacherInstructionsDiv = React$2.createElement(PreviewPrompt, {
       tagName: "div",
       className: "prompt",
@@ -12807,7 +12810,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 248
+        lineNumber: 251
       }
     });
     const getMultipleChoiceMinSelectionErrorMessage = () => {
@@ -12835,21 +12838,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 271
+        lineNumber: 274
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 272
+        lineNumber: 275
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 277
+        lineNumber: 280
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12859,25 +12862,26 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 279
+        lineNumber: 282
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 293
+        lineNumber: 296
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
       defaultClassName: "prompt",
       prompt: prompt,
       tagName: 'legend',
-      autoplayAudioEnabled: addAutoplayAudio,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 297
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12887,7 +12891,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 303
+        lineNumber: 307
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12898,7 +12902,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 311
+        lineNumber: 315
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12921,21 +12925,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 319
+        lineNumber: 323
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 343
+        lineNumber: 347
       }
     }, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 348
+        lineNumber: 352
       }
     }, translator$1.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13209,14 +13213,13 @@ class MultipleChoice extends HTMLElement {
   }
   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');
           const isInsidePrompt = audio && audio.closest('#preview-prompt');
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
           if (audio && !isInsidePrompt) return;
           if (!audio) return;
           const info = this._createAudioInfoToast();

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/ebsr",
-  "version": "10.3.13-next.0+8c6e2183d",
+  "version": "10.3.13-next.4+dd3fde7ef",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@pie-element/multiple-choice": "^9.12.8-next.0+8c6e2183d",
+    "@pie-element/multiple-choice": "^9.12.8-next.4+dd3fde7ef",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/pie-toolbox": "2.9.5",
     "classnames": "^2.2.5",
@@ -16,7 +16,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "8c6e2183d3f8e9cd80c59ea408629a79ad31b46c",
+  "gitHead": "dd3fde7ef95879ed17976bb057963dae43a601df",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },