@pie-element/drag-in-the-blank 6.6.2-next.31 → 6.6.2-next.37

package/docs/pie-schema.json

@@ -155,6 +155,16 @@
       "type": "number",
       "title": "fontSizeFactor"
     },
+    "autoplayAudioEnabled": {
+      "description": "Indicates if the audio for the prompt should autoplay",
+      "type": "boolean",
+      "title": "autoplayAudioEnabled"
+    },
+    "completeAudioEnabled": {
+      "description": "Indicates if the audio should reach the end before the item can be marked as 'complete'",
+      "type": "boolean",
+      "title": "completeAudioEnabled"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",

package/docs/pie-schema.json.md

@@ -117,6 +117,14 @@ Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX
 
 Indicates font size adjustment factor
 
+# `autoplayAudioEnabled` (boolean)
+
+Indicates if the audio for the prompt should autoplay
+
+# `completeAudioEnabled` (boolean)
+
+Indicates if the audio should reach the end before the item can be marked as 'complete'
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.

package/lib/index.js

@@ -37,7 +37,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var isComplete = function isComplete(session, model) {
+var isComplete = function isComplete(session, model, audioComplete) {
+  var _ref = model || {},
+      autoplayAudioEnabled = _ref.autoplayAudioEnabled,
+      completeAudioEnabled = _ref.completeAudioEnabled;
+
+  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {
+    return false;
+  }
+
   if (!session || !session.value) {
     return false;
   }
@@ -73,7 +81,7 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dispatchChangedEvent", function () {
-      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), isComplete(_this._session)));
+      _this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this.tagName.toLowerCase(), isComplete(_this._session, _this._model, _this.audioComplete)));
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeSession", function (value) {
       _this.session.value = value;
@@ -85,6 +93,7 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
     });
     _this._model = null;
     _this._session = null;
+    _this.audioComplete = false;
     return _this;
   }
 
@@ -92,7 +101,7 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
     key: "model",
     set: function set(m) {
       this._model = m;
-      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session), !!this._model));
+      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model));
 
       this._render();
     }
@@ -106,10 +115,107 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
 
       this._render();
     }
+  }, {
+    key: "_createAudioInfoToast",
+    value: function _createAudioInfoToast() {
+      var info = document.createElement('div');
+      info.id = 'play-audio-info';
+      Object.assign(info.style, {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: 'white',
+        zIndex: '1000'
+      });
+      var img = document.createElement('img');
+      img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';
+      img.alt = 'Click anywhere to enable audio autoplay';
+      img.width = 500;
+      img.height = 300;
+      info.appendChild(img);
+      return info;
+    }
   }, {
     key: "connectedCallback",
     value: function connectedCallback() {
+      var _this2 = this;
+
       this._render();
+
+      if (this._model && !this._model.autoplayAudioEnabled) {
+        return;
+      } // Observation:  audio in Chrome will have the autoplay attribute,
+      // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
+      // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
+
+
+      var observer = new MutationObserver(function (mutationsList, observer) {
+        mutationsList.forEach(function (mutation) {
+          if (mutation.type === 'childList') {
+            var audio = _this2.querySelector('audio');
+
+            var isInsidePrompt = audio && audio.closest('#preview-prompt');
+            if (audio && !isInsidePrompt) return;
+            if (!audio) return;
+
+            var info = _this2._createAudioInfoToast();
+
+            var container = _this2.querySelector('[class*="main"]');
+
+            var enableAudio = function enableAudio() {
+              if (_this2.querySelector('#play-audio-info')) {
+                audio.play();
+                container.removeChild(info);
+              }
+
+              document.removeEventListener('click', enableAudio);
+            }; // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+            // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
+
+
+            setTimeout(function () {
+              if (audio.paused && !_this2.querySelector('#play-audio-info')) {
+                // add info message as a toast to enable audio playback
+                container.appendChild(info);
+                document.addEventListener('click', enableAudio);
+              } else {
+                document.removeEventListener('click', enableAudio);
+              }
+            }, 500); // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+
+            var handlePlaying = function handlePlaying() {
+              var info = _this2.querySelector('#play-audio-info');
+
+              if (info) {
+                _this2.removeChild(info);
+              }
+
+              audio.removeEventListener('playing', handlePlaying);
+            };
+
+            audio.addEventListener('playing', handlePlaying); // we need to listen for the ended event to update the isComplete state
+
+            var handleEnded = function handleEnded() {
+              _this2.audioComplete = true;
+
+              _this2.dispatchChangedEvent();
+
+              audio.removeEventListener('ended', handleEnded);
+            };
+
+            audio.addEventListener('ended', handleEnded);
+            observer.disconnect();
+          }
+        });
+      });
+      observer.observe(this, {
+        childList: true,
+        subtree: true
+      });
     }
   }]);
   return DragInTheBlank;

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["isComplete","session","model","value","Object","values","some","DragInTheBlank","_model","_session","elem","React","createElement","Main","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","selector","dispatchChangedEvent","_render","m","ModelSetEvent","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,OAAD,EAAUC,KAAV,EAAoB;AAC5C,MAAI,CAACD,OAAD,IAAY,CAACA,OAAO,CAACE,KAAzB,EAAgC;AAC9B,WAAO,KAAP;AACD;;AAED,SAAOC,MAAM,CAACC,MAAP,CAAcJ,OAAO,CAACE,KAAR,IAAiB,EAA/B,EAAmCG,IAAnC,CAAwC,UAACH,KAAD;AAAA,WAAW,CAAC,CAACA,KAAb;AAAA,GAAxC,CAAP;AACD,CANM;;;;IAQcI,c;;;;;AACnB,4BAAc;AAAA;;AAAA;AACZ;AADY,gGAsBJ,YAAM;AACd,UAAI,MAAKC,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAIC,IAAI,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCX,UAAAA,KAAK,EAAE,MAAKM,MADuB;AAEnCL,UAAAA,KAAK,EAAE,MAAKM,QAAL,CAAcN,KAFc;AAGnCW,UAAAA,QAAQ,EAAE,MAAKC;AAHoB,SAA1B,CAAX;;AAMAC,6BAASC,MAAT,CAAgBP,IAAhB,kDAA4B,YAAM;AAChC;AACD,SAFD;AAGD;AACF,KAlCa;AAAA,6GAoCS,YAAM;AAC3B,YAAKQ,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoDrB,UAAU,CAAC,MAAKS,QAAN,CAA9D,CAAnB;AACD,KAtCa;AAAA,sGAwCE,UAACN,KAAD,EAAW;AACzB,YAAKF,OAAL,CAAaE,KAAb,GAAqBA,KAArB;AACA,YAAKF,OAAL,CAAaqB,QAAb,GAAwB,OAAxB;;AAEA,YAAKC,oBAAL;;AACA,YAAKC,OAAL;AACD,KA9Ca;AAEZ,UAAKhB,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,IAAhB;AAHY;AAIb;;;;SAED,aAAUgB,CAAV,EAAa;AACX,WAAKjB,MAAL,GAAciB,CAAd;AACA,WAAKP,aAAL,CAAmB,IAAIQ,8BAAJ,CAAkB,KAAKN,OAAL,CAAaC,WAAb,EAAlB,EAA8CrB,UAAU,CAAC,KAAKS,QAAN,CAAxD,EAAyE,CAAC,CAAC,KAAKD,MAAhF,CAAnB;;AAEA,WAAKgB,OAAL;AACD;;;SAOD,eAAc;AACZ,aAAO,KAAKf,QAAZ;AACD,K;SAPD,aAAYkB,CAAZ,EAAe;AACb,WAAKlB,QAAL,GAAgBkB,CAAhB;;AACA,WAAKH,OAAL;AACD;;;WAgCD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;kDAnDyCI,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport const isComplete = (session, model) => {\n  if (!session || !session.value) {\n    return false;\n  }\n\n  return Object.values(session.value || {}).some((value) => !!value);\n};\n\nexport default class DragInTheBlank extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session), !!this._model));\n\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        value: this._session.value,\n        onChange: this.changeSession,\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session)));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.session.selector = 'Mouse';\n    \n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  connectedCallback() {\n    this._render();\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["isComplete","session","model","audioComplete","autoplayAudioEnabled","completeAudioEnabled","value","Object","values","some","DragInTheBlank","_model","_session","elem","React","createElement","Main","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","selector","dispatchChangedEvent","_render","m","ModelSetEvent","s","info","document","id","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","img","src","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","isInsidePrompt","closest","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","disconnect","observe","childList","subtree","HTMLElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport const isComplete = (session, model, audioComplete) => {\n  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};\n\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    return false;\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  return Object.values(session.value || {}).some((value) => !!value);\n};\n\nexport default class DragInTheBlank extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this.audioComplete = false;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model));\n\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        value: this._session.value,\n        onChange: this.changeSession,\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.session.selector = 'Mouse';\n    \n    this.dispatchChangedEvent();\n    this._render();\n  };\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width:'100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000'\n    });\n\n    const img = document.createElement('img');\n    img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    if (this._model && !this._model.autoplayAudioEnabled) {\n      return;\n    }\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('[class*=\"main\"]');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.removeChild(info);\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            const info = this.querySelector('#play-audio-info');\n\n            if (info) {\n              this.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            this.audioComplete = true;\n            this.dispatchChangedEvent();\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -86,13 +86,16 @@ var Main = /*#__PURE__*/function (_React$Component) {
           prompt = model.prompt,
           mode = model.mode,
           language = model.language,
-          fontSizeFactor = model.fontSizeFactor;
+          fontSizeFactor = model.fontSizeFactor,
+          autoplayAudioEnabled = model.autoplayAudioEnabled;
 
       var modelWithValue = _objectSpread(_objectSpread({}, model), {}, {
         value: value
       });
 
-      var showCorrectAnswerToggle = mode === 'evaluate';
+      var showCorrectAnswerToggle = mode === 'evaluate'; // Safari, Firefox, and Edge do not support autoplay audio smoothly in our use case
+
+      var addAutoplayAudio = autoplayAudioEnabled && !(/Safari|Firefox|Edg/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent));
       return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
         extraCSSRules: extraCSSRules,
         className: classes.mainContainer,
@@ -106,7 +109,9 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         prompt: model.teacherInstructions
       })), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: prompt
+        className: "prompt",
+        prompt: prompt,
+        autoplayAudioEnabled: addAutoplayAudio
       }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
         show: showCorrectAnswerToggle,
         toggled: showCorrectAnswer,
@@ -148,7 +153,8 @@ var styles = function styles(theme) {
       backgroundColor: _renderUi.color.background(),
       '& tr > td': {
         color: _renderUi.color.text()
-      }
+      },
+      position: 'relative'
     },
     collapsible: {
       marginBottom: theme.spacing.unit * 2

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.js"],"names":["DraggableDragInTheBlank","DragInTheBlank","Main","showCorrectAnswer","setState","state","props","model","onChange","value","classes","extraCSSRules","prompt","mode","language","fontSizeFactor","modelWithValue","showCorrectAnswerToggle","mainContainer","teacherInstructions","collapsible","hidden","visible","toggleShowCorrect","rationale","React","Component","PropTypes","object","feedback","func","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","marginTop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { DragInTheBlank } from '@pie-lib/pie-toolbox/mask-markup';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DraggableDragInTheBlank = withDragContext(DragInTheBlank);\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    model: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n  };\n\n  static defaultProps = {\n    value: {},\n  };\n\n  state = {\n    showCorrectAnswer: false,\n  };\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, onChange, value, classes } = this.props;\n    const { extraCSSRules, prompt, mode, language, fontSizeFactor } = model;\n    const modelWithValue = { ...model, value };\n    const showCorrectAnswerToggle = mode === 'evaluate';\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.mainContainer} fontSizeFactor={fontSizeFactor}>\n        {model.teacherInstructions && hasText(model.teacherInstructions) && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n          >\n            <PreviewPrompt prompt={model.teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt prompt={prompt} />}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <DraggableDragInTheBlank {...modelWithValue} onChange={onChange} showCorrectAnswer={showCorrectAnswer} />\n\n        {model.rationale && hasText(model.rationale) && (\n          <Collapsible className={classes.rationale} labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={model.rationale} />\n          </Collapsible>\n        )}\n      </UiLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& tr > td': {\n      color: color.text(),\n    },\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  rationale: {\n    marginTop: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.js"],"names":["DraggableDragInTheBlank","DragInTheBlank","Main","showCorrectAnswer","setState","state","props","model","onChange","value","classes","extraCSSRules","prompt","mode","language","fontSizeFactor","autoplayAudioEnabled","modelWithValue","showCorrectAnswerToggle","addAutoplayAudio","test","navigator","userAgent","mainContainer","teacherInstructions","collapsible","hidden","visible","toggleShowCorrect","rationale","React","Component","PropTypes","object","feedback","func","styles","theme","color","text","backgroundColor","background","position","marginBottom","spacing","unit","marginTop"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { DragInTheBlank } from '@pie-lib/pie-toolbox/mask-markup';\nimport { withDragContext } from '@pie-lib/pie-toolbox/drag';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DraggableDragInTheBlank = withDragContext(DragInTheBlank);\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    model: PropTypes.object,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n  };\n\n  static defaultProps = {\n    value: {},\n  };\n\n  state = {\n    showCorrectAnswer: false,\n  };\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, onChange, value, classes } = this.props;\n    const { extraCSSRules, prompt, mode, language, fontSizeFactor, autoplayAudioEnabled } = model;\n    const modelWithValue = { ...model, value };\n    const showCorrectAnswerToggle = mode === 'evaluate';\n    // Safari, Firefox, and Edge do not support autoplay audio smoothly in our use case\n    const addAutoplayAudio = autoplayAudioEnabled && !(/Safari|Firefox|Edg/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent));\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.mainContainer} fontSizeFactor={fontSizeFactor}>\n        {model.teacherInstructions && hasText(model.teacherInstructions) && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n          >\n            <PreviewPrompt prompt={model.teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} autoplayAudioEnabled={addAutoplayAudio} />}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <DraggableDragInTheBlank {...modelWithValue} onChange={onChange} showCorrectAnswer={showCorrectAnswer} />\n\n        {model.rationale && hasText(model.rationale) && (\n          <Collapsible className={classes.rationale} labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={model.rationale} />\n          </Collapsible>\n        )}\n      </UiLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    '& tr > td': {\n      color: color.text(),\n    },\n    position: 'relative'\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  rationale: {\n    marginTop: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "6.6.2-next.31+96093f50c",
+  "version": "6.6.2-next.37+bad3964ad",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -21,7 +21,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "96093f50c5b6a903bd67b0a84c8033fb99304d83",
+  "gitHead": "bad3964ad2249d589641fe51c401c73d8bd11e2e",
   "main": "lib/index.js",
   "module": "src/index.js"
 }