@pie-element/image-cloze-association 10.1.2-next.2 → 10.1.2

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 (130) hide show
  1. package/CHANGELOG.json +437 -0
  2. package/CHANGELOG.md +1997 -0
  3. package/LICENSE.md +5 -0
  4. package/README.md +1 -0
  5. package/configure/CHANGELOG.json +197 -0
  6. package/configure/CHANGELOG.md +1600 -0
  7. package/configure/lib/defaults.js +86 -0
  8. package/configure/lib/defaults.js.map +1 -0
  9. package/configure/lib/index.js +99 -0
  10. package/configure/lib/index.js.map +1 -0
  11. package/configure/lib/root.js +135 -0
  12. package/configure/lib/root.js.map +1 -0
  13. package/configure/package.json +23 -0
  14. package/configure/src/__tests__/index.test.js +155 -0
  15. package/configure/src/defaults.js +59 -0
  16. package/configure/src/index.js +114 -0
  17. package/configure/src/root.jsx +116 -0
  18. package/controller/CHANGELOG.json +137 -0
  19. package/controller/CHANGELOG.md +1149 -0
  20. package/controller/lib/defaults.js +14 -0
  21. package/controller/lib/defaults.js.map +1 -0
  22. package/controller/lib/index.js +304 -0
  23. package/controller/lib/index.js.map +1 -0
  24. package/controller/lib/utils.js +70 -0
  25. package/controller/lib/utils.js.map +1 -0
  26. package/controller/package.json +19 -0
  27. package/controller/src/__tests__/index.test.js +711 -0
  28. package/controller/src/defaults.js +7 -0
  29. package/controller/src/index.js +322 -0
  30. package/controller/src/utils.js +72 -0
  31. package/docs/config-schema.json +1382 -0
  32. package/docs/config-schema.json.md +1021 -0
  33. package/docs/demo/config.js +8 -0
  34. package/docs/demo/generate.js +74 -0
  35. package/docs/demo/index.html +1 -0
  36. package/docs/demo/session.js +16 -0
  37. package/docs/pie-schema.json +1085 -0
  38. package/docs/pie-schema.json.md +810 -0
  39. package/lib/constants.js +12 -0
  40. package/lib/constants.js.map +1 -0
  41. package/lib/evaluation-icon.js +60 -0
  42. package/lib/evaluation-icon.js.map +1 -0
  43. package/lib/image-container.js +94 -0
  44. package/lib/image-container.js.map +1 -0
  45. package/lib/image-drop-target.js +130 -0
  46. package/lib/image-drop-target.js.map +1 -0
  47. package/lib/index.js +220 -0
  48. package/lib/index.js.map +1 -0
  49. package/lib/interactive-section.js +104 -0
  50. package/lib/interactive-section.js.map +1 -0
  51. package/lib/possible-response.js +161 -0
  52. package/lib/possible-response.js.map +1 -0
  53. package/lib/possible-responses.js +58 -0
  54. package/lib/possible-responses.js.map +1 -0
  55. package/lib/root.js +491 -0
  56. package/lib/root.js.map +1 -0
  57. package/lib/static-html-span.js +35 -0
  58. package/lib/static-html-span.js.map +1 -0
  59. package/lib/utils-correctness.js +89 -0
  60. package/lib/utils-correctness.js.map +1 -0
  61. package/package.json +21 -86
  62. package/src/__tests__/index.test.js +174 -0
  63. package/src/__tests__/root.test.jsx +99 -0
  64. package/src/__tests__/utils.test.js +207 -0
  65. package/src/constants.js +5 -0
  66. package/src/evaluation-icon.jsx +54 -0
  67. package/src/image-container.jsx +90 -0
  68. package/src/image-drop-target.jsx +140 -0
  69. package/src/index.js +245 -0
  70. package/src/interactive-section.jsx +94 -0
  71. package/src/possible-response.jsx +152 -0
  72. package/src/possible-responses.jsx +52 -0
  73. package/src/root.jsx +490 -0
  74. package/src/static-html-span.jsx +30 -0
  75. package/src/utils-correctness.js +95 -0
  76. package/configure.js +0 -2
  77. package/controller.js +0 -1
  78. package/dist/author/defaults.d.ts +0 -88
  79. package/dist/author/defaults.js +0 -58
  80. package/dist/author/index.d.ts +0 -34
  81. package/dist/author/index.js +0 -71
  82. package/dist/author/root.d.ts +0 -14
  83. package/dist/author/root.js +0 -80
  84. package/dist/browser/Check-DL1c-mLM.js +0 -10708
  85. package/dist/browser/Check-DL1c-mLM.js.map +0 -1
  86. package/dist/browser/author/index.js +0 -38597
  87. package/dist/browser/author/index.js.map +0 -1
  88. package/dist/browser/controller/index.js +0 -171
  89. package/dist/browser/controller/index.js.map +0 -1
  90. package/dist/browser/delivery/index.js +0 -2699
  91. package/dist/browser/delivery/index.js.map +0 -1
  92. package/dist/browser/dist-BphSS14E.js +0 -346
  93. package/dist/browser/dist-BphSS14E.js.map +0 -1
  94. package/dist/browser/humps-CZ4RCLab.js +0 -67
  95. package/dist/browser/humps-CZ4RCLab.js.map +0 -1
  96. package/dist/browser/image-cloze-association.css +0 -2
  97. package/dist/controller/defaults.d.ts +0 -16
  98. package/dist/controller/defaults.js +0 -10
  99. package/dist/controller/index.d.ts +0 -23
  100. package/dist/controller/index.js +0 -122
  101. package/dist/controller/utils.d.ts +0 -14
  102. package/dist/controller/utils.js +0 -36
  103. package/dist/delivery/constants.d.ts +0 -14
  104. package/dist/delivery/evaluation-icon.d.ts +0 -28
  105. package/dist/delivery/evaluation-icon.js +0 -38
  106. package/dist/delivery/image-container.d.ts +0 -13
  107. package/dist/delivery/image-container.js +0 -61
  108. package/dist/delivery/image-drop-target.d.ts +0 -45
  109. package/dist/delivery/image-drop-target.js +0 -90
  110. package/dist/delivery/index.d.ts +0 -20
  111. package/dist/delivery/index.js +0 -110
  112. package/dist/delivery/interactive-section.d.ts +0 -15
  113. package/dist/delivery/interactive-section.js +0 -72
  114. package/dist/delivery/possible-response.d.ts +0 -34
  115. package/dist/delivery/possible-response.js +0 -100
  116. package/dist/delivery/possible-responses.d.ts +0 -31
  117. package/dist/delivery/possible-responses.js +0 -41
  118. package/dist/delivery/root.d.ts +0 -21
  119. package/dist/delivery/root.js +0 -278
  120. package/dist/delivery/static-html-span.d.ts +0 -14
  121. package/dist/delivery/static-html-span.js +0 -22
  122. package/dist/delivery/utils-correctness.d.ts +0 -10
  123. package/dist/delivery/utils-correctness.js +0 -43
  124. package/dist/index.d.ts +0 -1
  125. package/dist/index.iife.d.ts +0 -8
  126. package/dist/index.iife.js +0 -152
  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/runtime-support.d.ts +0 -12
  130. package/dist/runtime-support.js +0 -12
@@ -1,72 +0,0 @@
1
- import e from "./evaluation-icon.js";
2
- import t from "react";
3
- import { color as n } from "@pie-lib/render-ui";
4
- import r from "prop-types";
5
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
- import { styled as o } from "@mui/material/styles";
7
- //#region src/delivery/interactive-section.tsx
8
- var s = o("div")(({ theme: e }) => ({
9
- marginTop: e.spacing(2),
10
- display: "flex",
11
- width: "fit-content",
12
- "&.default": { border: `1px solid ${n.disabled()}` },
13
- "&.correct": { border: `2px solid ${n.correct()}` },
14
- "&.incorrect": { border: `2px solid ${n.incorrect()}` }
15
- })), c = class extends t.Component {
16
- getClassname() {
17
- let { responseCorrect: e } = this.props, t;
18
- switch (e) {
19
- case void 0:
20
- t = "default";
21
- break;
22
- case !0:
23
- t = "correct";
24
- break;
25
- default:
26
- t = "incorrect";
27
- break;
28
- }
29
- return t;
30
- }
31
- getPositionDirection(e) {
32
- let t;
33
- switch (e) {
34
- case "left":
35
- t = "row-reverse";
36
- break;
37
- case "right":
38
- t = "row";
39
- break;
40
- case "top":
41
- t = "column-reverse";
42
- break;
43
- default:
44
- t = "column";
45
- break;
46
- }
47
- return t;
48
- }
49
- render() {
50
- let { children: t, responseCorrect: n, uiStyle: r } = this.props, o = this.getClassname(), { possibilityListPosition: c = "bottom" } = r || {};
51
- return /* @__PURE__ */ a(s, {
52
- className: o,
53
- style: { flexDirection: this.getPositionDirection(c) },
54
- children: [/* @__PURE__ */ i(e, {
55
- containerStyle: {
56
- display: "flex",
57
- margin: "0 auto",
58
- marginTop: -14
59
- },
60
- filled: !0,
61
- isCorrect: n
62
- }), t]
63
- });
64
- }
65
- };
66
- c.propTypes = {
67
- children: r.oneOfType([r.element, r.array]).isRequired,
68
- responseCorrect: r.oneOfType([r.bool, r.number]),
69
- uiStyle: r.object
70
- }, c.defaultProps = { responseCorrect: void 0 };
71
- //#endregion
72
- export { c as default };
@@ -1,34 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/image-cloze-association/src/possible-response.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 const PossibleResponse: {
12
- ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }: {
13
- canDrag: any;
14
- containerStyle: any;
15
- data: any;
16
- onDragBegin: any;
17
- answerChoiceTransparency: any;
18
- isOverlay: any;
19
- }): React.JSX.Element;
20
- propTypes: {
21
- canDrag: PropTypes.Validator<boolean>;
22
- containerStyle: PropTypes.Requireable<object>;
23
- data: PropTypes.Validator<object>;
24
- onDragBegin: PropTypes.Validator<(...args: any[]) => any>;
25
- answerChoiceTransparency: PropTypes.Requireable<boolean>;
26
- isOverlay: PropTypes.Requireable<boolean>;
27
- };
28
- defaultProps: {
29
- containerStyle: {};
30
- answerChoiceTransparency: boolean;
31
- isOverlay: boolean;
32
- };
33
- };
34
- export default PossibleResponse;
@@ -1,100 +0,0 @@
1
- import e from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
2
- import t from "./evaluation-icon.js";
3
- import n from "./static-html-span.js";
4
- import { useEffect as r, useRef as i } from "react";
5
- import { color as a } from "@pie-lib/render-ui";
6
- import o from "prop-types";
7
- import { useDraggable as s } from "@dnd-kit/core";
8
- import { jsx as c, jsxs as l } from "react/jsx-runtime";
9
- import { styled as u } from "@mui/material/styles";
10
- //#region src/delivery/possible-response.tsx
11
- var d = u("div")(() => ({
12
- position: "relative",
13
- backgroundColor: a.white(),
14
- border: `1px solid ${a.borderDark()}`,
15
- display: "flex",
16
- alignItems: "center",
17
- justifyContent: "center",
18
- minHeight: "28px",
19
- width: "fit-content",
20
- "& span img": { pointerEvents: "none" },
21
- "&.textAnswerChoiceStyle": {
22
- padding: "0 10px",
23
- margin: "4px 6px !important"
24
- },
25
- "&.answerChoiceTransparency": {
26
- border: "none",
27
- backgroundColor: `${a.transparent()}`,
28
- "&:hover": { border: `1px solid ${a.borderDark()}` }
29
- },
30
- "&.baseCorrect": { border: `2px solid ${a.correct()} !important` },
31
- "&.baseIncorrect": { border: `2px solid ${a.incorrect()} !important` }
32
- })), f = u(n)(() => ({
33
- cursor: "grab",
34
- backgroundColor: a.background(),
35
- "&.hiddenSpan": { visibility: "hidden" }
36
- })), p = ({ canDrag: n, containerStyle: a, data: o, onDragBegin: u, answerChoiceTransparency: p, isOverlay: m }) => {
37
- let h = i(null), g = i(null), { setNodeRef: _, attributes: v, listeners: y, isDragging: b } = s({
38
- id: `possible-response-${o.id}`,
39
- data: {
40
- id: o.id,
41
- value: o.value,
42
- containerIndex: o.containerIndex
43
- },
44
- disabled: !n
45
- }), x = () => {
46
- clearTimeout(g.current);
47
- }, S = () => {
48
- clearTimeout(g.current);
49
- }, C = (e) => {
50
- e.preventDefault(), g.current = setTimeout(() => {
51
- n && h.current && u(o);
52
- }, 500);
53
- };
54
- r(() => {
55
- let e = h.current;
56
- if (e) return e.addEventListener("touchstart", C, { passive: !1 }), e.addEventListener("touchend", x), e.addEventListener("touchmove", S, { passive: !1 }), () => {
57
- e.removeEventListener("touchstart", C), e.removeEventListener("touchend", x), e.removeEventListener("touchmove", S);
58
- };
59
- }, [n, o]);
60
- let { isCorrect: w } = o || {}, T = {
61
- fontSize: 14,
62
- position: "absolute",
63
- bottom: "3px",
64
- right: "3px"
65
- }, E = w === !0 ? "baseCorrect" : w === !1 ? "baseIncorrect" : void 0, D = /<img[^>]+src="([^">]+)"/.test(o.value), O = e({
66
- answerChoiceTransparency: p && !b,
67
- [E]: !!E,
68
- textAnswerChoiceStyle: !D && !m
69
- }), k = e({ hiddenSpan: o.hidden });
70
- return /* @__PURE__ */ l(d, {
71
- className: O,
72
- style: a,
73
- ref: (e) => {
74
- h.current = e, _(e);
75
- },
76
- ...y,
77
- ...v,
78
- children: [/* @__PURE__ */ c(f, {
79
- html: o.value,
80
- className: k
81
- }), /* @__PURE__ */ c(t, {
82
- isCorrect: o.isCorrect,
83
- containerStyle: T
84
- })]
85
- });
86
- };
87
- p.propTypes = {
88
- canDrag: o.bool.isRequired,
89
- containerStyle: o.object,
90
- data: o.object.isRequired,
91
- onDragBegin: o.func.isRequired,
92
- answerChoiceTransparency: o.bool,
93
- isOverlay: o.bool
94
- }, p.defaultProps = {
95
- containerStyle: {},
96
- answerChoiceTransparency: !1,
97
- isOverlay: !1
98
- };
99
- //#endregion
100
- export { p as default };
@@ -1,31 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/image-cloze-association/src/possible-responses.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 const PossibleResponses: {
12
- ({ canDrag, data, onDragBegin, answerChoiceTransparency, customStyle, isVertical, minHeight, }: {
13
- canDrag: any;
14
- data: any;
15
- onDragBegin: any;
16
- answerChoiceTransparency: any;
17
- customStyle: any;
18
- isVertical: any;
19
- minHeight: any;
20
- }): React.JSX.Element;
21
- propTypes: {
22
- canDrag: PropTypes.Validator<boolean>;
23
- data: PropTypes.Validator<any[]>;
24
- onDragBegin: PropTypes.Validator<(...args: any[]) => any>;
25
- answerChoiceTransparency: PropTypes.Requireable<boolean>;
26
- customStyle: PropTypes.Requireable<object>;
27
- isVertical: PropTypes.Requireable<boolean>;
28
- minHeight: PropTypes.Requireable<number>;
29
- };
30
- };
31
- export default PossibleResponses;
@@ -1,41 +0,0 @@
1
- import e from "./possible-response.js";
2
- import "react";
3
- import { color as t } from "@pie-lib/render-ui";
4
- import n from "prop-types";
5
- import { ICADroppablePlaceholder as r } from "@pie-lib/drag";
6
- import { jsx as i } from "react/jsx-runtime";
7
- import { styled as a } from "@mui/material/styles";
8
- //#region src/delivery/possible-responses.tsx
9
- var o = a("div")(({ theme: e }) => ({
10
- backgroundColor: t.background(),
11
- padding: e.spacing(2),
12
- display: "flex",
13
- alignItems: "center",
14
- width: "fit-content"
15
- })), s = ({ canDrag: t, data: n, onDragBegin: a, answerChoiceTransparency: s, customStyle: c, isVertical: l, minHeight: u }) => /* @__PURE__ */ i(o, {
16
- style: c,
17
- children: /* @__PURE__ */ i(r, {
18
- id: "ica-board",
19
- disabled: !t,
20
- isVerticalPool: l,
21
- minHeight: u,
22
- children: (n || []).map((n) => /* @__PURE__ */ i(e, {
23
- canDrag: t,
24
- data: n,
25
- onDragBegin: a,
26
- answerChoiceTransparency: s,
27
- containerStyle: { margin: "4px" }
28
- }, n.id))
29
- })
30
- });
31
- s.propTypes = {
32
- canDrag: n.bool.isRequired,
33
- data: n.array.isRequired,
34
- onDragBegin: n.func.isRequired,
35
- answerChoiceTransparency: n.bool,
36
- customStyle: n.object,
37
- isVertical: n.bool,
38
- minHeight: n.number
39
- };
40
- //#endregion
41
- export { s as default };
@@ -1,21 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/image-cloze-association/src/root.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
- export declare class ImageClozeAssociationComponent extends React.Component {
11
- constructor(props: any);
12
- onDragStart: any;
13
- onDragEnd: any;
14
- renderDragOverlay: any;
15
- filterPossibleAnswers: (possibleResponses: any, answer: any) => any;
16
- handleOnAnswerSelect: any;
17
- handleOnAnswerRemove: any;
18
- toggleCorrect: (showCorrect: any) => void;
19
- render(): React.JSX.Element;
20
- }
21
- export default ImageClozeAssociationComponent;
@@ -1,278 +0,0 @@
1
- import e from "./possible-response.js";
2
- import t from "./image-container.js";
3
- import n from "./interactive-section.js";
4
- import r from "./possible-responses.js";
5
- import { getAnswersCorrectness as i, getUnansweredAnswers as a } from "./utils-correctness.js";
6
- import o from "react";
7
- import * as s from "@pie-lib/render-ui";
8
- import { Collapsible as c, PreviewPrompt as l, UiLayout as u, color as d, hasMedia as f, hasText as p } from "@pie-lib/render-ui";
9
- import m from "prop-types";
10
- import { DragOverlay as h } from "@dnd-kit/core";
11
- import { DragProvider as ee } from "@pie-lib/drag";
12
- import { CSSTransition as g, TransitionGroup as _ } from "react-transition-group";
13
- import { jsx as v, jsxs as y } from "react/jsx-runtime";
14
- import { styled as b } from "@mui/material/styles";
15
- import x from "@mui/icons-material/NotInterested";
16
- import S from "@pie-lib/correct-answer-toggle";
17
- import C from "@pie-lib/translator";
18
- import { flatMap as w, groupBy as T } from "@pie-element/shared-lodash";
19
- //#region src/delivery/root.tsx
20
- function E(e) {
21
- return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
22
- }
23
- function D(e, t) {
24
- return !e || E(e) ? e : E(e.default) ? e.default : t && E(e[t]) ? e[t] : t && E(e[t]?.default) ? e[t].default : e;
25
- }
26
- var O = D(u, "UiLayout") || D(N.UiLayout, "UiLayout"), k = D(l, "PreviewPrompt") || D(N.PreviewPrompt, "PreviewPrompt"), A = D(c, "Collapsible") || D(N.Collapsible, "Collapsible"), j = s, M = j.default, N = M && typeof M == "object" ? M : j, { translator: P } = C, F = () => Math.random().toString(36).substring(2) + (/* @__PURE__ */ new Date()).getTime().toString(36), I = b(O)({
27
- color: d.text(),
28
- backgroundColor: d.background(),
29
- position: "relative",
30
- "& img": {
31
- maxWidth: "100%",
32
- height: "auto"
33
- }
34
- }), L = b(A)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), R = b(A)(({ theme: e }) => ({ marginTop: e.spacing(2) })), z = class extends o.Component {
35
- constructor(e) {
36
- super(e);
37
- let { model: { possibleResponses: t, responseContainers: n, duplicateResponses: r, maxResponsePerZone: i }, session: a } = e, { answers: o } = a || {}, s = (t || []).map((e, t) => ({
38
- value: e,
39
- id: `${t}`
40
- }));
41
- o = w(T(o || [], "containerIndex"), (e) => e.slice(-(i || 1))).map((e, t) => ({
42
- ...e,
43
- id: `${t}`
44
- })).filter((e) => e.containerIndex < n.length);
45
- let c = s.filter((e) => !o.find((t) => t.value === e.value));
46
- this.state = {
47
- answers: o || [],
48
- draggingElement: {
49
- id: "",
50
- value: ""
51
- },
52
- possibleResponses: r ? s : c,
53
- responseContainers: (n || []).map((e, t) => ({
54
- index: t,
55
- ...e,
56
- id: `${t}`
57
- })),
58
- maxResponsePerZone: i || 1,
59
- showCorrect: !1,
60
- isValidDrop: !1
61
- };
62
- }
63
- onDragStart = (e) => {
64
- let { active: t } = e;
65
- t?.data?.current && this.setState({
66
- draggingElement: t.data.current,
67
- isValidDrop: !1
68
- });
69
- };
70
- onDragEnd = (e) => {
71
- let { active: t, over: n } = e, { model: r } = this.props, { duplicateResponses: i } = r || {}, a = t?.data?.current, o = n?.data?.current, s = n && t && a && o && o.containerIndex !== void 0 && i;
72
- if (this.setState({
73
- draggingElement: {
74
- id: "",
75
- value: ""
76
- },
77
- isValidDrop: s
78
- }), !(!n || !t) && a) {
79
- if (n.id === "ica-board") {
80
- this.handleOnAnswerRemove(a);
81
- return;
82
- }
83
- o && this.handleOnAnswerSelect(a, o.containerIndex);
84
- }
85
- };
86
- renderDragOverlay = () => {
87
- let { draggingElement: t } = this.state, { model: n } = this.props;
88
- if (!t.id) return null;
89
- let r = /<img[^>]+src="([^">]+)"/.test(t.value);
90
- return /* @__PURE__ */ v(e, {
91
- canDrag: !1,
92
- data: t,
93
- onDragBegin: () => {},
94
- isOverlay: !0,
95
- containerStyle: {
96
- ...n.answerChoiceTransparency ? { opacity: "0.8" } : {},
97
- ...r ? {} : {
98
- padding: "0 10px",
99
- margin: "4px 6px !important"
100
- }
101
- }
102
- }, t.id);
103
- };
104
- filterPossibleAnswers = (e, t) => e.filter((e) => e.value !== t.value);
105
- handleOnAnswerSelect = (e, t) => {
106
- let { model: { duplicateResponses: n }, updateAnswer: r } = this.props, { answers: i, maxResponsePerZone: a } = this.state, { possibleResponses: o } = this.state, s, c = [], l = [];
107
- if (i.forEach((e) => {
108
- e.containerIndex === t ? c.push(e) : l.push(e);
109
- }), a === c.length) {
110
- let r = c[0];
111
- if (a === 1) c.shift();
112
- else {
113
- this.setState({ maxResponsePerZoneWarning: !0 });
114
- return;
115
- }
116
- n || (o = Array.isArray(o) ? o : [], o.push({
117
- ...r,
118
- containerIndex: void 0,
119
- id: r.id || F()
120
- })), s = [
121
- ...c,
122
- ...l.filter((t) => n ? !0 : t.value !== e.value),
123
- {
124
- ...e,
125
- containerIndex: t,
126
- ...n ? { id: F() } : {}
127
- }
128
- ];
129
- } else s = [...i.filter((t) => n ? t.id !== e.id : t.value !== e.value), {
130
- ...e,
131
- containerIndex: t,
132
- ...n ? { id: F() } : {}
133
- }];
134
- this.setState({
135
- maxResponsePerZoneWarning: !1,
136
- answers: s,
137
- possibleResponses: n ? o : this.filterPossibleAnswers(o, e)
138
- }), r(s);
139
- };
140
- handleOnAnswerRemove = (e) => {
141
- let { model: { duplicateResponses: t }, updateAnswer: n } = this.props, { answers: r, possibleResponses: i } = this.state, a = r.filter((t) => t.id !== e.id), o = e.containerIndex === void 0;
142
- this.setState({
143
- maxResponsePerZoneWarning: !1,
144
- answers: a,
145
- possibleResponses: t || o ? i : [...i, {
146
- ...e,
147
- containerIndex: void 0
148
- }]
149
- }), n(a);
150
- };
151
- toggleCorrect = (e) => this.setState({ showCorrect: e });
152
- render() {
153
- let { model: { disabled: e, duplicateResponses: s, extraCSSRules: c, image: l, responseAreaFill: u, stimulus: d, responseCorrect: m, validation: g, teacherInstructions: _, prompt: b, autoplayAudioEnabled: x, showDashedBorder: C, mode: w, rationale: T, language: E, uiStyle: D = {}, answerChoiceTransparency: O, responseContainerPadding: A, imageDropTargetPadding: j, fontSizeFactor: M, customAudioButton: N } } = this.props, { answers: F, draggingElement: z, possibleResponses: B, responseContainers: V, maxResponsePerZone: U, maxResponsePerZoneWarning: W, showCorrect: G, isValidDrop: K } = this.state, q = w === "evaluate" && !m, { possibilityListPosition: J = "bottom" } = D || {}, Y = J === "left" || J === "right", { validResponse: X } = g || {}, Z = [], Q = T && (p(T) || f(T)), te = _ && (p(_) || f(_));
154
- X && (X.value || []).forEach((e, t) => {
155
- (e.images || []).forEach((e) => {
156
- Z.push({
157
- value: e,
158
- containerIndex: t,
159
- isCorrect: !0
160
- });
161
- });
162
- });
163
- let ne = P.t("imageClozeAssociation.reachedLimit_other", {
164
- lng: E,
165
- count: U
166
- }), $ = m === void 0 ? F : i(F, g, s);
167
- m === !1 && U === 1 && ($ = [...$, ...a($, g)]);
168
- let re = {
169
- draggingElement: z,
170
- duplicateResponses: s,
171
- image: l,
172
- onAnswerSelect: this.handleOnAnswerSelect,
173
- onDragAnswerBegin: this.onDragStart,
174
- onDragAnswerEnd: this.onDragEnd,
175
- responseContainers: V,
176
- showDashedBorder: C,
177
- responseAreaFill: u,
178
- responseContainerPadding: A,
179
- imageDropTargetPadding: j,
180
- maxResponsePerZone: U
181
- };
182
- return /* @__PURE__ */ y(ee, {
183
- onDragStart: this.onDragStart,
184
- onDragEnd: this.onDragEnd,
185
- children: [/* @__PURE__ */ y(I, {
186
- extraCSSRules: c,
187
- id: "main-container",
188
- fontSizeFactor: M,
189
- children: [
190
- te && /* @__PURE__ */ v(L, {
191
- labels: {
192
- hidden: "Show Teacher Instructions",
193
- visible: "Hide Teacher Instructions"
194
- },
195
- children: /* @__PURE__ */ v(k, { prompt: _ })
196
- }),
197
- /* @__PURE__ */ v(k, {
198
- className: "prompt",
199
- prompt: b,
200
- autoplayAudioEnabled: x,
201
- customAudioButton: N
202
- }),
203
- /* @__PURE__ */ v(k, { prompt: d }),
204
- /* @__PURE__ */ v(S, {
205
- show: q,
206
- toggled: G,
207
- onToggle: this.toggleCorrect,
208
- language: E
209
- }),
210
- /* @__PURE__ */ y(n, {
211
- responseCorrect: G && q ? !0 : m,
212
- uiStyle: D,
213
- children: [/* @__PURE__ */ v(t, {
214
- ...re,
215
- canDrag: G && q ? !1 : !e,
216
- answers: G && q ? Z : $,
217
- answerChoiceTransparency: G && q ? void 0 : O
218
- }), G && q ? null : /* @__PURE__ */ y(o.Fragment, { children: [W && /* @__PURE__ */ v(H, { message: ne }), /* @__PURE__ */ v(r, {
219
- canDrag: !e,
220
- data: B,
221
- onAnswerRemove: this.handleOnAnswerRemove,
222
- onDragBegin: this.onDragStart,
223
- answerChoiceTransparency: O,
224
- customStyle: { minWidth: Y ? "130px" : l?.width || "fit-content" },
225
- isVertical: Y,
226
- minHeight: Y ? l?.height : void 0
227
- })] })]
228
- }),
229
- Q && /* @__PURE__ */ v(R, {
230
- labels: {
231
- hidden: "Show Rationale",
232
- visible: "Hide Rationale"
233
- },
234
- children: /* @__PURE__ */ v(k, { prompt: T })
235
- })
236
- ]
237
- }), /* @__PURE__ */ v(h, {
238
- dropAnimation: K ? null : void 0,
239
- children: this.renderDragOverlay()
240
- })]
241
- });
242
- }
243
- }, B = b("div")(({ theme: e }) => ({
244
- margin: `0 ${e.spacing(2)}`,
245
- backgroundColor: "#dddddd",
246
- padding: e.spacing(1),
247
- display: "flex",
248
- alignItems: "center",
249
- "& svg": { height: "30px" },
250
- "& h1": {
251
- padding: "0px",
252
- margin: "0px"
253
- }
254
- })), V = b("span")(({ theme: e }) => ({
255
- paddingLeft: e.spacing(.5),
256
- userSelect: "none"
257
- })), H = ({ message: e }) => {
258
- let t = o.useRef(null);
259
- return /* @__PURE__ */ v(_, { children: /* @__PURE__ */ v(g, {
260
- classNames: "fb",
261
- timeout: 300,
262
- nodeRef: t,
263
- children: /* @__PURE__ */ y(B, {
264
- ref: t,
265
- children: [/* @__PURE__ */ v(x, {
266
- color: "secondary",
267
- fontSize: "small"
268
- }), /* @__PURE__ */ v(V, { dangerouslySetInnerHTML: { __html: e } })]
269
- }, "panel")
270
- }, "fb") });
271
- };
272
- H.propTypes = { message: m.string }, z.propTypes = {
273
- model: m.object.isRequired,
274
- session: m.object,
275
- updateAnswer: m.func.isRequired
276
- };
277
- //#endregion
278
- export { z as default };
@@ -1,14 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/image-cloze-association/src/static-html-span.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
- declare class StaticHTMLSpan extends React.PureComponent {
11
- shouldComponentUpdate(): boolean;
12
- render(): React.JSX.Element;
13
- }
14
- export default StaticHTMLSpan;
@@ -1,22 +0,0 @@
1
- import e from "react";
2
- import t from "prop-types";
3
- import { jsx as n } from "react/jsx-runtime";
4
- //#region src/delivery/static-html-span.tsx
5
- var r = class extends e.PureComponent {
6
- shouldComponentUpdate() {
7
- return !1;
8
- }
9
- render() {
10
- let { html: e, className: t } = this.props;
11
- return /* @__PURE__ */ n("span", {
12
- className: t,
13
- dangerouslySetInnerHTML: { __html: e }
14
- });
15
- }
16
- };
17
- r.propTypes = {
18
- html: t.string.isRequired,
19
- className: t.string
20
- }, r.defaultProps = { className: "" };
21
- //#endregion
22
- export { r as default };
@@ -1,10 +0,0 @@
1
- /**
2
- * @synced-from pie-elements/packages/image-cloze-association/src/utils-correctness.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 getUnansweredAnswers: (answers: any, validation: any) => any;
10
- export declare const getAnswersCorrectness: (answers: any, validation: any) => any;
@@ -1,43 +0,0 @@
1
- import { camelizeKeys as e } from "humps";
2
- //#region src/delivery/utils-correctness.ts
3
- var t = (e, t) => (e || []).map((e) => ({
4
- ...e,
5
- isCorrect: (t[e.containerIndex] && t[e.containerIndex].images || []).includes(e.value)
6
- })), n = (e, t) => (t[e.containerIndex].images || []).filter((t) => t === e.value), r = (e, t) => {
7
- let r = e;
8
- return e.forEach((i) => {
9
- let a = e.filter((e) => e.value === i.value && e.containerIndex === i.containerIndex);
10
- a.length > 1 && (a.shift(), a.forEach((e, i) => {
11
- r = (r || []).map((r) => {
12
- if (r.id === e.id) {
13
- let e = n(r, t);
14
- return {
15
- ...r,
16
- isCorrect: e.length > i + 1
17
- };
18
- }
19
- return r;
20
- });
21
- }));
22
- }), r;
23
- }, i = (t, n) => {
24
- let { validResponse: { value: r } = {} } = e(n);
25
- return (r || []).reduce((e, n, r) => {
26
- let i = !!t.find((e) => e.containerIndex === r);
27
- return n.images = n.images || [], i ? e : [...e, {
28
- id: `unanswered-${r}`,
29
- value: n.images[0] || "",
30
- containerIndex: r,
31
- isCorrect: n.images.length ? !1 : void 0,
32
- hidden: !0
33
- }];
34
- }, []);
35
- }, a = (n, i) => {
36
- let { validResponse: { value: a }, altResponses: o } = e(i), s = r(t(n, a), a);
37
- return s.filter((e) => e.isCorrect).length < s.length && o && o.length ? (o || []).map((e) => {
38
- let i = e.value;
39
- return r(t(n, i), i);
40
- }).sort((e, t) => t.filter((e) => e.isCorrect).length - e.filter((e) => e.isCorrect).length)[0] : s;
41
- };
42
- //#endregion
43
- export { a as getAnswersCorrectness, i as getUnansweredAnswers };
package/dist/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from './delivery/index.js';
@@ -1,8 +0,0 @@
1
- /**
2
- * IIFE entry point for image-cloze-association element
3
- * This file is only used for IIFE builds and includes auto-registration
4
- *
5
- * @sync-generated - Auto-generated during sync from pie-elements
6
- */
7
- import Element from './index.js';
8
- export default Element;