@pie-element/multiple-choice 0.1.0

package/dist/delivery/index.js

@@ -0,0 +1,167 @@
+import e from "./main.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/debounce.js";
+import { updateSessionMetadata as n, updateSessionValue as r } from "./session-updater.js";
+import i from "react";
+import * as a from "@pie-lib/render-ui";
+import { EnableAudioAutoplayImage as o } from "@pie-lib/render-ui";
+import { createRoot as s } from "react-dom/client";
+import c from "debug";
+import { ModelSetEvent as l, SessionChangedEvent as u } from "@pie-element/shared-player-events";
+import { renderMath as d } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+function f(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function p(e, t) {
+	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;
+}
+var m = p(o, "EnableAudioAutoplayImage") || p(_.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), h = a, g = h.default, _ = g && typeof g == "object" ? g : h, v = c("pie-ui:multiple-choice"), y = (e, t, n, r) => {
+	let { autoplayAudioEnabled: i, completeAudioEnabled: a } = t || {};
+	if (i && a && !n && r) {
+		let e = r.querySelector("audio"), t = e && e.closest("#preview-prompt");
+		if (e && t) return !1;
+	}
+	if (!e || !e.value) return !1;
+	let { choiceMode: o, minSelections: s = 1, maxSelections: c } = t || {}, l = e.value.length || 0;
+	return o === "radio" ? !!l : !(l < s || l > c);
+}, b = class extends HTMLElement {
+	constructor() {
+		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 = t(() => {
+			if (this._model && this._session) {
+				var t = i.createElement(e, {
+					model: this._model,
+					session: this._session,
+					options: this._options,
+					onChoiceChanged: this._onChange.bind(this),
+					onShowCorrectToggle: this.onShowCorrectToggle.bind(this)
+				});
+				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 ||= s(this), this._root.render(t), this._model.keyboardEventsEnabled === !0 && !this._keyboardEventsEnabled && this.enableKeyboardEvents();
+			} else v("skip");
+		}, 50, {
+			leading: !1,
+			trailing: !0
+		}), this._dispatchResponseChanged = t(() => {
+			this.dispatchEvent(new u(this.tagName.toLowerCase(), y(this._session, this._model, this.audioComplete, this)));
+		}), this._dispatchModelSet = t(() => {
+			this.dispatchEvent(new l(this.tagName.toLowerCase(), y(this._session, this._model, this.audioComplete, this), this._model !== void 0));
+		}, 50, {
+			leading: !1,
+			trailing: !0
+		});
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), v("render complete - render math"), d(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	onShowCorrectToggle() {
+		d(this);
+	}
+	setLangAttribute() {
+		let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
+		this.setAttribute("lang", t);
+	}
+	set model(e) {
+		this._model = e, this._rerender(), this._audioInitialized = !1, this._dispatchModelSet();
+	}
+	get session() {
+		return this._session;
+	}
+	get options() {
+		return this._options;
+	}
+	set options(e) {
+		this._options = e, this._rerender();
+	}
+	set session(e) {
+		this._session = e, this._rerender(), this._dispatchResponseChanged();
+	}
+	_onChange(e) {
+		r(this._session, this._model.choiceMode, e), this._dispatchResponseChanged(), this._rerender();
+	}
+	_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 = m, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
+	}
+	connectedCallback() {
+		this._initMathObserver(), this._rerender(), new MutationObserver((e, t) => {
+			e.forEach((e) => {
+				if (e.type === "childList") {
+					if (this._audioInitialized) return;
+					let e = this.querySelector("audio"), r = e && e.closest("#preview-prompt");
+					if (!this._model || !this._model.autoplayAudioEnabled || e && !r || !e) return;
+					let i = this._createAudioInfoToast(), a = this.querySelector("#main-container"), o = () => {
+						this.querySelector("#play-audio-info") && (e.play(), a.removeChild(i)), document.removeEventListener("click", o);
+					};
+					setTimeout(() => {
+						e.paused && !this.querySelector("#play-audio-info") ? (a.appendChild(i), document.addEventListener("click", o)) : document.removeEventListener("click", o);
+					}, 500);
+					let s = () => {
+						n(this._session, { audioStartTime: (/* @__PURE__ */ new Date()).getTime() });
+						let t = this.querySelector("#play-audio-info");
+						t && a.removeChild(t), e.removeEventListener("playing", s);
+					};
+					e.addEventListener("playing", s);
+					let c = () => {
+						n(this._session, { audioEndTime: (/* @__PURE__ */ new Date()).getTime() }), this.audioComplete = !0, this._dispatchResponseChanged(), e.removeEventListener("ended", c);
+					};
+					e.addEventListener("ended", c), this._audio = e, this._handlePlaying = s, this._handleEnded = c, this._enableAudio = o, this._audioInitialized = !0, t.disconnect();
+				}
+			});
+		}).observe(this, {
+			childList: !0,
+			subtree: !0
+		});
+	}
+	enableKeyboardEvents() {
+		this._keyboardEventsEnabled ||= (window.addEventListener("keydown", this._boundHandleKeyDown), !0);
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), 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();
+	}
+	handleKeyDown(e) {
+		if (!this._model || !this._session) return;
+		let { mode: t } = this._model;
+		if (t !== "gather") return;
+		let n = ((e) => {
+			let t = e >= "1" && e <= "9" ? e - "1" : e === "0" ? 9 : -1, n = /^[a-jA-J]$/.test(e) ? e.toLowerCase().charCodeAt(0) - 97 : -1;
+			return t >= 0 ? t : n;
+		})(e.key);
+		if (n === void 0 || n <= -1 || n >= this._model.choices?.length) return;
+		let r = this._session.value || [], i = this._model.choices[n].value, a = {
+			value: i,
+			selected: !r.includes(i),
+			selector: "Keyboard"
+		};
+		this._onChange(a);
+	}
+};
+//#endregion
+export { b as default, y as isComplete };

package/dist/delivery/main.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/main.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 class Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Requireable<object>;
+        session: PropTypes.Requireable<object>;
+        options: PropTypes.Requireable<object>;
+        onChoiceChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        onShowCorrectToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        extraCSSRules: PropTypes.Requireable<PropTypes.InferProps<{
+            names: PropTypes.Requireable<(string | null | undefined)[]>;
+            rules: PropTypes.Requireable<string>;
+        }>>;
+    };
+    static defaultProps: {
+        model: {};
+        session: {};
+    };
+    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;AAgCnC,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS;IAChC,MAAM,CAAC,SAAS;;;;;;;;;;MAUd;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEF,MAAM;CAiBP;AAED,eAAe,IAAI,CAAC"}

package/dist/delivery/main.js

@@ -0,0 +1,47 @@
+import e from "./multiple-choice.js";
+import t from "react";
+import n from "prop-types";
+import * as r from "@pie-lib/render-ui";
+import { PreviewLayout as i } from "@pie-lib/render-ui";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/delivery/main.tsx
+function o(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function s(e, t) {
+	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;
+}
+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 {
+	static propTypes = {
+		model: n.object,
+		session: n.object,
+		options: n.object,
+		onChoiceChanged: n.func,
+		onShowCorrectToggle: n.func,
+		extraCSSRules: n.shape({
+			names: n.arrayOf(n.string),
+			rules: n.string
+		})
+	};
+	static defaultProps = {
+		model: {},
+		session: {}
+	};
+	render() {
+		let { model: t, onChoiceChanged: n, session: r, onShowCorrectToggle: i, options: o } = this.props, { extraCSSRules: s, fontSizeFactor: l } = t;
+		return /* @__PURE__ */ a(c, {
+			extraCSSRules: s,
+			fontSizeFactor: l,
+			classes: {},
+			children: /* @__PURE__ */ a(e, {
+				...t,
+				options: o,
+				session: r,
+				onChoiceChanged: n,
+				onShowCorrectToggle: i
+			})
+		});
+	}
+};
+//#endregion
+export { f as default };

package/dist/delivery/multiple-choice.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/multiple-choice.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';
+export declare class MultipleChoice extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        choiceMode: PropTypes.Requireable<string>;
+        keyMode: PropTypes.Requireable<string>;
+        choices: PropTypes.Requireable<any[]>;
+        partLabel: PropTypes.Requireable<string>;
+        prompt: PropTypes.Requireable<string>;
+        teacherInstructions: PropTypes.Requireable<string>;
+        session: PropTypes.Requireable<object>;
+        disabled: PropTypes.Requireable<boolean>;
+        onChoiceChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        responseCorrect: PropTypes.Requireable<boolean>;
+        correctResponse: PropTypes.Requireable<any[]>;
+        choicesLayout: PropTypes.Requireable<string>;
+        gridColumns: PropTypes.Requireable<string>;
+        alwaysShowCorrect: PropTypes.Requireable<boolean>;
+        animationsDisabled: PropTypes.Requireable<boolean>;
+        language: PropTypes.Requireable<string>;
+        selectedAnswerBackgroundColor: PropTypes.Requireable<string>;
+        selectedAnswerStrokeColor: PropTypes.Requireable<string>;
+        selectedAnswerStrokeWidth: PropTypes.Requireable<string>;
+        hoverAnswerBackgroundColor: PropTypes.Requireable<string>;
+        hoverAnswerStrokeColor: PropTypes.Requireable<string>;
+        hoverAnswerStrokeWidth: PropTypes.Requireable<string>;
+        onShowCorrectToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        isSelectionButtonBelow: PropTypes.Requireable<boolean>;
+        minSelections: PropTypes.Requireable<number>;
+        maxSelections: PropTypes.Requireable<number>;
+        autoplayAudioEnabled: PropTypes.Requireable<boolean>;
+        customAudioButton: {
+            playImage: PropTypes.Requireable<string>;
+            pauseImage: PropTypes.Requireable<string>;
+        };
+        options: PropTypes.Requireable<object>;
+    };
+    constructor(props: any);
+    isSelected(value: any): any;
+    handleChange: any;
+    onToggle: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    indexToSymbol(index: any): string;
+    getCorrectness: any;
+    getChecked(choice: any): any;
+    renderHeading(): React.JSX.Element | null;
+    handleGroupFocus: any;
+    render(): React.JSX.Element;
+}
+export default MultipleChoice;
+//# sourceMappingURL=multiple-choice.d.ts.map

package/dist/delivery/multiple-choice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiple-choice.d.ts","sourceRoot":"","sources":["../../src/delivery/multiple-choice.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAqGnC,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS;IACjD,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmCd;gBAEU,KAAK,KAAA;IAYjB,UAAU,CAAC,KAAK,KAAA;IAOhB,YAAY,EAAE,GAAG,CAef;IAEF,QAAQ,EAAE,GAAG,CAQX;IAEF,gCAAgC,CAAC,SAAS,KAAA;IAkB1C,aAAa,CAAC,KAAK,KAAA;IAYnB,cAAc,EAAE,GAAG,CAyBjB;IAEF,UAAU,CAAC,MAAM,KAAA;IAoBjB,aAAa;IAcb,gBAAgB,EAAE,GAAG,CAcnB;IAEF,MAAM;CA0JP;AAQD,eAAe,cAAc,CAAC"}

package/dist/delivery/multiple-choice.js

@@ -0,0 +1,241 @@
+import e from "./choice.js";
+import t from "react";
+import n from "prop-types";
+import * as r from "@pie-lib/render-ui";
+import { Collapsible as i, PreviewPrompt as a, color as o } from "@pie-lib/render-ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@pie-lib/correct-answer-toggle";
+import u from "classnames";
+import { styled as d } from "@mui/material/styles";
+import f from "@mui/material/Box";
+import p from "@pie-lib/translator";
+//#region src/delivery/multiple-choice.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(a, "PreviewPrompt") || h(b.PreviewPrompt, "PreviewPrompt"), _ = h(i, "Collapsible") || h(b.Collapsible, "Collapsible"), v = r, y = v.default, b = y && typeof y == "object" ? y : v, { translator: x } = p, S = d(f)({
+	color: o.text(),
+	backgroundColor: o.background(),
+	"& *": { "-webkit-font-smoothing": "antialiased" },
+	position: "relative",
+	"& legend": { border: "none !important" }
+}), C = d("h2")(({ theme: e }) => ({
+	display: "block",
+	fontSize: "inherit",
+	margin: "0",
+	fontWeight: "normal",
+	paddingBottom: e.spacing(2)
+})), w = d(f)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), T = d(f)({
+	display: "flex",
+	flexDirection: "row",
+	flexWrap: "wrap"
+}), E = d(f)({ display: "grid" }), D = d("fieldset")({
+	border: "0px",
+	padding: "0.01em 0 0 0",
+	margin: "0px",
+	minWidth: "0px",
+	"&:focus": { outline: "none" }
+}), O = d("h3")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), k = d("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), A = class extends t.Component {
+	static propTypes = {
+		className: n.string,
+		mode: n.oneOf([
+			"gather",
+			"view",
+			"evaluate"
+		]),
+		choiceMode: n.oneOf(["radio", "checkbox"]),
+		keyMode: n.oneOf([
+			"numbers",
+			"letters",
+			"none"
+		]),
+		choices: n.array,
+		partLabel: n.string,
+		prompt: n.string,
+		teacherInstructions: n.string,
+		session: n.object,
+		disabled: n.bool,
+		onChoiceChanged: n.func,
+		responseCorrect: n.bool,
+		correctResponse: n.array,
+		choicesLayout: n.oneOf([
+			"vertical",
+			"grid",
+			"horizontal"
+		]),
+		gridColumns: n.string,
+		alwaysShowCorrect: n.bool,
+		animationsDisabled: n.bool,
+		language: n.string,
+		selectedAnswerBackgroundColor: n.string,
+		selectedAnswerStrokeColor: n.string,
+		selectedAnswerStrokeWidth: n.string,
+		hoverAnswerBackgroundColor: n.string,
+		hoverAnswerStrokeColor: n.string,
+		hoverAnswerStrokeWidth: n.string,
+		onShowCorrectToggle: n.func,
+		isSelectionButtonBelow: n.bool,
+		minSelections: n.number,
+		maxSelections: n.number,
+		autoplayAudioEnabled: n.bool,
+		customAudioButton: {
+			playImage: n.string,
+			pauseImage: n.string
+		},
+		options: n.object
+	};
+	constructor(e) {
+		super(e), this.state = {
+			showCorrect: this.props.options && this.props.alwaysShowCorrect || !1,
+			maxSelectionsErrorState: !1
+		}, this.onToggle = this.onToggle.bind(this), this.firstInputRef = t.createRef();
+	}
+	isSelected(e) {
+		let t = this.props.session && this.props.session.value;
+		return t && t.indexOf && t.indexOf(e) >= 0;
+	}
+	handleChange = (e) => {
+		let { value: t, checked: n } = e.target, { maxSelections: r, onChoiceChanged: i, session: a } = this.props;
+		a.value && a.value.length >= r && (this.setState({ maxSelectionsErrorState: n }), n) || i({
+			value: t,
+			selected: n,
+			selector: "Mouse"
+		});
+	};
+	onToggle = () => {
+		this.props.mode === "evaluate" && this.setState({ showCorrect: !this.state.showCorrect }, () => {
+			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
+		});
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		!e.correctResponse && this.state.showCorrect !== !1 && this.setState({ showCorrect: !1 }, () => {
+			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
+		}), e.options && e.alwaysShowCorrect && this.state.showCorrect !== !0 && this.setState({ showCorrect: !0 }, () => {
+			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
+		});
+	}
+	indexToSymbol(e) {
+		return this.props.keyMode === "numbers" ? `${e + 1}` : this.props.keyMode === "letters" ? String.fromCharCode(97 + e).toUpperCase() : "";
+	}
+	getCorrectness = (e = {}) => {
+		let t = e.correct, n = this.isSelected(e.value);
+		if (this.state.showCorrect) return t ? "correct" : void 0;
+		if (t) return n ? "correct" : "incorrect";
+		if (n) return "incorrect";
+	};
+	getChecked(e) {
+		return this.props.options && this.props.alwaysShowCorrect || this.state.showCorrect && this.props.mode === "evaluate" ? e.correct || !1 : this.isSelected(e.value);
+	}
+	renderHeading() {
+		let { mode: e, choiceMode: t } = this.props;
+		return e === "gather" ? t === "radio" ? /* @__PURE__ */ s(O, { children: "Multiple Choice Question" }) : /* @__PURE__ */ s(O, { children: "Multiple Select Question" }) : null;
+	}
+	handleGroupFocus = (e) => {
+		let t = e.currentTarget, n = document.activeElement;
+		t.contains(n) && n !== t || (!e.relatedTarget || t.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_PRECEDING) && this.firstInputRef?.current && this.firstInputRef.current.focus();
+	};
+	render() {
+		let { mode: t, disabled: n, className: r, choices: i = [], choiceMode: a, gridColumns: o, partLabel: d, prompt: p, responseCorrect: m, teacherInstructions: h, alwaysShowCorrect: v, animationsDisabled: y, language: b, isSelectionButtonBelow: O, minSelections: A, maxSelections: j, autoplayAudioEnabled: M, session: N, customAudioButton: P, options: F } = this.props, { showCorrect: I, maxSelectionsErrorState: L } = this.state, R = t === "evaluate", z = R && !m, B = o > 1 ? { gridTemplateColumns: `repeat(${o}, 1fr)` } : void 0, V = N.value && N.value.length || 0, H = /* @__PURE__ */ s(g, {
+			tagName: "div",
+			className: "prompt",
+			defaultClassName: "teacher-instructions",
+			prompt: h
+		}), U = () => A && j ? A === j ? x.t("translation:multipleChoice:minmaxSelections_equal", {
+			lng: b,
+			minSelections: A
+		}) : x.t("translation:multipleChoice:minmaxSelections_range", {
+			lng: b,
+			minSelections: A,
+			maxSelections: j
+		}) : A ? x.t("translation:multipleChoice:minSelections", {
+			lng: b,
+			minSelections: A
+		}) : "", W = this.props.choicesLayout === "grid" ? E : this.props.choicesLayout === "horizontal" ? T : f;
+		return /* @__PURE__ */ c(S, {
+			id: "main-container",
+			className: u(r, "multiple-choice"),
+			children: [
+				d && /* @__PURE__ */ s(C, { children: d }),
+				this.renderHeading(),
+				h && /* @__PURE__ */ s(w, { children: y ? H : /* @__PURE__ */ s(_, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: H
+				}) }),
+				/* @__PURE__ */ c(D, {
+					tabIndex: 0,
+					onFocus: this.handleGroupFocus,
+					role: a === "radio" ? "radiogroup" : "group",
+					children: [
+						/* @__PURE__ */ s(g, {
+							className: "prompt",
+							defaultClassName: "prompt",
+							prompt: p,
+							tagName: "legend",
+							autoplayAudioEnabled: M,
+							customAudioButton: P
+						}),
+						!(F && v) && /* @__PURE__ */ s(l, {
+							show: z,
+							toggled: I,
+							onToggle: this.onToggle.bind(this),
+							language: b
+						}),
+						/* @__PURE__ */ s(W, {
+							style: B,
+							children: i.map((t, r) => /* @__PURE__ */ s(e, {
+								autoFocusRef: r === 0 ? this.firstInputRef : null,
+								choicesLayout: this.props.choicesLayout,
+								selectedAnswerBackgroundColor: this.props.selectedAnswerBackgroundColor,
+								selectedAnswerStrokeColor: this.props.selectedAnswerStrokeColor,
+								selectedAnswerStrokeWidth: this.props.selectedAnswerStrokeWidth,
+								hoverAnswerBackgroundColor: this.props.hoverAnswerBackgroundColor,
+								hoverAnswerStrokeColor: this.props.hoverAnswerStrokeColor,
+								hoverAnswerStrokeWidth: this.props.hoverAnswerStrokeWidth,
+								gridColumns: o,
+								choice: t,
+								index: r,
+								choicesLength: i.length,
+								showCorrect: I,
+								isEvaluateMode: R,
+								choiceMode: a,
+								disabled: n,
+								tagName: d ? `group-${d}` : "group",
+								onChoiceChanged: this.handleChange,
+								hideTick: t.hideTick,
+								checked: this.getChecked(t),
+								correctness: R ? this.getCorrectness(t) : void 0,
+								displayKey: this.indexToSymbol(r),
+								isSelectionButtonBelow: O
+							}, `choice-${r}`))
+						})
+					]
+				}),
+				a === "checkbox" && V < A && /* @__PURE__ */ s(k, { children: U() }),
+				a === "checkbox" && L && /* @__PURE__ */ s(k, { children: x.t(`translation:multipleChoice:maxSelections_${j === 1 ? "one" : "other"}`, {
+					lng: b,
+					maxSelections: j
+				}) })
+			]
+		});
+	}
+};
+A.defaultProps = { session: { value: [] } };
+//#endregion
+export { A as default };

package/dist/delivery/session-updater.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/session-updater.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 function updateSessionValue(session: any, choiceMode: any, data: any): void;
+export declare function updateSessionMetadata(session: any, metadata: any): void;
+//# sourceMappingURL=session-updater.d.ts.map

package/dist/delivery/session-updater.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-updater.d.ts","sourceRoot":"","sources":["../../src/delivery/session-updater.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,wBAAgB,kBAAkB,CAAC,OAAO,KAAA,EAAE,UAAU,KAAA,EAAE,IAAI,KAAA,QAoB3D;AAED,wBAAgB,qBAAqB,CAAC,OAAO,KAAA,EAAE,QAAQ,KAAA,QAQtD"}

package/dist/delivery/session-updater.js

@@ -0,0 +1,9 @@
+//#region src/delivery/session-updater.ts
+function e(e, t, n) {
+	e.value = e.value || [], t === "checkbox" && (n.selected ? e.value = Array.from(new Set([...e.value, n.value])) : e.value = e.value.filter((e) => e !== n.value)), t === "radio" && (n.selected ? e.value = [n.value] : e.value = []), e.selector = n.selector;
+}
+function t(e, t) {
+	e.audioStartTime = e.audioStartTime || t.audioStartTime, e.audioEndTime = e.audioEndTime || t.audioEndTime, !e.waitTime && e.audioStartTime && e.audioEndTime && (e.waitTime = e.audioEndTime - e.audioStartTime);
+}
+//#endregion
+export { t as updateSessionMetadata, e as updateSessionValue };

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 multiple-choice 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"}