@pie-element/multiple-choice 13.2.2-next.5 → 13.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/CHANGELOG.json +1972 -0
  2. package/CHANGELOG.md +2738 -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 +2080 -0
  9. package/configure/lib/defaults.js +203 -0
  10. package/configure/lib/defaults.js.map +1 -0
  11. package/configure/lib/index.js +202 -0
  12. package/configure/lib/index.js.map +1 -0
  13. package/configure/lib/main.js +484 -0
  14. package/configure/lib/main.js.map +1 -0
  15. package/configure/lib/utils.js +18 -0
  16. package/configure/lib/utils.js.map +1 -0
  17. package/configure/package.json +22 -0
  18. package/controller/CHANGELOG.json +527 -0
  19. package/controller/CHANGELOG.md +1405 -0
  20. package/controller/lib/defaults.js +33 -0
  21. package/controller/lib/defaults.js.map +1 -0
  22. package/controller/lib/index.js +288 -0
  23. package/controller/lib/index.js.map +1 -0
  24. package/controller/lib/utils.js +15 -0
  25. package/controller/lib/utils.js.map +1 -0
  26. package/controller/package.json +15 -0
  27. package/docs/config-schema.json +2993 -0
  28. package/docs/config-schema.json.md +2217 -0
  29. package/docs/demo/config.js +8 -0
  30. package/docs/demo/generate.js +61 -0
  31. package/docs/demo/index.html +1 -0
  32. package/docs/demo/session.js +7 -0
  33. package/docs/pie-schema.json +1332 -0
  34. package/docs/pie-schema.json.md +1015 -0
  35. package/lib/choice-input.js +383 -0
  36. package/lib/choice-input.js.map +1 -0
  37. package/lib/choice.js +192 -0
  38. package/lib/choice.js.map +1 -0
  39. package/lib/feedback-tick.js +134 -0
  40. package/lib/feedback-tick.js.map +1 -0
  41. package/lib/index.js +402 -0
  42. package/lib/index.js.map +1 -0
  43. package/lib/main.js +63 -0
  44. package/lib/main.js.map +1 -0
  45. package/lib/multiple-choice.js +397 -0
  46. package/lib/multiple-choice.js.map +1 -0
  47. package/lib/print.js +94 -0
  48. package/lib/print.js.map +1 -0
  49. package/lib/session-updater.js +37 -0
  50. package/lib/session-updater.js.map +1 -0
  51. package/module/configure.js +1 -0
  52. package/module/controller.js +3045 -0
  53. package/module/demo.js +86 -0
  54. package/module/element.js +1 -0
  55. package/module/index.html +21 -0
  56. package/module/manifest.json +14 -0
  57. package/module/print-demo.js +124 -0
  58. package/module/print.html +18 -0
  59. package/module/print.js +1 -0
  60. package/package.json +29 -89
  61. package/configure.js +0 -2
  62. package/controller.js +0 -1
  63. package/dist/author/defaults.d.ts +0 -205
  64. package/dist/author/defaults.js +0 -151
  65. package/dist/author/index.d.ts +0 -26
  66. package/dist/author/index.js +0 -119
  67. package/dist/author/main.d.ts +0 -34
  68. package/dist/author/main.js +0 -287
  69. package/dist/author/utils.d.ts +0 -9
  70. package/dist/author/utils.js +0 -7
  71. package/dist/browser/Radio-DZ5Wx5Zu.js +0 -9579
  72. package/dist/browser/Radio-DZ5Wx5Zu.js.map +0 -1
  73. package/dist/browser/author/index.js +0 -45648
  74. package/dist/browser/author/index.js.map +0 -1
  75. package/dist/browser/controller/index.js +0 -199
  76. package/dist/browser/controller/index.js.map +0 -1
  77. package/dist/browser/delivery/index.js +0 -251
  78. package/dist/browser/delivery/index.js.map +0 -1
  79. package/dist/browser/dist-BcIm7NXG.js +0 -111
  80. package/dist/browser/dist-BcIm7NXG.js.map +0 -1
  81. package/dist/browser/main-BE0cajBs.js +0 -2440
  82. package/dist/browser/main-BE0cajBs.js.map +0 -1
  83. package/dist/browser/multiple-choice.css +0 -2
  84. package/dist/browser/print/index.js +0 -43
  85. package/dist/browser/print/index.js.map +0 -1
  86. package/dist/controller/defaults.d.ts +0 -35
  87. package/dist/controller/defaults.js +0 -29
  88. package/dist/controller/index.d.ts +0 -65
  89. package/dist/controller/index.js +0 -124
  90. package/dist/controller/utils.d.ts +0 -10
  91. package/dist/controller/utils.js +0 -8
  92. package/dist/delivery/choice-input.d.ts +0 -44
  93. package/dist/delivery/choice-input.js +0 -272
  94. package/dist/delivery/choice.d.ts +0 -20
  95. package/dist/delivery/choice.js +0 -105
  96. package/dist/delivery/feedback-tick.d.ts +0 -20
  97. package/dist/delivery/feedback-tick.js +0 -104
  98. package/dist/delivery/index.d.ts +0 -37
  99. package/dist/delivery/index.js +0 -214
  100. package/dist/delivery/main.d.ts +0 -31
  101. package/dist/delivery/main.js +0 -51
  102. package/dist/delivery/multiple-choice.d.ts +0 -61
  103. package/dist/delivery/multiple-choice.js +0 -244
  104. package/dist/delivery/session-updater.d.ts +0 -10
  105. package/dist/delivery/session-updater.js +0 -9
  106. package/dist/index.d.ts +0 -1
  107. package/dist/index.iife.d.ts +0 -8
  108. package/dist/index.iife.js +0 -148
  109. package/dist/index.js +0 -2
  110. package/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js +0 -16
  111. package/dist/print/index.d.ts +0 -15
  112. package/dist/print/index.js +0 -43
  113. package/dist/runtime-support.d.ts +0 -12
  114. package/dist/runtime-support.js +0 -12
@@ -1,105 +0,0 @@
1
- import e from "./choice-input.js";
2
- import t from "react";
3
- import n from "prop-types";
4
- import { jsx as r } from "react/jsx-runtime";
5
- import { styled as i } from "@mui/material/styles";
6
- import a from "@mui/material/Box";
7
- //#region src/delivery/choice.tsx
8
- var o = i(a, { shouldForwardProp: (e) => e !== "noBorder" && e !== "horizontalLayout" })(({ theme: e, noBorder: t, horizontalLayout: n }) => ({
9
- paddingTop: e.spacing(2.5),
10
- paddingBottom: `calc(${e.spacing(1)} + 2px)`,
11
- paddingLeft: `calc(${e.spacing(1)} + 2px)`,
12
- paddingRight: `calc(${e.spacing(1)} + 2px)`,
13
- borderBottom: t ? "none" : `1px solid ${e.palette.grey[300]}`,
14
- ...n && {
15
- paddingRight: e.spacing(2.5),
16
- "& label": { marginRight: e.spacing(1) }
17
- }
18
- })), s = class extends t.Component {
19
- static propTypes = {};
20
- state = { isHovered: !1 };
21
- handleMouseEnter = () => {
22
- let { disabled: e, checked: t } = this.props;
23
- !e && !t && this.setState({ isHovered: !0 });
24
- };
25
- handleMouseLeave = () => {
26
- this.setState({ isHovered: !1 });
27
- };
28
- onChange = (e) => {
29
- let { disabled: t, onChoiceChanged: n } = this.props;
30
- t || n(e);
31
- };
32
- render() {
33
- let { choice: t, index: n, choicesLength: i, showCorrect: a, isEvaluateMode: s, choiceMode: c, disabled: l, checked: u, correctness: d, displayKey: f, choicesLayout: p, gridColumns: m, isSelectionButtonBelow: h, selectedAnswerBackgroundColor: g, selectedAnswerStrokeColor: _, selectedAnswerStrokeWidth: v, hoverAnswerBackgroundColor: y, hoverAnswerStrokeColor: b, hoverAnswerStrokeWidth: x, tagName: S } = this.props, { isHovered: C } = this.state, w = "choice" + (n === i - 1 ? " last" : ""), T = !s || a ? "" : t.feedback, E = {
34
- ...t,
35
- checked: u,
36
- choiceMode: c,
37
- disabled: l,
38
- feedback: T,
39
- correctness: d,
40
- displayKey: f,
41
- index: n,
42
- choicesLayout: p,
43
- gridColumns: m,
44
- onChange: this.onChange,
45
- isEvaluateMode: s,
46
- isSelectionButtonBelow: h,
47
- selectedAnswerStrokeColor: _,
48
- selectedAnswerStrokeWidth: v,
49
- tagName: S
50
- }, D = (e) => {
51
- if (!e) return "2px";
52
- let t = String(e).trim();
53
- return /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
54
- }, O = _ && _ !== "initial", k = b && b !== "initial", A = "transparent", j = "2px", M = "initial";
55
- (O || k) && (u && O ? (A = _, j = v) : C && !l && k && (A = b, j = x)), u && g && g !== "initial" ? M = g : C && !l && y && y !== "initial" && (M = y);
56
- let N = O || k, P = N ? {
57
- border: `${D(j)} solid ${A}`,
58
- borderRadius: "8px"
59
- } : {}, F = n === i - 1 || p !== "vertical" || N, I = p === "horizontal";
60
- return /* @__PURE__ */ r("div", {
61
- className: w,
62
- style: {
63
- backgroundColor: M === "initial" ? "initial" : M,
64
- ...P
65
- },
66
- onMouseEnter: this.handleMouseEnter,
67
- onMouseLeave: this.handleMouseLeave,
68
- children: /* @__PURE__ */ r(o, {
69
- component: "div",
70
- noBorder: F,
71
- horizontalLayout: I,
72
- children: /* @__PURE__ */ r(e, { ...E })
73
- })
74
- }, n);
75
- }
76
- };
77
- s.propTypes = {
78
- choiceMode: n.oneOf(["radio", "checkbox"]),
79
- choice: n.object,
80
- disabled: n.bool.isRequired,
81
- onChoiceChanged: n.func,
82
- index: n.number,
83
- choicesLength: n.number,
84
- showCorrect: n.bool,
85
- isEvaluateMode: n.bool,
86
- checked: n.bool,
87
- correctness: n.string,
88
- displayKey: n.string,
89
- choicesLayout: n.oneOf([
90
- "vertical",
91
- "grid",
92
- "horizontal"
93
- ]),
94
- gridColumns: n.string,
95
- selectedAnswerBackgroundColor: n.string,
96
- selectedAnswerStrokeColor: n.string,
97
- selectedAnswerStrokeWidth: n.string,
98
- hoverAnswerBackgroundColor: n.string,
99
- hoverAnswerStrokeColor: n.string,
100
- hoverAnswerStrokeWidth: n.string,
101
- tagName: n.string,
102
- isSelectionButtonBelow: n.bool
103
- };
104
- //#endregion
105
- export { s as default };
@@ -1,20 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/multiple-choice/src/feedback-tick.jsx
3
- * @auto-generated
4
- *
5
- * This file is automatically synced from pie-elements and converted to TypeScript.
6
- * Manual edits will be overwritten on next sync.
7
- * To make changes, edit the upstream JavaScript file and run sync again.
8
- */
9
- import React from 'react';
10
- import PropTypes from 'prop-types';
11
- declare class FeedbackTick extends React.Component {
12
- static propTypes: {
13
- correctness: PropTypes.Requireable<string>;
14
- };
15
- constructor(props: any);
16
- getIncorrectIcon: () => React.JSX.Element;
17
- getCorrectIcon: () => React.JSX.Element;
18
- render(): React.JSX.Element;
19
- }
20
- export default FeedbackTick;
@@ -1,104 +0,0 @@
1
- import e from "react";
2
- import t from "prop-types";
3
- import { color as n } from "@pie-lib/render-ui";
4
- import { jsx as r, jsxs as i } from "react/jsx-runtime";
5
- import { styled as a } from "@mui/material/styles";
6
- import o from "@mui/material/Box";
7
- import { CSSTransition as s, TransitionGroup as c } from "react-transition-group";
8
- //#region src/delivery/feedback-tick.tsx
9
- var l = a(o)({
10
- width: "33px",
11
- height: "33px",
12
- "& svg": {
13
- position: "absolute",
14
- display: "inline-block",
15
- width: "33px",
16
- height: "33px",
17
- verticalAlign: "middle",
18
- "& hide": { display: "none" }
19
- }
20
- }), u = a("svg")({
21
- "& .incorrect-fill": { fill: `var(--feedback-incorrect-bg-color, ${n.incorrect()})` },
22
- "& .correct-fill": { fill: `var(--feedback-correct-bg-color, ${n.correct()})` }
23
- }), d = a("div")({
24
- position: "relative",
25
- "&.feedback-tick-enter": {
26
- opacity: "0",
27
- left: "-50px"
28
- },
29
- "&.feedback-tick-enter-active": {
30
- opacity: "1",
31
- left: "0px",
32
- transition: "left 500ms ease-in 200ms, opacity 500ms linear 200ms"
33
- },
34
- "&.feedback-tick-exit": {
35
- opacity: "1",
36
- left: "0px"
37
- },
38
- "&.feedback-tick-exit-active": {
39
- opacity: "0",
40
- left: "-50px",
41
- transition: "left 300ms ease-in, opacity 300ms"
42
- }
43
- }), f = class extends e.Component {
44
- static propTypes = { correctness: t.string };
45
- constructor(t) {
46
- super(t), this.nodeRef = e.createRef();
47
- }
48
- getIncorrectIcon = () => /* @__PURE__ */ r(u, {
49
- preserveAspectRatio: "xMinYMin meet",
50
- x: "0px",
51
- y: "0px",
52
- viewBox: "0 0 44 40",
53
- style: { enableBackground: "new 0 0 44 40" },
54
- children: /* @__PURE__ */ i("g", { children: [/* @__PURE__ */ r("rect", {
55
- x: "11",
56
- y: "17.3",
57
- transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
58
- className: "incorrect-fill",
59
- width: "16.6",
60
- height: "3.7"
61
- }), /* @__PURE__ */ r("rect", {
62
- x: "17.4",
63
- y: "10.7",
64
- transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
65
- className: "incorrect-fill",
66
- width: "3.7",
67
- height: "16.6"
68
- })] })
69
- }, "1");
70
- getCorrectIcon = () => /* @__PURE__ */ r(u, {
71
- preserveAspectRatio: "xMinYMin meet",
72
- version: "1.1",
73
- x: "0px",
74
- y: "0px",
75
- viewBox: "0 0 44 40",
76
- style: { enableBackground: "new 0 0 44 40" },
77
- children: /* @__PURE__ */ r("polygon", {
78
- className: "correct-fill",
79
- points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
80
- })
81
- }, "2");
82
- render() {
83
- let { correctness: e } = this.props, t = e === "incorrect" ? this.getIncorrectIcon() : e === "correct" ? this.getCorrectIcon() : null;
84
- return /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(c, { children: e && /* @__PURE__ */ r(s, {
85
- nodeRef: this.nodeRef,
86
- classNames: {
87
- enter: "feedback-tick-enter",
88
- enterActive: "feedback-tick-enter-active",
89
- exit: "feedback-tick-exit",
90
- exitActive: "feedback-tick-exit-active"
91
- },
92
- timeout: {
93
- enter: 700,
94
- exit: 300
95
- },
96
- children: /* @__PURE__ */ r(d, {
97
- ref: this.nodeRef,
98
- children: t
99
- })
100
- }) }) });
101
- }
102
- };
103
- //#endregion
104
- export { f as default };
@@ -1,37 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/multiple-choice/src/index.js
3
- * @auto-generated
4
- *
5
- * This file is automatically synced from pie-elements and converted to TypeScript.
6
- * Manual edits will be overwritten on next sync.
7
- * To make changes, edit the upstream JavaScript file and run sync again.
8
- */
9
- export declare const isComplete: (session: any, model: any, audioComplete: any, elementContext: any) => boolean;
10
- export default class MultipleChoice extends HTMLElement {
11
- constructor();
12
- _scheduleMathRender: any;
13
- _initMathObserver(): void;
14
- _disconnectMathObserver(): void;
15
- onShowCorrectToggle(): void;
16
- setLangAttribute(): void;
17
- set model(s: any);
18
- get session(): any;
19
- get options(): any;
20
- set options(o: any);
21
- set baseHeadingLevel(level: any);
22
- set includeSrHeading(value: any);
23
- set session(s: any);
24
- _onChange(data: any): void;
25
- _createAudioInfoToast(): HTMLDivElement;
26
- connectedCallback(): void;
27
- enableKeyboardEvents(): void;
28
- _initPlayerObserver(): void;
29
- _disconnectPlayerObserver(): void;
30
- disconnectedCallback(): void;
31
- /**
32
- * Handles global keyboard events for selecting or toggling multiple-choice answers.
33
- * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.
34
- * Ensures valid key presses toggle or select the appropriate choice based on the model.
35
- */
36
- handleKeyDown(event: any): void;
37
- }
@@ -1,214 +0,0 @@
1
- import e from "./main.js";
2
- import { updateSessionMetadata as t, updateSessionValue as n } from "./session-updater.js";
3
- import r from "react";
4
- import * as i from "@pie-lib/render-ui";
5
- import { EnableAudioAutoplayImage as a } from "@pie-lib/render-ui";
6
- import { createRoot as o } from "react-dom/client";
7
- import { debounce as s } from "@pie-element/shared-lodash";
8
- import c from "debug";
9
- import { ModelSetEvent as l, SessionChangedEvent as u } from "@pie-element/shared-player-events";
10
- import { renderMath as d } from "@pie-element/shared-math-rendering-mathjax";
11
- //#region src/delivery/index.ts
12
- function f(e) {
13
- return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
14
- }
15
- function p(e, t) {
16
- return !e || f(e) ? e : f(e.default) ? e.default : t && f(e[t]) ? e[t] : t && f(e[t]?.default) ? e[t].default : e;
17
- }
18
- var m = p(a, "EnableAudioAutoplayImage") || p(_.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), h = i, g = h.default, _ = g && typeof g == "object" ? g : h, v = c("pie-ui:multiple-choice"), y = (e, t, n, r) => {
19
- let { autoplayAudioEnabled: i, completeAudioEnabled: a } = t || {};
20
- if (i && a && !n && r) {
21
- let e = r.querySelector("audio"), t = e && e.closest("#preview-prompt");
22
- if (e && t) return !1;
23
- }
24
- if (!e || !e.value) return !1;
25
- let { choiceMode: o, minSelections: s = 1, maxSelections: c } = t || {}, l = e.value.length || 0;
26
- return o === "radio" ? !!l : !(l < s || l > c);
27
- };
28
- function b(e) {
29
- let t = e.closest("pie-player") || e.closest("pie-item-player");
30
- if (!t) return {
31
- baseHeadingLevel: void 0,
32
- includeSrHeading: !0
33
- };
34
- let n = (e, n, r) => {
35
- let i = t[e];
36
- return i ??= t.getAttribute(n) ?? t.getAttribute(r), i;
37
- }, r = n("baseHeadingLevel", "base-heading-level", "baseheadinglevel"), i = parseInt(r, 10), a = Number.isFinite(i) && i >= 1 && i <= 6 ? i : void 0, o = n("includeSrHeading", "include-sr-heading", "includesrheading");
38
- return {
39
- baseHeadingLevel: a,
40
- includeSrHeading: o == null ? !0 : o !== !1 && o !== "false"
41
- };
42
- }
43
- function x(e) {
44
- let t = b(e);
45
- return {
46
- baseHeadingLevel: e._baseHeadingLevel === void 0 ? t.baseHeadingLevel : e._baseHeadingLevel,
47
- includeSrHeading: e._includeSrHeading === void 0 ? t.includeSrHeading : e._includeSrHeading
48
- };
49
- }
50
- var S = class extends HTMLElement {
51
- constructor() {
52
- super(), this._model = null, this._session = null, this._options = null, this.audioComplete = !1, this._boundHandleKeyDown = this.handleKeyDown.bind(this), this._keyboardEventsEnabled = !1, this._audioInitialized = !1, this._root = null, this._mathObserver = null, this._mathRenderPending = !1, this._rerender = s(() => {
53
- if (this._model && this._session) {
54
- var t = r.createElement(e, {
55
- model: this._model,
56
- session: this._session,
57
- options: this._options,
58
- onChoiceChanged: this._onChange.bind(this),
59
- onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
60
- ...x(this)
61
- });
62
- this.setAttribute("aria-label", this._model.choiceMode === "radio" ? "Multiple Choice Question" : "Multiple Correct Answer Question"), this.setAttribute("role", "region"), this.setLangAttribute(), this._initMathObserver(), this._root ||= o(this), this._root.render(t), this._model.keyboardEventsEnabled === !0 && !this._keyboardEventsEnabled && this.enableKeyboardEvents();
63
- } else v("skip");
64
- }, 50, {
65
- leading: !1,
66
- trailing: !0
67
- }), this._dispatchResponseChanged = s(() => {
68
- this.dispatchEvent(new u(this.tagName.toLowerCase(), y(this._session, this._model, this.audioComplete, this)));
69
- }), this._dispatchModelSet = s(() => {
70
- this.dispatchEvent(new l(this.tagName.toLowerCase(), y(this._session, this._model, this.audioComplete, this), this._model !== void 0));
71
- }, 50, {
72
- leading: !1,
73
- trailing: !0
74
- });
75
- }
76
- _scheduleMathRender = () => {
77
- this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
78
- this._mathObserver && this._mathObserver.disconnect(), v("render complete - render math"), d(this), this._mathRenderPending = !1, setTimeout(() => {
79
- this._mathObserver && this._mathObserver.observe(this, {
80
- childList: !0,
81
- subtree: !0
82
- });
83
- }, 50);
84
- }));
85
- };
86
- _initMathObserver() {
87
- this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
88
- childList: !0,
89
- subtree: !0
90
- }));
91
- }
92
- _disconnectMathObserver() {
93
- this._mathObserver &&= (this._mathObserver.disconnect(), null);
94
- }
95
- onShowCorrectToggle() {
96
- d(this);
97
- }
98
- setLangAttribute() {
99
- let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
100
- this.setAttribute("lang", t);
101
- }
102
- set model(e) {
103
- this._model = e, this._rerender(), this._audioInitialized = !1, this._dispatchModelSet();
104
- }
105
- get session() {
106
- return this._session;
107
- }
108
- get options() {
109
- return this._options;
110
- }
111
- set options(e) {
112
- this._options = e, this._rerender();
113
- }
114
- set baseHeadingLevel(e) {
115
- this._baseHeadingLevel = e, this._rerender();
116
- }
117
- set includeSrHeading(e) {
118
- this._includeSrHeading = e, this._rerender();
119
- }
120
- set session(e) {
121
- this._session = e, this._rerender(), this._dispatchResponseChanged();
122
- }
123
- _onChange(e) {
124
- n(this._session, this._model.choiceMode, e), this._dispatchResponseChanged(), this._rerender();
125
- }
126
- _createAudioInfoToast() {
127
- let e = document.createElement("div");
128
- e.id = "play-audio-info", Object.assign(e.style, {
129
- position: "absolute",
130
- top: 0,
131
- width: "100%",
132
- height: "100%",
133
- display: "flex",
134
- justifyContent: "center",
135
- alignItems: "center",
136
- background: "white",
137
- zIndex: "1000",
138
- cursor: "pointer"
139
- });
140
- let t = document.createElement("img");
141
- return t.src = m, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
142
- }
143
- connectedCallback() {
144
- this._initMathObserver(), this._initPlayerObserver(), this._rerender(), new MutationObserver((e, n) => {
145
- e.forEach((e) => {
146
- if (e.type === "childList") {
147
- if (this._audioInitialized) return;
148
- let e = this.querySelector("audio"), r = e && e.closest("#preview-prompt");
149
- if (!this._model || !this._model.autoplayAudioEnabled || e && !r || !e) return;
150
- let i = this._createAudioInfoToast(), a = this.querySelector("#main-container"), o = () => {
151
- this.querySelector("#play-audio-info") && (e.play(), a.removeChild(i)), document.removeEventListener("click", o);
152
- };
153
- setTimeout(() => {
154
- e.paused && !this.querySelector("#play-audio-info") ? (a.appendChild(i), document.addEventListener("click", o)) : document.removeEventListener("click", o);
155
- }, 500);
156
- let s = () => {
157
- t(this._session, { audioStartTime: (/* @__PURE__ */ new Date()).getTime() });
158
- let n = this.querySelector("#play-audio-info");
159
- n && a.removeChild(n), e.removeEventListener("playing", s);
160
- };
161
- e.addEventListener("playing", s);
162
- let c = () => {
163
- t(this._session, { audioEndTime: (/* @__PURE__ */ new Date()).getTime() }), this.audioComplete = !0, this._dispatchResponseChanged(), e.removeEventListener("ended", c);
164
- };
165
- e.addEventListener("ended", c), this._audio = e, this._handlePlaying = s, this._handleEnded = c, this._enableAudio = o, this._audioInitialized = !0, n.disconnect();
166
- }
167
- });
168
- }).observe(this, {
169
- childList: !0,
170
- subtree: !0
171
- });
172
- }
173
- enableKeyboardEvents() {
174
- this._keyboardEventsEnabled ||= (window.addEventListener("keydown", this._boundHandleKeyDown), !0);
175
- }
176
- _initPlayerObserver() {
177
- let e = this.closest("pie-player") || this.closest("pie-item-player");
178
- e && (this._playerObserver = new MutationObserver(() => {
179
- this._rerender();
180
- }), this._playerObserver.observe(e, {
181
- attributes: !0,
182
- attributeFilter: [
183
- "base-heading-level",
184
- "baseheadinglevel",
185
- "include-sr-heading",
186
- "includesrheading"
187
- ]
188
- }));
189
- }
190
- _disconnectPlayerObserver() {
191
- this._playerObserver &&= (this._playerObserver.disconnect(), null);
192
- }
193
- disconnectedCallback() {
194
- this._disconnectMathObserver(), this._disconnectPlayerObserver(), this._keyboardEventsEnabled &&= (window.removeEventListener("keydown", this._boundHandleKeyDown), !1), document.removeEventListener("click", this._enableAudio), this._audio &&= (this._audio.removeEventListener("playing", this._handlePlaying), this._audio.removeEventListener("ended", this._handleEnded), null), this._root && this._root.unmount();
195
- }
196
- handleKeyDown(e) {
197
- if (!this._model || !this._session) return;
198
- let { mode: t } = this._model;
199
- if (t !== "gather") return;
200
- let n = ((e) => {
201
- let t = e >= "1" && e <= "9" ? e - "1" : e === "0" ? 9 : -1, n = /^[a-jA-J]$/.test(e) ? e.toLowerCase().charCodeAt(0) - 97 : -1;
202
- return t >= 0 ? t : n;
203
- })(e.key);
204
- if (n === void 0 || n <= -1 || n >= this._model.choices?.length) return;
205
- let r = this._session.value || [], i = this._model.choices[n].value, a = {
206
- value: i,
207
- selected: !r.includes(i),
208
- selector: "Keyboard"
209
- };
210
- this._onChange(a);
211
- }
212
- };
213
- //#endregion
214
- export { S as default, y as isComplete };
@@ -1,31 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/multiple-choice/src/main.jsx
3
- * @auto-generated
4
- *
5
- * This file is automatically synced from pie-elements and converted to TypeScript.
6
- * Manual edits will be overwritten on next sync.
7
- * To make changes, edit the upstream JavaScript file and run sync again.
8
- */
9
- import React from 'react';
10
- import PropTypes from 'prop-types';
11
- declare class Main extends React.Component {
12
- static propTypes: {
13
- model: PropTypes.Requireable<object>;
14
- session: PropTypes.Requireable<object>;
15
- options: PropTypes.Requireable<object>;
16
- onChoiceChanged: PropTypes.Requireable<(...args: any[]) => any>;
17
- onShowCorrectToggle: PropTypes.Requireable<(...args: any[]) => any>;
18
- extraCSSRules: PropTypes.Requireable<PropTypes.InferProps<{
19
- names: PropTypes.Requireable<(string | null | undefined)[]>;
20
- rules: PropTypes.Requireable<string>;
21
- }>>;
22
- baseHeadingLevel: PropTypes.Requireable<number>;
23
- includeSrHeading: PropTypes.Requireable<boolean>;
24
- };
25
- static defaultProps: {
26
- model: {};
27
- session: {};
28
- };
29
- render(): React.JSX.Element;
30
- }
31
- export default Main;
@@ -1,51 +0,0 @@
1
- import e from "./multiple-choice.js";
2
- import t from "react";
3
- import n from "prop-types";
4
- import * as r from "@pie-lib/render-ui";
5
- import { PreviewLayout as i } from "@pie-lib/render-ui";
6
- import { jsx as a } from "react/jsx-runtime";
7
- //#region src/delivery/main.tsx
8
- function o(e) {
9
- return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
10
- }
11
- function s(e, t) {
12
- return !e || o(e) ? e : o(e.default) ? e.default : t && o(e[t]) ? e[t] : t && o(e[t]?.default) ? e[t].default : e;
13
- }
14
- var c = s(i, "PreviewLayout") || s(d.PreviewLayout, "PreviewLayout"), l = r, u = l.default, d = u && typeof u == "object" ? u : l, f = class extends t.Component {
15
- static propTypes = {
16
- model: n.object,
17
- session: n.object,
18
- options: n.object,
19
- onChoiceChanged: n.func,
20
- onShowCorrectToggle: n.func,
21
- extraCSSRules: n.shape({
22
- names: n.arrayOf(n.string),
23
- rules: n.string
24
- }),
25
- baseHeadingLevel: n.number,
26
- includeSrHeading: n.bool
27
- };
28
- static defaultProps = {
29
- model: {},
30
- session: {}
31
- };
32
- render() {
33
- let { model: t, onChoiceChanged: n, session: r, onShowCorrectToggle: i, options: o, baseHeadingLevel: s, includeSrHeading: l } = this.props, { extraCSSRules: u, fontSizeFactor: d } = t;
34
- return /* @__PURE__ */ a(c, {
35
- extraCSSRules: u,
36
- fontSizeFactor: d,
37
- classes: {},
38
- children: /* @__PURE__ */ a(e, {
39
- ...t,
40
- options: o,
41
- session: r,
42
- onChoiceChanged: n,
43
- onShowCorrectToggle: i,
44
- baseHeadingLevel: s,
45
- includeSrHeading: l
46
- })
47
- });
48
- }
49
- };
50
- //#endregion
51
- export { f as default };
@@ -1,61 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/multiple-choice/src/multiple-choice.jsx
3
- * @auto-generated
4
- *
5
- * This file is automatically synced from pie-elements and converted to TypeScript.
6
- * Manual edits will be overwritten on next sync.
7
- * To make changes, edit the upstream JavaScript file and run sync again.
8
- */
9
- import React from 'react';
10
- import PropTypes from 'prop-types';
11
- export declare class MultipleChoice extends React.Component {
12
- static propTypes: {
13
- className: PropTypes.Requireable<string>;
14
- mode: PropTypes.Requireable<string>;
15
- choiceMode: PropTypes.Requireable<string>;
16
- keyMode: PropTypes.Requireable<string>;
17
- choices: PropTypes.Requireable<any[]>;
18
- partLabel: PropTypes.Requireable<string>;
19
- prompt: PropTypes.Requireable<string>;
20
- teacherInstructions: PropTypes.Requireable<string>;
21
- session: PropTypes.Requireable<object>;
22
- disabled: PropTypes.Requireable<boolean>;
23
- onChoiceChanged: PropTypes.Requireable<(...args: any[]) => any>;
24
- responseCorrect: PropTypes.Requireable<boolean>;
25
- correctResponse: PropTypes.Requireable<any[]>;
26
- choicesLayout: PropTypes.Requireable<string>;
27
- gridColumns: PropTypes.Requireable<string>;
28
- alwaysShowCorrect: PropTypes.Requireable<boolean>;
29
- animationsDisabled: PropTypes.Requireable<boolean>;
30
- language: PropTypes.Requireable<string>;
31
- selectedAnswerBackgroundColor: PropTypes.Requireable<string>;
32
- selectedAnswerStrokeColor: PropTypes.Requireable<string>;
33
- selectedAnswerStrokeWidth: PropTypes.Requireable<string>;
34
- hoverAnswerBackgroundColor: PropTypes.Requireable<string>;
35
- hoverAnswerStrokeColor: PropTypes.Requireable<string>;
36
- hoverAnswerStrokeWidth: PropTypes.Requireable<string>;
37
- onShowCorrectToggle: PropTypes.Requireable<(...args: any[]) => any>;
38
- isSelectionButtonBelow: PropTypes.Requireable<boolean>;
39
- minSelections: PropTypes.Requireable<number>;
40
- maxSelections: PropTypes.Requireable<number>;
41
- autoplayAudioEnabled: PropTypes.Requireable<boolean>;
42
- customAudioButton: {
43
- playImage: PropTypes.Requireable<string>;
44
- pauseImage: PropTypes.Requireable<string>;
45
- };
46
- options: PropTypes.Requireable<object>;
47
- baseHeadingLevel: PropTypes.Requireable<number>;
48
- includeSrHeading: PropTypes.Requireable<boolean>;
49
- };
50
- constructor(props: any);
51
- isSelected(value: any): any;
52
- handleChange: any;
53
- onToggle: any;
54
- UNSAFE_componentWillReceiveProps(nextProps: any): void;
55
- indexToSymbol(index: any): string;
56
- getCorrectness: any;
57
- getChecked(choice: any): any;
58
- renderHeading(): React.JSX.Element | null;
59
- render(): React.JSX.Element;
60
- }
61
- export default MultipleChoice;