@pie-element/drag-in-the-blank 10.2.2-beta.4 → 10.2.2-beta.6
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 +8 -0
- package/configure/CHANGELOG.md +8 -0
- package/configure/package.json +3 -3
- package/controller/CHANGELOG.md +8 -0
- package/controller/package.json +1 -1
- package/package.json +3 -3
- package/configure/lib/__tests__/choice.test.js +0 -114
- package/configure/lib/__tests__/choices.test.js +0 -157
- package/configure/lib/__tests__/main.test.js +0 -167
- package/configure/lib/__tests__/markupUtils.test.js +0 -105
- package/configure/lib/choice.js +0 -137
- package/configure/lib/choice.js.map +0 -1
- package/configure/lib/choices.js +0 -332
- package/configure/lib/choices.js.map +0 -1
- package/configure/lib/defaults.js +0 -169
- package/configure/lib/defaults.js.map +0 -1
- package/configure/lib/index.js +0 -148
- package/configure/lib/index.js.map +0 -1
- package/configure/lib/main.js +0 -440
- package/configure/lib/main.js.map +0 -1
- package/configure/lib/markupUtils.js +0 -83
- package/configure/lib/markupUtils.js.map +0 -1
- package/controller/lib/__tests__/index.test.js +0 -775
- package/controller/lib/defaults.js +0 -24
- package/controller/lib/defaults.js.map +0 -1
- package/controller/lib/index.js +0 -251
- package/controller/lib/index.js.map +0 -1
- package/controller/lib/utils.js +0 -39
- package/controller/lib/utils.js.map +0 -1
- package/docs/demo/pie.manifest.json +0 -11
- package/lib/__tests__/index.test.js +0 -118
- package/lib/__tests__/main.test.js +0 -139
- package/lib/index.js +0 -207
- package/lib/index.js.map +0 -1
- package/lib/main.js +0 -126
- package/lib/main.js.map +0 -1
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _react = _interopRequireDefault(require("react"));
|
|
5
|
-
var _react2 = require("@testing-library/react");
|
|
6
|
-
var _styles = require("@mui/material/styles");
|
|
7
|
-
var _main = require("../main");
|
|
8
|
-
jest.mock('@pie-lib/render-ui', () => ({
|
|
9
|
-
PreviewPrompt: ({
|
|
10
|
-
prompt
|
|
11
|
-
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
12
|
-
"data-testid": "preview-prompt"
|
|
13
|
-
}, prompt),
|
|
14
|
-
Collapsible: ({
|
|
15
|
-
children
|
|
16
|
-
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
17
|
-
"data-testid": "collapsible"
|
|
18
|
-
}, children),
|
|
19
|
-
UiLayout: ({
|
|
20
|
-
children
|
|
21
|
-
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
22
|
-
"data-testid": "ui-layout"
|
|
23
|
-
}, children),
|
|
24
|
-
hasText: jest.fn(() => true),
|
|
25
|
-
hasMedia: jest.fn(() => false),
|
|
26
|
-
color: {
|
|
27
|
-
text: () => '#000',
|
|
28
|
-
background: () => '#fff'
|
|
29
|
-
}
|
|
30
|
-
}));
|
|
31
|
-
jest.mock('@pie-lib/correct-answer-toggle', () => ({
|
|
32
|
-
__esModule: true,
|
|
33
|
-
default: props => /*#__PURE__*/_react.default.createElement("div", {
|
|
34
|
-
"data-testid": "correct-answer-toggle"
|
|
35
|
-
}, props.children)
|
|
36
|
-
}));
|
|
37
|
-
jest.mock('@pie-lib/mask-markup', () => ({
|
|
38
|
-
DragInTheBlank: props => /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
"data-testid": "drag-in-the-blank"
|
|
40
|
-
}, props.children)
|
|
41
|
-
}));
|
|
42
|
-
const theme = (0, _styles.createTheme)();
|
|
43
|
-
describe('Main', () => {
|
|
44
|
-
let onChange;
|
|
45
|
-
beforeEach(() => {
|
|
46
|
-
onChange = jest.fn();
|
|
47
|
-
});
|
|
48
|
-
const renderMain = (extras = {}) => {
|
|
49
|
-
const props = {
|
|
50
|
-
model: {
|
|
51
|
-
prompt: 'Prompt',
|
|
52
|
-
mode: 'gather',
|
|
53
|
-
rationale: 'Rationale',
|
|
54
|
-
teacherInstructions: 'Teacher Instructions',
|
|
55
|
-
rationaleEnabled: true,
|
|
56
|
-
promptEnabled: true,
|
|
57
|
-
teacherInstructionsEnabled: true,
|
|
58
|
-
studentInstructionsEnabled: true,
|
|
59
|
-
id: '1',
|
|
60
|
-
element: 'drag-in-the-blank',
|
|
61
|
-
markup: '{{0}} + {{1}} = 15',
|
|
62
|
-
disabled: false,
|
|
63
|
-
choices: [{
|
|
64
|
-
value: '<div>9</div>',
|
|
65
|
-
id: '1'
|
|
66
|
-
}, {
|
|
67
|
-
value: '<div>6</div>',
|
|
68
|
-
id: '0'
|
|
69
|
-
}],
|
|
70
|
-
choicesPosition: 'below',
|
|
71
|
-
correctResponse: {
|
|
72
|
-
0: '0',
|
|
73
|
-
1: '1'
|
|
74
|
-
},
|
|
75
|
-
duplicates: true,
|
|
76
|
-
alternateResponses: [['1'], ['0']],
|
|
77
|
-
feedback: {},
|
|
78
|
-
...extras
|
|
79
|
-
},
|
|
80
|
-
value: {
|
|
81
|
-
0: '1',
|
|
82
|
-
1: '0'
|
|
83
|
-
},
|
|
84
|
-
onChange
|
|
85
|
-
};
|
|
86
|
-
return (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
|
|
87
|
-
theme: theme
|
|
88
|
-
}, /*#__PURE__*/_react.default.createElement(_main.Main, props)));
|
|
89
|
-
};
|
|
90
|
-
describe('render', () => {
|
|
91
|
-
it('should render in gather mode', () => {
|
|
92
|
-
const {
|
|
93
|
-
container
|
|
94
|
-
} = renderMain();
|
|
95
|
-
expect(container.firstChild).toBeInTheDocument();
|
|
96
|
-
});
|
|
97
|
-
it('should render in view mode', () => {
|
|
98
|
-
const {
|
|
99
|
-
container
|
|
100
|
-
} = renderMain({
|
|
101
|
-
mode: 'view'
|
|
102
|
-
});
|
|
103
|
-
expect(container.firstChild).toBeInTheDocument();
|
|
104
|
-
});
|
|
105
|
-
it('should render in evaluate mode', () => {
|
|
106
|
-
const {
|
|
107
|
-
container
|
|
108
|
-
} = renderMain({
|
|
109
|
-
mode: 'evaluate'
|
|
110
|
-
});
|
|
111
|
-
expect(container.firstChild).toBeInTheDocument();
|
|
112
|
-
});
|
|
113
|
-
it('should render without teacher instructions', () => {
|
|
114
|
-
const {
|
|
115
|
-
container
|
|
116
|
-
} = renderMain({
|
|
117
|
-
teacherInstructions: null
|
|
118
|
-
});
|
|
119
|
-
expect(container.firstChild).toBeInTheDocument();
|
|
120
|
-
});
|
|
121
|
-
it('should render without rationale', () => {
|
|
122
|
-
const {
|
|
123
|
-
container
|
|
124
|
-
} = renderMain({
|
|
125
|
-
rationale: null
|
|
126
|
-
});
|
|
127
|
-
expect(container.firstChild).toBeInTheDocument();
|
|
128
|
-
});
|
|
129
|
-
it('should render without prompt', () => {
|
|
130
|
-
const {
|
|
131
|
-
container
|
|
132
|
-
} = renderMain({
|
|
133
|
-
prompt: null
|
|
134
|
-
});
|
|
135
|
-
expect(container.firstChild).toBeInTheDocument();
|
|
136
|
-
});
|
|
137
|
-
});
|
|
138
|
-
});
|
|
139
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9yZWFjdDIiLCJfc3R5bGVzIiwiX21haW4iLCJqZXN0IiwibW9jayIsIlByZXZpZXdQcm9tcHQiLCJwcm9tcHQiLCJkZWZhdWx0IiwiY3JlYXRlRWxlbWVudCIsIkNvbGxhcHNpYmxlIiwiY2hpbGRyZW4iLCJVaUxheW91dCIsImhhc1RleHQiLCJmbiIsImhhc01lZGlhIiwiY29sb3IiLCJ0ZXh0IiwiYmFja2dyb3VuZCIsIl9fZXNNb2R1bGUiLCJwcm9wcyIsIkRyYWdJblRoZUJsYW5rIiwidGhlbWUiLCJjcmVhdGVUaGVtZSIsImRlc2NyaWJlIiwib25DaGFuZ2UiLCJiZWZvcmVFYWNoIiwicmVuZGVyTWFpbiIsImV4dHJhcyIsIm1vZGVsIiwibW9kZSIsInJhdGlvbmFsZSIsInRlYWNoZXJJbnN0cnVjdGlvbnMiLCJyYXRpb25hbGVFbmFibGVkIiwicHJvbXB0RW5hYmxlZCIsInRlYWNoZXJJbnN0cnVjdGlvbnNFbmFibGVkIiwic3R1ZGVudEluc3RydWN0aW9uc0VuYWJsZWQiLCJpZCIsImVsZW1lbnQiLCJtYXJrdXAiLCJkaXNhYmxlZCIsImNob2ljZXMiLCJ2YWx1ZSIsImNob2ljZXNQb3NpdGlvbiIsImNvcnJlY3RSZXNwb25zZSIsImR1cGxpY2F0ZXMiLCJhbHRlcm5hdGVSZXNwb25zZXMiLCJmZWVkYmFjayIsInJlbmRlciIsIlRoZW1lUHJvdmlkZXIiLCJNYWluIiwiaXQiLCJjb250YWluZXIiLCJleHBlY3QiLCJmaXJzdENoaWxkIiwidG9CZUluVGhlRG9jdW1lbnQiXSwic291cmNlcyI6WyIuLi8uLi9zcmMvX190ZXN0c19fL21haW4udGVzdC5qc3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHJlbmRlciB9IGZyb20gJ0B0ZXN0aW5nLWxpYnJhcnkvcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWVQcm92aWRlciwgY3JlYXRlVGhlbWUgfSBmcm9tICdAbXVpL21hdGVyaWFsL3N0eWxlcyc7XG5cbmltcG9ydCB7IE1haW4gfSBmcm9tICcuLi9tYWluJztcblxuamVzdC5tb2NrKCdAcGllLWxpYi9yZW5kZXItdWknLCAoKSA9PiAoe1xuICBQcmV2aWV3UHJvbXB0OiAoeyBwcm9tcHQgfSkgPT4gPGRpdiBkYXRhLXRlc3RpZD1cInByZXZpZXctcHJvbXB0XCI+e3Byb21wdH08L2Rpdj4sXG4gIENvbGxhcHNpYmxlOiAoeyBjaGlsZHJlbiB9KSA9PiA8ZGl2IGRhdGEtdGVzdGlkPVwiY29sbGFwc2libGVcIj57Y2hpbGRyZW59PC9kaXY+LFxuICBVaUxheW91dDogKHsgY2hpbGRyZW4gfSkgPT4gPGRpdiBkYXRhLXRlc3RpZD1cInVpLWxheW91dFwiPntjaGlsZHJlbn08L2Rpdj4sXG4gIGhhc1RleHQ6IGplc3QuZm4oKCkgPT4gdHJ1ZSksXG4gIGhhc01lZGlhOiBqZXN0LmZuKCgpID0+IGZhbHNlKSxcbiAgY29sb3I6IHtcbiAgICB0ZXh0OiAoKSA9PiAnIzAwMCcsXG4gICAgYmFja2dyb3VuZDogKCkgPT4gJyNmZmYnLFxuICB9LFxufSkpO1xuXG5qZXN0Lm1vY2soJ0BwaWUtbGliL2NvcnJlY3QtYW5zd2VyLXRvZ2dsZScsICgpID0+ICh7XG4gIF9fZXNNb2R1bGU6IHRydWUsXG4gIGRlZmF1bHQ6IChwcm9wcykgPT4gPGRpdiBkYXRhLXRlc3RpZD1cImNvcnJlY3QtYW5zd2VyLXRvZ2dsZVwiPntwcm9wcy5jaGlsZHJlbn08L2Rpdj4sXG59KSk7XG5cbmplc3QubW9jaygnQHBpZS1saWIvbWFzay1tYXJrdXAnLCAoKSA9PiAoe1xuICBEcmFnSW5UaGVCbGFuazogKHByb3BzKSA9PiA8ZGl2IGRhdGEtdGVzdGlkPVwiZHJhZy1pbi10aGUtYmxhbmtcIj57cHJvcHMuY2hpbGRyZW59PC9kaXY+LFxufSkpO1xuXG5jb25zdCB0aGVtZSA9IGNyZWF0ZVRoZW1lKCk7XG5cbmRlc2NyaWJlKCdNYWluJywgKCkgPT4ge1xuICBsZXQgb25DaGFuZ2U7XG5cbiAgYmVmb3JlRWFjaCgoKSA9PiB7XG4gICAgb25DaGFuZ2UgPSBqZXN0LmZuKCk7XG4gIH0pO1xuXG4gIGNvbnN0IHJlbmRlck1haW4gPSAoZXh0cmFzID0ge30pID0+IHtcbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgIG1vZGVsOiB7XG4gICAgICAgIHByb21wdDogJ1Byb21wdCcsXG4gICAgICAgIG1vZGU6ICdnYXRoZXInLFxuICAgICAgICByYXRpb25hbGU6ICdSYXRpb25hbGUnLFxuICAgICAgICB0ZWFjaGVySW5zdHJ1Y3Rpb25zOiAnVGVhY2hlciBJbnN0cnVjdGlvbnMnLFxuICAgICAgICByYXRpb25hbGVFbmFibGVkOiB0cnVlLFxuICAgICAgICBwcm9tcHRFbmFibGVkOiB0cnVlLFxuICAgICAgICB0ZWFjaGVySW5zdHJ1Y3Rpb25zRW5hYmxlZDogdHJ1ZSxcbiAgICAgICAgc3R1ZGVudEluc3RydWN0aW9uc0VuYWJsZWQ6IHRydWUsXG4gICAgICAgIGlkOiAnMScsXG4gICAgICAgIGVsZW1lbnQ6ICdkcmFnLWluLXRoZS1ibGFuaycsXG4gICAgICAgIG1hcmt1cDogJ3t7MH19ICsge3sxfX0gPSAxNScsXG4gICAgICAgIGRpc2FibGVkOiBmYWxzZSxcbiAgICAgICAgY2hvaWNlczogW1xuICAgICAgICAgIHsgdmFsdWU6ICc8ZGl2Pjk8L2Rpdj4nLCBpZDogJzEnIH0sXG4gICAgICAgICAgeyB2YWx1ZTogJzxkaXY+NjwvZGl2PicsIGlkOiAnMCcgfSxcbiAgICAgICAgXSxcbiAgICAgICAgY2hvaWNlc1Bvc2l0aW9uOiAnYmVsb3cnLFxuICAgICAgICBjb3JyZWN0UmVzcG9uc2U6IHsgMDogJzAnLCAxOiAnMScgfSxcbiAgICAgICAgZHVwbGljYXRlczogdHJ1ZSxcbiAgICAgICAgYWx0ZXJuYXRlUmVzcG9uc2VzOiBbWycxJ10sIFsnMCddXSxcbiAgICAgICAgZmVlZGJhY2s6IHt9LFxuICAgICAgICAuLi5leHRyYXMsXG4gICAgICB9LFxuICAgICAgdmFsdWU6IHsgMDogJzEnLCAxOiAnMCcgfSxcbiAgICAgIG9uQ2hhbmdlLFxuICAgIH07XG5cbiAgICByZXR1cm4gcmVuZGVyKFxuICAgICAgPFRoZW1lUHJvdmlkZXIgdGhlbWU9e3RoZW1lfT5cbiAgICAgICAgPE1haW4gey4uLnByb3BzfSAvPlxuICAgICAgPC9UaGVtZVByb3ZpZGVyPlxuICAgICk7XG4gIH07XG5cbiAgZGVzY3JpYmUoJ3JlbmRlcicsICgpID0+IHtcbiAgICBpdCgnc2hvdWxkIHJlbmRlciBpbiBnYXRoZXIgbW9kZScsICgpID0+IHtcbiAgICAgIGNvbnN0IHsgY29udGFpbmVyIH0gPSByZW5kZXJNYWluKCk7XG4gICAgICBleHBlY3QoY29udGFpbmVyLmZpcnN0Q2hpbGQpLnRvQmVJblRoZURvY3VtZW50KCk7XG4gICAgfSk7XG5cbiAgICBpdCgnc2hvdWxkIHJlbmRlciBpbiB2aWV3IG1vZGUnLCAoKSA9PiB7XG4gICAgICBjb25zdCB7IGNvbnRhaW5lciB9ID0gcmVuZGVyTWFpbih7IG1vZGU6ICd2aWV3JyB9KTtcbiAgICAgIGV4cGVjdChjb250YWluZXIuZmlyc3RDaGlsZCkudG9CZUluVGhlRG9jdW1lbnQoKTtcbiAgICB9KTtcblxuICAgIGl0KCdzaG91bGQgcmVuZGVyIGluIGV2YWx1YXRlIG1vZGUnLCAoKSA9PiB7XG4gICAgICBjb25zdCB7IGNvbnRhaW5lciB9ID0gcmVuZGVyTWFpbih7IG1vZGU6ICdldmFsdWF0ZScgfSk7XG4gICAgICBleHBlY3QoY29udGFpbmVyLmZpcnN0Q2hpbGQpLnRvQmVJblRoZURvY3VtZW50KCk7XG4gICAgfSk7XG5cbiAgICBpdCgnc2hvdWxkIHJlbmRlciB3aXRob3V0IHRlYWNoZXIgaW5zdHJ1Y3Rpb25zJywgKCkgPT4ge1xuICAgICAgY29uc3QgeyBjb250YWluZXIgfSA9IHJlbmRlck1haW4oeyB0ZWFjaGVySW5zdHJ1Y3Rpb25zOiBudWxsIH0pO1xuICAgICAgZXhwZWN0KGNvbnRhaW5lci5maXJzdENoaWxkKS50b0JlSW5UaGVEb2N1bWVudCgpO1xuICAgIH0pO1xuXG4gICAgaXQoJ3Nob3VsZCByZW5kZXIgd2l0aG91dCByYXRpb25hbGUnLCAoKSA9PiB7XG4gICAgICBjb25zdCB7IGNvbnRhaW5lciB9ID0gcmVuZGVyTWFpbih7IHJhdGlvbmFsZTogbnVsbCB9KTtcbiAgICAgIGV4cGVjdChjb250YWluZXIuZmlyc3RDaGlsZCkudG9CZUluVGhlRG9jdW1lbnQoKTtcbiAgICB9KTtcblxuICAgIGl0KCdzaG91bGQgcmVuZGVyIHdpdGhvdXQgcHJvbXB0JywgKCkgPT4ge1xuICAgICAgY29uc3QgeyBjb250YWluZXIgfSA9IHJlbmRlck1haW4oeyBwcm9tcHQ6IG51bGwgfSk7XG4gICAgICBleHBlY3QoY29udGFpbmVyLmZpcnN0Q2hpbGQpLnRvQmVJblRoZURvY3VtZW50KCk7XG4gICAgfSk7XG4gIH0pO1xufSk7XG4iXSwibWFwcGluZ3MiOiI7OztBQUFBLElBQUFBLE1BQUEsR0FBQUMsc0JBQUEsQ0FBQUMsT0FBQTtBQUNBLElBQUFDLE9BQUEsR0FBQUQsT0FBQTtBQUNBLElBQUFFLE9BQUEsR0FBQUYsT0FBQTtBQUVBLElBQUFHLEtBQUEsR0FBQUgsT0FBQTtBQUVBSSxJQUFJLENBQUNDLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxPQUFPO0VBQ3JDQyxhQUFhLEVBQUVBLENBQUM7SUFBRUM7RUFBTyxDQUFDLGtCQUFLVCxNQUFBLENBQUFVLE9BQUEsQ0FBQUMsYUFBQTtJQUFLLGVBQVk7RUFBZ0IsR0FBRUYsTUFBWSxDQUFDO0VBQy9FRyxXQUFXLEVBQUVBLENBQUM7SUFBRUM7RUFBUyxDQUFDLGtCQUFLYixNQUFBLENBQUFVLE9BQUEsQ0FBQUMsYUFBQTtJQUFLLGVBQVk7RUFBYSxHQUFFRSxRQUFjLENBQUM7RUFDOUVDLFFBQVEsRUFBRUEsQ0FBQztJQUFFRDtFQUFTLENBQUMsa0JBQUtiLE1BQUEsQ0FBQVUsT0FBQSxDQUFBQyxhQUFBO0lBQUssZUFBWTtFQUFXLEdBQUVFLFFBQWMsQ0FBQztFQUN6RUUs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LENBQUMsR0FBR3pCLFVBQVUsQ0FBQyxDQUFDO01BQ2xDMEIsTUFBTSxDQUFDRCxTQUFTLENBQUNFLFVBQVUsQ0FBQyxDQUFDQyxpQkFBaUIsQ0FBQyxDQUFDO0lBQ2xELENBQUMsQ0FBQztJQUVGSixFQUFFLENBQUMsNEJBQTRCLEVBQUUsTUFBTTtNQUNyQyxNQUFNO1FBQUVDO01BQVUsQ0FBQyxHQUFHekIsVUFBVSxDQUFDO1FBQUVHLElBQUksRUFBRTtNQUFPLENBQUMsQ0FBQztNQUNsRHVCLE1BQU0sQ0FBQ0QsU0FBUyxDQUFDRSxVQUFVLENBQUMsQ0FBQ0MsaUJBQWlCLENBQUMsQ0FBQztJQUNsRCxDQUFDLENBQUM7SUFFRkosRUFBRSxDQUFDLGdDQUFnQyxFQUFFLE1BQU07TUFDekMsTUFBTTtRQUFFQztNQUFVLENBQUMsR0FBR3pCLFVBQVUsQ0FBQztRQUFFRyxJQUFJLEVBQUU7TUFBVyxDQUFDLENBQUM7TUFDdER1QixNQUFNLENBQUNELFNBQVMsQ0FBQ0UsVUFBVSxDQUFDLENBQUNDLGlCQUFpQixDQUFDLENBQUM7SUFDbEQsQ0FBQyxDQUFDO0lBRUZKLEVBQUUsQ0FBQyw0Q0FBNEMsRUFBRSxNQUFNO01BQ3JELE1BQU07UUFBRUM7TUFBVSxDQUFDLEdBQUd6QixVQUFVLENBQUM7UUFBRUssbUJBQW1CLEVBQUU7TUFBSyxDQUFDLENBQUM7TUFDL0RxQixNQUFNLENBQUNELFNBQVMsQ0FBQ0UsVUFBVSxDQUFDLENBQUNDLGlCQUFpQixDQUFDLENBQUM7SUFDbEQsQ0FBQyxDQUFDO0lBRUZKLEVBQUUsQ0FBQyxpQ0FBaUMsRUFBRSxNQUFNO01BQzFDLE1BQU07UUFBRUM7TUFBVSxDQUFDLEdBQUd6QixVQUFVLENBQUM7UUFBRUksU0FBUyxFQUFFO01BQUssQ0FBQyxDQUFDO01BQ3JEc0IsTUFBTSxDQUFDRCxTQUFTLENBQUNFLFVBQVUsQ0FBQyxDQUFDQyxpQkFBaUIsQ0FBQyxDQUFDO0lBQ2xELENBQUMsQ0FBQztJQUVGSixFQUFFLENBQUMsOEJBQThCLEVBQUUsTUFBTTtNQUN2QyxNQUFNO1FBQUVDO01BQVUsQ0FBQyxHQUFHekIsVUFBVSxDQUFDO1FBQUVwQixNQUFNLEVBQUU7TUFBSyxDQUFDLENBQUM7TUFDbEQ4QyxNQUFNLENBQUNELFNBQVMsQ0FBQ0UsVUFBVSxDQUFDLENBQUNDLGlCQUFpQixDQUFDLENBQUM7SUFDbEQsQ0FBQyxDQUFDO0VBQ0osQ0FBQyxDQUFDO0FBQ0osQ0FBQyxDQUFDIiwiaWdub3JlTGlzdCI6W119
|
package/lib/index.js
DELETED
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.isComplete = exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _client = require("react-dom/client");
|
|
11
|
-
var _mathRendering = require("@pie-lib/math-rendering");
|
|
12
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
13
|
-
var _piePlayerEvents = require("@pie-framework/pie-player-events");
|
|
14
|
-
var _main = _interopRequireDefault(require("./main"));
|
|
15
|
-
const isComplete = (session, model, audioComplete, elementContext) => {
|
|
16
|
-
const {
|
|
17
|
-
autoplayAudioEnabled,
|
|
18
|
-
completeAudioEnabled,
|
|
19
|
-
responseAreasToBeFilled
|
|
20
|
-
} = model || {};
|
|
21
|
-
if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {
|
|
22
|
-
if (elementContext) {
|
|
23
|
-
const audio = elementContext.querySelector('audio');
|
|
24
|
-
const isInsidePrompt = audio && audio.closest('#preview-prompt');
|
|
25
|
-
|
|
26
|
-
// only require audio completion if audio exists and is inside the prompt
|
|
27
|
-
if (audio && isInsidePrompt) {
|
|
28
|
-
return false;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
if (!session || !session.value) {
|
|
33
|
-
return false;
|
|
34
|
-
}
|
|
35
|
-
const filledResponseAreas = Object.values(session.value || {}).filter(val => !!val).length;
|
|
36
|
-
return filledResponseAreas >= responseAreasToBeFilled;
|
|
37
|
-
};
|
|
38
|
-
exports.isComplete = isComplete;
|
|
39
|
-
class DragInTheBlank extends HTMLElement {
|
|
40
|
-
constructor() {
|
|
41
|
-
super();
|
|
42
|
-
(0, _defineProperty2.default)(this, "_render", () => {
|
|
43
|
-
if (this._model && this._session) {
|
|
44
|
-
let elem = /*#__PURE__*/_react.default.createElement(_main.default, {
|
|
45
|
-
model: this._model,
|
|
46
|
-
value: this._session.value,
|
|
47
|
-
onChange: this.changeSession
|
|
48
|
-
});
|
|
49
|
-
if (!this._root) {
|
|
50
|
-
this._root = (0, _client.createRoot)(this);
|
|
51
|
-
}
|
|
52
|
-
this._root.render(elem);
|
|
53
|
-
setTimeout(() => (0, _mathRendering.renderMath)(this), 0);
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
(0, _defineProperty2.default)(this, "dispatchChangedEvent", () => {
|
|
57
|
-
this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this)));
|
|
58
|
-
});
|
|
59
|
-
(0, _defineProperty2.default)(this, "changeSession", value => {
|
|
60
|
-
this.session.value = value;
|
|
61
|
-
this.session.selector = 'Mouse';
|
|
62
|
-
this.dispatchChangedEvent();
|
|
63
|
-
this._render();
|
|
64
|
-
});
|
|
65
|
-
this._model = null;
|
|
66
|
-
this._session = null;
|
|
67
|
-
this._audioInitialized = false;
|
|
68
|
-
this.audioComplete = false;
|
|
69
|
-
this._root = null;
|
|
70
|
-
}
|
|
71
|
-
set model(m) {
|
|
72
|
-
this._model = m;
|
|
73
|
-
this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete, this), !!this._model));
|
|
74
|
-
// reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
|
|
75
|
-
this._audioInitialized = false;
|
|
76
|
-
this._render();
|
|
77
|
-
}
|
|
78
|
-
set session(s) {
|
|
79
|
-
this._session = s;
|
|
80
|
-
this._render();
|
|
81
|
-
}
|
|
82
|
-
get session() {
|
|
83
|
-
return this._session;
|
|
84
|
-
}
|
|
85
|
-
_createAudioInfoToast() {
|
|
86
|
-
const info = document.createElement('div');
|
|
87
|
-
info.id = 'play-audio-info';
|
|
88
|
-
Object.assign(info.style, {
|
|
89
|
-
position: 'absolute',
|
|
90
|
-
top: 0,
|
|
91
|
-
width: '100%',
|
|
92
|
-
height: '100%',
|
|
93
|
-
display: 'flex',
|
|
94
|
-
justifyContent: 'center',
|
|
95
|
-
alignItems: 'center',
|
|
96
|
-
background: 'white',
|
|
97
|
-
zIndex: '1000',
|
|
98
|
-
cursor: 'pointer'
|
|
99
|
-
});
|
|
100
|
-
const img = document.createElement('img');
|
|
101
|
-
img.src = _renderUi.EnableAudioAutoplayImage;
|
|
102
|
-
img.alt = 'Click anywhere to enable audio autoplay';
|
|
103
|
-
img.width = 500;
|
|
104
|
-
img.height = 300;
|
|
105
|
-
info.appendChild(img);
|
|
106
|
-
return info;
|
|
107
|
-
}
|
|
108
|
-
connectedCallback() {
|
|
109
|
-
this._render();
|
|
110
|
-
|
|
111
|
-
// Observation: audio in Chrome will have the autoplay attribute,
|
|
112
|
-
// while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
|
|
113
|
-
// This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
|
|
114
|
-
const observer = new MutationObserver((mutationsList, observer) => {
|
|
115
|
-
mutationsList.forEach(mutation => {
|
|
116
|
-
if (mutation.type === 'childList') {
|
|
117
|
-
if (this._audioInitialized) return;
|
|
118
|
-
const audio = this.querySelector('audio');
|
|
119
|
-
const isInsidePrompt = audio && audio.closest('#preview-prompt');
|
|
120
|
-
if (!this._model) return;
|
|
121
|
-
if (!this._model.autoplayAudioEnabled) return;
|
|
122
|
-
if (audio && !isInsidePrompt) return;
|
|
123
|
-
if (!audio) return;
|
|
124
|
-
const info = this._createAudioInfoToast();
|
|
125
|
-
const container = this.querySelector('#main-container');
|
|
126
|
-
const enableAudio = () => {
|
|
127
|
-
if (this.querySelector('#play-audio-info')) {
|
|
128
|
-
audio.play();
|
|
129
|
-
container.removeChild(info);
|
|
130
|
-
}
|
|
131
|
-
document.removeEventListener('click', enableAudio);
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
// if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
|
|
135
|
-
// FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
|
|
136
|
-
setTimeout(() => {
|
|
137
|
-
if (audio.paused && !this.querySelector('#play-audio-info')) {
|
|
138
|
-
// add info message as a toast to enable audio playback
|
|
139
|
-
container.appendChild(info);
|
|
140
|
-
document.addEventListener('click', enableAudio);
|
|
141
|
-
} else {
|
|
142
|
-
document.removeEventListener('click', enableAudio);
|
|
143
|
-
}
|
|
144
|
-
}, 500);
|
|
145
|
-
|
|
146
|
-
// we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
|
|
147
|
-
const handlePlaying = () => {
|
|
148
|
-
//timestamp when auto-played audio started playing
|
|
149
|
-
this._session.audioStartTime = this._session.audioStartTime || new Date().getTime();
|
|
150
|
-
const info = this.querySelector('#play-audio-info');
|
|
151
|
-
if (info) {
|
|
152
|
-
container.removeChild(info);
|
|
153
|
-
}
|
|
154
|
-
audio.removeEventListener('playing', handlePlaying);
|
|
155
|
-
};
|
|
156
|
-
audio.addEventListener('playing', handlePlaying);
|
|
157
|
-
|
|
158
|
-
// we need to listen for the ended event to update the isComplete state
|
|
159
|
-
const handleEnded = () => {
|
|
160
|
-
//timestamp when auto-played audio completed playing
|
|
161
|
-
this._session.audioEndTime = this._session.audioEndTime || new Date().getTime();
|
|
162
|
-
let {
|
|
163
|
-
audioStartTime,
|
|
164
|
-
audioEndTime,
|
|
165
|
-
waitTime
|
|
166
|
-
} = this._session;
|
|
167
|
-
if (!waitTime && audioStartTime && audioEndTime) {
|
|
168
|
-
// waitTime is elapsed time the user waited for auto-played audio to finish
|
|
169
|
-
this._session.waitTime = audioEndTime - audioStartTime;
|
|
170
|
-
}
|
|
171
|
-
this.audioComplete = true;
|
|
172
|
-
this.dispatchChangedEvent();
|
|
173
|
-
audio.removeEventListener('ended', handleEnded);
|
|
174
|
-
};
|
|
175
|
-
audio.addEventListener('ended', handleEnded);
|
|
176
|
-
|
|
177
|
-
// store references to remove later
|
|
178
|
-
this._audio = audio;
|
|
179
|
-
this._handlePlaying = handlePlaying;
|
|
180
|
-
this._handleEnded = handleEnded;
|
|
181
|
-
this._enableAudio = enableAudio;
|
|
182
|
-
// set to true to prevent multiple initializations
|
|
183
|
-
this._audioInitialized = true;
|
|
184
|
-
observer.disconnect();
|
|
185
|
-
}
|
|
186
|
-
});
|
|
187
|
-
});
|
|
188
|
-
observer.observe(this, {
|
|
189
|
-
childList: true,
|
|
190
|
-
subtree: true
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
disconnectedCallback() {
|
|
194
|
-
document.removeEventListener('click', this._enableAudio);
|
|
195
|
-
if (this._audio) {
|
|
196
|
-
this._audio.removeEventListener('playing', this._handlePlaying);
|
|
197
|
-
this._audio.removeEventListener('ended', this._handleEnded);
|
|
198
|
-
this._audio = null;
|
|
199
|
-
}
|
|
200
|
-
if (this._root) {
|
|
201
|
-
this._root.unmount();
|
|
202
|
-
this._root = null;
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
exports.default = DragInTheBlank;
|
|
207
|
-
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
DELETED
|
@@ -1 +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 this._root = null;\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
package/lib/main.js
DELETED
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = exports.Main = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
-
var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
|
|
13
|
-
var _maskMarkup = require("@pie-lib/mask-markup");
|
|
14
|
-
var _renderUi = require("@pie-lib/render-ui");
|
|
15
|
-
var _styles = require("@mui/material/styles");
|
|
16
|
-
const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
|
|
17
|
-
color: _renderUi.color.text(),
|
|
18
|
-
backgroundColor: _renderUi.color.background(),
|
|
19
|
-
'& tr > td': {
|
|
20
|
-
color: _renderUi.color.text()
|
|
21
|
-
},
|
|
22
|
-
position: 'relative'
|
|
23
|
-
});
|
|
24
|
-
const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
|
|
25
|
-
theme
|
|
26
|
-
}) => ({
|
|
27
|
-
marginBottom: theme.spacing(2)
|
|
28
|
-
}));
|
|
29
|
-
const StyledRationale = (0, _styles.styled)(_renderUi.Collapsible)(({
|
|
30
|
-
theme
|
|
31
|
-
}) => ({
|
|
32
|
-
marginTop: theme.spacing(2)
|
|
33
|
-
}));
|
|
34
|
-
class Main extends _react.default.Component {
|
|
35
|
-
constructor(...args) {
|
|
36
|
-
super(...args);
|
|
37
|
-
(0, _defineProperty2.default)(this, "state", {
|
|
38
|
-
showCorrectAnswer: false
|
|
39
|
-
});
|
|
40
|
-
(0, _defineProperty2.default)(this, "toggleShowCorrect", () => {
|
|
41
|
-
this.setState({
|
|
42
|
-
showCorrectAnswer: !this.state.showCorrectAnswer
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
47
|
-
const {
|
|
48
|
-
model: nextModel
|
|
49
|
-
} = nextProps;
|
|
50
|
-
if (nextModel && !nextModel.correctResponse && this.state.showCorrectAnswer !== false) {
|
|
51
|
-
this.setState({
|
|
52
|
-
showCorrectAnswer: false
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
render() {
|
|
57
|
-
const {
|
|
58
|
-
showCorrectAnswer
|
|
59
|
-
} = this.state;
|
|
60
|
-
const {
|
|
61
|
-
model,
|
|
62
|
-
onChange,
|
|
63
|
-
value
|
|
64
|
-
} = this.props;
|
|
65
|
-
const {
|
|
66
|
-
extraCSSRules,
|
|
67
|
-
prompt,
|
|
68
|
-
mode,
|
|
69
|
-
language,
|
|
70
|
-
fontSizeFactor,
|
|
71
|
-
autoplayAudioEnabled,
|
|
72
|
-
customAudioButton
|
|
73
|
-
} = model;
|
|
74
|
-
const modelWithValue = {
|
|
75
|
-
...model,
|
|
76
|
-
value
|
|
77
|
-
};
|
|
78
|
-
const showCorrectAnswerToggle = mode === 'evaluate';
|
|
79
|
-
const showRationale = model.rationale && ((0, _renderUi.hasText)(model.rationale) || (0, _renderUi.hasMedia)(model.rationale));
|
|
80
|
-
const showTeacherInstructions = model.teacherInstructions && ((0, _renderUi.hasText)(model.teacherInstructions) || (0, _renderUi.hasMedia)(model.teacherInstructions));
|
|
81
|
-
return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
|
|
82
|
-
extraCSSRules: extraCSSRules,
|
|
83
|
-
id: 'main-container',
|
|
84
|
-
fontSizeFactor: fontSizeFactor
|
|
85
|
-
}, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
|
|
86
|
-
labels: {
|
|
87
|
-
hidden: 'Show Teacher Instructions',
|
|
88
|
-
visible: 'Hide Teacher Instructions'
|
|
89
|
-
}
|
|
90
|
-
}, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
|
|
91
|
-
prompt: model.teacherInstructions
|
|
92
|
-
})), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
|
|
93
|
-
className: "prompt",
|
|
94
|
-
prompt: prompt,
|
|
95
|
-
autoplayAudioEnabled: autoplayAudioEnabled,
|
|
96
|
-
customAudioButton: customAudioButton
|
|
97
|
-
}), /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
|
|
98
|
-
show: showCorrectAnswerToggle,
|
|
99
|
-
toggled: showCorrectAnswer,
|
|
100
|
-
onToggle: this.toggleShowCorrect,
|
|
101
|
-
language: language
|
|
102
|
-
}), /*#__PURE__*/_react.default.createElement(_maskMarkup.DragInTheBlank, (0, _extends2.default)({}, modelWithValue, {
|
|
103
|
-
onChange: onChange,
|
|
104
|
-
showCorrectAnswer: showCorrectAnswer
|
|
105
|
-
})), showRationale && /*#__PURE__*/_react.default.createElement(StyledRationale, {
|
|
106
|
-
labels: {
|
|
107
|
-
hidden: 'Show Rationale',
|
|
108
|
-
visible: 'Hide Rationale'
|
|
109
|
-
}
|
|
110
|
-
}, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
|
|
111
|
-
prompt: model.rationale
|
|
112
|
-
})));
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
exports.Main = Main;
|
|
116
|
-
(0, _defineProperty2.default)(Main, "propTypes", {
|
|
117
|
-
model: _propTypes.default.object,
|
|
118
|
-
value: _propTypes.default.object,
|
|
119
|
-
feedback: _propTypes.default.object,
|
|
120
|
-
onChange: _propTypes.default.func
|
|
121
|
-
});
|
|
122
|
-
(0, _defineProperty2.default)(Main, "defaultProps", {
|
|
123
|
-
value: {}
|
|
124
|
-
});
|
|
125
|
-
var _default = exports.default = Main;
|
|
126
|
-
//# sourceMappingURL=main.js.map
|
package/lib/main.js.map
DELETED
|
@@ -1 +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":[]}
|