@pie-element/math-inline 12.1.1-next.14 → 12.1.1-next.147

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 (101) hide show
  1. package/CHANGELOG.json +2627 -0
  2. package/CHANGELOG.md +2473 -0
  3. package/LICENSE.md +5 -0
  4. package/README.md +3 -0
  5. package/configure/CHANGELOG.json +1652 -0
  6. package/configure/CHANGELOG.md +2101 -0
  7. package/configure/lib/configure.js +186 -0
  8. package/configure/lib/configure.js.map +1 -0
  9. package/configure/lib/defaults.js +185 -0
  10. package/configure/lib/defaults.js.map +1 -0
  11. package/configure/lib/general-config-block.js +525 -0
  12. package/configure/lib/general-config-block.js.map +1 -0
  13. package/configure/lib/index.js +140 -0
  14. package/configure/lib/index.js.map +1 -0
  15. package/configure/lib/response.js +369 -0
  16. package/configure/lib/response.js.map +1 -0
  17. package/configure/lib/utils.js +31 -0
  18. package/configure/lib/utils.js.map +1 -0
  19. package/configure/package.json +29 -0
  20. package/controller/CHANGELOG.json +1002 -0
  21. package/controller/CHANGELOG.md +1536 -0
  22. package/controller/lib/defaults.js +43 -0
  23. package/controller/lib/defaults.js.map +1 -0
  24. package/controller/lib/index.js +383 -0
  25. package/controller/lib/index.js.map +1 -0
  26. package/controller/lib/utils.js +11 -0
  27. package/controller/lib/utils.js.map +1 -0
  28. package/controller/package.json +26 -0
  29. package/docs/config-schema.json +2071 -0
  30. package/docs/config-schema.json.md +1533 -0
  31. package/docs/demo/config.js +8 -0
  32. package/docs/demo/generate.js +41 -0
  33. package/docs/demo/index.html +1 -0
  34. package/docs/demo/session.js +11 -0
  35. package/docs/pie-schema.json +1472 -0
  36. package/docs/pie-schema.json.md +845 -0
  37. package/lib/index.js +94 -0
  38. package/lib/index.js.map +1 -0
  39. package/lib/main.js +1030 -0
  40. package/lib/main.js.map +1 -0
  41. package/lib/print.js +92 -0
  42. package/lib/print.js.map +1 -0
  43. package/lib/simple-question-block.js +148 -0
  44. package/lib/simple-question-block.js.map +1 -0
  45. package/lib/utils.js +11 -0
  46. package/lib/utils.js.map +1 -0
  47. package/package.json +26 -93
  48. package/configure.js +0 -2
  49. package/controller.js +0 -1
  50. package/dist/author/configure.d.ts +0 -25
  51. package/dist/author/configure.js +0 -114
  52. package/dist/author/defaults.d.ts +0 -186
  53. package/dist/author/defaults.js +0 -145
  54. package/dist/author/general-config-block.d.ts +0 -35
  55. package/dist/author/general-config-block.js +0 -390
  56. package/dist/author/index.d.ts +0 -60
  57. package/dist/author/index.js +0 -77
  58. package/dist/author/response.d.ts +0 -40
  59. package/dist/author/response.js +0 -238
  60. package/dist/author/utils.d.ts +0 -14
  61. package/dist/author/utils.js +0 -13
  62. package/dist/browser/author/index.js +0 -36149
  63. package/dist/browser/author/index.js.map +0 -1
  64. package/dist/browser/controller/index.js +0 -37789
  65. package/dist/browser/controller/index.js.map +0 -1
  66. package/dist/browser/delivery/index.js +0 -84
  67. package/dist/browser/delivery/index.js.map +0 -1
  68. package/dist/browser/dist-BTyrpsXL.js +0 -317
  69. package/dist/browser/dist-BTyrpsXL.js.map +0 -1
  70. package/dist/browser/dist-D9ARZhQk.js +0 -1426
  71. package/dist/browser/dist-D9ARZhQk.js.map +0 -1
  72. package/dist/browser/dist-gZPCFLwA.js +0 -19418
  73. package/dist/browser/dist-gZPCFLwA.js.map +0 -1
  74. package/dist/browser/main-DIAGtm9r.js +0 -973
  75. package/dist/browser/main-DIAGtm9r.js.map +0 -1
  76. package/dist/browser/math-inline.css +0 -2
  77. package/dist/browser/print/index.js +0 -50
  78. package/dist/browser/print/index.js.map +0 -1
  79. package/dist/controller/defaults.d.ts +0 -44
  80. package/dist/controller/defaults.js +0 -39
  81. package/dist/controller/index.d.ts +0 -22
  82. package/dist/controller/index.js +0 -171
  83. package/dist/controller/utils.d.ts +0 -12
  84. package/dist/controller/utils.js +0 -7
  85. package/dist/delivery/index.d.ts +0 -22
  86. package/dist/delivery/index.js +0 -55
  87. package/dist/delivery/main.d.ts +0 -44
  88. package/dist/delivery/main.js +0 -606
  89. package/dist/delivery/simple-question-block.d.ts +0 -27
  90. package/dist/delivery/simple-question-block.js +0 -94
  91. package/dist/delivery/utils.d.ts +0 -12
  92. package/dist/delivery/utils.js +0 -7
  93. package/dist/index.d.ts +0 -1
  94. package/dist/index.iife.d.ts +0 -8
  95. package/dist/index.iife.js +0 -227
  96. package/dist/index.js +0 -2
  97. package/dist/math-inline.css +0 -2
  98. package/dist/print/index.d.ts +0 -15
  99. package/dist/print/index.js +0 -50
  100. package/dist/runtime-support.d.ts +0 -12
  101. package/dist/runtime-support.js +0 -12
@@ -1,973 +0,0 @@
1
- import { a as e, t, y as n } from "./dist-BTyrpsXL.js";
2
- import { C as r, L as i, M as a, Ot as o, S as s, T as c, _ as l, dt as u, f as d, ft as f, h as ee, m as p, mt as m, n as h, p as g, u as te, ut as _, v, w as y, z as b } from "./dist-gZPCFLwA.js";
3
- import { t as x } from "./dist-D9ARZhQk.js";
4
- import S, { useRef as C } from "react";
5
- import { jsx as w, jsxs as T } from "react/jsx-runtime";
6
- import ne from "react-dom";
7
- //#region ../../lib-react/correct-answer-toggle/dist/expander.js
8
- var E = /* @__PURE__ */ n(o(), 1), D = "height ease-in 300ms, opacity ease-in 300ms", O = m("div")(() => ({
9
- position: "relative",
10
- height: 0,
11
- overflow: "hidden",
12
- display: "flex",
13
- visibility: "hidden",
14
- width: 0,
15
- "&.enter": {
16
- transition: D,
17
- opacity: 1,
18
- height: "auto",
19
- width: "auto",
20
- visibility: "visible",
21
- minHeight: "25px"
22
- },
23
- "&.enter-done": {
24
- height: "auto",
25
- visibility: "visible",
26
- width: "auto",
27
- minHeight: "25px"
28
- },
29
- "&.exit": {
30
- transition: D,
31
- opacity: 0,
32
- height: 0,
33
- visibility: "visible",
34
- width: 0
35
- },
36
- "&.exit-done": {
37
- opacity: 0,
38
- visibility: "hidden",
39
- height: 0,
40
- width: 0
41
- }
42
- })), k = (e) => {
43
- let { show: t, children: n, className: r } = e, i = C(null);
44
- return /* @__PURE__ */ w(f, {
45
- nodeRef: i,
46
- in: t,
47
- appear: !0,
48
- mountOnEnter: !1,
49
- timeout: 300,
50
- classNames: {
51
- enter: "enter",
52
- enterDone: "enter-done",
53
- exit: "exit",
54
- exitDone: "exit-done"
55
- },
56
- children: /* @__PURE__ */ w(O, {
57
- ref: i,
58
- className: r,
59
- children: n
60
- })
61
- });
62
- };
63
- k.propTypes = {
64
- show: E.default.bool.isRequired,
65
- className: E.default.string,
66
- children: E.default.oneOfType([E.default.arrayOf(E.default.node), E.default.node]).isRequired
67
- };
68
- //#endregion
69
- //#region ../../lib-react/icons/dist/correct-response-icon.js
70
- var A = ({ bgFill: e, fgFill: t }) => /* @__PURE__ */ T("svg", {
71
- preserveAspectRatio: "xMinYMin meet",
72
- version: "1.1",
73
- viewBox: "-283 359 34 35",
74
- style: { enableBackground: "new -283 359 34 35" },
75
- children: [
76
- /* @__PURE__ */ w("circle", {
77
- cx: "-266",
78
- cy: "375.9",
79
- r: "14",
80
- fill: e
81
- }),
82
- /* @__PURE__ */ w("path", {
83
- d: "M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z\n M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z",
84
- fill: e
85
- }),
86
- /* @__PURE__ */ w("polygon", {
87
- points: "-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6",
88
- fill: t
89
- })
90
- ]
91
- });
92
- A.propTypes = {
93
- bgFill: E.default.string.isRequired,
94
- fgFill: E.default.string.isRequired
95
- };
96
- var j = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ T("svg", {
97
- preserveAspectRatio: "xMinYMin meet",
98
- version: "1.1",
99
- viewBox: "-129.5 127 34 35",
100
- style: { enableBackground: "new -129.5 127 34 35" },
101
- children: [
102
- /* @__PURE__ */ w("path", {
103
- style: {
104
- fill: "#D0CAC5",
105
- stroke: "#E6E3E0",
106
- strokeWidth: .75,
107
- strokeMiterlimit: 10
108
- },
109
- d: "M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5\n C-97.4,153.5-104.3,160.4-112.9,160.4z"
110
- }),
111
- /* @__PURE__ */ w("path", {
112
- style: {
113
- fill: "#B3ABA4",
114
- stroke: "#CDC7C2",
115
- strokeWidth: .5,
116
- strokeMiterlimit: 10
117
- },
118
- d: "M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
119
- }),
120
- /* @__PURE__ */ w("circle", {
121
- cx: "-114.2",
122
- cy: "143.5",
123
- r: "14",
124
- fill: e
125
- }),
126
- /* @__PURE__ */ w("path", {
127
- d: "M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z\n M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z",
128
- fill: n
129
- }),
130
- /* @__PURE__ */ w("polygon", {
131
- points: "-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2",
132
- fill: t
133
- })
134
- ]
135
- });
136
- j.propTypes = {
137
- bgFill: E.default.string.isRequired,
138
- fgFill: E.default.string.isRequired,
139
- borderFill: E.default.string.isRequired
140
- };
141
- var M = m("div")(({ size: e }) => ({
142
- width: e || "25px",
143
- height: e || "25px"
144
- })), N = ({ open: e, size: t }) => /* @__PURE__ */ w(M, {
145
- size: t,
146
- children: e ? /* @__PURE__ */ w(A, {
147
- bgFill: "#bce2ff",
148
- fgFill: "#1a9cff"
149
- }) : /* @__PURE__ */ w(j, {
150
- bgFill: "white",
151
- fgFill: "#1a9cff",
152
- borderFill: "#bce2ff"
153
- })
154
- });
155
- N.propTypes = {
156
- open: E.default.bool,
157
- size: E.default.string
158
- }, N.defaultProps = { open: !1 };
159
- //#endregion
160
- //#region ../../lib-react/correct-answer-toggle/dist/index.js
161
- function P(e) {
162
- return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
163
- }
164
- function F(e, t) {
165
- return !e || P(e) ? e : P(e.default) ? e.default : t && P(e[t]) ? e[t] : t && P(e[t]?.default) ? e[t].default : e;
166
- }
167
- var I = F(y, "Readable") || F(z.Readable, "Readable"), L = v, R = L.default, z = R && typeof R == "object" ? R : L, { translator: B } = x, V = {
168
- WebkitTouchCallout: "none",
169
- WebkitUserSelect: "none",
170
- KhtmlUserSelect: "none",
171
- MozUserSelect: "none",
172
- msUserSelect: "none",
173
- userSelect: "none"
174
- }, re = m("div")(() => ({
175
- width: "100%",
176
- cursor: "pointer"
177
- })), H = m("div")(() => ({
178
- margin: "0 auto",
179
- textAlign: "center",
180
- display: "flex"
181
- })), U = m("div")(() => ({
182
- width: "fit-content",
183
- minWidth: "140px",
184
- alignSelf: "center",
185
- verticalAlign: "middle",
186
- color: `var(--correct-answer-toggle-label-color, ${u.text()})`,
187
- fontWeight: "normal",
188
- ...V
189
- })), W = m("div")(() => ({
190
- position: "absolute",
191
- width: "25px",
192
- "&.enter": { opacity: "0" },
193
- "&.enter-active": {
194
- opacity: "1",
195
- transition: "opacity 0.3s ease-in"
196
- },
197
- "&.exit": { opacity: "1" },
198
- "&.exit-active": {
199
- opacity: "0",
200
- transition: "opacity 0.3s ease-in"
201
- }
202
- })), G = m("div")(() => ({
203
- width: "25px",
204
- marginRight: "5px",
205
- display: "flex",
206
- alignItems: "center"
207
- })), ie = class e extends S.Component {
208
- static propTypes = {
209
- onToggle: E.default.func,
210
- toggled: E.default.bool,
211
- show: E.default.bool,
212
- hideMessage: E.default.string,
213
- showMessage: E.default.string,
214
- className: E.default.string,
215
- language: E.default.string
216
- };
217
- static defaultProps = {
218
- showMessage: "Show correct answer",
219
- hideMessage: "Hide correct answer",
220
- show: !1,
221
- toggled: !1
222
- };
223
- constructor(t) {
224
- super(t), this.state = { show: t.show }, this.openIconRef = S.createRef(), this.closedIconRef = S.createRef(), e.defaultProps = {
225
- ...e.defaultProps,
226
- showMessage: B.t("common:showCorrectAnswer", { lng: t.language }),
227
- hideMessage: B.t("common:hideCorrectAnswer", { lng: t.language })
228
- };
229
- }
230
- onClick() {
231
- this.props.onToggle(!this.props.toggled);
232
- }
233
- onTouch(e) {
234
- e.preventDefault(), this.props.onToggle(!this.props.toggled);
235
- }
236
- UNSAFE_componentWillReceiveProps(t) {
237
- this.setState({ show: t.show }), t.language !== this.props?.language && (e.defaultProps = {
238
- ...e.defaultProps,
239
- showMessage: B.t("common:showCorrectAnswer", { lng: t.language }),
240
- hideMessage: B.t("common:hideCorrectAnswer", { lng: t.language })
241
- });
242
- }
243
- render() {
244
- let { className: e, toggled: t, hideMessage: n, showMessage: r } = this.props;
245
- return /* @__PURE__ */ w(re, {
246
- className: e,
247
- children: /* @__PURE__ */ w(k, {
248
- show: this.state.show,
249
- children: /* @__PURE__ */ T(H, {
250
- onClick: this.onClick.bind(this),
251
- onTouchEnd: this.onTouch.bind(this),
252
- children: [/* @__PURE__ */ T(G, { children: [/* @__PURE__ */ w(f, {
253
- nodeRef: this.openIconRef,
254
- timeout: 400,
255
- in: t,
256
- exit: !t,
257
- classNames: {
258
- enter: "enter",
259
- enterActive: "enter-active",
260
- exit: "exit",
261
- exitActive: "exit-active"
262
- },
263
- children: /* @__PURE__ */ w(W, {
264
- ref: this.openIconRef,
265
- children: /* @__PURE__ */ w(N, { open: t }, "correct-open")
266
- })
267
- }), /* @__PURE__ */ w(f, {
268
- nodeRef: this.closedIconRef,
269
- timeout: 5e3,
270
- in: !t,
271
- exit: t,
272
- classNames: {
273
- enter: "enter",
274
- enterActive: "enter-active",
275
- exit: "exit",
276
- exitActive: "exit-active"
277
- },
278
- children: /* @__PURE__ */ w(W, {
279
- ref: this.closedIconRef,
280
- children: /* @__PURE__ */ w(N, { open: t }, "correct-closed")
281
- })
282
- })] }), /* @__PURE__ */ w(I, {
283
- false: !0,
284
- children: /* @__PURE__ */ w(U, {
285
- "aria-hidden": !this.state.show,
286
- children: t ? n : r
287
- })
288
- })]
289
- })
290
- })
291
- });
292
- }
293
- }, ae = {
294
- advanced: "Advanced Multi",
295
- simple: "Simple"
296
- }, oe = m("div")(({ theme: e }) => ({
297
- marginTop: e.spacing(2),
298
- marginBottom: e.spacing(2),
299
- padding: e.spacing(1)
300
- })), se = m("div", { shouldForwardProp: (e) => !["isCorrect", "isIncorrect"].includes(e) })(({ theme: e, isCorrect: t, isIncorrect: n }) => ({
301
- color: u.text(),
302
- background: u.background(),
303
- border: t ? `2px solid ${u.correct()} !important` : n ? `2px solid ${u.incorrect()} !important` : `1px solid ${u.primaryLight()}`,
304
- width: "fit-content",
305
- fontSize: "1rem",
306
- padding: t || n ? e.spacing(1) : e.spacing(.5),
307
- letterSpacing: t || n ? "0.5px" : "normal",
308
- "& > .mq-math-mode": { "& > .mq-hasCursor": { "& > .mq-cursor": { display: "none" } } }
309
- }));
310
- if (typeof document < "u") {
311
- let e = "math-inline-simple-question-styles";
312
- if (!document.getElementById(e)) {
313
- let t = document.createElement("style");
314
- t.id = e, t.textContent = `
315
- .response-editor {
316
- display: flex;
317
- justify-content: center;
318
- width: auto;
319
- max-width: fit-content;
320
- height: auto;
321
- text-align: left;
322
- padding: 8px;
323
- }
324
- .response-editor.mq-math-mode {
325
- border: 1px solid ${u.primaryLight()};
326
- }
327
- `, document.head.appendChild(t);
328
- }
329
- }
330
- var ce = class extends S.Component {
331
- static propTypes = {
332
- onSimpleResponseChange: E.default.func,
333
- model: E.default.object.isRequired,
334
- emptyResponse: E.default.bool,
335
- session: E.default.object.isRequired,
336
- showCorrect: E.default.bool,
337
- onSubFieldFocus: E.default.func.isRequired,
338
- showKeypad: E.default.bool.isRequired
339
- };
340
- constructor(e) {
341
- super(e), this.mathToolBarId = `math-toolbar-${(/* @__PURE__ */ new Date()).getTime()}`;
342
- }
343
- mathToolBarContainsTarget = (e) => document.getElementById(this.mathToolBarId).contains(e.target);
344
- handleClick = (e) => {
345
- try {
346
- this.mathToolBarContainsTarget(e) || this.setState({ showKeypad: !1 });
347
- } catch {}
348
- };
349
- onFocus = () => {
350
- let { onSubFieldFocus: e } = this.props;
351
- e(this.mathToolBarId);
352
- };
353
- render() {
354
- let { model: e, showCorrect: t, session: n, emptyResponse: r, onSimpleResponseChange: i, showKeypad: a } = this.props, { config: o, disabled: s, correctness: c } = e || {};
355
- if (!o) return;
356
- let l = c && c.correct, { responses: u, equationEditor: d } = o;
357
- return /* @__PURE__ */ w(oe, {
358
- "data-keypad": !0,
359
- children: t || s ? /* @__PURE__ */ w(se, {
360
- isIncorrect: !r && !l && !t,
361
- isCorrect: !r && (l || t),
362
- children: /* @__PURE__ */ w(p.Static, { latex: t ? u && u.length && u[0].answer : n.response || "" })
363
- }) : /* @__PURE__ */ w("div", {
364
- id: this.mathToolBarId,
365
- children: /* @__PURE__ */ w(h, {
366
- classNames: { editor: "response-editor" },
367
- latex: n.response,
368
- keypadMode: d,
369
- onChange: i,
370
- onDone: () => {},
371
- onFocus: this.onFocus,
372
- controlledKeypad: !0,
373
- showKeypad: a,
374
- hideDoneButton: !0
375
- })
376
- })
377
- });
378
- }
379
- };
380
- //#endregion
381
- //#region src/delivery/main.tsx
382
- function K(e) {
383
- return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
384
- }
385
- function q(e, t) {
386
- return !e || K(e) ? e : K(e.default) ? e.default : t && K(e[t]) ? e[t] : t && K(e[t]?.default) ? e[t].default : e;
387
- }
388
- var le = q(a, "UiLayout") || q(X.UiLayout, "UiLayout"), J = q(c, "PreviewPrompt") || q(X.PreviewPrompt, "PreviewPrompt"), ue = q(y, "Readable") || q(X.Readable, "Readable"), de = q(i, "Collapsible") || q(X.Collapsible, "Collapsible"), fe = q(_, "Feedback") || q(X.Feedback, "Feedback"), pe = v, Y = pe.default, X = Y && typeof Y == "object" ? Y : pe, { translator: Z } = x, me = !1, he = /\\newline/g, Q = /{{response}}/gm, ge = 6, _e = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
389
- function ve(e = []) {
390
- return e.map((e) => ({
391
- name: e,
392
- latex: e,
393
- write: e,
394
- label: e
395
- }));
396
- }
397
- function ye(e, t) {
398
- let n = e;
399
- for (; n !== null;) {
400
- if (t && n === t) return !0;
401
- n = n.parentNode;
402
- }
403
- return !1;
404
- }
405
- function be(e = [], t) {
406
- return Math.floor(e.length / 5) * 30 + (t === "miscellaneous" ? 600 : 500);
407
- }
408
- function xe(e, t) {
409
- let { config: n, disabled: r } = e || {}, { expression: i, responses: a, printMode: o, alwaysShowCorrect: s } = n || {};
410
- if (n && i) {
411
- let e = i;
412
- if (t.showCorrect) return a && a.length && a[0].answer;
413
- let n = 1;
414
- return (e || "").replace(Q, function() {
415
- let e = t.session.answers[`r${n}`];
416
- if (o && !s) {
417
- let e = "\\ \\ ".repeat(30) + "\\newline ";
418
- return `\\MathQuillMathField[r${n++}]{${e.repeat(3)}}`;
419
- }
420
- return r ? `\\embed{answerBlock}[r${n++}]` : `\\MathQuillMathField[r${n++}]{${e && e.value || ""}}`;
421
- }).replace(he, "\\embed{newLine}[]");
422
- }
423
- }
424
- function Se(e, t) {
425
- let n = {};
426
- if (t.config && t.config.expression) {
427
- let r = 1;
428
- (t.config.expression || "").replace(Q, () => {
429
- n[`r${r}`] = { value: e && e.answers && e.answers[`r${r}`] && e.answers[`r${r}`].value || "" }, r += 1;
430
- });
431
- }
432
- return n;
433
- }
434
- var Ce = class extends S.Component {
435
- static propTypes = {
436
- session: E.default.object.isRequired,
437
- onSessionChange: E.default.func,
438
- model: E.default.object.isRequired
439
- };
440
- constructor(e) {
441
- super(e);
442
- let { model: t, session: n } = e, r = Se(n, t);
443
- this.state = {
444
- session: {
445
- ...e.session,
446
- answers: r
447
- },
448
- activeAnswerBlock: "",
449
- showCorrect: this.props.model.config.alwaysShowCorrect || !1,
450
- tooltipContainerRef: S.createRef()
451
- };
452
- }
453
- UNSAFE_componentWillMount() {
454
- typeof window < "u" && (me ||= (g("answerBlock", (e) => {
455
- let t = we();
456
- return {
457
- htmlString: `<div class="${t.blockContainer}">
458
- <div class="${t.blockResponse}" id="${e}Index">R</div>
459
- <div class="${t.blockMath}">
460
- <span id="${e}"></span>
461
- </div>
462
- </div>`,
463
- text: () => "text",
464
- latex: () => `\\embed{answerBlock}[${e}]`
465
- };
466
- }), !0));
467
- }
468
- handleAnswerBlockDomUpdate = () => {
469
- let { model: e } = this.props, { session: t, showCorrect: n } = this.state, r = t.answers;
470
- this.root && e.disabled && !n && Object.keys(r).forEach((t) => {
471
- let n = this.root.querySelector(`#${t}`), i = this.root.querySelector(`#${t}Index`);
472
- if (n) {
473
- let a = r[t];
474
- d(n, a && a.value || ""), e.view && (n.parentElement.parentElement.classList.remove("correct"), n.parentElement.parentElement.classList.remove("incorrect")), i.textContent = "R";
475
- }
476
- }), b(this.root);
477
- };
478
- countResponseOccurrences(e) {
479
- let t = e?.match(/\{\{response\}\}/g);
480
- return t ? t.length : 0;
481
- }
482
- UNSAFE_componentWillReceiveProps(e) {
483
- let { config: n } = this.props.model, { config: r = {} } = e.model || {}, { session: i } = this.props, { session: a = {} } = e || {};
484
- if (i && a && !t(i.answers, a.answers) && this.setState({ session: {
485
- ...a,
486
- answers: Se(a, this.props.model)
487
- } }), n.note && n.language && n.language !== r.language && n.note === Z.t("mathInline.primaryCorrectWithAlternates", { lng: n.language }) && (n.note = Z.t("mathInline.primaryCorrectWithAlternates", { lng: r.language })), (n.env && n.env.mode !== "evaluate" || r.env && r.env.mode !== "evaluate") && this.setState({
488
- ...this.state.session,
489
- showCorrect: !1
490
- }), r.alwaysShowCorrect && this.setState({ showCorrect: !0 }), this.countResponseOccurrences(n.expression) < this.countResponseOccurrences(r.expression) && setTimeout(() => this.updateAria(), 100), n && n.responses && n.responses.length !== r.responses.length || !n && r && r.responses || n && r && n.expression !== r.expression) {
491
- let e = {}, t = this.state.session.answers, n = 1;
492
- (r.expression || "").replace(Q, () => {
493
- e[`r${n}`] = { value: t && t[`r${n}`] && t[`r${n}`].value || "" }, n++;
494
- }), this.setState((t) => ({ session: {
495
- ...t.session,
496
- completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
497
- answers: e
498
- } }), this.handleAnswerBlockDomUpdate);
499
- }
500
- }
501
- shouldComponentUpdate(e, n) {
502
- let r = t(this.props.model, e.model), i = t(this.state, n);
503
- return !r || !i;
504
- }
505
- componentDidMount() {
506
- this.handleAnswerBlockDomUpdate(), this.updateAria(), setTimeout(() => b(this.root), 100);
507
- }
508
- componentDidUpdate(e, t) {
509
- this.handleAnswerBlockDomUpdate(), e.model?.config?.responseType !== this.props.model?.config?.responseType && this.updateAria();
510
- }
511
- updateAria = () => {
512
- this.root && (this.root.querySelectorAll(".mq-selectable").forEach((e) => e.setAttribute("aria-hidden", "true")), this.root.querySelectorAll("textarea").forEach((e, t) => {
513
- e.setAttribute("aria-label", "Enter answer.");
514
- let n = `instructions-${t}`, r = e.closest(".mq-textarea");
515
- if (r) {
516
- let t = r.querySelector(`#${n}`);
517
- t || (t = document.createElement("span"), t.id = n, t.className = "sr-only", t.textContent = "This field supports both keypad and keyboard input. Use the keyboard to access and interact with the on-screen math keypad, which accepts LaTeX markup. Use the down arrow key to open the keypad and navigate its buttons. Use the escape key to close the keypad and return to the input field.", r.insertBefore(t, e)), e.setAttribute("aria-describedby", n);
518
- }
519
- }));
520
- };
521
- focusFirstKeypadElement = () => {
522
- setTimeout(() => {
523
- let e = document.querySelector("[data-keypad]");
524
- if (e) {
525
- let t = e.querySelector("button, [role='button']");
526
- t && t.focus();
527
- }
528
- }, 0);
529
- };
530
- handleKeyDown = (e, t) => {
531
- let n = ye(e.target, this.root), r = this.mqStatic && this.mqStatic.inputRef?.current ? this.mqStatic.inputRef?.current.contains(document.activeElement) : document.activeElement?.getAttribute("aria-label") === "Enter answer.", { key: i, type: a } = e;
532
- r && (i === "ArrowDown" || a === "click" || a === "touchstart") ? this.state.activeAnswerBlock !== t && n && (this.cleanupKeyDownListener(), this.setState({ activeAnswerBlock: t }, () => {
533
- this.onSubFieldFocus(t), i === "ArrowDown" && this.focusFirstKeypadElement();
534
- })) : e.key === "Escape" && this.setState({ activeAnswerBlock: "" });
535
- };
536
- onSubFieldFocus = (e) => {
537
- this.handleEvent || (this.handleEvent = (t) => {
538
- this.handleKeyDown(t, e);
539
- }, document.addEventListener("keydown", this.handleEvent), document.addEventListener("click", this.handleEvent), document.addEventListener("touchstart", this.handleEvent));
540
- };
541
- cleanupKeyDownListener = () => {
542
- this.handleEvent &&= (document.removeEventListener("keydown", this.handleEvent), document.removeEventListener("click", this.handleEvent), document.removeEventListener("touchstart", this.handleEvent), null);
543
- };
544
- componentWillUnmount() {
545
- this.cleanupKeyDownListener && this.cleanupKeyDownListener();
546
- }
547
- onDone = () => {};
548
- onSimpleResponseChange = (e) => {
549
- this.setState((t) => ({ session: {
550
- ...t.session,
551
- response: e
552
- } }), this.callOnSessionChange);
553
- };
554
- toNodeData = (e) => {
555
- if (!e) return;
556
- let { type: t, value: n } = e;
557
- return t === "command" || t === "cursor" ? e : t === "answer" ? {
558
- type: "answer",
559
- ...e
560
- } : n === "clear" ? { type: "clear" } : {
561
- type: "write",
562
- value: n
563
- };
564
- };
565
- setInput = (e) => {
566
- this.input = e;
567
- };
568
- onClick = (e) => {
569
- let t = window.scrollX, n = window.scrollY, r = this.toNodeData(e);
570
- r.type === "clear" ? this.input.clear() : r.type === "command" ? Array.isArray(r.value) ? r.value.forEach((e) => {
571
- this.input.cmd(e);
572
- }) : this.input.cmd(r.value) : r.type === "cursor" ? this.input.keystroke(r.value) : this.input.write(r.value), this.input.focus(), requestAnimationFrame(() => {
573
- window.scrollTo(t, n), requestAnimationFrame(() => window.scrollTo(t, n));
574
- });
575
- };
576
- callOnSessionChange = () => {
577
- let { onSessionChange: e } = this.props;
578
- e && e(this.state.session);
579
- };
580
- toggleShowCorrect = (e) => {
581
- this.setState({ showCorrect: e }, this.handleAnswerBlockDomUpdate);
582
- };
583
- subFieldChanged = (e, t) => {
584
- if (l(), e) {
585
- let n = window.scrollX, r = window.scrollY;
586
- this.setState((n) => ({ session: {
587
- ...n.session,
588
- completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
589
- answers: {
590
- ...n.session.answers,
591
- [e]: { value: t }
592
- }
593
- } }), () => {
594
- this.callOnSessionChange(), requestAnimationFrame(() => {
595
- window.scrollTo(n, r);
596
- });
597
- });
598
- }
599
- };
600
- getFieldName = (e, t) => {
601
- let { answers: n } = this.state.session;
602
- if (Object.keys(n || {}).length) return Object.keys(n).find((n) => {
603
- let r = t[n];
604
- return r && r.id == e.id;
605
- });
606
- };
607
- onBlur = (e) => {
608
- let { relatedTarget: t, currentTarget: n } = e || {}, r = n && n.closest("[role=tooltip]");
609
- function i(e, t = 0) {
610
- if (!e || t >= 16) return null;
611
- let n = e.offsetParent;
612
- return n ? n.getAttribute("role") === "tooltip" ? n : i(n, t + 1) : null;
613
- }
614
- function a(e, t = 0) {
615
- if (!e || t >= 4) return null;
616
- let n = e?.children?.[0];
617
- return n ? n.attributes && n.attributes["data-keypad"] ? n : a(n, t + 1) : null;
618
- }
619
- let o = i(t), s = o ? a(o) : null;
620
- (!t || !n || !s?.attributes["data-keypad"]) && (r || this.setState({ activeAnswerBlock: "" }));
621
- };
622
- setTooltipRef(e) {
623
- setTimeout(() => {
624
- if (e && _e) {
625
- let e = document.querySelector("[role='tooltip']");
626
- e && e.firstChild.setAttribute("tabindex", "-1");
627
- }
628
- }, 1);
629
- }
630
- render() {
631
- let { model: t } = this.props, { activeAnswerBlock: n, showCorrect: i, session: a, tooltipContainerRef: o } = this.state, { config: c, correctness: l, disabled: d, extraCSSRules: f, view: m, teacherInstructions: h, rationale: g, feedback: _, animationsDisabled: v, printMode: y, alwaysShowCorrect: b, language: x } = t || {};
632
- if (!c) return null;
633
- let { showNote: S, note: C, prompt: E, responses: D, responseType: O, equationEditor: k, customKeys: A, id: j, env: { mode: M, role: N } = {} } = c || {}, P = (i || M === "view" && N === "instructor") && S && C, F = e(D), I = !F && l && l.correctness !== "correct", L = d && l, R = ve(A), z = l && l.correct, B = xe(t, this.state) || "", V = d && !l, re = y && !b, H = g && (r(g) || s(g)), U = h && (r(h) || s(h)), W = /* @__PURE__ */ w(Ne, { children: /* @__PURE__ */ w(p.Static, {
634
- className: "static-math",
635
- ref: (e) => {
636
- e && (this.mqStatic = e);
637
- },
638
- latex: B,
639
- onSubFieldChange: this.subFieldChanged,
640
- getFieldName: this.getFieldName,
641
- setInput: this.setInput,
642
- onSubFieldFocus: this.onSubFieldFocus,
643
- onBlur: this.onBlur
644
- }) }), G = /* @__PURE__ */ T(Oe, { children: [
645
- M === "gather" && /* @__PURE__ */ w(Pe, { children: "Math Equation Response Question" }),
646
- V && U && (v ? /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: h } }) : /* @__PURE__ */ w($, {
647
- labels: {
648
- hidden: "Show Teacher Instructions",
649
- visible: "Hide Teacher Instructions"
650
- },
651
- children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: h } })
652
- })),
653
- E && /* @__PURE__ */ w(De, { children: /* @__PURE__ */ w(J, { prompt: E }) }),
654
- re ? W : /* @__PURE__ */ w(ue, {
655
- false: !0,
656
- children: /* @__PURE__ */ T(Me, {
657
- tabIndex: 0,
658
- children: [O === ae.simple && /* @__PURE__ */ w(ce, {
659
- onSimpleResponseChange: this.onSimpleResponseChange,
660
- showCorrect: i,
661
- emptyResponse: F,
662
- model: t,
663
- session: a,
664
- onSubFieldFocus: this.onSubFieldFocus,
665
- showKeypad: !!n
666
- }), O === ae.advanced && /* @__PURE__ */ w(je, {
667
- ref: o,
668
- isIncorrect: !F && !z && !i,
669
- isCorrect: !F && (z || i),
670
- showCorrectness: !F && d && l && !m,
671
- correctAnswerShown: i,
672
- printCorrect: y && b,
673
- children: /* @__PURE__ */ w(te, {
674
- ref: (e) => this.setTooltipRef(e),
675
- enterTouchDelay: 0,
676
- interactive: !0,
677
- open: !!n,
678
- slotProps: {
679
- popper: {
680
- container: o?.current || void 0,
681
- placement: "bottom-start",
682
- sx: {
683
- backgroundColor: "transparent",
684
- width: "650px",
685
- opacity: 1,
686
- "& .MuiTooltip-arrow": { display: "none" }
687
- },
688
- modifiers: [
689
- {
690
- name: "offset",
691
- options: { offset: [0, 8] }
692
- },
693
- {
694
- name: "preventOverflow",
695
- enabled: !0,
696
- options: {
697
- boundary: "viewport",
698
- padding: 8
699
- }
700
- },
701
- {
702
- name: "computeStyles",
703
- options: {
704
- adaptive: !0,
705
- gpuAcceleration: !0
706
- }
707
- },
708
- {
709
- name: "flip",
710
- enabled: !1
711
- }
712
- ]
713
- },
714
- tooltip: { sx: {
715
- fontSize: "initial",
716
- backgroundColor: "transparent",
717
- width: "600px",
718
- marginTop: 0,
719
- paddingTop: 0,
720
- boxShadow: "none"
721
- } }
722
- },
723
- title: Object.keys(a.answers).map((e) => e === n && !(i || d) && /* @__PURE__ */ w(Ae, {
724
- "data-keypad": !0,
725
- style: { width: be(R, k) },
726
- children: /* @__PURE__ */ w(ee, {
727
- additionalKeys: R,
728
- mode: k || ge,
729
- onClick: this.onClick
730
- })
731
- }, e) || null),
732
- children: /* @__PURE__ */ w("div", { children: /* @__PURE__ */ w(p.Static, {
733
- className: "static-math",
734
- ref: (e) => {
735
- e && (this.mqStatic = e);
736
- },
737
- latex: B,
738
- onSubFieldChange: this.subFieldChanged,
739
- getFieldName: this.getFieldName,
740
- setInput: this.setInput,
741
- onSubFieldFocus: this.onSubFieldFocus,
742
- onBlur: this.onBlur
743
- }) })
744
- })
745
- })]
746
- })
747
- }),
748
- V && P && /* @__PURE__ */ w(ke, { dangerouslySetInnerHTML: { __html: `<strong>Note:</strong> ${C}` } }),
749
- V && H && (v ? /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: g } }) : /* @__PURE__ */ w(de, {
750
- labels: {
751
- hidden: "Show Rationale",
752
- visible: "Hide Rationale"
753
- },
754
- children: /* @__PURE__ */ w("div", { dangerouslySetInnerHTML: { __html: g } })
755
- }))
756
- ] });
757
- return L && (I || U || H || _) ? /* @__PURE__ */ w(Te, {
758
- extraCSSRules: f,
759
- ref: (e) => {
760
- let t = ne.findDOMNode(e);
761
- this.root = t || this.root;
762
- },
763
- children: /* @__PURE__ */ w(Ee, {
764
- interactive: !0,
765
- enterTouchDelay: 0,
766
- placement: "bottom-start",
767
- slotProps: {
768
- tooltip: { sx: (e) => ({
769
- background: `${u.primaryLight()} !important`,
770
- color: u.text(),
771
- padding: e.spacing(2),
772
- border: `1px solid ${u.secondary()}`,
773
- fontSize: "16px",
774
- "& :not(.MathJax) > table tr": { "&:nth-child(2n)": { backgroundColor: "unset !important" } }
775
- }) },
776
- popper: {
777
- sx: { opacity: 1 },
778
- modifiers: [{
779
- name: "offset",
780
- options: { offset: [0, 2] }
781
- }]
782
- }
783
- },
784
- title: /* @__PURE__ */ T("div", { children: [
785
- /* @__PURE__ */ w(Oe, { children: I && /* @__PURE__ */ w(Fe, {
786
- language: x,
787
- show: !0,
788
- toggled: i,
789
- onToggle: this.toggleShowCorrect
790
- }) }),
791
- U && /* @__PURE__ */ w($, {
792
- labels: {
793
- hidden: "Show Teacher Instructions",
794
- visible: "Hide Teacher Instructions"
795
- },
796
- children: /* @__PURE__ */ w(J, { prompt: h })
797
- }, "collapsible-teacher-instructions"),
798
- P && r(C) && /* @__PURE__ */ w($, {
799
- labels: {
800
- hidden: Z.t("common:showNote", { lng: x }),
801
- visible: Z.t("common:hideNote", { lng: x })
802
- },
803
- children: /* @__PURE__ */ w(J, { prompt: C })
804
- }, "collapsible-note"),
805
- H && /* @__PURE__ */ w($, {
806
- labels: {
807
- hidden: "Show Rationale",
808
- visible: "Hide Rationale"
809
- },
810
- children: /* @__PURE__ */ w(J, { prompt: g })
811
- }, "collapsible-rationale"),
812
- _ && /* @__PURE__ */ w(fe, {
813
- correctness: l.correctness,
814
- feedback: _
815
- })
816
- ] }),
817
- children: G
818
- })
819
- }) : /* @__PURE__ */ w(Te, {
820
- id: j,
821
- extraCSSRules: f,
822
- ref: (e) => {
823
- let t = ne.findDOMNode(e);
824
- this.root = t || this.root;
825
- },
826
- children: G
827
- });
828
- }
829
- }, we = () => ({
830
- blockContainer: "block-container",
831
- blockResponse: "block-response",
832
- blockMath: "block-math"
833
- });
834
- if (typeof document < "u") {
835
- let e = "math-inline-block-styles";
836
- if (!document.getElementById(e)) {
837
- let t = document.createElement("style");
838
- t.id = e, t.textContent = `
839
- .block-container {
840
- margin: 8px !important;
841
- display: inline-flex;
842
- border: 2px solid grey !important;
843
- }
844
- .block-response {
845
- color: grey;
846
- background: #f5f5f5;
847
- font-size: 0.8rem !important;
848
- padding: 4px !important;
849
- display: flex;
850
- align-items: center;
851
- justify-content: center;
852
- border-right: 2px solid #bdbdbd !important;
853
- flex-shrink: 0;
854
- flex-grow: 0;
855
- flex-basis: auto;
856
- }
857
- .block-math {
858
- color: ${u.text()};
859
- background-color: ${u.background()};
860
- padding: 4px !important;
861
- display: flex;
862
- align-items: center;
863
- justify-content: center;
864
- flex-grow: 1;
865
- }
866
- .block-math > .mq-math-mode > .mq-hasCursor > .mq-cursor {
867
- display: none;
868
- }
869
- .sr-only {
870
- position: absolute;
871
- left: -10000px;
872
- top: auto;
873
- width: 1px;
874
- height: 1px;
875
- overflow: hidden;
876
- }
877
- .static-math > .mq-root-block > .mq-editable-field {
878
- border-color: ${u.text()};
879
- }
880
- `, document.head.appendChild(t);
881
- }
882
- }
883
- var Te = m(le)(() => ({
884
- color: u.text(),
885
- backgroundColor: u.background(),
886
- display: "inline-block"
887
- })), Ee = m(te)({}), De = m("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), Oe = m("div")({
888
- width: "100%",
889
- position: "relative",
890
- backgroundColor: u.background(),
891
- color: u.text()
892
- }), ke = m("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), $ = m(de)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), Ae = m("div")(({ theme: e }) => ({
893
- zIndex: 10,
894
- minWidth: "400px",
895
- marginTop: e.spacing(2)
896
- })), je = m("div", { shouldForwardProp: (e) => ![
897
- "isIncorrect",
898
- "isCorrect",
899
- "showCorrectness",
900
- "correctAnswerShown",
901
- "printCorrect"
902
- ].includes(e) })(({ theme: e, isIncorrect: t, isCorrect: n, showCorrectness: r, correctAnswerShown: i, printCorrect: a }) => {
903
- let o = t ? u.incorrect() : n ? u.correct() : void 0;
904
- return {
905
- maxWidth: "fit-content",
906
- padding: e.spacing(.25),
907
- ...r && { border: o ? `2px solid ${o} !important` : "2px solid" },
908
- ...!r && o && { borderColor: `${o} !important` },
909
- ...i && {
910
- padding: e.spacing(1),
911
- letterSpacing: "0.5px"
912
- },
913
- ...a && { border: `2px solid ${u.correct()} !important` },
914
- "& .mq-math-mode": {
915
- "& .mq-root-block": {
916
- paddingRight: "0 !important",
917
- paddingLeft: "0 !important",
918
- "& .mq-editable-field": {
919
- minWidth: "10px",
920
- padding: e.spacing(.4)
921
- }
922
- },
923
- "& sup": { top: 0 }
924
- }
925
- };
926
- }), Me = m("div")({
927
- position: "relative",
928
- "& .mq-overarrow-inner": {
929
- border: "none !important",
930
- padding: "0 !important"
931
- },
932
- "& .mq-overarrow-inner-right": { display: "none !important" },
933
- "& .mq-overarrow-inner-left": { display: "none !important" },
934
- "& .mq-overarrow.mq-arrow-both": {
935
- minWidth: "1.23em",
936
- "& *": { lineHeight: "1 !important" },
937
- "&:before": {
938
- top: "-0.4em",
939
- left: "-1px"
940
- },
941
- "&:after": {
942
- top: "-2.4em",
943
- right: "-1px"
944
- },
945
- "&.mq-empty:after": { top: "-0.45em" }
946
- },
947
- "& .mq-overarrow.mq-arrow-right": { "&:before": {
948
- top: "-0.4em",
949
- right: "-1px"
950
- } },
951
- "& .mq-longdiv-inner": {
952
- borderTop: "1px solid !important",
953
- paddingTop: "1.5px !important"
954
- },
955
- "& .mq-parallelogram": { lineHeight: .85 }
956
- }), Ne = m("div")(({ theme: e }) => ({
957
- marginBottom: e.spacing(1),
958
- pointerEvents: "none"
959
- })), Pe = m("h2")({
960
- position: "absolute",
961
- left: "-10000px",
962
- top: "auto",
963
- width: "1px",
964
- height: "1px",
965
- overflow: "hidden"
966
- }), Fe = m(ie)(({ theme: e }) => ({
967
- color: u.text(),
968
- marginBottom: e.spacing(2)
969
- }));
970
- //#endregion
971
- export { Ce as t };
972
-
973
- //# sourceMappingURL=main-DIAGtm9r.js.map