@pie-element/drag-in-the-blank 0.1.0

package/dist/controller/index.js

@@ -0,0 +1,104 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isEmpty.js";
+import { choiceIsEmpty as t, getAllCorrectResponses as n } from "./utils.js";
+import r from "./defaults.js";
+import { getShuffledChoices as i, lockChoices as a, partialScoring as o } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var s = (e) => ({
+	...r,
+	...e
+});
+async function c(e, r, o, c) {
+	let u = s(e), d = {};
+	if (o.mode === "evaluate") {
+		let e = n(u) || {}, t = e.possibleResponses, i = e.numberOfPossibleResponses || 0, a, { value: o } = r || {};
+		for (let e = 0; e < i; e++) {
+			let n = Object.keys(t).reduce((n, r) => {
+				let i = t[r], a = o && o[r] || "";
+				return n.feedback[r] = i[e] === a, n.feedback[r] && (n.correctResponses += 1), n;
+			}, {
+				correctResponses: 0,
+				feedback: {}
+			});
+			(a === void 0 || n.correctResponses > a) && (a = n.correctResponses, d = n.feedback);
+		}
+	}
+	let f = u.choices && u.choices.filter((e) => !t(e));
+	a(u, r, o) || (f = await i(f, r, c, "id"));
+	let p = Object.values(u.correctResponse || {}).filter((e) => !!e).length, m = o.mode === "evaluate", h = {
+		...u,
+		prompt: u.promptEnabled ? u.prompt : null,
+		choices: f,
+		feedback: d,
+		mode: o.mode,
+		disabled: o.mode !== "gather",
+		responseCorrect: m ? l(u, r) === 1 : void 0,
+		correctResponse: m ? u.correctResponse : void 0,
+		responseAreasToBeFilled: p
+	};
+	return o.role === "instructor" && (o.mode === "view" || o.mode === "evaluate") ? (h.rationale = u.rationaleEnabled ? u.rationale : null, h.teacherInstructions = u.teacherInstructionsEnabled ? u.teacherInstructions : null) : (h.rationale = null, h.teacherInstructions = null), h;
+}
+var l = (e, t) => {
+	let r = n(e), i = r.possibleResponses, a = Object.keys(e.correctResponse).length, o = r.numberOfPossibleResponses || 0, s = 0, { value: c } = t || {};
+	for (let e = 0; e < o; e++) {
+		let t = Object.keys(i).reduce((t, n) => {
+			let r = i[n], a = c && c[n] || "";
+			return r[e] === a ? t : t - 1;
+		}, a);
+		if (t > s && (s = t), t === a) break;
+	}
+	let l = a ? (s / a).toFixed(2) : 0;
+	return parseFloat(l);
+}, u = (e, t, r) => {
+	let i = [], { value: a } = t || {}, s = Object.keys(e.correctResponse || {}), c = s.length;
+	if (i.push(`${c} response area(s) defined in this question.`), a && Object.keys(a).length > 0) {
+		let t = Object.entries(a).filter(([e, t]) => t && t.trim()).length;
+		i.push(`Student added choices to ${t} out of ${c} response area(s).`), s.forEach((t) => {
+			let n = a && a[t] || "", r = e.correctResponse[t] || "";
+			n.trim() ? i.push(`Response area ${t}: student placed '${n}' (correct answer: '${r}').`) : i.push(`Response area ${t}: left empty (correct answer: '${r}').`);
+		});
+	} else i.push("Student did not add any choices to response areas.");
+	let u = n(e);
+	u.possibleResponses;
+	let d = u.numberOfPossibleResponses || 0;
+	d > 1 && i.push(`${d} alternate response combinations are accepted for this question.`);
+	let f = o.enabled(e, r) ? "partial scoring" : "all-or-nothing scoring";
+	i.push(`Score calculated using ${f}.`);
+	let p = l(e, t);
+	return i.push(`Final score: ${p}.`), i;
+};
+function d(t, n, r = {}) {
+	return new Promise((i) => {
+		if (!n || e(n)) i({
+			score: 0,
+			empty: !0,
+			traceLog: ["Student did not add any choices to response areas. Score is 0."]
+		});
+		else {
+			let e = u(t, n, r), a = l(t, n);
+			i({
+				score: o.enabled(t, r) ? a : a === 1 ? 1 : 0,
+				empty: !1,
+				traceLog: e
+			});
+		}
+	});
+}
+var f = (e, t) => new Promise((n) => {
+	t.mode !== "evaluate" && t.role === "instructor" ? n({
+		value: e.correctResponse,
+		id: "1"
+	}) : n(null);
+}), p = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), m = (e = {}, t = {}) => {
+	let { choices: n, correctResponse: r, markup: i } = e, { minChoices: a = 2, maxChoices: o, maxResponseAreas: s } = t, c = {};
+	[
+		"teacherInstructions",
+		"prompt",
+		"rationale"
+	].forEach((n) => {
+		t[n]?.required && !p(e[n]) && (c[n] = "This field is required.");
+	});
+	let l = ((i || "").match(/\{\{(\d+)\}\}/g) || []).length, u = (n || []).length;
+	return (Object.values(r)?.filter((e) => !e)).length && (c.correctResponseError = "There should be a choice defined for each response area."), l > s ? c.responseAreasError = `No more than ${s} response areas should be defined.` : l < 1 && (c.responseAreasError = "There should be at least 1 response area defined."), u < a ? c.choicesError = `There should be at least ${a} tokens defined.` : u > o && (c.choicesError = `No more than ${o} tokens should be defined.`), c;
+};
+//#endregion
+export { f as createCorrectResponseSession, u as getLogTrace, l as getScore, c as model, s as normalize, d as outcome, m as validate };

package/dist/controller/utils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/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 getAllCorrectResponses: ({ correctResponse, alternateResponses }: {
+    correctResponse: any;
+    alternateResponses: any;
+}) => any;
+export declare const choiceIsEmpty: (choice: any) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/controller/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/controller/utils.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAMH,eAAO,MAAM,sBAAsB,GAAI;;;CAAuC,QAwB7E,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,WAAM,YASnC,CAAC"}

package/dist/controller/utils.js

@@ -0,0 +1,15 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/cloneDeep.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/reduce.js";
+//#region src/controller/utils.ts
+var n = /<(?!img)[^>]*>?/gm, r = ({ correctResponse: n, alternateResponses: r }) => t(n || {}, (t, n, i) => (t.possibleResponses[i] = [n], r && r[i] && (t.possibleResponses[i] = [...t.possibleResponses[i], ...e(r[i])]), (t.numberOfPossibleResponses === void 0 || t.numberOfPossibleResponses > t.possibleResponses[i].length) && (t.numberOfPossibleResponses = t.possibleResponses[i].length), t), {
+	possibleResponses: {},
+	numberOfPossibleResponses: void 0
+}), i = (e) => {
+	if (e) {
+		let { value: t = "" } = e;
+		return (t.replace(n, "") || "").trim() === "";
+	}
+	return !1;
+};
+//#endregion
+export { i as choiceIsEmpty, r as getAllCorrectResponses };

package/dist/delivery/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/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 isComplete: (session: any, model: any, audioComplete: any, elementContext: any) => boolean;
+export default class DragInTheBlank extends HTMLElement {
+    constructor();
+    set model(m: any);
+    set session(s: any);
+    get session(): any;
+    _render: any;
+    dispatchChangedEvent: any;
+    changeSession: any;
+    _createAudioInfoToast(): HTMLDivElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/delivery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/delivery/index.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAqCH,eAAO,MAAM,UAAU,GAAI,YAAO,EAAE,UAAK,EAAE,kBAAa,EAAE,mBAAc,YAsBvE,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,WAAW;;IAUrD,IAAI,KAAK,CAAC,CAAC,KAAA,EAYV;IAED,IAAI,OAAO,CAAC,CAAC,KAAA,EAGZ;IAED,IAAI,OAAO,QAEV;IAED,OAAO,EAAE,GAAG,CAcV;IAEF,oBAAoB,EAAE,GAAG,CAOvB;IAEF,aAAa,EAAE,GAAG,CAMhB;IAEF,qBAAqB;IA2BrB,iBAAiB;IA0FjB,oBAAoB;CAarB"}

package/dist/delivery/index.js

@@ -0,0 +1,105 @@
+import e from "./main.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 = (e, t, n, r) => {
+	let { autoplayAudioEnabled: i, completeAudioEnabled: a, responseAreasToBeFilled: o } = t || {};
+	if (i && a && !n && r) {
+		let e = r.querySelector("audio"), t = e && e.closest("#preview-prompt");
+		if (e && t) return !1;
+	}
+	return !e || !e.value ? !1 : Object.values(e.value || {}).filter((e) => !!e).length >= o;
+}, h = class extends HTMLElement {
+	constructor() {
+		super(), this._model = null, this._session = null, this._audioInitialized = !1, this.audioComplete = !1, this._root = null;
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new o(this.tagName.toLowerCase(), m(this._session, this._model, this.audioComplete, this), !!this._model)), this._audioInitialized = !1, this._render();
+	}
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	_render = () => {
+		if (this._model && this._session) {
+			let i = t.createElement(e, {
+				model: this._model,
+				value: this._session.value,
+				onChange: this.changeSession
+			});
+			this._root ||= n(this), this._root.render(i), setTimeout(() => r(this), 0);
+		}
+	};
+	dispatchChangedEvent = () => {
+		this.dispatchEvent(new s(this.tagName.toLowerCase(), m(this._session, this._model, this.audioComplete, this)));
+	};
+	changeSession = (e) => {
+		this.session.value = e, this.session.selector = "Mouse", this.dispatchChangedEvent(), 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") {
+					if (this._audioInitialized) return;
+					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 = () => {
+						this._session.audioStartTime = this._session.audioStartTime || (/* @__PURE__ */ new Date()).getTime();
+						let t = this.querySelector("#play-audio-info");
+						t && i.removeChild(t), e.removeEventListener("playing", o);
+					};
+					e.addEventListener("playing", o);
+					let s = () => {
+						this._session.audioEndTime = this._session.audioEndTime || (/* @__PURE__ */ new Date()).getTime();
+						let { audioStartTime: t, audioEndTime: n, waitTime: r } = this._session;
+						!r && t && n && (this._session.waitTime = n - t), this.audioComplete = !0, this.dispatchChangedEvent(), e.removeEventListener("ended", s);
+					};
+					e.addEventListener("ended", s), this._audio = e, this._handlePlaying = o, this._handleEnded = s, this._enableAudio = a, this._audioInitialized = !0, 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();
+	}
+};
+//#endregion
+export { h as default, m as isComplete };

package/dist/delivery/main.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/src/main.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.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Requireable<object>;
+        value: PropTypes.Requireable<object>;
+        feedback: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        value: {};
+    };
+    state: {
+        showCorrectAnswer: boolean;
+    };
+    toggleShowCorrect: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    render(): React.JSX.Element;
+}
+export default Main;
+//# sourceMappingURL=main.d.ts.map

package/dist/delivery/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/delivery/main.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAqDnC,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS;IACvC,MAAM,CAAC,SAAS;;;;;MAKd;IAEF,MAAM,CAAC,YAAY;;MAEjB;IAEF,KAAK;;MAEH;IAEF,iBAAiB,EAAE,GAAG,CAEpB;IAEF,gCAAgC,CAAC,SAAS,KAAA;IAQ1C,MAAM;CAmDP;AAED,eAAe,IAAI,CAAC"}

package/dist/delivery/main.js

@@ -0,0 +1,83 @@
+import e from "react";
+import * as t from "@pie-lib/render-ui";
+import { Collapsible as n, PreviewPrompt as r, UiLayout as i, color as a, hasMedia as o, hasText as s } from "@pie-lib/render-ui";
+import c from "prop-types";
+import l from "@pie-lib/correct-answer-toggle";
+import { DragInTheBlank as u } from "@pie-lib/mask-markup";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { styled as p } from "@mui/material/styles";
+//#region src/delivery/main.tsx
+function m(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function h(e, t) {
+	return !e || m(e) ? e : m(e.default) ? e.default : t && m(e[t]) ? e[t] : t && m(e[t]?.default) ? e[t].default : e;
+}
+var g = h(i, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(r, "PreviewPrompt") || h(x.PreviewPrompt, "PreviewPrompt"), v = h(n, "Collapsible") || h(x.Collapsible, "Collapsible"), y = t, b = y.default, x = b && typeof b == "object" ? b : y, S = p(g)({
+	color: a.text(),
+	backgroundColor: a.background(),
+	"& tr > td": { color: a.text() },
+	position: "relative"
+}), C = p(v)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), w = p(v)(({ theme: e }) => ({ marginTop: e.spacing(2) })), T = class extends e.Component {
+	static propTypes = {
+		model: c.object,
+		value: c.object,
+		feedback: c.object,
+		onChange: c.func
+	};
+	static defaultProps = { value: {} };
+	state = { showCorrectAnswer: !1 };
+	toggleShowCorrect = () => {
+		this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: t } = e;
+		t && !t.correctResponse && this.state.showCorrectAnswer !== !1 && this.setState({ showCorrectAnswer: !1 });
+	}
+	render() {
+		let { showCorrectAnswer: e } = this.state, { model: t, onChange: n, value: r } = this.props, { extraCSSRules: i, prompt: a, mode: c, language: p, fontSizeFactor: m, autoplayAudioEnabled: h, customAudioButton: g } = t, v = {
+			...t,
+			value: r
+		}, y = c === "evaluate", b = t.rationale && (s(t.rationale) || o(t.rationale));
+		return /* @__PURE__ */ f(S, {
+			extraCSSRules: i,
+			id: "main-container",
+			fontSizeFactor: m,
+			children: [
+				t.teacherInstructions && (s(t.teacherInstructions) || o(t.teacherInstructions)) && /* @__PURE__ */ d(C, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ d(_, { prompt: t.teacherInstructions })
+				}),
+				a && /* @__PURE__ */ d(_, {
+					className: "prompt",
+					prompt: a,
+					autoplayAudioEnabled: h,
+					customAudioButton: g
+				}),
+				/* @__PURE__ */ d(l, {
+					show: y,
+					toggled: e,
+					onToggle: this.toggleShowCorrect,
+					language: p
+				}),
+				/* @__PURE__ */ d(u, {
+					...v,
+					onChange: n,
+					showCorrectAnswer: e
+				}),
+				b && /* @__PURE__ */ d(w, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: /* @__PURE__ */ d(_, { prompt: t.rationale })
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { T as default };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './delivery/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.iife.d.ts

@@ -0,0 +1,9 @@
+/**
+ * IIFE entry point for drag-in-the-blank element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;
+//# sourceMappingURL=index.iife.d.ts.map

package/dist/index.iife.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.iife.d.ts","sourceRoot":"","sources":["../src/index.iife.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,OAAO,MAAM,YAAY,CAAC;AAQjC,eAAe,OAAO,CAAC"}