@pie-element/drag-in-the-blank 10.1.2-next.2 → 10.1.2

package/lib/index.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isComplete = exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _renderUi = require("@pie-lib/render-ui");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _main = _interopRequireDefault(require("./main"));
+const isComplete = (session, model, audioComplete, elementContext) => {
+  const {
+    autoplayAudioEnabled,
+    completeAudioEnabled,
+    responseAreasToBeFilled
+  } = model || {};
+  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {
+    if (elementContext) {
+      const audio = elementContext.querySelector('audio');
+      const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+      // only require audio completion if audio exists and is inside the prompt
+      if (audio && isInsidePrompt) {
+        return false;
+      }
+    }
+  }
+  if (!session || !session.value) {
+    return false;
+  }
+  const filledResponseAreas = Object.values(session.value || {}).filter(val => !!val).length;
+  return filledResponseAreas >= responseAreasToBeFilled;
+};
+exports.isComplete = isComplete;
+class DragInTheBlank extends HTMLElement {
+  constructor() {
+    super();
+    (0, _defineProperty2.default)(this, "_render", () => {
+      if (this._model && this._session) {
+        let elem = /*#__PURE__*/_react.default.createElement(_main.default, {
+          model: this._model,
+          value: this._session.value,
+          onChange: this.changeSession
+        });
+        if (!this._root) {
+          this._root = (0, _client.createRoot)(this);
+        }
+        this._root.render(elem);
+        setTimeout(() => (0, _mathRendering.renderMath)(this), 0);
+      }
+    });
+    (0, _defineProperty2.default)(this, "dispatchChangedEvent", () => {
+      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this)));
+    });
+    (0, _defineProperty2.default)(this, "changeSession", value => {
+      this.session.value = value;
+      this.session.selector = 'Mouse';
+      this.dispatchChangedEvent();
+      this._render();
+    });
+    this._model = null;
+    this._session = null;
+    this._audioInitialized = false;
+    this.audioComplete = false;
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this), !!this._model));
+    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
+    this._audioInitialized = false;
+    this._render();
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  _createAudioInfoToast() {
+    const 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',
+      cursor: 'pointer'
+    });
+    const img = document.createElement('img');
+    img.src = _renderUi.EnableAudioAutoplayImage;
+    img.alt = 'Click anywhere to enable audio autoplay';
+    img.width = 500;
+    img.height = 300;
+    info.appendChild(img);
+    return info;
+  }
+  connectedCallback() {
+    this._render();
+
+    // 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
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach(mutation => {
+        if (mutation.type === 'childList') {
+          if (this._audioInitialized) return;
+          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();
+          const container = this.querySelector('#main-container');
+          const enableAudio = () => {
+            if (this.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(() => {
+            if (audio.paused && !this.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
+          const handlePlaying = () => {
+            //timestamp when auto-played audio started playing
+            this._session.audioStartTime = this._session.audioStartTime || new Date().getTime();
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              container.removeChild(info);
+            }
+            audio.removeEventListener('playing', handlePlaying);
+          };
+          audio.addEventListener('playing', handlePlaying);
+
+          // we need to listen for the ended event to update the isComplete state
+          const handleEnded = () => {
+            //timestamp when auto-played audio completed playing
+            this._session.audioEndTime = this._session.audioEndTime || new Date().getTime();
+            let {
+              audioStartTime,
+              audioEndTime,
+              waitTime
+            } = this._session;
+            if (!waitTime && audioStartTime && audioEndTime) {
+              // waitTime is elapsed time the user waited for auto-played audio to finish
+              this._session.waitTime = audioEndTime - audioStartTime;
+            }
+            this.audioComplete = true;
+            this.dispatchChangedEvent();
+            audio.removeEventListener('ended', handleEnded);
+          };
+          audio.addEventListener('ended', handleEnded);
+
+          // store references to remove later
+          this._audio = audio;
+          this._handlePlaying = handlePlaying;
+          this._handleEnded = handleEnded;
+          this._enableAudio = enableAudio;
+          // set to true to prevent multiple initializations
+          this._audioInitialized = true;
+          observer.disconnect();
+        }
+      });
+    });
+    observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this._enableAudio);
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = DragInTheBlank;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_main","isComplete","session","model","audioComplete","elementContext","autoplayAudioEnabled","completeAudioEnabled","responseAreasToBeFilled","audio","querySelector","isInsidePrompt","closest","value","filledResponseAreas","Object","values","filter","val","length","exports","DragInTheBlank","HTMLElement","constructor","_defineProperty2","default","_model","_session","elem","React","createElement","Main","onChange","changeSession","_root","createRoot","render","setTimeout","renderMath","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","selector","dispatchChangedEvent","_render","_audioInitialized","m","ModelSetEvent","s","_createAudioInfoToast","info","document","id","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","paused","addEventListener","handlePlaying","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","disconnectedCallback","unmount"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport const isComplete = (session, model, audioComplete, elementContext) => {\n  const { autoplayAudioEnabled, completeAudioEnabled, responseAreasToBeFilled } = model || {};\n\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    if (elementContext) {\n      const audio = elementContext.querySelector('audio');\n      const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n      // only require audio completion if audio exists and is inside the prompt\n      if (audio && isInsidePrompt) {\n        return false;\n      }\n    }\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  const filledResponseAreas = Object.values(session.value || {}).filter((val) => !!val).length;\n\n  return filledResponseAreas >= responseAreasToBeFilled;\n};\n\nexport default class DragInTheBlank extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this._audioInitialized = false;\n    this.audioComplete = false;\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        isComplete(this._session, this._model, this.audioComplete, this),\n        !!this._model,\n      ),\n    );\n    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio\n    this._audioInitialized = false;\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      if (!this._root) {\n        this._root = createRoot(this);\n      }\n      this._root.render(elem);\n      setTimeout(() => renderMath(this), 0);\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(\n      new SessionChangedEvent(\n        this.tagName.toLowerCase(),\n        isComplete(this._session, this._model, this.audioComplete, this),\n      ),\n    );\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      cursor: 'pointer',\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\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    // 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          if (this._audioInitialized) return;\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\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            //timestamp when auto-played audio started playing\n            this._session.audioStartTime = this._session.audioStartTime || new Date().getTime();\n\n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              container.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            //timestamp when auto-played audio completed playing\n            this._session.audioEndTime = this._session.audioEndTime || new Date().getTime();\n\n            let { audioStartTime, audioEndTime, waitTime } = this._session;\n            if (!waitTime && audioStartTime && audioEndTime) {\n              // waitTime is elapsed time the user waited for auto-played audio to finish\n              this._session.waitTime = audioEndTime - audioStartTime;\n            }\n\n            this.audioComplete = true;\n            this.dispatchChangedEvent();\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n          // set to true to prevent multiple initializations\n          this._audioInitialized = true;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\n\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/main.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Main = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _maskMarkup = require("@pie-lib/mask-markup");
+var _renderUi = require("@pie-lib/render-ui");
+var _styles = require("@mui/material/styles");
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  '& tr > td': {
+    color: _renderUi.color.text()
+  },
+  position: 'relative'
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const StyledRationale = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2)
+}));
+class Main extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
+      showCorrectAnswer: false
+    });
+    (0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
+      this.setState({
+        showCorrectAnswer: !this.state.showCorrectAnswer
+      });
+    });
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      model: nextModel
+    } = nextProps;
+    if (nextModel && !nextModel.correctResponse && this.state.showCorrectAnswer !== false) {
+      this.setState({
+        showCorrectAnswer: false
+      });
+    }
+  }
+  render() {
+    const {
+      showCorrectAnswer
+    } = this.state;
+    const {
+      model,
+      onChange,
+      value
+    } = this.props;
+    const {
+      extraCSSRules,
+      prompt,
+      mode,
+      language,
+      fontSizeFactor,
+      autoplayAudioEnabled,
+      customAudioButton
+    } = model;
+    const modelWithValue = {
+      ...model,
+      value
+    };
+    const showCorrectAnswerToggle = mode === 'evaluate';
+    const showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
+    const showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      id: 'main-container',
+      fontSizeFactor: fontSizeFactor
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: prompt,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton
+    }), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showCorrectAnswerToggle,
+      toggled: showCorrectAnswer,
+      onToggle: this.toggleShowCorrect,
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(_maskMarkup.DragInTheBlank, (0, _extends2.default)({}, modelWithValue, {
+      onChange: onChange,
+      showCorrectAnswer: showCorrectAnswer
+    })), showRationale && /*#__PURE__*/_react.default.createElement(StyledRationale, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.rationale
+    })));
+  }
+}
+exports.Main = Main;
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object,
+  value: _propTypes.default.object,
+  feedback: _propTypes.default.object,
+  onChange: _propTypes.default.func
+});
+(0, _defineProperty2.default)(Main, "defaultProps", {
+  value: {}
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_maskMarkup","_renderUi","_styles","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","StyledCollapsible","Collapsible","theme","marginBottom","spacing","StyledRationale","marginTop","Main","React","Component","constructor","args","_defineProperty2","default","showCorrectAnswer","setState","state","UNSAFE_componentWillReceiveProps","nextProps","model","nextModel","correctResponse","render","onChange","value","props","extraCSSRules","prompt","mode","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","modelWithValue","showCorrectAnswerToggle","showRationale","rationale","hasText","hasMedia","showTeacherInstructions","teacherInstructions","createElement","id","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","toggleShowCorrect","DragInTheBlank","_extends2","exports","PropTypes","object","feedback","func","_default"],"sources":["../src/main.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { DragInTheBlank } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText, hasMedia, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\n\nconst StyledUiLayout = styled(UiLayout)({\n  color: color.text(),\n  backgroundColor: color.background(),\n  '& tr > td': {\n    color: color.text(),\n  },\n  position: 'relative',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst StyledRationale = styled(Collapsible)(({ theme }) => ({\n  marginTop: theme.spacing(2),\n}));\n\nexport class Main extends React.Component {\n  static propTypes = {\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  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { model: nextModel } = nextProps;\n\n    if (nextModel && !nextModel.correctResponse && this.state.showCorrectAnswer !== false) {\n      this.setState({ showCorrectAnswer: false });\n    }\n  }\n\n  render() {\n    const { showCorrectAnswer } = this.state;\n    const { model, onChange, value } = this.props;\n    const { extraCSSRules, prompt, mode, language, fontSizeFactor, autoplayAudioEnabled, customAudioButton } = model;\n    const modelWithValue = { ...model, value };\n    const showCorrectAnswerToggle = mode === 'evaluate';\n\n    const showRationale = model.rationale && (hasText(model.rationale) || hasMedia(model.rationale));\n    const showTeacherInstructions =\n      model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));\n\n    return (\n      <StyledUiLayout\n        extraCSSRules={extraCSSRules}\n        id={'main-container'}\n        fontSizeFactor={fontSizeFactor}\n      >\n        {showTeacherInstructions && (\n          <StyledCollapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n          >\n            <PreviewPrompt prompt={model.teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {prompt && (\n          <PreviewPrompt\n            className=\"prompt\"\n            prompt={prompt}\n            autoplayAudioEnabled={autoplayAudioEnabled}\n            customAudioButton={customAudioButton}\n          />\n        )}\n\n        <CorrectAnswerToggle\n          show={showCorrectAnswerToggle}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n          language={language}\n        />\n\n        <DragInTheBlank {...modelWithValue} onChange={onChange} showCorrectAnswer={showCorrectAnswer} />\n\n        {showRationale && (\n          <StyledRationale labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt prompt={model.rationale} />\n          </StyledRationale>\n        )}\n      </StyledUiLayout>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,98 +1,33 @@
 {
   "name": "@pie-element/drag-in-the-blank",
-  "version": "10.1.2-next.2",
+  "repository": "pie-framework/pie-elements",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "10.1.2",
   "description": "",
+  "scripts": {
+    "postpublish": "../../scripts/postpublish"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/correct-answer-toggle": "4.0.3-next.37",
-    "@pie-lib/drag": "4.0.3-next.37",
-    "@pie-lib/mask-markup": "3.0.4-next.32",
-    "@pie-lib/render-ui": "6.1.1-next.37",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/correct-answer-toggle": "4.0.3",
+    "@pie-lib/drag": "4.0.3",
+    "@pie-lib/mask-markup": "3.0.6",
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.1",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
-    "@dnd-kit/core": "^6.3.1",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.30",
-    "@pie-lib/config-ui": "13.0.4-next.30",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "debug": "^4.4.3",
-    "@pie-element/shared-lodash": "0.1.1-next.0",
-    "@pie-element/shared-controller-utils": "0.1.1-next.1",
-    "@pie-element/shared-player-events": "0.1.0"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./delivery": {
-      "types": "./dist/delivery/index.d.ts",
-      "default": "./dist/delivery/index.js"
-    },
-    "./browser/delivery": {
-      "default": "./dist/browser/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./browser/author": {
-      "default": "./dist/browser/author/index.js"
-    },
-    "./configure": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./controller": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./controller.js": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./browser/controller": {
-      "default": "./dist/browser/controller/index.js"
-    },
-    "./runtime-support": {
-      "types": "./dist/runtime-support.d.ts",
-      "default": "./dist/runtime-support.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "configure.js",
-    "controller.js",
-    "dist"
-  ],
-  "sideEffects": false,
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
-  },
-  "scripts": {
-    "build": "bun x vite build && bun x vite build --config ../../../tools/vite/element-browser.config.ts && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "demo": "bun x vite --mode demo",
-    "test": "bun x vitest run"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
-  "pie": {
-    "controller": "@pie-element/drag-in-the-blank/controller",
-    "configure": "@pie-element/drag-in-the-blank/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
-  }
+  "author": "",
+  "license": "ISC",
+  "gitHead": "206ff17a94e8e197744d059f97ad2b9a1bc9145d",
+  "main": "lib/index.js",
+  "module": "src/index.js"
 }

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';

package/dist/author/choice.d.ts

@@ -1,22 +0,0 @@
-/**
- * @synced-from pie-elements/packages/drag-in-the-blank/configure/src/choice.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare const BlankContent: {
-    (props: any): React.JSX.Element;
-    propTypes: {
-        choice: PropTypes.Validator<object>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        onRemoveChoice: PropTypes.Validator<(...args: any[]) => any>;
-        error: PropTypes.Requireable<boolean>;
-        instanceId: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-    };
-};
-export default BlankContent;

package/dist/author/choice.js

@@ -1,88 +0,0 @@
-import { choiceIsEmpty as e } from "./markupUtils.js";
-import "react";
-import t from "prop-types";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { styled as i } from "@mui/material/styles";
-import { useDraggable as a } from "@dnd-kit/core";
-import o from "@mui/icons-material/MoreVert";
-import s from "@mui/icons-material/Delete";
-//#region src/author/choice.tsx
-var c = ({ style: e }) => /* @__PURE__ */ r("span", {
-	style: e,
-	children: [/* @__PURE__ */ n(o, { style: { margin: "0 -16px" } }), /* @__PURE__ */ n(o, {})]
-});
-c.propTypes = { style: t.object };
-var l = i("div", { shouldForwardProp: (e) => !["error", "isDragging"].includes(e) })(({ theme: e, error: t }) => ({
-	display: "inline-flex",
-	minWidth: "178px",
-	minHeight: "36px",
-	background: e.palette.common.white,
-	boxSizing: "border-box",
-	borderRadius: "3px",
-	overflow: "hidden",
-	position: "relative",
-	padding: "8px 35px 8px 35px",
-	cursor: "grab",
-	border: `1px solid ${t ? "#f44336" : "#C0C3CF"}`,
-	"& img": { display: "flex" },
-	"& p": { margin: 0 },
-	"& mjx-frac": { fontSize: "120% !important" }
-})), u = i(s)(({ theme: e }) => ({
-	position: "absolute",
-	top: "6px",
-	right: "0",
-	color: e.palette.grey[500],
-	zIndex: 2,
-	"&:hover": {
-		cursor: "pointer",
-		color: e.palette.common.black
-	}
-})), d = (t) => {
-	let { choice: i, onClick: o, onRemoveChoice: s, error: d, instanceId: f, disabled: p } = t, { attributes: m, listeners: h, setNodeRef: g, isDragging: _ } = a({
-		id: `choice-${i.id}-${f || "default"}`,
-		data: {
-			type: "drag-in-the-blank-choice",
-			id: i.id,
-			value: i,
-			instanceId: f
-		},
-		disabled: p || e(i)
-	}), v = (t) => {
-		if (e(i)) {
-			t.preventDefault(), alert("You need to define a value for an answer choice before it can be associated with a response area.");
-			return;
-		}
-	};
-	return /* @__PURE__ */ r(l, {
-		ref: g,
-		error: d,
-		isDragging: _,
-		onClick: o,
-		...m,
-		...h,
-		onDragStart: v,
-		children: [
-			/* @__PURE__ */ n(c, { style: {
-				position: "absolute",
-				top: "6px",
-				left: "15px",
-				color: "#9e9e9e",
-				zIndex: 2
-			} }),
-			/* @__PURE__ */ n("span", { dangerouslySetInnerHTML: { __html: i.value } }),
-			/* @__PURE__ */ n(u, { onClick: (e) => {
-				e.preventDefault(), e.stopPropagation(), s(e);
-			} })
-		]
-	});
-};
-d.propTypes = {
-	choice: t.object.isRequired,
-	onClick: t.func,
-	onRemoveChoice: t.func.isRequired,
-	error: t.bool,
-	instanceId: t.string,
-	disabled: t.bool
-};
-//#endregion
-export { d as default };