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

package/dist/controller/defaults.d.ts

@@ -1,16 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/controller/src/defaults.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-declare const _default: {
-    rationale: string;
-    rationaleEnabled: boolean;
-    studentInstructionsEnabled: boolean;
-    teacherInstructions: string;
-    teacherInstructionsEnabled: boolean;
-};
-export default _default;

package/dist/controller/defaults.js

@@ -1,10 +0,0 @@
-//#region src/controller/defaults.ts
-var e = {
-	rationale: "",
-	rationaleEnabled: !0,
-	studentInstructionsEnabled: !0,
-	teacherInstructions: "",
-	teacherInstructionsEnabled: !0
-};
-//#endregion
-export { e as default };

package/dist/controller/index.d.ts

@@ -1,23 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/controller/src/index.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-export declare const normalize: (question: any) => any;
-export declare const model: (question: any, session: any, env: any) => Promise<unknown>;
-export declare const isResponseCorrect: (correctResponses: any, session: any) => boolean;
-export declare const getPartialScore: (question: any, session: any) => number;
-/**
- * Generates detailed trace log for scoring evaluation
- * @param {Object} model - the question model
- * @param {Object} session - the student session
- * @param {Object} env - the environment
- * @returns {Array} traceLog - array of trace messages
- */
-export declare const getLogTrace: (model: any, session: any, env: any) => string[];
-export declare const outcome: (config: any, session: any, env?: {}) => Promise<unknown>;
-export declare const createCorrectResponseSession: (question: any, env: any) => Promise<unknown>;
-export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -1,122 +0,0 @@
-import e from "./defaults.js";
-import { getAllUniqueCorrectness as t, getCompleteResponseDetails as n } from "./utils.js";
-import { cloneDeep as r, isEmpty as i, shuffle as a } from "@pie-element/shared-lodash";
-import { camelizeKeys as o } from "humps";
-import s from "debug";
-import { partialScoring as c } from "@pie-element/shared-controller-utils";
-//#region src/controller/index.ts
-var l = s("pie-elements:image-cloze-association:controller"), u = (t) => ({
-	...e,
-	...t
-}), d = (e, t, r) => {
-	let i = u(e), s = o(i);
-	return new Promise((e) => {
-		let o = r.mode === "evaluate", { responseAreasToBeFilled: c, possibleResponses: l, hasUnplacedChoices: u } = n(s.validation, s.possibleResponses), d = {
-			disabled: r.mode !== "gather",
-			mode: r.mode,
-			...s,
-			responseCorrect: o ? _(s, t) === 1 : void 0,
-			validation: o ? s.validation : void 0,
-			responseAreasToBeFilled: c,
-			completeResponses: l,
-			hasUnplacedChoices: u
-		};
-		i.shuffle && (d.possibleResponses = a(i.possible_responses)), r.role === "instructor" && (r.mode === "view" || r.mode === "evaluate") ? (d.teacherInstructions = s.teacherInstructionsEnabled ? s.teacherInstructions : null, d.rationale = s.rationale ? s.rationale : null) : (d.teacherInstructions = null, d.rationale = null), e(d);
-	});
-}, f = (e, t) => {
-	let n = r(e), a = !0, o = 0;
-	return !t || i(t) ? !1 : (n.forEach((e) => o += (e.images || []).length), t.answers && o === t.answers.length ? t.answers.forEach((e) => {
-		let t = (n[e.containerIndex]?.images || []).indexOf(e.value);
-		t >= 0 ? n[e.containerIndex].images.splice(t, 1) : a = !1;
-	}) : a = !1, a);
-}, p = (e) => r(e.filter((e) => e.images && e.images.length)), m = (e, t) => {
-	let { validation: { altResponses: n } } = e, { validation: { validResponse: { value: r } } } = e, i = f(r, t);
-	return !i && n && n.length && n.forEach((e) => {
-		f(e.value, t) && (i = !0);
-	}), i;
-}, h = (e, t, n) => {
-	let r = t.filter((t) => t.containerIndex === e), i = r.filter((e) => !e.isCorrect), a = (n.value[e].images || []).length;
-	if (r.length > a) {
-		let e = r.length - a;
-		return i.slice(-e);
-	}
-	return [];
-}, g = (e, n) => {
-	let { validation: { validResponse: r }, maxResponsePerZone: a } = e, o = 0, s = 0, c = 0;
-	if (!n || i(n)) return 0;
-	if (r.value.forEach((e) => c += (e.images || []).length), n.answers && n.answers.length) {
-		let e = t(n.answers, r.value);
-		o = e.filter((e) => e.isCorrect).length, s = e.filter((e) => !e.isCorrect).length, n.answers.forEach((t) => {
-			if (a > 1) {
-				let n = h(t.containerIndex, e, r);
-				n.length && n.forEach((e) => {
-					e.id === t.id && --o;
-				});
-			}
-		}), (!a || a <= 1) && (o -= s);
-	} else o = 0;
-	o = o < 0 ? 0 : o;
-	let l = p(r.value), u = a > 1 ? c : (l || []).length, d = (o / u).toFixed(2);
-	return parseFloat(d);
-}, _ = (e, t, n = {}) => {
-	let r = c.enabled(e, n), i = m(e, t);
-	return r ? g(e, t) : +!!i;
-}, v = (e, t, n) => {
-	let r = [], { answers: i } = t || {}, a = e.validation?.validResponse?.value || [], o = a.length;
-	if (r.push(`${o} placement container(s) defined in this question.`), i && i.length > 0) {
-		r.push(`Student placed ${i.length} image(s) into placement containers.`);
-		let e = {};
-		i.forEach((t) => {
-			e[t.containerIndex] || (e[t.containerIndex] = []), e[t.containerIndex].push(t.value);
-		}), a.forEach((t, n) => {
-			let i = t.images || [], a = e[n] || [];
-			if (i.length > 0) if (a.length === 0) r.push(`Container ${n + 1}: student left empty (should contain ${i.length} image(s)).`);
-			else {
-				let e = a.filter((e) => i.includes(e)).length, t = a.length - e;
-				e > 0 && t === 0 ? r.push(`Container ${n + 1}: student placed ${e} correct image(s).`) : e === 0 && t > 0 ? r.push(`Container ${n + 1}: student placed ${t} incorrect image(s).`) : r.push(`Container ${n + 1}: student placed ${e} correct and ${t} incorrect image(s).`);
-			}
-		});
-	} else r.push("Student did not place any images into placement containers.");
-	let s = e.validation?.altResponses || [];
-	s.length > 0 && r.push(`${s.length} alternate response combination(s) are accepted for this question.`);
-	let l = c.enabled(e, n) ? "partial scoring" : "all-or-nothing scoring";
-	r.push(`Score calculated using ${l}.`);
-	let u = _(e, t, n);
-	return r.push(`Final score: ${u}.`), r;
-}, y = (e, t, n = {}) => new Promise((r) => {
-	if (l("outcome..."), !t || i(t)) r({
-		score: 0,
-		empty: !0,
-		traceLog: ["Student did not place any images into placement containers. Score is 0."]
-	});
-	else {
-		let i = o(e), a = v(i, t, n);
-		r({
-			score: _(i, t, n),
-			empty: !1,
-			traceLog: a
-		});
-	}
-}), b = (e, t) => new Promise((n) => {
-	if (t.mode !== "evaluate" && t.role === "instructor") {
-		let { validation: { valid_response: { value: t } } } = e, r = [];
-		t && t.forEach((e, t) => {
-			(e.images || []).forEach((e) => {
-				r.push({
-					value: e,
-					containerIndex: t
-				});
-			});
-		}), n({
-			answers: r,
-			id: "1"
-		});
-	} else n(null);
-}), x = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), S = (e = {}, t = {}) => {
-	let n = {};
-	return ["teacherInstructions"].forEach((r) => {
-		t[r]?.required && !x(e[r]) && (n[r] = "This field is required.");
-	}), n;
-};
-//#endregion
-export { b as createCorrectResponseSession, v as getLogTrace, g as getPartialScore, f as isResponseCorrect, d as model, u as normalize, y as outcome, S as validate };

package/dist/controller/utils.d.ts

@@ -1,14 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/controller/src/utils.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-export declare const getAllUniqueCorrectness: (answers: any, validResponses: any) => any;
-export declare const getCompleteResponseDetails: (validation: any, allChoices: any) => {
-    responseAreasToBeFilled: any;
-    possibleResponses: any[];
-    hasUnplacedChoices: boolean;
-};

package/dist/controller/utils.js

@@ -1,36 +0,0 @@
-//#region src/controller/utils.ts
-var e = (e, t) => (e || []).map((e) => ({
-	...e,
-	isCorrect: (t[e.containerIndex] && t[e.containerIndex].images || []).includes(e.value)
-})), t = (e, t) => (t[e.containerIndex] && t[e.containerIndex].images || []).filter((t) => t === e.value), n = (n, r) => {
-	let i = e(n, r);
-	return n.forEach((e) => {
-		let a = n.filter((t) => t.value === e.value && t.containerIndex === e.containerIndex);
-		a.length > 1 && (a.shift(), a.forEach((e, n) => {
-			i = (i || []).map((i) => {
-				if (i.id === e.id) {
-					let e = t(i, r);
-					return {
-						...i,
-						isCorrect: e.length > n + 1
-					};
-				}
-				return i;
-			});
-		}));
-	}), i;
-}, r = (e, t) => {
-	let n = (e) => (e?.value || []).map((e) => e.images), r = (e) => (e || []).filter((e) => e.length).length, { validResponse: i, altResponses: a } = e || {}, o = n(i), s = [o.flat()], c = r(o);
-	(a || []).forEach((e) => {
-		let t = n(e), i = r(t);
-		s.push(t.flat()), i < c && (c = i);
-	});
-	let l = s.some((e) => !t.every((t) => e.includes(t)));
-	return {
-		responseAreasToBeFilled: c,
-		possibleResponses: s,
-		hasUnplacedChoices: l
-	};
-};
-//#endregion
-export { n as getAllUniqueCorrectness, r as getCompleteResponseDetails };

package/dist/delivery/constants.d.ts

@@ -1,14 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/src/constants.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-declare const _default: {
-    types: {
-        response: string;
-    };
-};
-export default _default;

package/dist/delivery/evaluation-icon.d.ts

@@ -1,28 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/src/evaluation-icon.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-declare const EvaluationIcon: {
-    ({ containerStyle, isCorrect, filled }: {
-        containerStyle: any;
-        isCorrect: any;
-        filled: any;
-    }): React.JSX.Element | null;
-    propTypes: {
-        containerStyle: PropTypes.Requireable<object>;
-        filled: PropTypes.Requireable<boolean>;
-        isCorrect: PropTypes.Requireable<NonNullable<number | boolean | null | undefined>>;
-    };
-    defaultProps: {
-        containerStyle: {};
-        filled: boolean;
-        isCorrect: undefined;
-    };
-};
-export default EvaluationIcon;

package/dist/delivery/evaluation-icon.js

@@ -1,38 +0,0 @@
-import "react";
-import { color as e } from "@pie-lib/render-ui";
-import t from "prop-types";
-import { jsx as n } from "react/jsx-runtime";
-import { styled as r } from "@mui/material/styles";
-import i from "@mui/icons-material/Check";
-import a from "@mui/icons-material/Close";
-//#region src/delivery/evaluation-icon.tsx
-var o = r("svg")(() => ({
-	"&.correctEmpty": { color: e.correct() },
-	"&.correctFilled": {
-		color: e.background(),
-		backgroundColor: e.correct()
-	},
-	"&.incorrectEmpty": { color: e.incorrect() },
-	"&.incorrectFilled": {
-		color: e.background(),
-		backgroundColor: e.incorrect()
-	}
-})), s = (e, t) => `${e ? "correct" : "incorrect"}${t ? "Filled" : "Empty"}`, c = ({ containerStyle: e, isCorrect: t, filled: r }) => {
-	let c = t ? i : a, l = t !== void 0, u = l ? s(t, r) : "";
-	return l ? /* @__PURE__ */ n(c, {
-		component: o,
-		className: u,
-		style: e
-	}) : null;
-};
-c.propTypes = {
-	containerStyle: t.object,
-	filled: t.bool,
-	isCorrect: t.oneOfType([t.bool, t.number])
-}, c.defaultProps = {
-	containerStyle: {},
-	filled: !1,
-	isCorrect: void 0
-};
-//#endregion
-export { c as default };

package/dist/delivery/image-container.d.ts

@@ -1,13 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/src/image-container.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React, { Component } from 'react';
-declare class ImageContainer extends Component {
-    render(): React.JSX.Element;
-}
-export default ImageContainer;

package/dist/delivery/image-container.js

@@ -1,61 +0,0 @@
-import e from "./image-drop-target.js";
-import { Component as t } from "react";
-import n from "prop-types";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { styled as a } from "@mui/material/styles";
-//#region src/delivery/image-container.tsx
-var o = a("div")(({ theme: e }) => ({
-	margin: e.spacing(2),
-	position: "relative",
-	width: "fit-content"
-})), s = class extends t {
-	render() {
-		let { answers: t, canDrag: n, draggingElement: a, image: { height: s, src: c, width: l } = {}, onAnswerSelect: u, onDragAnswerBegin: d, onDragAnswerEnd: f, responseContainers: p, showDashedBorder: m, responseAreaFill: h, answerChoiceTransparency: g, responseContainerPadding: _, imageDropTargetPadding: v, maxResponsePerZone: y } = this.props;
-		return /* @__PURE__ */ i(o, { children: [/* @__PURE__ */ r("img", {
-			src: c,
-			height: s,
-			width: l
-		}), (p || []).map((i, o) => {
-			let c = i.height.replace("%", "") / 100 * s, p = i.width.replace("%", "") / 100 * l, b = i.x / 100 * l, x = i.y / 100 * s;
-			return /* @__PURE__ */ r(e, {
-				answers: t.filter((e) => e.containerIndex === i.index),
-				canDrag: n,
-				containerStyle: {
-					height: c,
-					width: p,
-					left: b,
-					top: x
-				},
-				draggingElement: a,
-				index: i.index,
-				onDrop: (e) => u(e, i.index),
-				onDragAnswerBegin: d,
-				onDragAnswerEnd: f,
-				showDashedBorder: m,
-				responseAreaFill: h,
-				answerChoiceTransparency: g,
-				responseContainerPadding: _,
-				imageDropTargetPadding: v,
-				maxResponsePerZone: y
-			}, i.id + o);
-		})] });
-	}
-};
-s.propTypes = {
-	answers: n.array.isRequired,
-	canDrag: n.bool.isRequired,
-	draggingElement: n.shape({}).isRequired,
-	image: n.object.isRequired,
-	onAnswerSelect: n.func.isRequired,
-	onDragAnswerBegin: n.func.isRequired,
-	onDragAnswerEnd: n.func.isRequired,
-	responseContainers: n.array.isRequired,
-	showDashedBorder: n.bool,
-	answerChoiceTransparency: n.bool,
-	responseAreaFill: n.string,
-	responseContainerPadding: n.string,
-	imageDropTargetPadding: n.string,
-	maxResponsePerZone: n.number
-};
-//#endregion
-export { s as default };

package/dist/delivery/image-drop-target.d.ts

@@ -1,45 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/src/image-drop-target.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-declare const ImageDropTarget: {
-    ({ answers, canDrag, containerStyle, draggingElement, onDragAnswerBegin, onDragAnswerEnd, showDashedBorder, responseAreaFill, responseContainerPadding, imageDropTargetPadding, answerChoiceTransparency, maxResponsePerZone, onDrop, index, }: {
-        answers: any;
-        canDrag: any;
-        containerStyle: any;
-        draggingElement: any;
-        onDragAnswerBegin: any;
-        onDragAnswerEnd: any;
-        showDashedBorder: any;
-        responseAreaFill: any;
-        responseContainerPadding?: string | undefined;
-        imageDropTargetPadding: any;
-        answerChoiceTransparency: any;
-        maxResponsePerZone: any;
-        onDrop: any;
-        index: any;
-    }): React.JSX.Element;
-    propTypes: {
-        answer: PropTypes.Requireable<object>;
-        answers: PropTypes.Requireable<any[]>;
-        canDrag: PropTypes.Validator<boolean>;
-        containerStyle: PropTypes.Validator<object>;
-        draggingElement: PropTypes.Validator<object>;
-        onDragAnswerBegin: PropTypes.Validator<(...args: any[]) => any>;
-        onDragAnswerEnd: PropTypes.Validator<(...args: any[]) => any>;
-        onDrop: PropTypes.Validator<(...args: any[]) => any>;
-        showDashedBorder: PropTypes.Requireable<boolean>;
-        responseAreaFill: PropTypes.Requireable<string>;
-        answerChoiceTransparency: PropTypes.Requireable<boolean>;
-        responseContainerPadding: PropTypes.Requireable<string>;
-        imageDropTargetPadding: PropTypes.Requireable<string>;
-        maxResponsePerZone: PropTypes.Requireable<number>;
-    };
-};
-export default ImageDropTarget;

package/dist/delivery/image-drop-target.js

@@ -1,90 +0,0 @@
-import e from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import t from "./possible-response.js";
-import { useEffect as n, useRef as r, useState as i } from "react";
-import { color as a } from "@pie-lib/render-ui";
-import o from "prop-types";
-import { useDroppable as s } from "@dnd-kit/core";
-import { jsx as c } from "react/jsx-runtime";
-import { styled as l } from "@mui/material/styles";
-//#region src/delivery/image-drop-target.tsx
-var u = l("div")(() => ({
-	display: "flex",
-	flexWrap: "wrap"
-})), d = l("div")(() => ({
-	position: "absolute",
-	boxSizing: "border-box",
-	"&.active": {
-		border: `2px solid ${a.text()}`,
-		backgroundColor: "rgba(230, 242, 252, .8)"
-	},
-	"&.dashed": { border: `2px dashed ${a.text()}` },
-	"&.is-over": {
-		border: "1px solid rgb(158, 158, 158)",
-		backgroundColor: "rgb(224, 224, 224)"
-	}
-})), f = ({ answers: a, canDrag: o, containerStyle: l, draggingElement: f, onDragAnswerBegin: p, onDragAnswerEnd: m, showDashedBorder: h, responseAreaFill: g, responseContainerPadding: _ = "10px", imageDropTargetPadding: v, answerChoiceTransparency: y, maxResponsePerZone: b, onDrop: x, index: S }) => {
-	let [C, w] = i(!1), T = r(null), E = r(null), { setNodeRef: D, isOver: O } = s({
-		id: `response-container-${S}`,
-		data: {
-			containerIndex: S,
-			onDrop: x
-		}
-	});
-	n(() => {
-		let e = T.current;
-		if (!e) return;
-		let t = (e) => {
-			e.preventDefault();
-		};
-		return e.addEventListener("touchstart", t, { passive: !1 }), () => {
-			e.removeEventListener("touchstart", t);
-		};
-	}, []);
-	let k = !!f.id;
-	return /* @__PURE__ */ c(d, {
-		ref: (e) => {
-			T.current = e, D(e);
-		},
-		className: e({
-			"is-over": O,
-			dashed: h && !k,
-			active: k
-		}),
-		style: {
-			padding: b === 1 ? "0" : _,
-			...l,
-			...g && !k && { backgroundColor: g }
-		},
-		children: a.length ? /* @__PURE__ */ c(u, {
-			ref: (e) => {
-				E.current = e?.getBoundingClientRect().height;
-			},
-			children: a.map((e) => /* @__PURE__ */ c(t, {
-				data: e,
-				canDrag: o,
-				onDragBegin: () => p(e),
-				onDragEnd: m,
-				answerChoiceTransparency: y,
-				containerStyle: { padding: v || (C ? "2px" : "6px 10px") }
-			}, e.id))
-		}) : null
-	});
-};
-f.propTypes = {
-	answer: o.object,
-	answers: o.array,
-	canDrag: o.bool.isRequired,
-	containerStyle: o.object.isRequired,
-	draggingElement: o.object.isRequired,
-	onDragAnswerBegin: o.func.isRequired,
-	onDragAnswerEnd: o.func.isRequired,
-	onDrop: o.func.isRequired,
-	showDashedBorder: o.bool,
-	responseAreaFill: o.string,
-	answerChoiceTransparency: o.bool,
-	responseContainerPadding: o.string,
-	imageDropTargetPadding: o.string,
-	maxResponsePerZone: o.number
-};
-//#endregion
-export { f as default };

package/dist/delivery/index.d.ts

@@ -1,20 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/src/index.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-export default class ImageClozeAssociation extends HTMLElement {
-    constructor();
-    set model(m: any);
-    isComplete(): any;
-    set session(s: any);
-    get session(): any;
-    updateAnswer(data: any): void;
-    _createAudioInfoToast(): HTMLDivElement;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    _render(): void;
-}

package/dist/delivery/index.js

@@ -1,110 +0,0 @@
-import e from "./root.js";
-import t from "react";
-import { createRoot as n } from "react-dom/client";
-import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
-import * as i from "@pie-lib/render-ui";
-import { EnableAudioAutoplayImage as a } from "@pie-lib/render-ui";
-import { ModelSetEvent as o, SessionChangedEvent as s } from "@pie-element/shared-player-events";
-//#region src/delivery/index.ts
-function c(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function l(e, t) {
-	return !e || c(e) ? e : c(e.default) ? e.default : t && c(e[t]) ? e[t] : t && c(e[t]?.default) ? e[t].default : e;
-}
-var u = l(a, "EnableAudioAutoplayImage") || l(p.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), d = i, f = d.default, p = f && typeof f == "object" ? f : d, m = class extends HTMLElement {
-	constructor() {
-		super(), this._root = null;
-	}
-	set model(e) {
-		this._model = e, this.dispatchEvent(new o(this.tagName.toLowerCase(), this.isComplete(), !!this._model)), this._render();
-	}
-	isComplete() {
-		let { autoplayAudioEnabled: e, completeAudioEnabled: t, completeResponses: n, duplicateResponses: r, hasUnplacedChoices: i, maxResponsePerZone: a, responseAreasToBeFilled: o } = this._model || {}, s = this;
-		if (e && t && !this.audioComplete && s) {
-			let e = s.querySelector("audio"), t = e && e.closest("#preview-prompt");
-			if (e && t) return !1;
-		}
-		if (!this._session || !this._session.answers) return !1;
-		let { answers: c } = this._session;
-		if (!Array.isArray(c)) return !1;
-		let l = [...new Map(c.map((e) => [e.containerIndex, e])).values()].length >= o;
-		if (a > 1) {
-			if (r || i) return l;
-			let e = c.map((e) => e.value);
-			return n.some((t) => t.every((t) => e.includes(t)));
-		}
-		return l;
-	}
-	set session(e) {
-		e && !e.answers && (e.answers = []), this._session = e, this._render();
-	}
-	get session() {
-		return this._session;
-	}
-	updateAnswer(e) {
-		this._session.answers = e, this._session.selector = "Mouse", this.dispatchEvent(new s(this.tagName.toLowerCase(), this.isComplete())), this._render();
-	}
-	_createAudioInfoToast() {
-		let e = document.createElement("div");
-		e.id = "play-audio-info", Object.assign(e.style, {
-			position: "absolute",
-			top: 0,
-			width: "100%",
-			height: "100%",
-			display: "flex",
-			justifyContent: "center",
-			alignItems: "center",
-			background: "white",
-			zIndex: "1000",
-			cursor: "pointer"
-		});
-		let t = document.createElement("img");
-		return t.src = u, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
-	}
-	connectedCallback() {
-		this._render(), new MutationObserver((e, t) => {
-			e.forEach((e) => {
-				if (e.type === "childList") {
-					let e = this.querySelector("audio"), n = e && e.closest("#preview-prompt");
-					if (!this._model || !this._model.autoplayAudioEnabled || e && !n || !e) return;
-					let r = this._createAudioInfoToast(), i = this.querySelector("#main-container"), a = () => {
-						this.querySelector("#play-audio-info") && (e.play(), i.removeChild(r)), document.removeEventListener("click", a);
-					};
-					setTimeout(() => {
-						e.paused && !this.querySelector("#play-audio-info") ? (i.appendChild(r), document.addEventListener("click", a)) : document.removeEventListener("click", a);
-					}, 500);
-					let o = () => {
-						let t = this.querySelector("#play-audio-info");
-						t && i.removeChild(t), e.removeEventListener("playing", o);
-					};
-					e.addEventListener("playing", o);
-					let c = () => {
-						this.audioComplete = !0, this.dispatchEvent(new s(this.tagName.toLowerCase(), this.isComplete())), e.removeEventListener("ended", c);
-					};
-					e.addEventListener("ended", c), this._audio = e, this._handlePlaying = o, this._handleEnded = c, this._enableAudio = a, t.disconnect();
-				}
-			});
-		}).observe(this, {
-			childList: !0,
-			subtree: !0
-		});
-	}
-	disconnectedCallback() {
-		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();
-	}
-	_render() {
-		if (this._model && this._session) {
-			let i = t.createElement(e, {
-				model: this._model,
-				session: this._session,
-				updateAnswer: this.updateAnswer.bind(this)
-			});
-			this._root ||= n(this), this._root.render(i), queueMicrotask(() => {
-				r(this);
-			});
-		}
-	}
-};
-//#endregion
-export { m as default };

package/dist/delivery/interactive-section.d.ts

@@ -1,15 +0,0 @@
-/**
- * @synced-from pie-elements/packages/image-cloze-association/src/interactive-section.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-declare class InteractiveSection extends React.Component {
-    getClassname(): string;
-    getPositionDirection(choicePosition: any): string;
-    render(): React.JSX.Element;
-}
-export default InteractiveSection;