@pie-element/multiple-choice 13.3.5-ng.0 → 13.3.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.
Files changed (133) hide show
  1. package/CHANGELOG.json +1972 -0
  2. package/CHANGELOG.md +2778 -0
  3. package/LICENSE.md +5 -0
  4. package/PRINT.md +35 -0
  5. package/README.md +56 -0
  6. package/choice.png +0 -0
  7. package/configure/CHANGELOG.json +1387 -0
  8. package/configure/CHANGELOG.md +2114 -0
  9. package/configure/lib/__tests__/root.test.js +279 -0
  10. package/configure/lib/defaults.js +203 -0
  11. package/configure/lib/defaults.js.map +1 -0
  12. package/configure/lib/index.js +203 -0
  13. package/configure/lib/index.js.map +1 -0
  14. package/configure/lib/main.js +484 -0
  15. package/configure/lib/main.js.map +1 -0
  16. package/configure/lib/utils.js +18 -0
  17. package/configure/lib/utils.js.map +1 -0
  18. package/configure/package.json +22 -0
  19. package/controller/CHANGELOG.json +527 -0
  20. package/controller/CHANGELOG.md +1423 -0
  21. package/controller/lib/__tests__/index.test.js +561 -0
  22. package/controller/lib/__tests__/utils.test.js +8 -0
  23. package/controller/lib/defaults.js +33 -0
  24. package/controller/lib/defaults.js.map +1 -0
  25. package/controller/lib/index.js +298 -0
  26. package/controller/lib/index.js.map +1 -0
  27. package/controller/lib/utils.js +15 -0
  28. package/controller/lib/utils.js.map +1 -0
  29. package/controller/package.json +15 -0
  30. package/docs/config-schema.json +2993 -0
  31. package/docs/config-schema.json.md +2217 -0
  32. package/docs/demo/config.js +8 -0
  33. package/docs/demo/generate.js +61 -0
  34. package/docs/demo/index.html +1 -0
  35. package/docs/demo/pie.manifest.json +11 -0
  36. package/docs/demo/session.js +7 -0
  37. package/docs/pie-schema.json +1332 -0
  38. package/docs/pie-schema.json.md +1015 -0
  39. package/lib/__tests__/choice-input-test.js +49 -0
  40. package/lib/__tests__/choice-input.test.js +49 -0
  41. package/lib/__tests__/index-test.js +206 -0
  42. package/lib/__tests__/index.test.js +221 -0
  43. package/lib/__tests__/key-events-test.js +95 -0
  44. package/lib/__tests__/key-events.test.js +107 -0
  45. package/lib/__tests__/multiple-choice-test.js +101 -0
  46. package/lib/__tests__/multiple-choice.test.js +256 -0
  47. package/lib/__tests__/session-updater-test.js +70 -0
  48. package/lib/__tests__/session-updater.test.js +70 -0
  49. package/lib/choice-input.js +383 -0
  50. package/lib/choice-input.js.map +1 -0
  51. package/lib/choice.js +192 -0
  52. package/lib/choice.js.map +1 -0
  53. package/lib/feedback-tick.js +134 -0
  54. package/lib/feedback-tick.js.map +1 -0
  55. package/lib/index.js +405 -0
  56. package/lib/index.js.map +1 -0
  57. package/lib/main.js +63 -0
  58. package/lib/main.js.map +1 -0
  59. package/lib/multiple-choice.js +399 -0
  60. package/lib/multiple-choice.js.map +1 -0
  61. package/lib/print.js +94 -0
  62. package/lib/print.js.map +1 -0
  63. package/lib/session-updater.js +37 -0
  64. package/lib/session-updater.js.map +1 -0
  65. package/lib/utils.js +14 -0
  66. package/lib/utils.js.map +1 -0
  67. package/module/configure.js +1 -0
  68. package/module/controller.js +3045 -0
  69. package/module/demo.js +86 -0
  70. package/module/element.js +1 -0
  71. package/module/index.html +21 -0
  72. package/module/manifest.json +14 -0
  73. package/module/print-demo.js +124 -0
  74. package/module/print.html +18 -0
  75. package/module/print.js +1 -17945
  76. package/package.json +28 -94
  77. package/configure.js +0 -2
  78. package/controller.js +0 -1
  79. package/dist/author/defaults.d.ts +0 -205
  80. package/dist/author/defaults.js +0 -151
  81. package/dist/author/index.d.ts +0 -26
  82. package/dist/author/index.js +0 -119
  83. package/dist/author/main.d.ts +0 -34
  84. package/dist/author/main.js +0 -287
  85. package/dist/author/utils.d.ts +0 -9
  86. package/dist/author/utils.js +0 -7
  87. package/dist/browser/Radio-Bbu0BH_k.js +0 -9581
  88. package/dist/browser/Radio-Bbu0BH_k.js.map +0 -1
  89. package/dist/browser/author/index.js +0 -37436
  90. package/dist/browser/author/index.js.map +0 -1
  91. package/dist/browser/controller/index.js +0 -204
  92. package/dist/browser/controller/index.js.map +0 -1
  93. package/dist/browser/delivery/index.js +0 -251
  94. package/dist/browser/delivery/index.js.map +0 -1
  95. package/dist/browser/dist-CHbLnyuX.js +0 -111
  96. package/dist/browser/dist-CHbLnyuX.js.map +0 -1
  97. package/dist/browser/main-DahQxQZC.js +0 -2451
  98. package/dist/browser/main-DahQxQZC.js.map +0 -1
  99. package/dist/browser/multiple-choice.css +0 -2
  100. package/dist/browser/print/index.js +0 -43
  101. package/dist/browser/print/index.js.map +0 -1
  102. package/dist/controller/defaults.d.ts +0 -35
  103. package/dist/controller/defaults.js +0 -29
  104. package/dist/controller/index.d.ts +0 -65
  105. package/dist/controller/index.js +0 -129
  106. package/dist/controller/utils.d.ts +0 -10
  107. package/dist/controller/utils.js +0 -8
  108. package/dist/delivery/choice-input.d.ts +0 -44
  109. package/dist/delivery/choice-input.js +0 -280
  110. package/dist/delivery/choice.d.ts +0 -20
  111. package/dist/delivery/choice.js +0 -105
  112. package/dist/delivery/feedback-tick.d.ts +0 -20
  113. package/dist/delivery/feedback-tick.js +0 -104
  114. package/dist/delivery/index.d.ts +0 -37
  115. package/dist/delivery/index.js +0 -215
  116. package/dist/delivery/main.d.ts +0 -31
  117. package/dist/delivery/main.js +0 -51
  118. package/dist/delivery/multiple-choice.d.ts +0 -61
  119. package/dist/delivery/multiple-choice.js +0 -245
  120. package/dist/delivery/session-updater.d.ts +0 -10
  121. package/dist/delivery/session-updater.js +0 -9
  122. package/dist/delivery/utils.d.ts +0 -10
  123. package/dist/delivery/utils.js +0 -4
  124. package/dist/index.d.ts +0 -1
  125. package/dist/index.iife.d.ts +0 -8
  126. package/dist/index.iife.js +0 -148
  127. package/dist/index.js +0 -2
  128. package/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js +0 -16
  129. package/dist/print/index.d.ts +0 -15
  130. package/dist/print/index.js +0 -43
  131. package/dist/runtime-support.d.ts +0 -12
  132. package/dist/runtime-support.js +0 -12
  133. package/module/print.js.map +0 -1
@@ -0,0 +1,399 @@
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.MultipleChoice = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+ var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+ var _styles = require("@mui/material/styles");
14
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
15
+ var _renderUi = require("@pie-lib/render-ui");
16
+ var _translator = _interopRequireDefault(require("@pie-lib/translator"));
17
+ var _choice = _interopRequireDefault(require("./choice"));
18
+ var _utils = require("./utils");
19
+ const {
20
+ translator
21
+ } = _translator.default;
22
+ const MainContainer = (0, _styles.styled)(_Box.default)({
23
+ color: _renderUi.color.text(),
24
+ backgroundColor: _renderUi.color.background(),
25
+ '& *': {
26
+ '-webkit-font-smoothing': 'antialiased'
27
+ },
28
+ position: 'relative',
29
+ // remove border from legend tags inside main to override the OT default styles
30
+ '& legend': {
31
+ border: 'none !important'
32
+ }
33
+ });
34
+ const PartLabel = (0, _styles.styled)('h2')(({
35
+ theme
36
+ }) => ({
37
+ display: 'block',
38
+ fontSize: 'inherit',
39
+ margin: '0',
40
+ fontWeight: 'normal',
41
+ paddingBottom: theme.spacing(2)
42
+ }));
43
+ const TeacherInstructions = (0, _styles.styled)(_Box.default)(({
44
+ theme
45
+ }) => ({
46
+ marginBottom: theme.spacing(2)
47
+ }));
48
+ const HorizontalLayout = (0, _styles.styled)(_Box.default)({
49
+ display: 'flex',
50
+ flexDirection: 'row',
51
+ flexWrap: 'wrap'
52
+ });
53
+ const GridLayout = (0, _styles.styled)(_Box.default)({
54
+ display: 'grid'
55
+ });
56
+ const StyledFieldset = (0, _styles.styled)('fieldset')({
57
+ border: '0px',
58
+ padding: '0.01em 0 0 0',
59
+ margin: '0px',
60
+ minWidth: '0px'
61
+ });
62
+ const SrOnly = (0, _styles.styled)('h3')({
63
+ position: 'absolute',
64
+ left: '-10000px',
65
+ top: 'auto',
66
+ width: '1px',
67
+ height: '1px',
68
+ overflow: 'hidden'
69
+ });
70
+ const ErrorText = (0, _styles.styled)('div')(({
71
+ theme
72
+ }) => ({
73
+ fontSize: theme.typography.fontSize - 2,
74
+ color: theme.palette.error.main,
75
+ paddingTop: theme.spacing(1)
76
+ }));
77
+ class MultipleChoice extends _react.default.Component {
78
+ constructor(props) {
79
+ super(props);
80
+ // handleChange was added for accessibility. Please see comments and videos from PD-2441.
81
+ (0, _defineProperty2.default)(this, "handleChange", event => {
82
+ const {
83
+ value,
84
+ checked
85
+ } = event.target;
86
+ const {
87
+ choiceMode,
88
+ maxSelections,
89
+ onChoiceChanged,
90
+ session
91
+ } = this.props;
92
+ if (choiceMode !== 'radio' && session.value && (0, _utils.reachedMaxSelections)(session.value.length, maxSelections)) {
93
+ // show/hide max selections error when user select/deselect an answer
94
+ this.setState({
95
+ maxSelectionsErrorState: checked
96
+ });
97
+ if (checked) {
98
+ // prevent selecting more answers
99
+ return;
100
+ }
101
+ }
102
+ onChoiceChanged({
103
+ value,
104
+ selected: checked,
105
+ selector: 'Mouse'
106
+ });
107
+ });
108
+ (0, _defineProperty2.default)(this, "onToggle", () => {
109
+ if (this.props.mode === 'evaluate') {
110
+ this.setState({
111
+ showCorrect: !this.state.showCorrect
112
+ }, () => {
113
+ if (this.props.onShowCorrectToggle) {
114
+ this.props.onShowCorrectToggle();
115
+ }
116
+ });
117
+ }
118
+ });
119
+ (0, _defineProperty2.default)(this, "getCorrectness", (choice = {}) => {
120
+ const isCorrect = choice.correct;
121
+ const isChecked = this.isSelected(choice.value);
122
+ if (this.state.showCorrect) {
123
+ return isCorrect ? 'correct' : undefined;
124
+ }
125
+ if (isCorrect) {
126
+ if (isChecked) {
127
+ // A correct answer is selected: marked with a green checkmark
128
+ return 'correct';
129
+ } else {
130
+ // A correct answer is NOT selected: marked with an orange X
131
+ return 'incorrect';
132
+ }
133
+ } else {
134
+ if (isChecked) {
135
+ // An incorrect answer is selected: marked with an orange X
136
+ return 'incorrect';
137
+ } else {
138
+ // An incorrect answer is NOT selected: not marked
139
+ return undefined;
140
+ }
141
+ }
142
+ });
143
+ this.state = {
144
+ showCorrect: this.props.options && this.props.alwaysShowCorrect || false,
145
+ maxSelectionsErrorState: false
146
+ };
147
+ this.onToggle = this.onToggle.bind(this);
148
+
149
+ // Unique radio `name` attribute per instance, so separate MultipleChoice
150
+ // instances (e.g. Part A and Part B inside EBSR, or two EBSRs on the same
151
+ // page) are always treated as independent radio groups by the browser,
152
+ // regardless of any label-related model settings or bundle deduplication.
153
+ this.groupName = `mc-group-${Math.random().toString(36).slice(2, 10)}`;
154
+ }
155
+ isSelected(value) {
156
+ const sessionValue = this.props.session && this.props.session.value;
157
+ return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;
158
+ }
159
+ UNSAFE_componentWillReceiveProps(nextProps) {
160
+ if (!nextProps.correctResponse && this.state.showCorrect !== false) {
161
+ this.setState({
162
+ showCorrect: false
163
+ }, () => {
164
+ if (this.props.onShowCorrectToggle) {
165
+ this.props.onShowCorrectToggle();
166
+ }
167
+ });
168
+ }
169
+ if (nextProps.options && nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {
170
+ this.setState({
171
+ showCorrect: true
172
+ }, () => {
173
+ if (this.props.onShowCorrectToggle) {
174
+ this.props.onShowCorrectToggle();
175
+ }
176
+ });
177
+ }
178
+ }
179
+ indexToSymbol(index) {
180
+ if (this.props.keyMode === 'numbers') {
181
+ return `${index + 1}`;
182
+ }
183
+ if (this.props.keyMode === 'letters') {
184
+ return String.fromCharCode(97 + index).toUpperCase();
185
+ }
186
+ return '';
187
+ }
188
+ getChecked(choice) {
189
+ // check for print context: options prop is passed from print.js and alwaysShowCorrect is true
190
+ const isPrintMode = this.props.options && this.props.alwaysShowCorrect;
191
+ if (isPrintMode) {
192
+ return choice.correct || false;
193
+ }
194
+
195
+ // evaluate mode with show correct toggled
196
+ const isEvaluateMode = this.state.showCorrect && this.props.mode === 'evaluate';
197
+ if (isEvaluateMode) {
198
+ return choice.correct || false;
199
+ }
200
+
201
+ // default behavior: show what the user has selected
202
+ return this.isSelected(choice.value);
203
+ }
204
+
205
+ // renderHeading function was added for accessibility.
206
+ renderHeading() {
207
+ const {
208
+ mode,
209
+ choiceMode,
210
+ includeSrHeading,
211
+ baseHeadingLevel,
212
+ partLabel
213
+ } = this.props;
214
+
215
+ // When a part label is present the item is an EBSR part — the SR heading
216
+ // is provided by the EBSR element, not here.
217
+ const shouldRenderSrHeading = !partLabel && includeSrHeading !== false;
218
+ if (!shouldRenderSrHeading || mode !== 'gather') {
219
+ return null;
220
+ }
221
+ const clampedLevel = baseHeadingLevel ? Math.min(6, baseHeadingLevel) : 2;
222
+ const HeadingTag = SrOnly.withComponent(`h${clampedLevel}`);
223
+ const label = choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Select Question';
224
+ return /*#__PURE__*/_react.default.createElement(HeadingTag, null, label);
225
+ }
226
+ render() {
227
+ const {
228
+ mode,
229
+ disabled,
230
+ className,
231
+ choices = [],
232
+ choiceMode,
233
+ gridColumns,
234
+ partLabel,
235
+ prompt,
236
+ responseCorrect,
237
+ teacherInstructions,
238
+ alwaysShowCorrect,
239
+ animationsDisabled,
240
+ language,
241
+ isSelectionButtonBelow,
242
+ minSelections,
243
+ maxSelections,
244
+ autoplayAudioEnabled,
245
+ session,
246
+ customAudioButton,
247
+ options,
248
+ baseHeadingLevel
249
+ } = this.props;
250
+ const {
251
+ showCorrect,
252
+ maxSelectionsErrorState
253
+ } = this.state;
254
+ const isEvaluateMode = mode === 'evaluate';
255
+ const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
256
+ const columnsStyle = gridColumns > 1 ? {
257
+ gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
258
+ } : undefined;
259
+ const selections = session.value && session.value.length || 0;
260
+
261
+ // Heading levels are optional and only applied when baseHeadingLevel is provided.
262
+ const getContentHeadingLevel = () => {
263
+ if (!baseHeadingLevel) return undefined;
264
+ // SR heading (rendered or external) sits at baseHeadingLevel.
265
+ // Content is always one below that; part label (EBSR) sits between them.
266
+ let offset = 1; // content default: baseHeadingLevel + 1
267
+ if (partLabel) offset += 1; // part label at base + 1, content pushed to base + 2
268
+ return Math.min(6, baseHeadingLevel + offset);
269
+ };
270
+ const contentHeadingLevel = getContentHeadingLevel();
271
+ const transformPrompt = html => html && contentHeadingLevel ? (0, _renderUi.transformDataHeadings)(html, contentHeadingLevel) : html;
272
+ const teacherInstructionsDiv = /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
273
+ tagName: "div",
274
+ className: "prompt",
275
+ defaultClassName: "teacher-instructions",
276
+ prompt: teacherInstructions
277
+ });
278
+ const getMultipleChoiceMinSelectionErrorMessage = () => {
279
+ if (minSelections && maxSelections) {
280
+ return minSelections === maxSelections ? translator.t('translation:multipleChoice:minmaxSelections_equal', {
281
+ lng: language,
282
+ minSelections
283
+ }) : translator.t('translation:multipleChoice:minmaxSelections_range', {
284
+ lng: language,
285
+ minSelections,
286
+ maxSelections
287
+ });
288
+ }
289
+ if (minSelections) {
290
+ return translator.t('translation:multipleChoice:minSelections', {
291
+ lng: language,
292
+ minSelections
293
+ });
294
+ }
295
+ return '';
296
+ };
297
+ const LayoutComponent = this.props.choicesLayout === 'grid' ? GridLayout : this.props.choicesLayout === 'horizontal' ? HorizontalLayout : _Box.default;
298
+ return /*#__PURE__*/_react.default.createElement(MainContainer, {
299
+ id: 'main-container',
300
+ className: (0, _classnames.default)(className, 'multiple-choice')
301
+ }, partLabel && /*#__PURE__*/_react.default.createElement(PartLabel, {
302
+ as: baseHeadingLevel ? `h${Math.min(6, baseHeadingLevel + 1)}` : 'h2'
303
+ }, partLabel), this.renderHeading(), teacherInstructions && /*#__PURE__*/_react.default.createElement(TeacherInstructions, null, !animationsDisabled ? /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
304
+ labels: {
305
+ hidden: 'Show Teacher Instructions',
306
+ visible: 'Hide Teacher Instructions'
307
+ }
308
+ }, teacherInstructionsDiv) : teacherInstructionsDiv), /*#__PURE__*/_react.default.createElement(StyledFieldset, {
309
+ role: choiceMode === 'radio' ? 'radiogroup' : 'group'
310
+ }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
311
+ className: "prompt",
312
+ defaultClassName: "prompt",
313
+ prompt: transformPrompt(prompt),
314
+ tagName: 'legend',
315
+ autoplayAudioEnabled: autoplayAudioEnabled,
316
+ customAudioButton: customAudioButton
317
+ }), !(options && alwaysShowCorrect) && /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
318
+ show: showCorrectAnswerToggle,
319
+ toggled: showCorrect,
320
+ onToggle: this.onToggle.bind(this),
321
+ language: language
322
+ }), /*#__PURE__*/_react.default.createElement(LayoutComponent, {
323
+ style: columnsStyle
324
+ }, choices.map((choice, index) => /*#__PURE__*/_react.default.createElement(_choice.default, {
325
+ choicesLayout: this.props.choicesLayout,
326
+ selectedAnswerBackgroundColor: this.props.selectedAnswerBackgroundColor,
327
+ selectedAnswerStrokeColor: this.props.selectedAnswerStrokeColor,
328
+ selectedAnswerStrokeWidth: this.props.selectedAnswerStrokeWidth,
329
+ hoverAnswerBackgroundColor: this.props.hoverAnswerBackgroundColor,
330
+ hoverAnswerStrokeColor: this.props.hoverAnswerStrokeColor,
331
+ hoverAnswerStrokeWidth: this.props.hoverAnswerStrokeWidth,
332
+ gridColumns: gridColumns,
333
+ key: `choice-${index}`,
334
+ choice: choice,
335
+ index: index,
336
+ choicesLength: choices.length,
337
+ showCorrect: showCorrect,
338
+ isEvaluateMode: isEvaluateMode,
339
+ choiceMode: choiceMode,
340
+ disabled: disabled,
341
+ tagName: this.groupName,
342
+ onChoiceChanged: this.handleChange,
343
+ hideTick: choice.hideTick,
344
+ checked: this.getChecked(choice),
345
+ correctness: isEvaluateMode ? this.getCorrectness(choice) : undefined,
346
+ displayKey: this.indexToSymbol(index),
347
+ isSelectionButtonBelow: isSelectionButtonBelow
348
+ })))), choiceMode === 'checkbox' && selections < minSelections && /*#__PURE__*/_react.default.createElement(ErrorText, null, getMultipleChoiceMinSelectionErrorMessage()), choiceMode === 'checkbox' && maxSelectionsErrorState && /*#__PURE__*/_react.default.createElement(ErrorText, null, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
349
+ lng: language,
350
+ maxSelections
351
+ })));
352
+ }
353
+ }
354
+ exports.MultipleChoice = MultipleChoice;
355
+ (0, _defineProperty2.default)(MultipleChoice, "propTypes", {
356
+ className: _propTypes.default.string,
357
+ mode: _propTypes.default.oneOf(['gather', 'view', 'evaluate']),
358
+ choiceMode: _propTypes.default.oneOf(['radio', 'checkbox']),
359
+ keyMode: _propTypes.default.oneOf(['numbers', 'letters', 'none']),
360
+ choices: _propTypes.default.array,
361
+ partLabel: _propTypes.default.string,
362
+ prompt: _propTypes.default.string,
363
+ teacherInstructions: _propTypes.default.string,
364
+ session: _propTypes.default.object,
365
+ disabled: _propTypes.default.bool,
366
+ onChoiceChanged: _propTypes.default.func,
367
+ responseCorrect: _propTypes.default.bool,
368
+ correctResponse: _propTypes.default.array,
369
+ choicesLayout: _propTypes.default.oneOf(['vertical', 'grid', 'horizontal']),
370
+ gridColumns: _propTypes.default.string,
371
+ alwaysShowCorrect: _propTypes.default.bool,
372
+ animationsDisabled: _propTypes.default.bool,
373
+ language: _propTypes.default.string,
374
+ selectedAnswerBackgroundColor: _propTypes.default.string,
375
+ selectedAnswerStrokeColor: _propTypes.default.string,
376
+ selectedAnswerStrokeWidth: _propTypes.default.string,
377
+ hoverAnswerBackgroundColor: _propTypes.default.string,
378
+ hoverAnswerStrokeColor: _propTypes.default.string,
379
+ hoverAnswerStrokeWidth: _propTypes.default.string,
380
+ onShowCorrectToggle: _propTypes.default.func,
381
+ isSelectionButtonBelow: _propTypes.default.bool,
382
+ minSelections: _propTypes.default.number,
383
+ maxSelections: _propTypes.default.number,
384
+ autoplayAudioEnabled: _propTypes.default.bool,
385
+ customAudioButton: {
386
+ playImage: _propTypes.default.string,
387
+ pauseImage: _propTypes.default.string
388
+ },
389
+ options: _propTypes.default.object,
390
+ baseHeadingLevel: _propTypes.default.number,
391
+ includeSrHeading: _propTypes.default.bool
392
+ });
393
+ MultipleChoice.defaultProps = {
394
+ session: {
395
+ value: []
396
+ }
397
+ };
398
+ var _default = exports.default = MultipleChoice;
399
+ //# sourceMappingURL=multiple-choice.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"multiple-choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_classnames","_styles","_Box","_renderUi","_translator","_choice","_utils","translator","Translator","MainContainer","styled","Box","color","text","backgroundColor","background","position","border","PartLabel","theme","display","fontSize","margin","fontWeight","paddingBottom","spacing","TeacherInstructions","marginBottom","HorizontalLayout","flexDirection","flexWrap","GridLayout","StyledFieldset","padding","minWidth","SrOnly","left","top","width","height","overflow","ErrorText","typography","palette","error","main","paddingTop","MultipleChoice","React","Component","constructor","props","_defineProperty2","default","event","value","checked","target","choiceMode","maxSelections","onChoiceChanged","session","reachedMaxSelections","length","setState","maxSelectionsErrorState","selected","selector","mode","showCorrect","state","onShowCorrectToggle","choice","isCorrect","correct","isChecked","isSelected","undefined","options","alwaysShowCorrect","onToggle","bind","groupName","Math","random","toString","slice","sessionValue","indexOf","UNSAFE_componentWillReceiveProps","nextProps","correctResponse","indexToSymbol","index","keyMode","String","fromCharCode","toUpperCase","getChecked","isPrintMode","isEvaluateMode","renderHeading","includeSrHeading","baseHeadingLevel","partLabel","shouldRenderSrHeading","clampedLevel","min","HeadingTag","withComponent","label","createElement","render","disabled","className","choices","gridColumns","prompt","responseCorrect","teacherInstructions","animationsDisabled","language","isSelectionButtonBelow","minSelections","autoplayAudioEnabled","customAudioButton","showCorrectAnswerToggle","columnsStyle","gridTemplateColumns","selections","getContentHeadingLevel","offset","contentHeadingLevel","transformPrompt","html","transformDataHeadings","teacherInstructionsDiv","PreviewPrompt","tagName","defaultClassName","getMultipleChoiceMinSelectionErrorMessage","t","lng","LayoutComponent","choicesLayout","id","classNames","as","Collapsible","labels","hidden","visible","role","show","toggled","style","map","selectedAnswerBackgroundColor","selectedAnswerStrokeColor","selectedAnswerStrokeWidth","hoverAnswerBackgroundColor","hoverAnswerStrokeColor","hoverAnswerStrokeWidth","key","choicesLength","handleChange","hideTick","correctness","getCorrectness","displayKey","exports","PropTypes","string","oneOf","array","object","bool","func","number","playImage","pauseImage","defaultProps","_default"],"sources":["../src/multiple-choice.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport classNames from 'classnames';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport { color, Collapsible, PreviewPrompt, transformDataHeadings } from '@pie-lib/render-ui';\nimport Translator from '@pie-lib/translator';\n\nimport Choice from './choice';\nimport { reachedMaxSelections } from './utils';\n\nconst { translator } = Translator;\n\nconst MainContainer = styled(Box)({\n color: color.text(),\n backgroundColor: color.background(),\n '& *': {\n '-webkit-font-smoothing': 'antialiased',\n },\n position: 'relative',\n // remove border from legend tags inside main to override the OT default styles\n '& legend': {\n border: 'none !important',\n },\n});\n\nconst PartLabel = styled('h2')(({ theme }) => ({\n display: 'block',\n fontSize: 'inherit',\n margin: '0',\n fontWeight: 'normal',\n paddingBottom: theme.spacing(2),\n}));\n\nconst TeacherInstructions = styled(Box)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n}));\n\nconst HorizontalLayout = styled(Box)({\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n});\n\nconst GridLayout = styled(Box)({\n display: 'grid',\n});\n\nconst StyledFieldset = styled('fieldset')({\n border: '0px',\n padding: '0.01em 0 0 0',\n margin: '0px',\n minWidth: '0px',\n});\n\nconst SrOnly = styled('h3')({\n position: 'absolute',\n left: '-10000px',\n top: 'auto',\n width: '1px',\n height: '1px',\n overflow: 'hidden',\n});\n\nconst ErrorText = styled('div')(({ theme }) => ({\n fontSize: theme.typography.fontSize - 2,\n color: theme.palette.error.main,\n paddingTop: theme.spacing(1),\n}));\n\nexport class MultipleChoice extends React.Component {\n static propTypes = {\n className: PropTypes.string,\n mode: PropTypes.oneOf(['gather', 'view', 'evaluate']),\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n keyMode: PropTypes.oneOf(['numbers', 'letters', 'none']),\n choices: PropTypes.array,\n partLabel: PropTypes.string,\n prompt: PropTypes.string,\n teacherInstructions: PropTypes.string,\n session: PropTypes.object,\n disabled: PropTypes.bool,\n onChoiceChanged: PropTypes.func,\n responseCorrect: PropTypes.bool,\n correctResponse: PropTypes.array,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n gridColumns: PropTypes.string,\n alwaysShowCorrect: PropTypes.bool,\n animationsDisabled: PropTypes.bool,\n language: PropTypes.string,\n selectedAnswerBackgroundColor: PropTypes.string,\n selectedAnswerStrokeColor: PropTypes.string,\n selectedAnswerStrokeWidth: PropTypes.string,\n hoverAnswerBackgroundColor: PropTypes.string,\n hoverAnswerStrokeColor: PropTypes.string,\n hoverAnswerStrokeWidth: PropTypes.string,\n onShowCorrectToggle: PropTypes.func,\n isSelectionButtonBelow: PropTypes.bool,\n minSelections: PropTypes.number,\n maxSelections: PropTypes.number,\n autoplayAudioEnabled: PropTypes.bool,\n customAudioButton: {\n playImage: PropTypes.string,\n pauseImage: PropTypes.string,\n },\n options: PropTypes.object,\n baseHeadingLevel: PropTypes.number,\n includeSrHeading: PropTypes.bool,\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n showCorrect: (this.props.options && this.props.alwaysShowCorrect) || false,\n maxSelectionsErrorState: false,\n };\n\n this.onToggle = this.onToggle.bind(this);\n\n // Unique radio `name` attribute per instance, so separate MultipleChoice\n // instances (e.g. Part A and Part B inside EBSR, or two EBSRs on the same\n // page) are always treated as independent radio groups by the browser,\n // regardless of any label-related model settings or bundle deduplication.\n this.groupName = `mc-group-${Math.random().toString(36).slice(2, 10)}`;\n }\n\n isSelected(value) {\n const sessionValue = this.props.session && this.props.session.value;\n\n return sessionValue && sessionValue.indexOf && sessionValue.indexOf(value) >= 0;\n }\n\n // handleChange was added for accessibility. Please see comments and videos from PD-2441.\n handleChange = (event) => {\n const { value, checked } = event.target;\n const { choiceMode, maxSelections, onChoiceChanged, session } = this.props;\n\n if (choiceMode !== 'radio' && session.value && reachedMaxSelections(session.value.length, maxSelections)) {\n // show/hide max selections error when user select/deselect an answer\n this.setState({ maxSelectionsErrorState: checked });\n\n if (checked) {\n // prevent selecting more answers\n return;\n }\n }\n\n onChoiceChanged({ value, selected: checked, selector: 'Mouse' });\n };\n\n onToggle = () => {\n if (this.props.mode === 'evaluate') {\n this.setState({ showCorrect: !this.state.showCorrect }, () => {\n if (this.props.onShowCorrectToggle) {\n this.props.onShowCorrectToggle();\n }\n });\n }\n };\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n if (!nextProps.correctResponse && this.state.showCorrect !== false) {\n this.setState({ showCorrect: false }, () => {\n if (this.props.onShowCorrectToggle) {\n this.props.onShowCorrectToggle();\n }\n });\n }\n\n if (nextProps.options && nextProps.alwaysShowCorrect && this.state.showCorrect !== true) {\n this.setState({ showCorrect: true }, () => {\n if (this.props.onShowCorrectToggle) {\n this.props.onShowCorrectToggle();\n }\n });\n }\n }\n\n indexToSymbol(index) {\n if (this.props.keyMode === 'numbers') {\n return `${index + 1}`;\n }\n\n if (this.props.keyMode === 'letters') {\n return String.fromCharCode(97 + index).toUpperCase();\n }\n\n return '';\n }\n\n getCorrectness = (choice = {}) => {\n const isCorrect = choice.correct;\n const isChecked = this.isSelected(choice.value);\n\n if (this.state.showCorrect) {\n return isCorrect ? 'correct' : undefined;\n }\n\n if (isCorrect) {\n if (isChecked) {\n // A correct answer is selected: marked with a green checkmark\n return 'correct';\n } else {\n // A correct answer is NOT selected: marked with an orange X\n return 'incorrect';\n }\n } else {\n if (isChecked) {\n // An incorrect answer is selected: marked with an orange X\n return 'incorrect';\n } else {\n // An incorrect answer is NOT selected: not marked\n return undefined;\n }\n }\n };\n\n getChecked(choice) {\n // check for print context: options prop is passed from print.js and alwaysShowCorrect is true\n const isPrintMode = this.props.options && this.props.alwaysShowCorrect;\n\n if (isPrintMode) {\n return choice.correct || false;\n }\n\n // evaluate mode with show correct toggled\n const isEvaluateMode = this.state.showCorrect && this.props.mode === 'evaluate';\n\n if (isEvaluateMode) {\n return choice.correct || false;\n }\n\n // default behavior: show what the user has selected\n return this.isSelected(choice.value);\n }\n\n // renderHeading function was added for accessibility.\n renderHeading() {\n const { mode, choiceMode, includeSrHeading, baseHeadingLevel, partLabel } = this.props;\n\n // When a part label is present the item is an EBSR part — the SR heading\n // is provided by the EBSR element, not here.\n const shouldRenderSrHeading = !partLabel && includeSrHeading !== false;\n\n if (!shouldRenderSrHeading || mode !== 'gather') {\n return null;\n }\n\n const clampedLevel = baseHeadingLevel ? Math.min(6, baseHeadingLevel) : 2;\n const HeadingTag = SrOnly.withComponent(`h${clampedLevel}`);\n const label = choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Select Question';\n\n return <HeadingTag>{label}</HeadingTag>;\n }\n\n render() {\n const {\n mode,\n disabled,\n className,\n choices = [],\n choiceMode,\n gridColumns,\n partLabel,\n prompt,\n responseCorrect,\n teacherInstructions,\n alwaysShowCorrect,\n animationsDisabled,\n language,\n isSelectionButtonBelow,\n minSelections,\n maxSelections,\n autoplayAudioEnabled,\n session,\n customAudioButton,\n options,\n baseHeadingLevel,\n } = this.props;\n const { showCorrect, maxSelectionsErrorState } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n const columnsStyle = gridColumns > 1 ? { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` } : undefined;\n const selections = (session.value && session.value.length) || 0;\n\n // Heading levels are optional and only applied when baseHeadingLevel is provided.\n const getContentHeadingLevel = () => {\n if (!baseHeadingLevel) return undefined;\n // SR heading (rendered or external) sits at baseHeadingLevel.\n // Content is always one below that; part label (EBSR) sits between them.\n let offset = 1; // content default: baseHeadingLevel + 1\n if (partLabel) offset += 1; // part label at base + 1, content pushed to base + 2\n return Math.min(6, baseHeadingLevel + offset);\n };\n const contentHeadingLevel = getContentHeadingLevel();\n const transformPrompt = (html) => (html && contentHeadingLevel) ? transformDataHeadings(html, contentHeadingLevel) : html;\n\n const teacherInstructionsDiv = (\n <PreviewPrompt\n tagName=\"div\"\n className=\"prompt\"\n defaultClassName=\"teacher-instructions\"\n prompt={teacherInstructions}\n />\n );\n\n const getMultipleChoiceMinSelectionErrorMessage = () => {\n if (minSelections && maxSelections) {\n return minSelections === maxSelections\n ? translator.t('translation:multipleChoice:minmaxSelections_equal', { lng: language, minSelections })\n : translator.t('translation:multipleChoice:minmaxSelections_range', {\n lng: language,\n minSelections,\n maxSelections,\n });\n }\n\n if (minSelections) {\n return translator.t('translation:multipleChoice:minSelections', { lng: language, minSelections });\n }\n\n return '';\n };\n\n const LayoutComponent = this.props.choicesLayout === 'grid'\n ? GridLayout\n : this.props.choicesLayout === 'horizontal'\n ? HorizontalLayout\n : Box;\n\n return (\n <MainContainer id={'main-container'} className={classNames(className, 'multiple-choice')}>\n {partLabel && <PartLabel as={baseHeadingLevel ? `h${Math.min(6, baseHeadingLevel + 1)}` : 'h2'}>{partLabel}</PartLabel>}\n\n {this.renderHeading()}\n\n {teacherInstructions && (\n <TeacherInstructions>\n {!animationsDisabled ? (\n <Collapsible\n labels={{\n hidden: 'Show Teacher Instructions',\n visible: 'Hide Teacher Instructions',\n }}\n >\n {teacherInstructionsDiv}\n </Collapsible>\n ) : (\n teacherInstructionsDiv\n )}\n </TeacherInstructions>\n )}\n\n <StyledFieldset role={choiceMode === 'radio' ? 'radiogroup' : 'group'}>\n <PreviewPrompt\n className=\"prompt\"\n defaultClassName=\"prompt\"\n prompt={transformPrompt(prompt)}\n tagName={'legend'}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n\n {!(options && alwaysShowCorrect) && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n language={language}\n />\n )}\n\n <LayoutComponent style={columnsStyle}>\n {choices.map((choice, index) => (\n <Choice\n choicesLayout={this.props.choicesLayout}\n selectedAnswerBackgroundColor={this.props.selectedAnswerBackgroundColor}\n selectedAnswerStrokeColor={this.props.selectedAnswerStrokeColor}\n selectedAnswerStrokeWidth={this.props.selectedAnswerStrokeWidth}\n hoverAnswerBackgroundColor={this.props.hoverAnswerBackgroundColor}\n hoverAnswerStrokeColor={this.props.hoverAnswerStrokeColor}\n hoverAnswerStrokeWidth={this.props.hoverAnswerStrokeWidth}\n gridColumns={gridColumns}\n key={`choice-${index}`}\n choice={choice}\n index={index}\n choicesLength={choices.length}\n showCorrect={showCorrect}\n isEvaluateMode={isEvaluateMode}\n choiceMode={choiceMode}\n disabled={disabled}\n tagName={this.groupName}\n onChoiceChanged={this.handleChange}\n hideTick={choice.hideTick}\n checked={this.getChecked(choice)}\n correctness={isEvaluateMode ? this.getCorrectness(choice) : undefined}\n displayKey={this.indexToSymbol(index)}\n isSelectionButtonBelow={isSelectionButtonBelow}\n />\n ))}\n </LayoutComponent>\n </StyledFieldset>\n\n {choiceMode === 'checkbox' && selections < minSelections && (\n <ErrorText>{getMultipleChoiceMinSelectionErrorMessage()}</ErrorText>\n )}\n {choiceMode === 'checkbox' && maxSelectionsErrorState && (\n <ErrorText>\n {translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {\n lng: language,\n maxSelections,\n })}\n </ErrorText>\n )}\n </MainContainer>\n );\n }\n}\n\nMultipleChoice.defaultProps = {\n session: {\n value: [],\n },\n};\n\nexport default MultipleChoice;\n"],"mappings":"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","ignoreList":[]}
package/lib/print.js ADDED
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _client = require("react-dom/client");
10
+ var _lodashEs = require("lodash-es");
11
+ var _main = _interopRequireDefault(require("./main"));
12
+ var _mathRendering = require("@pie-lib/math-rendering");
13
+ var _debug = _interopRequireDefault(require("debug"));
14
+ const log = (0, _debug.default)('pie-element:multiple-choice:print');
15
+
16
+ /**
17
+ * Live in same package as main element - so we can access some of the shared comps!
18
+ *
19
+ * - update pslb to build print if src/print.js is there
20
+ * - update demo el
21
+ * - get configure/controller building
22
+ */
23
+
24
+ const preparePrintModel = (model, opts) => {
25
+ const instr = opts.role === 'instructor';
26
+ model.prompt = model.promptEnabled !== false ? model.prompt : undefined;
27
+ model.teacherInstructions = instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;
28
+ model.showTeacherInstructions = instr;
29
+ model.alwaysShowCorrect = instr;
30
+ model.mode = instr ? 'evaluate' : model.mode;
31
+ model.disabled = true;
32
+ model.animationsDisabled = true;
33
+ model.lockChoiceOrder = true;
34
+ model.choicesLayout = model.choicesLayout || 'vertical';
35
+ const choices = (0, _lodashEs.cloneDeep)(model.choices);
36
+ model.choices = choices.map(c => {
37
+ c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;
38
+ c.hideTick = instr;
39
+ c.feedback = undefined;
40
+ return c;
41
+ });
42
+ model.keyMode = model.choicePrefix || 'letters';
43
+ return model;
44
+ };
45
+ class MultipleChoicePrint extends HTMLElement {
46
+ constructor() {
47
+ super();
48
+ this._options = null;
49
+ this._model = null;
50
+ this._session = [];
51
+ this._root = null;
52
+ this._rerender = (0, _lodashEs.debounce)(() => {
53
+ if (this._model && this._session) {
54
+ const printModel = preparePrintModel(this._model, this._options);
55
+ const element = this._options && /*#__PURE__*/_react.default.createElement(_main.default, {
56
+ model: printModel,
57
+ session: {},
58
+ options: this._options
59
+ });
60
+ if (!this._root) {
61
+ this._root = (0, _client.createRoot)(this);
62
+ }
63
+ this._root.render(element);
64
+ // Use double requestAnimationFrame so React has committed to the DOM before we render math
65
+ requestAnimationFrame(() => {
66
+ requestAnimationFrame(() => {
67
+ log('render complete - render math');
68
+ (0, _mathRendering.renderMath)(this);
69
+ });
70
+ });
71
+ } else {
72
+ log('skip');
73
+ }
74
+ }, 50, {
75
+ leading: false,
76
+ trailing: true
77
+ });
78
+ }
79
+ set options(o) {
80
+ this._options = o;
81
+ }
82
+ set model(s) {
83
+ this._model = s;
84
+ this._rerender();
85
+ }
86
+ connectedCallback() {}
87
+ disconnectedCallback() {
88
+ if (this._root) {
89
+ this._root.unmount();
90
+ }
91
+ }
92
+ }
93
+ exports.default = MultipleChoicePrint;
94
+ //# sourceMappingURL=print.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"print.js","names":["_react","_interopRequireDefault","require","_client","_lodashEs","_main","_mathRendering","_debug","log","debug","preparePrintModel","model","opts","instr","role","prompt","promptEnabled","undefined","teacherInstructions","teacherInstructionsEnabled","showTeacherInstructions","alwaysShowCorrect","mode","disabled","animationsDisabled","lockChoiceOrder","choicesLayout","choices","cloneDeep","map","c","rationale","rationaleEnabled","hideTick","feedback","keyMode","choicePrefix","MultipleChoicePrint","HTMLElement","constructor","_options","_model","_session","_root","_rerender","debounce","printModel","element","React","createElement","Main","session","options","createRoot","render","requestAnimationFrame","renderMath","leading","trailing","o","s","connectedCallback","disconnectedCallback","unmount","exports","default"],"sources":["../src/print.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { cloneDeep, debounce } from 'lodash-es';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model, opts) => {\n const instr = opts.role === 'instructor';\n\n model.prompt = model.promptEnabled !== false ? model.prompt : undefined;\n model.teacherInstructions =\n instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;\n model.showTeacherInstructions = instr;\n model.alwaysShowCorrect = instr;\n model.mode = instr ? 'evaluate' : model.mode;\n\n model.disabled = true;\n model.animationsDisabled = true;\n model.lockChoiceOrder = true;\n model.choicesLayout = model.choicesLayout || 'vertical';\n\n const choices = cloneDeep(model.choices);\n\n model.choices = choices.map((c) => {\n c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;\n c.hideTick = instr;\n c.feedback = undefined;\n return c;\n });\n\n model.keyMode = model.choicePrefix || 'letters';\n\n return model;\n};\n\nexport default class MultipleChoicePrint extends HTMLElement {\n constructor() {\n super();\n this._options = null;\n this._model = null;\n this._session = [];\n this._root = null;\n this._rerender = debounce(\n () => {\n if (this._model && this._session) {\n const printModel = preparePrintModel(this._model, this._options);\n\n const element =\n this._options &&\n React.createElement(Main, {\n model: printModel,\n session: {},\n options: this._options,\n });\n\n if (!this._root) {\n this._root = createRoot(this);\n }\n this._root.render(element);\n // Use double requestAnimationFrame so React has committed to the DOM before we render math\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n log('render complete - render math');\n renderMath(this);\n });\n });\n } else {\n log('skip');\n }\n },\n 50,\n { leading: false, trailing: true },\n );\n }\n set options(o) {\n this._options = o;\n }\n\n set model(s) {\n this._model = s;\n this._rerender();\n }\n\n connectedCallback() {}\n\n disconnectedCallback() {\n if (this._root) {\n this._root.unmount();\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.updateSessionMetadata = updateSessionMetadata;
7
+ exports.updateSessionValue = updateSessionValue;
8
+ function updateSessionValue(session, choiceMode, data) {
9
+ session.value = session.value || [];
10
+ if (choiceMode === 'checkbox') {
11
+ if (data.selected) {
12
+ session.value = Array.from(new Set([...session.value, data.value]));
13
+ } else {
14
+ session.value = session.value.filter(v => v !== data.value);
15
+ }
16
+ }
17
+ if (choiceMode === 'radio') {
18
+ if (data.selected) {
19
+ session.value = [data.value];
20
+ } else {
21
+ session.value = [];
22
+ }
23
+ }
24
+
25
+ //update session value metadata
26
+ session.selector = data.selector; //the input method used to select the choice (e.g. mouse, keyboard)
27
+ }
28
+ function updateSessionMetadata(session, metadata) {
29
+ session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
30
+ session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
31
+
32
+ if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
33
+ // waitTime is elapsed time the user waited for auto-played audio to finish
34
+ session.waitTime = session.audioEndTime - session.audioStartTime;
35
+ }
36
+ }
37
+ //# sourceMappingURL=session-updater.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"session-updater.js","names":["updateSessionValue","session","choiceMode","data","value","selected","Array","from","Set","filter","v","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, choiceMode, data) {\n session.value = session.value || [];\n if (choiceMode === 'checkbox') {\n if (data.selected) {\n session.value = Array.from(new Set([...session.value, data.value]));\n } else {\n session.value = session.value.filter(v => v !== data.value);\n }\n }\n\n if (choiceMode === 'radio') {\n if (data.selected) {\n session.value = [data.value];\n } else {\n session.value = [];\n }\n }\n \n //update session value metadata\n session.selector = data.selector; //the input method used to select the choice (e.g. mouse, keyboard)\n}\n\nexport function updateSessionMetadata(session, metadata) {\n session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing\n session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing\n \n if(!session.waitTime && session.audioStartTime && session.audioEndTime) {\n // waitTime is elapsed time the user waited for auto-played audio to finish\n session.waitTime = (session.audioEndTime - session.audioStartTime);\n }\n}\n"],"mappings":";;;;;;;AAAO,SAASA,kBAAkBA,CAACC,OAAO,EAAEC,UAAU,EAAEC,IAAI,EAAE;EAC5DF,OAAO,CAACG,KAAK,GAAGH,OAAO,CAACG,KAAK,IAAI,EAAE;EACnC,IAAIF,UAAU,KAAK,UAAU,EAAE;IAC7B,IAAIC,IAAI,CAACE,QAAQ,EAAE;MACjBJ,OAAO,CAACG,KAAK,GAAGE,KAAK,CAACC,IAAI,CAAC,IAAIC,GAAG,CAAC,CAAC,GAAGP,OAAO,CAACG,KAAK,EAAED,IAAI,CAACC,KAAK,CAAC,CAAC,CAAC;IACrE,CAAC,MAAM;MACLH,OAAO,CAACG,KAAK,GAAGH,OAAO,CAACG,KAAK,CAACK,MAAM,CAACC,CAAC,IAAIA,CAAC,KAAKP,IAAI,CAACC,KAAK,CAAC;IAC7D;EACF;EAEA,IAAIF,UAAU,KAAK,OAAO,EAAE;IAC1B,IAAIC,IAAI,CAACE,QAAQ,EAAE;MACjBJ,OAAO,CAACG,KAAK,GAAG,CAACD,IAAI,CAACC,KAAK,CAAC;IAC9B,CAAC,MAAM;MACLH,OAAO,CAACG,KAAK,GAAG,EAAE;IACpB;EACF;;EAEA;EACAH,OAAO,CAACU,QAAQ,GAAGR,IAAI,CAACQ,QAAQ,CAAC,CAAC;AACpC;AAEO,SAASC,qBAAqBA,CAACX,OAAO,EAAEY,QAAQ,EAAE;EACvDZ,OAAO,CAACa,cAAc,GAAGb,OAAO,CAACa,cAAc,IAAID,QAAQ,CAACC,cAAc,CAAC,CAAC;EAC5Eb,OAAO,CAACc,YAAY,GAAGd,OAAO,CAACc,YAAY,IAAIF,QAAQ,CAACE,YAAY,CAAC,CAAC;;EAEtE,IAAG,CAACd,OAAO,CAACe,QAAQ,IAAIf,OAAO,CAACa,cAAc,IAAIb,OAAO,CAACc,YAAY,EAAE;IACtE;IACAd,OAAO,CAACe,QAAQ,GAAIf,OAAO,CAACc,YAAY,GAAGd,OAAO,CAACa,cAAe;EACpE;AACF","ignoreList":[]}
package/lib/utils.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.reachedMaxSelections = exports.exceedsMaxSelections = void 0;
7
+ // Returns true when count is at or above maxSelections (use to block the next selection).
8
+ const reachedMaxSelections = (count, maxSelections) => maxSelections != null && count >= maxSelections;
9
+
10
+ // Returns true when count strictly exceeds maxSelections (use for validation / isComplete checks).
11
+ exports.reachedMaxSelections = reachedMaxSelections;
12
+ const exceedsMaxSelections = (count, maxSelections) => maxSelections != null && count > maxSelections;
13
+ exports.exceedsMaxSelections = exceedsMaxSelections;
14
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","names":["reachedMaxSelections","count","maxSelections","exports","exceedsMaxSelections"],"sources":["../src/utils.js"],"sourcesContent":["// Returns true when count is at or above maxSelections (use to block the next selection).\nexport const reachedMaxSelections = (count, maxSelections) =>\n maxSelections != null && count >= maxSelections;\n\n// Returns true when count strictly exceeds maxSelections (use for validation / isComplete checks).\nexport const exceedsMaxSelections = (count, maxSelections) =>\n maxSelections != null && count > maxSelections;\n"],"mappings":";;;;;;AAAA;AACO,MAAMA,oBAAoB,GAAGA,CAACC,KAAK,EAAEC,aAAa,KACvDA,aAAa,IAAI,IAAI,IAAID,KAAK,IAAIC,aAAa;;AAEjD;AAAAC,OAAA,CAAAH,oBAAA,GAAAA,oBAAA;AACO,MAAMI,oBAAoB,GAAGA,CAACH,KAAK,EAAEC,aAAa,KACvDA,aAAa,IAAI,IAAI,IAAID,KAAK,GAAGC,aAAa;AAACC,OAAA,CAAAC,oBAAA,GAAAA,oBAAA","ignoreList":[]}