@pie-element/drag-in-the-blank 6.7.8-next.7 → 6.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/docs/pie-schema.json +19 -0
- package/docs/pie-schema.json.md +12 -0
- package/lib/main.js +5 -5
- package/lib/main.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [6.8.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank@6.7.7...@pie-element/drag-in-the-blank@6.8.0) (2025-03-12)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **multiple-choice, categorize, ditb, hotspot, ica:** remove audio events listeners on disconnectedCallback PD-4852 ([35937aa](https://github.com/pie-framework/pie-elements/commit/35937aa5a790e24ead17b95561c368056b5a14f8))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* **drag-in-the-blank:** add customAudioButton PD-4795 ([aa5c771](https://github.com/pie-framework/pie-elements/commit/aa5c771b7e9aba6fe5a753637fdcfb61d740c7d4))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [6.7.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/drag-in-the-blank@6.7.6...@pie-element/drag-in-the-blank@6.7.7) (2025-03-03)
|
|
7
23
|
|
|
8
24
|
|
package/docs/pie-schema.json
CHANGED
|
@@ -165,6 +165,25 @@
|
|
|
165
165
|
"type": "boolean",
|
|
166
166
|
"title": "completeAudioEnabled"
|
|
167
167
|
},
|
|
168
|
+
"customAudioButton": {
|
|
169
|
+
"description": "Indicates if the audio should be replaced with a custom audio button\n playImage: image url for the play state\n pauseImage: image url for the pause state",
|
|
170
|
+
"type": "object",
|
|
171
|
+
"properties": {
|
|
172
|
+
"playImage": {
|
|
173
|
+
"type": "string",
|
|
174
|
+
"title": "playImage"
|
|
175
|
+
},
|
|
176
|
+
"pauseImage": {
|
|
177
|
+
"type": "string",
|
|
178
|
+
"title": "pauseImage"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
"required": [
|
|
182
|
+
"pauseImage",
|
|
183
|
+
"playImage"
|
|
184
|
+
],
|
|
185
|
+
"title": "customAudioButton"
|
|
186
|
+
},
|
|
168
187
|
"id": {
|
|
169
188
|
"description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
|
|
170
189
|
"type": "string",
|
package/docs/pie-schema.json.md
CHANGED
|
@@ -125,6 +125,18 @@ Indicates if the audio for the prompt should autoplay
|
|
|
125
125
|
|
|
126
126
|
Indicates if the audio should reach the end before the item can be marked as 'complete'
|
|
127
127
|
|
|
128
|
+
# `customAudioButton` (object)
|
|
129
|
+
|
|
130
|
+
Indicates if the audio should be replaced with a custom audio button
|
|
131
|
+
playImage: image url for the play state
|
|
132
|
+
pauseImage: image url for the pause state
|
|
133
|
+
|
|
134
|
+
Properties of the `customAudioButton` object:
|
|
135
|
+
|
|
136
|
+
## `playImage` (string, required)
|
|
137
|
+
|
|
138
|
+
## `pauseImage` (string, required)
|
|
139
|
+
|
|
128
140
|
# `id` (string, required)
|
|
129
141
|
|
|
130
142
|
Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
|
package/lib/main.js
CHANGED
|
@@ -87,15 +87,14 @@ var Main = /*#__PURE__*/function (_React$Component) {
|
|
|
87
87
|
mode = model.mode,
|
|
88
88
|
language = model.language,
|
|
89
89
|
fontSizeFactor = model.fontSizeFactor,
|
|
90
|
-
autoplayAudioEnabled = model.autoplayAudioEnabled
|
|
90
|
+
autoplayAudioEnabled = model.autoplayAudioEnabled,
|
|
91
|
+
customAudioButton = model.customAudioButton;
|
|
91
92
|
|
|
92
93
|
var modelWithValue = _objectSpread(_objectSpread({}, model), {}, {
|
|
93
94
|
value: value
|
|
94
95
|
});
|
|
95
96
|
|
|
96
|
-
var showCorrectAnswerToggle = mode === 'evaluate';
|
|
97
|
-
|
|
98
|
-
var addAutoplayAudio = autoplayAudioEnabled && !(/Safari|Firefox|Edg/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent));
|
|
97
|
+
var showCorrectAnswerToggle = mode === 'evaluate';
|
|
99
98
|
return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
|
|
100
99
|
extraCSSRules: extraCSSRules,
|
|
101
100
|
id: 'main-container',
|
|
@@ -112,7 +111,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
|
|
|
112
111
|
})), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
|
|
113
112
|
className: "prompt",
|
|
114
113
|
prompt: prompt,
|
|
115
|
-
autoplayAudioEnabled:
|
|
114
|
+
autoplayAudioEnabled: autoplayAudioEnabled,
|
|
115
|
+
customAudioButton: customAudioButton
|
|
116
116
|
}), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
|
|
117
117
|
show: showCorrectAnswerToggle,
|
|
118
118
|
toggled: showCorrectAnswer,
|
package/lib/main.js.map
CHANGED
|
@@ -1 +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","autoplayAudioEnabled","
|
|
1
|
+
{"version":3,"sources":["../src/main.js"],"names":["DraggableDragInTheBlank","DragInTheBlank","Main","showCorrectAnswer","setState","state","props","model","onChange","value","classes","extraCSSRules","prompt","mode","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","modelWithValue","showCorrectAnswerToggle","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, customAudioButton } = model;\n const modelWithValue = { ...model, value };\n const showCorrectAnswerToggle = mode === 'evaluate';\n\n return (\n <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} 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 && (\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 <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
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"repository": "pie-framework/pie-elements",
|
|
7
|
-
"version": "6.
|
|
7
|
+
"version": "6.8.0",
|
|
8
8
|
"description": "",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"postpublish": "../../scripts/postpublish"
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"author": "",
|
|
23
23
|
"license": "ISC",
|
|
24
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "2624c38405c9aeb903d5420667e085cd69c79e20",
|
|
25
25
|
"main": "lib/index.js",
|
|
26
26
|
"module": "src/index.js"
|
|
27
27
|
}
|