@pie-element/inline-dropdown 10.1.1 → 10.1.2-next.0

package/dist/controller/index.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/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;
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ * @param {*} updateSession - optional - a function that will set the properties passed into it on the session.
+ */
+export declare function model(question: any, session: any, env: any, updateSession: any): Promise<{
+    disabled: boolean;
+    mode: any;
+    prompt: any;
+    displayType: any;
+    markup: any;
+    choices: any;
+    feedback: {};
+    responseCorrect: boolean | undefined;
+    rationale: any;
+    teacherInstructions: any;
+    language: any;
+    extraCSSRules: any;
+}>;
+export declare const getScore: (config: 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[];
+/**
+ *
+ * The score is partial by default for checkbox mode, allOrNothing for radio mode.
+ * To disable partial scoring for checkbox mode you either set model.partialScoring = false or env.partialScoring =
+ * false. the value in `env` will override the value in `model`.
+ * @param {Object} model - the main model
+ * @param {boolean} model.partialScoring - is partial scoring enabled (if undefined set to to true)
+ * @param {*} session
+ * @param {Object} env
+ * @param {boolean} env.partialScoring - is partial scoring enabled (if undefined default to true) This overrides
+ *   `model.partialScoring`.
+ */
+export declare function outcome(model: 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

@@ -0,0 +1,126 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/map.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/reduce.js";
+import r from "./defaults.js";
+import { getAllCorrectResponses as i } from "./utils.js";
+import { getShuffledChoices as a, lockChoices as o, partialScoring as s } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var c = (e) => e ? "correct" : "incorrect", l = (e) => ({
+	...r,
+	...e
+});
+async function u(r, s, u, f) {
+	let p = l(r), { value: m = {} } = s || {}, h = n(p.choices, (t, n, r) => (t[r] = e(n, (e) => e), t), {}), g = {};
+	if (u.mode === "evaluate") {
+		let e = i(p), t = Object.keys(e).length, r = 0;
+		for (let i = 0; i < t; i++) {
+			let a = n(e, (e, t, n) => {
+				let r = m && m[n] || "", a = t[i] || "", o = r && a && a === r;
+				return e.feedback[n] = c(o), o && (e.correctResponses += 1), e;
+			}, {
+				correctResponses: 0,
+				feedback: {}
+			});
+			if (a.correctResponses >= r && (r = a.correctResponses, g = a.feedback), a.correctResponses === t) break;
+		}
+	}
+	if (!o(p, s, u)) {
+		let e = {}, n = Object.keys(h), r = (t) => (n, r, i) => new Promise((n) => {
+			e[t] = i.shuffledValues, n();
+		}), i;
+		for (i = 0; i < n.length; i++) {
+			let e = n[i], t = s?.shuffledValues?.[e];
+			h[e] = await a(h[e], { shuffledValues: Array.isArray(t) ? t : [] }, r(e), "value");
+		}
+		t(e) || s && f && typeof f == "function" && f(s.id, s.element, { shuffledValues: e }).catch((e) => {
+			console.error("update session failed", e);
+		});
+	}
+	let _ = null, v = null, y = (Object.keys(h) || []).reduce((e, t) => (e[t] = (h[t] || []).map((e) => ({
+		...e,
+		rationale: null
+	})), e), {});
+	return u.role === "instructor" && (u.mode === "view" || u.mode === "evaluate") ? (v = p.rationaleEnabled ? p.rationale : null, _ = p.teacherInstructionsEnabled ? p.teacherInstructions : null, h = p.choiceRationaleEnabled ? p.choices : y) : (v = null, _ = null, h = y), {
+		disabled: u.mode !== "gather",
+		mode: u.mode,
+		prompt: p.promptEnabled ? p.prompt : null,
+		displayType: p.displayType,
+		markup: p.markup,
+		choices: h,
+		feedback: g,
+		responseCorrect: u.mode === "evaluate" ? d(p, s) === 1 : void 0,
+		rationale: v,
+		teacherInstructions: _,
+		language: p.language,
+		extraCSSRules: p.extraCSSRules
+	};
+}
+var d = (e, t) => {
+	let { value: r = {} } = t || {}, a = e && e.choices ? Object.keys(e.choices).length : 0, o = i(e), s = 0;
+	for (let e = 0; e < a; e++) {
+		let t = n(o, (t, n, i) => {
+			let a = r && r[i] || "", o = n[e] || "";
+			return o && a && o === a ? t : t - 1;
+		}, a);
+		if (t > s && (s = t), t === a) break;
+	}
+	let c = (s / a).toFixed(2);
+	return parseFloat(c);
+}, f = (e, t, n) => {
+	let r = [], { value: a = {} } = t || {}, o = i(e), c = Object.keys(o), l = c.length;
+	if (r.push(`${l} dropdown response area(s) defined in this question.`), a && Object.keys(a).length > 0) {
+		let e = Object.entries(a).filter(([e, t]) => t && t.trim()).length;
+		r.push(`Student selected options in ${e} out of ${l} dropdown(s).`), c.forEach((e) => {
+			let t = a && a[e] || "", n = o[e] || [];
+			t.trim() ? r.push(`Dropdown ${parseInt(e) + 1}: student selected '${t}' (correct options: [${n.map((e) => `'${e}'`).join(", ")}]).`) : r.push(`Dropdown ${parseInt(e) + 1}: no selection made (correct options: [${n.map((e) => `'${e}'`).join(", ")}]).`);
+		});
+	} else r.push("Student did not make any selections in the dropdowns.");
+	let u = s.enabled(e, n);
+	r.push(`Scoring method: ${u ? "partial scoring" : "all-or-nothing scoring"}.`);
+	let f = d(e, t);
+	return r.push(`Final score: ${f}.`), r;
+};
+function p(e, n, r = {}) {
+	return new Promise((i) => {
+		if (!n || t(n)) i({
+			score: 0,
+			empty: !0,
+			traceLog: ["Student did not make any selections in the dropdowns. Score is 0."]
+		});
+		else {
+			let t = f(e, n, r), a = d(e, n);
+			i({
+				score: s.enabled(e, r) ? a : Math.floor(a),
+				empty: !1,
+				traceLog: t
+			});
+		}
+	});
+}
+var m = (e, t) => new Promise((n) => {
+	if (t.mode !== "evaluate" && t.role === "instructor") {
+		let { choices: t } = e, r = {};
+		t && Object.keys(t).forEach((e, n) => {
+			let i = t[e] && t[e].filter((e) => e.correct);
+			r[n] = i && i[0].value;
+		}), n({
+			id: "1",
+			value: r
+		});
+	} else n(null);
+}), h = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), g = (e = {}, t = {}) => {
+	let { markup: n, choices: r } = e, { maxResponseAreas: i, maxResponseAreaChoices: a } = t, o = {};
+	[
+		"teacherInstructions",
+		"prompt",
+		"rationale"
+	].forEach((n) => {
+		t[n]?.required && !h(e[n]) && (o[n] = "This field is required.");
+	});
+	let s = ((n || "").match(/\{\{(\d+)\}\}/g) || []).length;
+	return s > i ? o.responseAreasError = `No more than ${i} response areas should be defined.` : s < 1 && (o.responseAreasError = "There should be defined at least 1 response area."), (Object.keys(r) || []).forEach((e) => {
+		r[e] && r[e].length > a && (o.responseAreaChoicesError = `No more than ${a} choices per response area should be defined.`);
+	}), o;
+};
+//#endregion
+export { m as createCorrectResponseSession, f as getLogTrace, d as getScore, u as model, l as normalize, p as outcome, g as validate };

package/dist/controller/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/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: ({ choices, alternateResponse }: {
+    choices: any;
+    alternateResponse: any;
+}) => {};

package/dist/controller/utils.js

@@ -0,0 +1,13 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/forEach.js";
+//#region src/controller/utils.ts
+var t = ({ choices: t, alternateResponse: n }) => {
+	n ||= {};
+	let r = {};
+	return e(t, (e, t) => {
+		r[t] || (r[t] = []), e && e.forEach((e) => {
+			e.correct && (r[t].push(e.value), n[t] && (r[t] = [...r[t], ...n[t]]));
+		});
+	}), r;
+};
+//#endregion
+export { t as getAllCorrectResponses };

package/dist/delivery/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/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 RootInlineDropdown extends HTMLElement {
+    constructor();
+    set model(m: any);
+    set session(s: any);
+    get session(): any;
+    setLangAttribute(): void;
+    _render: any;
+    dispatchChangedEvent: any;
+    changeSession: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,60 @@
+import e from "./inline-dropdown.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import { ModelSetEvent as r, SessionChangedEvent as i } from "@pie-element/shared-player-events";
+import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+var o = class extends HTMLElement {
+	constructor() {
+		super(), this._model = null, this._session = null, this._root = null;
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new r(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model)), this._render();
+	}
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	setLangAttribute() {
+		let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
+		this.setAttribute("lang", t);
+	}
+	_render = () => {
+		if (this._model && this._session) {
+			let r = t.createElement(e, {
+				model: this._model,
+				prompt: this._model.prompt,
+				rationale: this._model.rationale,
+				teacherInstructions: this._model.teacherInstructions,
+				disabled: this._model.disabled,
+				displayType: this._model.displayType,
+				markup: this._model.markup,
+				mode: this._model.mode,
+				choices: this._model.choices,
+				value: this._session.value,
+				feedback: this._model.feedback,
+				language: this._model.language,
+				onChange: this.changeSession
+			});
+			this.setLangAttribute(), this._root ||= n(this), this._root.render(r), queueMicrotask(() => {
+				a(this);
+			});
+		}
+	};
+	dispatchChangedEvent = () => {
+		this.dispatchEvent(new i(this.tagName.toLowerCase(), this.session && !!this.session.value));
+	};
+	changeSession = (e) => {
+		this.session.value = e, this.dispatchChangedEvent(), this._render();
+	};
+	connectedCallback() {
+		this.setAttribute("aria-label", "Inline Dropdown Question"), this.setAttribute("role", "region"), this._render();
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/inline-dropdown.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/src/inline-dropdown.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 InlineDropdown extends React.Component {
+    static propTypes: {
+        prompt: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        markup: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        displayType: PropTypes.Requireable<string>;
+        rationale: PropTypes.Requireable<string>;
+        teacherInstructions: PropTypes.Requireable<string>;
+        model: PropTypes.Validator<object>;
+        choices: PropTypes.Requireable<object>;
+        value: PropTypes.Requireable<object>;
+        feedback: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        language: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        value: {};
+    };
+    state: {
+        showCorrectAnswer: boolean;
+    };
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidUpdate(): void;
+    toggleShowCorrect: any;
+    render(): React.JSX.Element;
+}
+export default InlineDropdown;

package/dist/delivery/inline-dropdown.js

@@ -0,0 +1,109 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "react";
+import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
+import r from "react-dom";
+import i from "prop-types";
+import a from "@pie-lib/correct-answer-toggle";
+import { InlineDropdown as o } from "@pie-lib/mask-markup";
+import * as s from "@pie-lib/render-ui";
+import { Collapsible as c, PreviewPrompt as l, UiLayout as u, color as d, hasMedia as f, hasText as p } from "@pie-lib/render-ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { styled as g } from "@mui/material/styles";
+//#region src/delivery/inline-dropdown.tsx
+function _(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function v(e, t) {
+	return !e || _(e) ? e : _(e.default) ? e.default : t && _(e[t]) ? e[t] : t && _(e[t]?.default) ? e[t].default : e;
+}
+var y = v(u, "UiLayout") || v(w.UiLayout, "UiLayout"), b = v(l, "PreviewPrompt") || v(w.PreviewPrompt, "PreviewPrompt"), x = v(c, "Collapsible") || v(w.Collapsible, "Collapsible"), S = s, C = S.default, w = C && typeof C == "object" ? C : S, T = g(y)({
+	color: d.text(),
+	backgroundColor: d.background()
+}), E = g(x)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), D = g("div")(({ theme: e }) => ({ "&:not(:last-child)": { marginBottom: e.spacing(2) } })), O = g("div")({
+	display: "flex",
+	whiteSpace: "break-spaces"
+}), k = g("div")(({ correct: e }) => ({
+	display: "flex",
+	...e ? { color: d.correct() } : { color: d.incorrectWithIcon() }
+})), A = g("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), j = class extends t.Component {
+	static propTypes = {
+		prompt: i.string,
+		disabled: i.bool,
+		markup: i.string,
+		mode: i.string,
+		displayType: i.string,
+		rationale: i.string,
+		teacherInstructions: i.string,
+		model: i.object.isRequired,
+		choices: i.object,
+		value: i.object,
+		feedback: i.object,
+		onChange: i.func,
+		language: i.string
+	};
+	static defaultProps = { value: {} };
+	state = { showCorrectAnswer: !1 };
+	UNSAFE_componentWillReceiveProps(t) {
+		e(t.feedback) && this.setState({ showCorrectAnswer: !1 });
+	}
+	componentDidUpdate() {
+		n(r.findDOMNode(this));
+	}
+	toggleShowCorrect = () => {
+		this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });
+	};
+	render() {
+		let { showCorrectAnswer: e } = this.state, { prompt: t, mode: n, model: r, rationale: i, teacherInstructions: s, choices: c, displayType: l, language: u } = this.props, { extraCSSRules: d } = r || {}, g = n === "evaluate", _ = !1, v = i && (p(i) || f(i)), y = s && (p(s) || f(s)), S = (Object.keys(c) || []).map((e) => (c[e] || []).reduce((e, t) => (t.rationale && p(t.rationale) && (_ = !0, e.push(t)), e), []));
+		return /* @__PURE__ */ h(T, {
+			extraCSSRules: d,
+			style: { display: `${l}` },
+			children: [
+				n === "gather" && /* @__PURE__ */ m(A, { children: "Inline Dropdown Question" }),
+				y && /* @__PURE__ */ m(E, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ m(b, { prompt: s })
+				}),
+				t && /* @__PURE__ */ m(b, { prompt: t }),
+				/* @__PURE__ */ m(a, {
+					show: g,
+					toggled: e,
+					onToggle: this.toggleShowCorrect,
+					language: u
+				}),
+				/* @__PURE__ */ m(o, {
+					...this.props,
+					showCorrectAnswer: e
+				}),
+				_ && /* @__PURE__ */ m(E, {
+					labels: {
+						hidden: "Show Rationale for choices",
+						visible: "Hide Rationale for choices"
+					},
+					children: S.map((e, t) => /* @__PURE__ */ m(D, { children: e?.length > 0 && e.map((e) => /* @__PURE__ */ h(O, { children: [/* @__PURE__ */ m(k, {
+						correct: e.correct,
+						dangerouslySetInnerHTML: { __html: `${e.label}: ` }
+					}), /* @__PURE__ */ m(b, { prompt: e.rationale })] }, e.label)) }, t))
+				}),
+				v && /* @__PURE__ */ m(x, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: /* @__PURE__ */ m(b, { prompt: i })
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { j as default };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for inline-dropdown 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;