@vue-skuilder/common-ui 0.2.35 → 0.2.37

package/dist/components/cardRendering/MdTokenRenderer.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,176 @@
+import { __name as e } from "../../_virtual/_rolldown/runtime.mjs";
+import t from "../studentInputs/fillInInput.mjs";
+import { containsComponent as n, isComponent as r, parseComponentSyntax as i, splitParagraphToken as a, splitTextToken as o } from "./MarkdownRendererHelpers.mjs";
+import s from "./CodeBlockRenderer.mjs";
+import { Fragment as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, inject as ee, markRaw as m, mergeProps as h, openBlock as g, renderList as _, resolveComponent as v, resolveDynamicComponent as y, toDisplayString as b } from "vue";
+//#region src/components/cardRendering/MdTokenRenderer.vue?vue&type=script&setup=true&lang.ts
+var x = { key: 0 }, S = { key: 0 }, C = { key: 0 }, w = {
+	key: 1,
+	class: "error--text"
+}, T = { key: 1 }, E = { key: 2 }, D = { key: 1 }, O = { key: 1 }, k = {
+	key: 0,
+	class: "text-h2"
+}, A = {
+	key: 1,
+	class: "text-h3"
+}, j = {
+	key: 2,
+	class: "text-h4"
+}, M = { key: 3 }, N = { key: 4 }, te = { key: 5 }, P = { key: 2 }, F = {
+	key: 3,
+	class: "text-h5"
+}, I = { key: 0 }, L = ["href", "title"], R = { key: 5 }, z = { key: 6 }, B = { key: 7 }, V = ["src", "alt"], H = { key: 9 }, U = { key: 10 }, W = { key: 11 }, G = ["align"], K = ["innerHTML"], q = ["innerHTML"], J = { key: 16 }, Y = { key: 17 }, X = { key: 18 }, Z = /* @__PURE__ */ p({
+	__name: "MdTokenRenderer",
+	props: {
+		token: {
+			type: Object,
+			required: !0
+		},
+		last: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		}
+	},
+	setup(p, { expose: Z }) {
+		let Q = ee("markdownComponents", {}), $ = {
+			fillIn: m(t),
+			...Q
+		};
+		function isComponent$1(e) {
+			return r(e);
+		}
+		e(isComponent$1, "isComponent");
+		function containsComponent$1(e) {
+			return n(e);
+		}
+		e(containsComponent$1, "containsComponent");
+		function splitTextToken$1(e) {
+			return o(e);
+		}
+		e(splitTextToken$1, "splitTextToken");
+		function splitParagraphToken$1(e) {
+			return a(e);
+		}
+		e(splitParagraphToken$1, "splitParagraphToken");
+		function parsedComponent(e) {
+			let t = "";
+			"text" in e && typeof e.text == "string" ? t = e.text : "raw" in e && typeof e.raw == "string" && (t = e.raw);
+			let n = i(t);
+			return n ? {
+				is: n.componentName,
+				text: "",
+				props: n.props
+			} : {
+				is: "fillIn",
+				text: t,
+				props: {}
+			};
+		}
+		function getComponent(e) {
+			return $[e] || (console.warn(`[MarkdownRenderer] Unknown component: "${e}". Available components: ${Object.keys($).join(", ")}`), null);
+		}
+		function decodeBasicEntities(e) {
+			return e.replace(/&#39;/g, "'").replace(/&quot;/g, "\"").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+		}
+		function isText(e) {
+			return e.inLink === void 0 && e.type === "text";
+		}
+		return Z({
+			isComponent: isComponent$1,
+			containsComponent: containsComponent$1,
+			splitTextToken: splitTextToken$1,
+			splitParagraphToken: splitParagraphToken$1,
+			parsedComponent,
+			decodeBasicEntities,
+			isText,
+			components: $,
+			getComponent
+		}), (e, t) => {
+			let n = v("md-token-renderer", !0);
+			return isText(p.token) ? (g(), d("span", x, [!p.token.tokens || p.token.tokens.length === 0 ? (g(), d("span", S, [isComponent$1(p.token) ? (g(), d("span", C, [!p.last && getComponent(parsedComponent(p.token).is) ? (g(), l(y(getComponent(parsedComponent(p.token).is)), h({
+				key: 0,
+				text: parsedComponent(p.token).text
+			}, parsedComponent(p.token).props), null, 16, ["text"])) : !p.last && !getComponent(parsedComponent(p.token).is) ? (g(), d("span", w, " [Unknown component: " + b(parsedComponent(p.token).is) + "] ", 1)) : u("", !0)])) : containsComponent$1(p.token) ? (g(), d("span", T, [(g(!0), d(c, null, _(splitTextToken$1(p.token), (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : (g(), d("span", E, b(decodeBasicEntities(p.token.text)), 1))])) : p.token.tokens && p.token.tokens.length !== 0 ? (g(), d("span", D, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : u("", !0)])) : p.token.type === "heading" ? (g(), d("span", O, [p.token.depth === 1 ? (g(), d("h1", k, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.depth === 2 ? (g(), d("h2", A, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.depth === 3 ? (g(), d("h3", j, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.depth === 4 ? (g(), d("h4", M, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.depth === 5 ? (g(), d("h5", N, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.depth === 6 ? (g(), d("h6", te, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : u("", !0)])) : p.token.type === "strong" ? (g(), d("strong", P, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.type === "paragraph" ? (g(), d("p", F, [containsComponent$1(p.token) ? (g(), d("span", I, [(g(!0), d(c, null, _(splitParagraphToken$1(p.token), (e, t) => (g(), l(n, {
+				key: t,
+				token: e,
+				last: p.last && p.token.tokens.length === 1 && t === splitParagraphToken$1(p.token).length - 1
+			}, null, 8, ["token", "last"]))), 128))])) : (g(!0), d(c, { key: 1 }, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e,
+				last: p.last && p.token.tokens.length === 1
+			}, null, 8, ["token", "last"]))), 128))])) : p.token.type === "link" ? (g(), d("a", {
+				key: 4,
+				href: p.token.href,
+				title: p.token.title
+			}, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))], 8, L)) : p.token.type === "list" && p.token.ordered === !1 ? (g(), d("ul", R, [(g(!0), d(c, null, _(p.token.items, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.type === "list" && p.token.ordered === !0 ? (g(), d("ol", z, [(g(!0), d(c, null, _(p.token.items, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.type === "list_item" ? (g(), d("li", B, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.type === "image" ? (g(), d("img", {
+				key: 8,
+				src: p.token.href,
+				alt: p.token.title
+			}, null, 8, V)) : p.token.type === "hr" ? (g(), d("hr", H)) : p.token.type === "br" ? (g(), d("br", U)) : p.token.type === "del" ? (g(), d("del", W)) : p.token.type === "table" ? (g(), d("table", {
+				key: 12,
+				align: p.token.align
+			}, [f("thead", null, [(g(!0), d(c, null, _(p.token.header, (e, t) => (g(), d("th", { key: t }, b(e.text), 1))), 128))]), f("tbody", null, [(g(!0), d(c, null, _(p.token.rows, (e, t) => (g(), d("tr", { key: t }, [(g(!0), d(c, null, _(e, (e, t) => (g(), d("td", { key: t }, b(e.text), 1))), 128))]))), 128))])], 8, G)) : p.token.type === "html" ? (g(), d("span", {
+				key: 13,
+				innerHTML: p.token.raw
+			}, null, 8, K)) : p.token.type === "code" ? (g(), l(s, {
+				key: 14,
+				code: p.token.text,
+				language: p.token.lang
+			}, null, 8, ["code", "language"])) : p.token.type === "codespan" ? (g(), d("code", {
+				key: 15,
+				class: "codespan",
+				innerHTML: p.token.text
+			}, null, 8, q)) : p.token.type === "blockquote" ? (g(), d("blockquote", J, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : p.token.type === "escape" ? (g(), d("span", Y, b(p.token.text), 1)) : p.token.type === "em" ? (g(), d("em", X, [(g(!0), d(c, null, _(p.token.tokens, (e, t) => (g(), l(n, {
+				key: t,
+				token: e
+			}, null, 8, ["token"]))), 128))])) : u("", !0);
+		};
+	}
+});
+//#endregion
+export { Z as default };
+
+//# sourceMappingURL=MdTokenRenderer.vue_vue_type_script_setup_true_lang.mjs.map

package/dist/components/cardRendering/MdTokenRenderer.vue_vue_type_script_setup_true_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdTokenRenderer.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../src/components/cardRendering/MdTokenRenderer.vue"],"sourcesContent":["<template>\n  <span v-if=\"isText(token)\">\n    <span v-if=\"!token.tokens || token.tokens.length === 0\">\n      <span v-if=\"isComponent(token)\">\n        <!--\n          KNOWN LIMITATION: Components cannot be the final token of the entire markdown document\n          The v-if=\"!last\" check prevents rendering when this is the last token overall\n          Components CAN be the last token in a paragraph (just not the whole document)\n          Reason unclear but necessary historically - Chesterton's Fence applies\n          Workaround: Add trailing whitespace, punctuation, or newline after component\n          See: \"MarkdownRenderer - Known Limitations\" test group\n        -->\n        <component\n          v-if=\"!last && getComponent(parsedComponent(token).is)\"\n          :is=\"getComponent(parsedComponent(token).is)\"\n          :text=\"parsedComponent(token).text\"\n          v-bind=\"parsedComponent(token).props\"\n        />\n        <span v-else-if=\"!last && !getComponent(parsedComponent(token).is)\" class=\"error--text\">\n          [Unknown component: {{ parsedComponent(token).is }}]\n        </span>\n      </span>\n      <span v-else-if=\"containsComponent(token)\">\n        <md-token-renderer v-for=\"(subTok, j) in splitTextToken(token)\" :key=\"j\" :token=\"subTok\" />\n      </span>\n      <span v-else>{{ decodeBasicEntities(token.text) }}</span>\n    </span>\n    <span v-else-if=\"token.tokens && token.tokens.length !== 0\">\n      <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n    </span>\n  </span>\n\n  <span v-else-if=\"token.type === 'heading'\">\n    <h1 v-if=\"token.depth === 1\" class=\"text-h2\">\n      <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n    </h1>\n    <h2 v-else-if=\"token.depth === 2\" class=\"text-h3\">\n      <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n    </h2>\n    <h3 v-else-if=\"token.depth === 3\" class=\"text-h4\">\n      <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n    </h3>\n    <h4 v-else-if=\"token.depth === 4\">\n      <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n    </h4>\n    <h5 v-else-if=\"token.depth === 5\">\n      <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n    </h5>\n    <h6 v-else-if=\"token.depth === 6\">\n      <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n    </h6>\n  </span>\n\n  <strong v-else-if=\"token.type === 'strong'\">\n    <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n  </strong>\n\n  <p v-else-if=\"token.type === 'paragraph'\" class=\"text-h5\">\n    <span v-if=\"containsComponent(token)\">\n      <md-token-renderer\n        v-for=\"(splitTok, j) in splitParagraphToken(token)\"\n        :key=\"j\"\n        :token=\"splitTok\"\n        :last=\"last && token.tokens.length === 1 && j === splitParagraphToken(token).length - 1\"\n      />\n    </span>\n    <template v-else>\n      <md-token-renderer\n        v-for=\"(subTok, j) in token.tokens\"\n        :key=\"j\"\n        :token=\"subTok\"\n        :last=\"last && token.tokens.length === 1\"\n      />\n    </template>\n  </p>\n\n  <a v-else-if=\"token.type === 'link'\" :href=\"token.href\" :title=\"token.title\">\n    <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n  </a>\n\n  <ul v-else-if=\"token.type === 'list' && token.ordered === false\">\n    <md-token-renderer v-for=\"(item, j) in token.items\" :key=\"j\" :token=\"item\" />\n  </ul>\n\n  <ol v-else-if=\"token.type === 'list' && token.ordered === true\">\n    <md-token-renderer v-for=\"(item, j) in token.items\" :key=\"j\" :token=\"item\" />\n  </ol>\n\n  <li v-else-if=\"token.type === 'list_item'\">\n    <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n  </li>\n\n  <img v-else-if=\"token.type === 'image'\" :src=\"token.href\" :alt=\"token.title\" />\n  <hr v-else-if=\"token.type === 'hr'\" />\n  <br v-else-if=\"token.type === 'br'\" />\n  <del v-else-if=\"token.type === 'del'\" />\n\n  <table v-else-if=\"token.type === 'table'\" :align=\"token.align\">\n    <thead>\n      <th v-for=\"(h, j) in token.header\" :key=\"j\">{{ h.text }}</th>\n    </thead>\n    <tbody>\n      <tr v-for=\"(row, r) in token.rows\" :key=\"r\">\n        <td v-for=\"(cell, c) in row\" :key=\"c\">{{ cell.text }}</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <span v-else-if=\"token.type === 'html'\" v-html=\"token.raw\"></span>\n\n  <code-block-renderer v-else-if=\"token.type === 'code'\" :code=\"token.text\" :language=\"token.lang\" />\n  <!-- <highlightjs v-else-if=\"token.type === 'code'\" class=\"hljs_render pa-2\" :language=\"token.lang\" :code=\"token.text\" /> -->\n\n  <code v-else-if=\"token.type === 'codespan'\" class=\"codespan\" v-html=\"token.text\"></code>\n\n  <blockquote v-else-if=\"token.type === 'blockquote'\">\n    <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n  </blockquote>\n\n  <span v-else-if=\"token.type === 'escape'\">{{ token.text }}</span>\n\n  <em v-else-if=\"token.type === 'em'\">\n    <md-token-renderer v-for=\"(subTok, j) in token.tokens\" :key=\"j\" :token=\"subTok\" />\n  </em>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  containsComponent as _containsComponent,\n  isComponent as _isComponent,\n  splitParagraphToken as _splitParagraphToken,\n  splitTextToken as _splitTextToken,\n  parseComponentSyntax,\n  TokenOrComponent,\n} from './MarkdownRendererHelpers';\nimport CodeBlockRenderer from './CodeBlockRenderer.vue';\nimport FillInInput from '../../components/studentInputs/fillInInput.vue';\nimport { MarkedToken, Tokens } from 'marked';\nimport { markRaw, inject } from 'vue';\nimport { PropType } from 'vue';\n\n// Inject custom components provided at app level (defaults to empty object)\nconst providedComponents = inject<Record<string, any>>('markdownComponents', {});\n\n// Register components to be used in the template\n// In Vue 3 with <script setup>, components used via :is must be explicitly registered\n// Merge built-in components with injected custom components\nconst components = {\n  fillIn: markRaw(FillInInput),\n  ...providedComponents,\n};\n\n// Define component props\ndefineProps({\n  token: {\n    type: Object as PropType<TokenOrComponent>,\n    required: true,\n  },\n  last: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\n// Methods\nfunction isComponent(token: MarkedToken): boolean {\n  return _isComponent(token);\n}\n\nfunction containsComponent(token: MarkedToken): boolean {\n  return _containsComponent(token);\n}\n\nfunction splitTextToken(token: MarkedToken): Tokens.Text[] {\n  return _splitTextToken(token);\n}\n\nfunction splitParagraphToken(token: Tokens.Paragraph): TokenOrComponent[] {\n  return _splitParagraphToken(token);\n}\n\nfunction parsedComponent(token: MarkedToken): {\n  is: string;\n  text: string;\n  props: Record<string, string>;\n} {\n  let text = '';\n  if ('text' in token && typeof token.text === 'string') {\n    text = token.text;\n  } else if ('raw' in token && typeof token.raw === 'string') {\n    text = token.raw;\n  }\n\n  // Try to parse as inline component syntax\n  const parsed = parseComponentSyntax(text);\n\n  if (parsed) {\n    // Successfully parsed as inline component\n    return {\n      is: parsed.componentName,\n      text: '',\n      props: parsed.props,\n    };\n  }\n\n  // Backward compatible: {{ }} or {{ || }} -> fillIn component\n  return {\n    is: 'fillIn',\n    text,\n    props: {},\n  };\n}\n\nfunction getComponent(componentName: string) {\n  const component = components[componentName as keyof typeof components];\n\n  if (!component) {\n    console.warn(\n      `[MarkdownRenderer] Unknown component: \"${componentName}\". Available components: ${Object.keys(components).join(', ')}`\n    );\n    return null;\n  }\n\n  return component;\n}\n\nfunction decodeBasicEntities(text: string): string {\n  return text\n    .replace(/&#39;/g, \"'\")\n    .replace(/&quot;/g, '\"')\n    .replace(/&amp;/g, '&')\n    .replace(/&lt;/g, '<')\n    .replace(/&gt;/g, '>');\n}\n\nfunction isText(tok: TokenOrComponent): boolean {\n  return (tok as any).inLink === undefined && tok.type === 'text';\n}\n\n// Make these functions and objects available to the template\ndefineExpose({\n  isComponent,\n  containsComponent,\n  splitTextToken,\n  splitParagraphToken,\n  parsedComponent,\n  decodeBasicEntities,\n  isText,\n  components,\n  getComponent,\n});\n</script>\n\n<style lang=\"css\" scoped>\nblockquote {\n  border-left: 3px teal solid;\n  padding-left: 8px;\n}\n\n.codespan {\n  padding-left: 3px;\n  padding-right: 3px;\n  margin-left: 1px;\n  margin-right: 1px;\n}\n\np {\n  margin-bottom: 15px;\n  margin-top: 15px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8IA,IAAM,IAAqB,GAA4B,sBAAsB,EAAE,CAAC,EAK1E,IAAa;GACjB,QAAQ,EAAQ,EAAY;GAC5B,GAAG;GACJ;EAgBD,SAAS,cAAY,GAA6B;AAChD,UAAO,EAAa,EAAM;;;EAG5B,SAAS,oBAAkB,GAA6B;AACtD,UAAO,EAAmB,EAAM;;;EAGlC,SAAS,iBAAe,GAAmC;AACzD,UAAO,EAAgB,EAAM;;;EAG/B,SAAS,sBAAoB,GAA6C;AACxE,UAAO,EAAqB,EAAM;;;EAGpC,SAAS,gBAAgB,GAIvB;GACA,IAAI,IAAO;AACX,GAAI,UAAU,KAAS,OAAO,EAAM,QAAS,WAC3C,IAAO,EAAM,OACJ,SAAS,KAAS,OAAO,EAAM,OAAQ,aAChD,IAAO,EAAM;GAIf,IAAM,IAAS,EAAqB,EAAK;AAYzC,UAVI,IAEK;IACL,IAAI,EAAO;IACX,MAAM;IACN,OAAO,EAAO;IACf,GAII;IACL,IAAI;IACJ;IACA,OAAO,EAAE;IACV;;EAGH,SAAS,aAAa,GAAuB;AAU3C,UATkB,EAAW,OAG3B,QAAQ,KACN,0CAA0C,EAAc,2BAA2B,OAAO,KAAK,EAAW,CAAC,KAAK,KAAK,GACtH,EACM;;EAMX,SAAS,oBAAoB,GAAsB;AACjD,UAAO,EACJ,QAAQ,UAAU,IAAG,CACrB,QAAQ,WAAW,KAAG,CACtB,QAAQ,UAAU,IAAG,CACrB,QAAQ,SAAS,IAAG,CACpB,QAAQ,SAAS,IAAI;;EAG1B,SAAS,OAAO,GAAgC;AAC9C,UAAQ,EAAY,WAAW,KAAA,KAAa,EAAI,SAAS;;SAI3D,EAAa;GACX,aAAA;GACA,mBAAA;GACA,gBAAA;GACA,qBAAA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC"}

package/dist/components/studentInputs/BaseUserInput.mjs

@@ -0,0 +1,54 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import { isQuestionView as e } from "../../composables/CompositionViewable.mjs";
+import { useCardPreviewModeStore as t } from "../../stores/useCardPreviewModeStore.mjs";
+import { defineComponent as n } from "vue";
+import { log as r } from "@vue-skuilder/common";
+//#region src/components/studentInputs/BaseUserInput.ts
+var i = n({
+	name: "UserInput",
+	data() {
+		return {
+			answer: "",
+			previewModeStore: null
+		};
+	},
+	mounted() {
+		this.previewModeStore = t();
+	},
+	computed: {
+		autofocus() {
+			return !this.previewModeStore?.previewMode;
+		},
+		autoFocus() {
+			return this.autofocus;
+		}
+	},
+	methods: {
+		submitAnswer(e) {
+			return this.submit(e);
+		},
+		submit(e) {
+			return this.getQuestionViewAncestor().submitAnswer(e, this.$options.name ?? "UserInput");
+		},
+		getQuestionViewAncestor() {
+			let t = this.$parent, n = 0;
+			for (; t && !e(t);) {
+				let e = t.$parent;
+				if (!e) {
+					let e = "\nUserInput.submit() has failed.\nThe input element has no QuestionView ancestor element.";
+					throw r(e), Error(e);
+				}
+				if (t = e, n++, n > 100) {
+					let e = "\nUserInput.submit() has failed.\nExceeded maximum ancestor lookup depth.";
+					throw r(e), Error(e);
+				}
+			}
+			if (!t) throw Error("No QuestionView ancestor found");
+			return t;
+		}
+	}
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=BaseUserInput.mjs.map

package/dist/components/studentInputs/BaseUserInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserInput.mjs","names":[],"sources":["../../../src/components/studentInputs/BaseUserInput.ts"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { Answer, log } from '@vue-skuilder/common';\nimport { useCardPreviewModeStore } from '../../stores/useCardPreviewModeStore';\nimport { ViewComponent } from '../../composables/Displayable';\nimport { isQuestionView } from '../../composables/CompositionViewable';\nimport { QuestionRecord } from '@vue-skuilder/db';\n\nexport default defineComponent({\n  name: 'UserInput',\n  data() {\n    return {\n      answer: '' as Answer,\n      previewModeStore: null as ReturnType<typeof useCardPreviewModeStore> | null,\n    };\n  },\n  mounted() {\n    // This happens after Pinia is initialized but before the component is used\n    this.previewModeStore = useCardPreviewModeStore();\n  },\n  computed: {\n    autofocus(): boolean {\n      return !this.previewModeStore?.previewMode;\n    },\n    autoFocus(): boolean {\n      return this.autofocus;\n    },\n  },\n  methods: {\n    submitAnswer(answer: Answer): QuestionRecord {\n      return this.submit(answer);\n    },\n    // isQuestionView(a: any): a is QuestionView<Question> {\n    //   return (a as QuestionView<Question>).submitAnswer !== undefined;\n    // },\n    submit(answer: Answer) {\n      return this.getQuestionViewAncestor().submitAnswer(answer, this.$options.name ?? 'UserInput');\n    },\n    getQuestionViewAncestor(): ViewComponent {\n      let ancestor = this.$parent;\n      let count = 0;\n\n      while (ancestor && !isQuestionView(ancestor)) {\n        const nextAncestor = ancestor.$parent;\n        if (!nextAncestor) {\n          const err = `\nUserInput.submit() has failed.\nThe input element has no QuestionView ancestor element.`;\n          log(err);\n          throw new Error(err);\n        }\n        ancestor = nextAncestor;\n        count++;\n\n        if (count > 100) {\n          const err = `\nUserInput.submit() has failed.\nExceeded maximum ancestor lookup depth.`;\n          log(err);\n          throw new Error(err);\n        }\n      }\n\n      if (!ancestor) {\n        throw new Error('No QuestionView ancestor found');\n      }\n\n      return ancestor;\n    },\n  },\n});\n"],"mappings":";;;;;;AAOA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CACN,OAAO;AACL,SAAO;GACL,QAAQ;GACR,kBAAkB;GACnB;;CAEH,UAAU;AAER,OAAK,mBAAmB,GAAyB;;CAEnD,UAAU;EACR,YAAqB;AACnB,UAAO,CAAC,KAAK,kBAAkB;;EAEjC,YAAqB;AACnB,UAAO,KAAK;;EAEf;CACD,SAAS;EACP,aAAa,GAAgC;AAC3C,UAAO,KAAK,OAAO,EAAO;;EAK5B,OAAO,GAAgB;AACrB,UAAO,KAAK,yBAAyB,CAAC,aAAa,GAAQ,KAAK,SAAS,QAAQ,YAAY;;EAE/F,0BAAyC;GACvC,IAAI,IAAW,KAAK,SAChB,IAAQ;AAEZ,UAAO,KAAY,CAAC,EAAe,EAAS,GAAE;IAC5C,IAAM,IAAe,EAAS;AAC9B,QAAI,CAAC,GAAc;KACjB,IAAM,IAAM;AAIZ,WADA,EAAI,EAAI,EACE,MAAM,EAAI;;AAKtB,QAHA,IAAW,GACX,KAEI,IAAQ,KAAK;KACf,IAAM,IAAM;AAIZ,WADA,EAAI,EAAI,EACE,MAAM,EAAI;;;AAIxB,OAAI,CAAC,EACH,OAAU,MAAM,iCAAiC;AAGnD,UAAO;;EAEV;CACF,CAAC"}

package/dist/components/studentInputs/MultipleChoiceOption.mjs

@@ -0,0 +1,26 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./MultipleChoiceOption.vue_vue_type_script_lang.mjs";
+/* empty css                                                                      */
+import { createBlock as n, createVNode as r, normalizeClass as i, openBlock as a, resolveComponent as o, withCtx as s } from "vue";
+//#region src/components/studentInputs/MultipleChoiceOption.vue
+function _sfc_render(e, t, c, l, u, d) {
+	let f = o("markdown-renderer"), p = o("v-card");
+	return a(), n(p, {
+		class: i(`${e.className}`),
+		onMouseover: e.select,
+		onClick: e.submitThisOption
+	}, {
+		default: s(() => [r(f, { md: e.content }, null, 8, ["md"])]),
+		_: 1
+	}, 8, [
+		"class",
+		"onMouseover",
+		"onClick"
+	]);
+}
+var c = /* @__PURE__ */ e(t, [["render", _sfc_render], ["__scopeId", "data-v-96de7172"]]);
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=MultipleChoiceOption.mjs.map

package/dist/components/studentInputs/MultipleChoiceOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleChoiceOption.mjs","names":[],"sources":["../../../src/components/studentInputs/MultipleChoiceOption.vue"],"sourcesContent":["<template>\n  <v-card :class=\"`${className}`\" @mouseover=\"select\" @click=\"submitThisOption\">\n    <markdown-renderer :md=\"content\" />\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, defineAsyncComponent, PropType } from 'vue';\n\nexport default defineComponent({\n  name: 'MultipleChoiceOption',\n\n  components: {\n    MarkdownRenderer: defineAsyncComponent(() => import('../../components/cardRendering/MarkdownRenderer.vue')),\n  },\n\n  props: {\n    content: {\n      type: String,\n      required: true,\n    },\n    selected: {\n      type: Boolean,\n      required: true,\n    },\n    number: {\n      type: Number,\n      required: true,\n    },\n    setSelection: {\n      type: Function as PropType<(selection: number) => void>,\n      required: true,\n    },\n    submit: {\n      type: Function as PropType<() => void>,\n      required: true,\n    },\n    markedWrong: {\n      type: Boolean,\n      required: true,\n    },\n  },\n\n  computed: {\n    className(): string {\n      let color: string;\n\n      switch (this.number) {\n        case 0:\n          color = 'bg-red';\n          break;\n        case 1:\n          color = 'bg-purple';\n          break;\n        case 2:\n          color = 'bg-indigo';\n          break;\n        case 3:\n          color = 'bg-light-blue';\n          break;\n        case 4:\n          color = 'bg-teal';\n          break;\n        case 5:\n          color = 'bg-deep-orange';\n          break;\n        default:\n          color = 'bg-grey';\n          break;\n      }\n\n      if (this.selected && !this.markedWrong) {\n        return `choice selected ${color} lighten-3 elevation-8`;\n      } else if (!this.selected && !this.markedWrong) {\n        return `choice not-selected ${color} lighten-4 elevation-1`;\n      } else if (this.selected && this.markedWrong) {\n        return `choice selected grey lighten-2 elevation-8`;\n      } else if (!this.selected && this.markedWrong) {\n        return 'choice not-selected grey lighten-2 elevation-0';\n      } else {\n        throw new Error(\n          `'selected' and 'markedWrong' props in MultipleChoiceOption are in an impossible configuration.`\n        );\n      }\n    },\n  },\n\n  methods: {\n    select(): void {\n      this.setSelection(this.number);\n    },\n\n    submitThisOption(): void {\n      if (this.markedWrong) {\n        return;\n      } else {\n        this.select();\n        this.submit();\n      }\n    },\n  },\n});\n</script>\n\n<style scoped>\n.choice {\n  text-align: center;\n  display: inline-block;\n  border-radius: 4px;\n  padding-left: 15px;\n  padding-right: 15px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n  margin: 10px;\n  min-width: 75px; /* prevent tiny click-btns on, eg, one-letter answers */\n  transition: all 0.2s ease-in-out;\n}\n\n.selected {\n  transform: translateY(-10px) /* rotate(3deg) */ scale(1.15);\n  z-index: 1;\n}\n\n.not-selected {\n  z-index: 0;\n}\n</style>\n"],"mappings":";;;;;;;;aACE,EAES,GAAA;EAFA,OADX,EAAA,GACqB,EAAA,YAAS;EAAK,aAAW,EAAA;EAAS,SAAO,EAAA;;EAD9D,SAAA,QAEuC,CAAnC,EAAmC,GAAA,EAAf,IAAI,EAAA,SAAO,EAAA,MAAA,GAAA,CAAA,KAAA,CAAA,CAAA,CAAA;EAFnC,GAAA"}

package/dist/components/studentInputs/MultipleChoiceOption.vue_vue_type_script_lang.mjs

@@ -0,0 +1,76 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import { defineAsyncComponent as e, defineComponent as t } from "vue";
+//#region src/components/studentInputs/MultipleChoiceOption.vue?vue&type=script&lang.ts
+var n = t({
+	name: "MultipleChoiceOption",
+	components: { MarkdownRenderer: e(() => import("../cardRendering/MarkdownRenderer.mjs")) },
+	props: {
+		content: {
+			type: String,
+			required: !0
+		},
+		selected: {
+			type: Boolean,
+			required: !0
+		},
+		number: {
+			type: Number,
+			required: !0
+		},
+		setSelection: {
+			type: Function,
+			required: !0
+		},
+		submit: {
+			type: Function,
+			required: !0
+		},
+		markedWrong: {
+			type: Boolean,
+			required: !0
+		}
+	},
+	computed: { className() {
+		let e;
+		switch (this.number) {
+			case 0:
+				e = "bg-red";
+				break;
+			case 1:
+				e = "bg-purple";
+				break;
+			case 2:
+				e = "bg-indigo";
+				break;
+			case 3:
+				e = "bg-light-blue";
+				break;
+			case 4:
+				e = "bg-teal";
+				break;
+			case 5:
+				e = "bg-deep-orange";
+				break;
+			default:
+				e = "bg-grey";
+				break;
+		}
+		if (this.selected && !this.markedWrong) return `choice selected ${e} lighten-3 elevation-8`;
+		if (!this.selected && !this.markedWrong) return `choice not-selected ${e} lighten-4 elevation-1`;
+		if (this.selected && this.markedWrong) return "choice selected grey lighten-2 elevation-8";
+		if (!this.selected && this.markedWrong) return "choice not-selected grey lighten-2 elevation-0";
+		throw Error("'selected' and 'markedWrong' props in MultipleChoiceOption are in an impossible configuration.");
+	} },
+	methods: {
+		select() {
+			this.setSelection(this.number);
+		},
+		submitThisOption() {
+			this.markedWrong || (this.select(), this.submit());
+		}
+	}
+});
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=MultipleChoiceOption.vue_vue_type_script_lang.mjs.map

package/dist/components/studentInputs/MultipleChoiceOption.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultipleChoiceOption.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../src/components/studentInputs/MultipleChoiceOption.vue"],"sourcesContent":["<template>\n  <v-card :class=\"`${className}`\" @mouseover=\"select\" @click=\"submitThisOption\">\n    <markdown-renderer :md=\"content\" />\n  </v-card>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, defineAsyncComponent, PropType } from 'vue';\n\nexport default defineComponent({\n  name: 'MultipleChoiceOption',\n\n  components: {\n    MarkdownRenderer: defineAsyncComponent(() => import('../../components/cardRendering/MarkdownRenderer.vue')),\n  },\n\n  props: {\n    content: {\n      type: String,\n      required: true,\n    },\n    selected: {\n      type: Boolean,\n      required: true,\n    },\n    number: {\n      type: Number,\n      required: true,\n    },\n    setSelection: {\n      type: Function as PropType<(selection: number) => void>,\n      required: true,\n    },\n    submit: {\n      type: Function as PropType<() => void>,\n      required: true,\n    },\n    markedWrong: {\n      type: Boolean,\n      required: true,\n    },\n  },\n\n  computed: {\n    className(): string {\n      let color: string;\n\n      switch (this.number) {\n        case 0:\n          color = 'bg-red';\n          break;\n        case 1:\n          color = 'bg-purple';\n          break;\n        case 2:\n          color = 'bg-indigo';\n          break;\n        case 3:\n          color = 'bg-light-blue';\n          break;\n        case 4:\n          color = 'bg-teal';\n          break;\n        case 5:\n          color = 'bg-deep-orange';\n          break;\n        default:\n          color = 'bg-grey';\n          break;\n      }\n\n      if (this.selected && !this.markedWrong) {\n        return `choice selected ${color} lighten-3 elevation-8`;\n      } else if (!this.selected && !this.markedWrong) {\n        return `choice not-selected ${color} lighten-4 elevation-1`;\n      } else if (this.selected && this.markedWrong) {\n        return `choice selected grey lighten-2 elevation-8`;\n      } else if (!this.selected && this.markedWrong) {\n        return 'choice not-selected grey lighten-2 elevation-0';\n      } else {\n        throw new Error(\n          `'selected' and 'markedWrong' props in MultipleChoiceOption are in an impossible configuration.`\n        );\n      }\n    },\n  },\n\n  methods: {\n    select(): void {\n      this.setSelection(this.number);\n    },\n\n    submitThisOption(): void {\n      if (this.markedWrong) {\n        return;\n      } else {\n        this.select();\n        this.submit();\n      }\n    },\n  },\n});\n</script>\n\n<style scoped>\n.choice {\n  text-align: center;\n  display: inline-block;\n  border-radius: 4px;\n  padding-left: 15px;\n  padding-right: 15px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n  margin: 10px;\n  min-width: 75px; /* prevent tiny click-btns on, eg, one-letter answers */\n  transition: all 0.2s ease-in-out;\n}\n\n.selected {\n  transform: translateY(-10px) /* rotate(3deg) */ scale(1.15);\n  z-index: 1;\n}\n\n.not-selected {\n  z-index: 0;\n}\n</style>\n"],"mappings":";;;AASA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CAEN,YAAY,EACV,kBAAkB,QAA2B,OAAO,yCAAuD,EAC5G;CAED,OAAO;EACL,SAAS;GACP,MAAM;GACN,UAAU;GACX;EACD,UAAU;GACR,MAAM;GACN,UAAU;GACX;EACD,QAAQ;GACN,MAAM;GACN,UAAU;GACX;EACD,cAAc;GACZ,MAAM;GACN,UAAU;GACX;EACD,QAAQ;GACN,MAAM;GACN,UAAU;GACX;EACD,aAAa;GACX,MAAM;GACN,UAAU;GACX;EACF;CAED,UAAU,EACR,YAAoB;EAClB,IAAI;AAEJ,UAAQ,KAAK,QAAb;GACE,KAAK;AACH,QAAQ;AACR;GACF,KAAK;AACH,QAAQ;AACR;GACF,KAAK;AACH,QAAQ;AACR;GACF,KAAK;AACH,QAAQ;AACR;GACF,KAAK;AACH,QAAQ;AACR;GACF,KAAK;AACH,QAAQ;AACR;GACF;AACE,QAAQ;AACR;;AAGJ,MAAI,KAAK,YAAY,CAAC,KAAK,YACzB,QAAO,mBAAmB,EAAK;MACtB,CAAC,KAAK,YAAY,CAAC,KAAK,YACjC,QAAO,uBAAuB,EAAK;MAC1B,KAAK,YAAY,KAAK,YAC/B,QAAO;MACE,CAAC,KAAK,YAAY,KAAK,YAChC,QAAO;AAEP,QAAU,MACR,iGACD;IAGN;CAED,SAAS;EACP,SAAe;AACb,QAAK,aAAa,KAAK,OAAO;;EAGhC,mBAAyB;AACnB,QAAK,gBAGP,KAAK,QAAQ,EACb,KAAK,QAAQ;;EAGlB;CACF,CAAC"}

package/dist/components/studentInputs/RadioMultipleChoice.mjs

@@ -0,0 +1,33 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./RadioMultipleChoice.vue_vue_type_script_lang.mjs";
+import { Fragment as n, createBlock as r, createElementBlock as i, openBlock as a, renderList as o, resolveComponent as s } from "vue";
+//#region src/components/studentInputs/RadioMultipleChoice.vue
+var c = {
+	ref: "containerRef",
+	class: "multipleChoice"
+};
+function _sfc_render(e, t, l, u, d, f) {
+	let p = s("MultipleChoiceOption");
+	return a(), i("div", c, [(a(!0), i(n, null, o(e.choiceList, (t, n) => (a(), r(p, {
+		key: n,
+		content: t,
+		selected: e.choiceList.indexOf(t) === e.currentSelection,
+		number: e.choiceList.indexOf(t),
+		"set-selection": e.setSelection,
+		submit: e.forwardSelection,
+		"marked-wrong": e.choiceIsWrong(t)
+	}, null, 8, [
+		"content",
+		"selected",
+		"number",
+		"set-selection",
+		"submit",
+		"marked-wrong"
+	]))), 128))], 512);
+}
+var l = /* @__PURE__ */ e(t, [["render", _sfc_render]]);
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=RadioMultipleChoice.mjs.map

package/dist/components/studentInputs/RadioMultipleChoice.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMultipleChoice.mjs","names":[],"sources":["../../../src/components/studentInputs/RadioMultipleChoice.vue"],"sourcesContent":["<template>\n  <div ref=\"containerRef\" class=\"multipleChoice\">\n    <MultipleChoiceOption\n      v-for=\"(choice, i) in choiceList\"\n      :key=\"i\"\n      :content=\"choice\"\n      :selected=\"choiceList.indexOf(choice) === currentSelection\"\n      :number=\"choiceList.indexOf(choice)\"\n      :set-selection=\"setSelection\"\n      :submit=\"forwardSelection\"\n      :marked-wrong=\"choiceIsWrong(choice)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport UserInput from './BaseUserInput';\nimport MultipleChoiceOption from './MultipleChoiceOption.vue';\nimport { defineComponent, PropType } from 'vue';\nimport { SkldrMouseTrap } from '../../utils/SkldrMouseTrap';\nimport { RadioMultipleChoiceAnswer } from './RadioMultipleChoice.types';\n\nexport default defineComponent({\n  name: 'RadioMultipleChoice',\n  components: {\n    MultipleChoiceOption,\n  },\n  extends: UserInput,\n  props: {\n    choiceList: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      currentSelection: -1,\n      incorrectSelections: [] as number[],\n      containerRef: null as null | HTMLElement,\n      _registeredHotkeys: [] as (string | string[])[],\n    };\n  },\n  watch: {\n    choiceList: {\n      immediate: true,\n      handler(newList) {\n        if (newList?.length) {\n          this.bindKeys();\n        }\n      },\n    },\n  },\n  mounted() {\n    if (this.containerRef) {\n      this.containerRef.focus();\n    }\n  },\n  unmounted() {\n    this.unbindKeys();\n  },\n  methods: {\n    forwardSelection(): void {\n      if (this.choiceIsWrong(this.choiceList[this.currentSelection])) {\n        return;\n      } else if (this.currentSelection !== -1) {\n        const ans: RadioMultipleChoiceAnswer = {\n          choiceList: this.choiceList,\n          selection: this.currentSelection,\n        };\n        const record = this.submitAnswer(ans);\n\n        if (!record.isCorrect) {\n          this.incorrectSelections.push(this.currentSelection);\n        }\n      }\n    },\n    setSelection(selection: number): void {\n      if (selection < this.choiceList.length) {\n        this.currentSelection = selection;\n      }\n    },\n    incrementSelection(): void {\n      if (this.currentSelection === -1) {\n        this.currentSelection = Math.ceil(this.choiceList.length / 2);\n      } else {\n        this.currentSelection = Math.min(this.choiceList.length - 1, this.currentSelection + 1);\n      }\n    },\n    decrementSelection(): void {\n      if (this.currentSelection === -1) {\n        this.currentSelection = Math.floor(this.choiceList.length / 2 - 1);\n      } else {\n        this.currentSelection = Math.max(0, this.currentSelection - 1);\n      }\n    },\n    choiceIsWrong(choice: string): boolean {\n      let ret = false;\n      this.incorrectSelections.forEach((sel) => {\n        if (this.choiceList[sel] === choice) {\n          ret = true;\n        }\n      });\n      return ret;\n    },\n    bindKeys() {\n      const hotkeys = [\n        {\n          hotkey: 'left',\n          callback: this.decrementSelection,\n          command: 'Move selection left',\n        },\n        {\n          hotkey: 'right',\n          callback: this.incrementSelection,\n          command: 'Move selection right',\n        },\n        {\n          hotkey: 'enter',\n          callback: this.forwardSelection,\n          command: 'Submit selection',\n        },\n        // Add number key bindings\n        ...Array.from({ length: this.choiceList.length }, (_, i) => ({\n          hotkey: (i + 1).toString(),\n          callback: () => this.setSelection(i),\n          command: `Select ${((i) => {\n            switch (i) {\n              case 0:\n                return 'first';\n              case 1:\n                return 'second';\n              case 2:\n                return 'third';\n              case 3:\n                return 'fourth';\n              case 4:\n                return 'fifth';\n              case 5:\n                return 'sixth';\n              default:\n                return `${i + 1}th`;\n            }\n          })(i)} option`,\n        })),\n      ];\n\n      SkldrMouseTrap.addBinding(hotkeys);\n      \n      // Store hotkeys for cleanup\n      this._registeredHotkeys = hotkeys.map(k => k.hotkey);\n    },\n\n    unbindKeys() {\n      // Remove specific hotkeys instead of resetting all\n      if (this._registeredHotkeys) {\n        this._registeredHotkeys.forEach(key => {\n          SkldrMouseTrap.removeBinding(key);\n        });\n      }\n    },\n    // bindNumberKey(n: number): void {\n    //   this.MouseTrap.bind(n.toString(), () => {\n    //     this.currentSelection = n - 1;\n    //   });\n    // },\n  },\n});\n</script>\n"],"mappings":";;;;;;CACO,KAAI;CAAe,OAAM;;;;aAA9B,EAWM,OAXN,GAWM,EAAA,EAAA,GAAA,EAVJ,EASE,GAAA,MAXN,EAG4B,EAAA,aAAd,GAAQ,YADlB,EASE,GAAA;EAPC,KAAK;EACL,SAAS;EACT,UAAU,EAAA,WAAW,QAAQ,EAAM,KAAM,EAAA;EACzC,QAAQ,EAAA,WAAW,QAAQ,EAAM;EACjC,iBAAe,EAAA;EACf,QAAQ,EAAA;EACR,gBAAc,EAAA,cAAc,EAAM"}

package/dist/components/studentInputs/RadioMultipleChoice.vue_vue_type_script_lang.mjs

@@ -0,0 +1,105 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import { SkldrMouseTrap as e } from "../../utils/SkldrMouseTrap.mjs";
+import t from "./BaseUserInput.mjs";
+import n from "./MultipleChoiceOption.mjs";
+import { defineComponent as r } from "vue";
+//#region src/components/studentInputs/RadioMultipleChoice.vue?vue&type=script&lang.ts
+var i = r({
+	name: "RadioMultipleChoice",
+	components: { MultipleChoiceOption: n },
+	extends: t,
+	props: { choiceList: {
+		type: Array,
+		required: !0
+	} },
+	data() {
+		return {
+			currentSelection: -1,
+			incorrectSelections: [],
+			containerRef: null,
+			_registeredHotkeys: []
+		};
+	},
+	watch: { choiceList: {
+		immediate: !0,
+		handler(e) {
+			e?.length && this.bindKeys();
+		}
+	} },
+	mounted() {
+		this.containerRef && this.containerRef.focus();
+	},
+	unmounted() {
+		this.unbindKeys();
+	},
+	methods: {
+		forwardSelection() {
+			if (!this.choiceIsWrong(this.choiceList[this.currentSelection]) && this.currentSelection !== -1) {
+				let e = {
+					choiceList: this.choiceList,
+					selection: this.currentSelection
+				};
+				this.submitAnswer(e).isCorrect || this.incorrectSelections.push(this.currentSelection);
+			}
+		},
+		setSelection(e) {
+			e < this.choiceList.length && (this.currentSelection = e);
+		},
+		incrementSelection() {
+			this.currentSelection === -1 ? this.currentSelection = Math.ceil(this.choiceList.length / 2) : this.currentSelection = Math.min(this.choiceList.length - 1, this.currentSelection + 1);
+		},
+		decrementSelection() {
+			this.currentSelection === -1 ? this.currentSelection = Math.floor(this.choiceList.length / 2 - 1) : this.currentSelection = Math.max(0, this.currentSelection - 1);
+		},
+		choiceIsWrong(e) {
+			let t = !1;
+			return this.incorrectSelections.forEach((n) => {
+				this.choiceList[n] === e && (t = !0);
+			}), t;
+		},
+		bindKeys() {
+			let t = [
+				{
+					hotkey: "left",
+					callback: this.decrementSelection,
+					command: "Move selection left"
+				},
+				{
+					hotkey: "right",
+					callback: this.incrementSelection,
+					command: "Move selection right"
+				},
+				{
+					hotkey: "enter",
+					callback: this.forwardSelection,
+					command: "Submit selection"
+				},
+				...Array.from({ length: this.choiceList.length }, (e, t) => ({
+					hotkey: (t + 1).toString(),
+					callback: () => this.setSelection(t),
+					command: `Select ${((e) => {
+						switch (e) {
+							case 0: return "first";
+							case 1: return "second";
+							case 2: return "third";
+							case 3: return "fourth";
+							case 4: return "fifth";
+							case 5: return "sixth";
+							default: return `${e + 1}th`;
+						}
+					})(t)} option`
+				}))
+			];
+			e.addBinding(t), this._registeredHotkeys = t.map((e) => e.hotkey);
+		},
+		unbindKeys() {
+			this._registeredHotkeys && this._registeredHotkeys.forEach((t) => {
+				e.removeBinding(t);
+			});
+		}
+	}
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=RadioMultipleChoice.vue_vue_type_script_lang.mjs.map

package/dist/components/studentInputs/RadioMultipleChoice.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMultipleChoice.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../src/components/studentInputs/RadioMultipleChoice.vue"],"sourcesContent":["<template>\n  <div ref=\"containerRef\" class=\"multipleChoice\">\n    <MultipleChoiceOption\n      v-for=\"(choice, i) in choiceList\"\n      :key=\"i\"\n      :content=\"choice\"\n      :selected=\"choiceList.indexOf(choice) === currentSelection\"\n      :number=\"choiceList.indexOf(choice)\"\n      :set-selection=\"setSelection\"\n      :submit=\"forwardSelection\"\n      :marked-wrong=\"choiceIsWrong(choice)\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport UserInput from './BaseUserInput';\nimport MultipleChoiceOption from './MultipleChoiceOption.vue';\nimport { defineComponent, PropType } from 'vue';\nimport { SkldrMouseTrap } from '../../utils/SkldrMouseTrap';\nimport { RadioMultipleChoiceAnswer } from './RadioMultipleChoice.types';\n\nexport default defineComponent({\n  name: 'RadioMultipleChoice',\n  components: {\n    MultipleChoiceOption,\n  },\n  extends: UserInput,\n  props: {\n    choiceList: {\n      type: Array as PropType<string[]>,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      currentSelection: -1,\n      incorrectSelections: [] as number[],\n      containerRef: null as null | HTMLElement,\n      _registeredHotkeys: [] as (string | string[])[],\n    };\n  },\n  watch: {\n    choiceList: {\n      immediate: true,\n      handler(newList) {\n        if (newList?.length) {\n          this.bindKeys();\n        }\n      },\n    },\n  },\n  mounted() {\n    if (this.containerRef) {\n      this.containerRef.focus();\n    }\n  },\n  unmounted() {\n    this.unbindKeys();\n  },\n  methods: {\n    forwardSelection(): void {\n      if (this.choiceIsWrong(this.choiceList[this.currentSelection])) {\n        return;\n      } else if (this.currentSelection !== -1) {\n        const ans: RadioMultipleChoiceAnswer = {\n          choiceList: this.choiceList,\n          selection: this.currentSelection,\n        };\n        const record = this.submitAnswer(ans);\n\n        if (!record.isCorrect) {\n          this.incorrectSelections.push(this.currentSelection);\n        }\n      }\n    },\n    setSelection(selection: number): void {\n      if (selection < this.choiceList.length) {\n        this.currentSelection = selection;\n      }\n    },\n    incrementSelection(): void {\n      if (this.currentSelection === -1) {\n        this.currentSelection = Math.ceil(this.choiceList.length / 2);\n      } else {\n        this.currentSelection = Math.min(this.choiceList.length - 1, this.currentSelection + 1);\n      }\n    },\n    decrementSelection(): void {\n      if (this.currentSelection === -1) {\n        this.currentSelection = Math.floor(this.choiceList.length / 2 - 1);\n      } else {\n        this.currentSelection = Math.max(0, this.currentSelection - 1);\n      }\n    },\n    choiceIsWrong(choice: string): boolean {\n      let ret = false;\n      this.incorrectSelections.forEach((sel) => {\n        if (this.choiceList[sel] === choice) {\n          ret = true;\n        }\n      });\n      return ret;\n    },\n    bindKeys() {\n      const hotkeys = [\n        {\n          hotkey: 'left',\n          callback: this.decrementSelection,\n          command: 'Move selection left',\n        },\n        {\n          hotkey: 'right',\n          callback: this.incrementSelection,\n          command: 'Move selection right',\n        },\n        {\n          hotkey: 'enter',\n          callback: this.forwardSelection,\n          command: 'Submit selection',\n        },\n        // Add number key bindings\n        ...Array.from({ length: this.choiceList.length }, (_, i) => ({\n          hotkey: (i + 1).toString(),\n          callback: () => this.setSelection(i),\n          command: `Select ${((i) => {\n            switch (i) {\n              case 0:\n                return 'first';\n              case 1:\n                return 'second';\n              case 2:\n                return 'third';\n              case 3:\n                return 'fourth';\n              case 4:\n                return 'fifth';\n              case 5:\n                return 'sixth';\n              default:\n                return `${i + 1}th`;\n            }\n          })(i)} option`,\n        })),\n      ];\n\n      SkldrMouseTrap.addBinding(hotkeys);\n      \n      // Store hotkeys for cleanup\n      this._registeredHotkeys = hotkeys.map(k => k.hotkey);\n    },\n\n    unbindKeys() {\n      // Remove specific hotkeys instead of resetting all\n      if (this._registeredHotkeys) {\n        this._registeredHotkeys.forEach(key => {\n          SkldrMouseTrap.removeBinding(key);\n        });\n      }\n    },\n    // bindNumberKey(n: number): void {\n    //   this.MouseTrap.bind(n.toString(), () => {\n    //     this.currentSelection = n - 1;\n    //   });\n    // },\n  },\n});\n</script>\n"],"mappings":";;;;;;AAsBA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CACN,YAAY,EACV,sBAAA,GACD;CACD,SAAS;CACT,OAAO,EACL,YAAY;EACV,MAAM;EACN,UAAU;EACX,EACF;CACD,OAAO;AACL,SAAO;GACL,kBAAkB;GAClB,qBAAqB,EAAC;GACtB,cAAc;GACd,oBAAoB,EAAC;GACtB;;CAEH,OAAO,EACL,YAAY;EACV,WAAW;EACX,QAAQ,GAAS;AACf,GAAI,GAAS,UACX,KAAK,UAAU;;EAGpB,EACF;CACD,UAAU;AACR,EAAI,KAAK,gBACP,KAAK,aAAa,OAAO;;CAG7B,YAAY;AACV,OAAK,YAAY;;CAEnB,SAAS;EACP,mBAAyB;AACnB,aAAK,cAAc,KAAK,WAAW,KAAK,kBAAkB,IAEnD,KAAK,qBAAqB,IAAI;IACvC,IAAM,IAAiC;KACrC,YAAY,KAAK;KACjB,WAAW,KAAK;KACjB;AAGD,IAFe,KAAK,aAAa,EAAI,CAEzB,aACV,KAAK,oBAAoB,KAAK,KAAK,iBAAiB;;;EAI1D,aAAa,GAAyB;AACpC,GAAI,IAAY,KAAK,WAAW,WAC9B,KAAK,mBAAmB;;EAG5B,qBAA2B;AACzB,GAAI,KAAK,qBAAqB,KAC5B,KAAK,mBAAmB,KAAK,KAAK,KAAK,WAAW,SAAS,EAAE,GAE7D,KAAK,mBAAmB,KAAK,IAAI,KAAK,WAAW,SAAS,GAAG,KAAK,mBAAmB,EAAE;;EAG3F,qBAA2B;AACzB,GAAI,KAAK,qBAAqB,KAC5B,KAAK,mBAAmB,KAAK,MAAM,KAAK,WAAW,SAAS,IAAI,EAAE,GAElE,KAAK,mBAAmB,KAAK,IAAI,GAAG,KAAK,mBAAmB,EAAE;;EAGlE,cAAc,GAAyB;GACrC,IAAI,IAAM;AAMV,UALA,KAAK,oBAAoB,SAAS,MAAQ;AACxC,IAAI,KAAK,WAAW,OAAS,MAC3B,IAAM;KAER,EACK;;EAET,WAAW;GACT,IAAM,IAAU;IACd;KACE,QAAQ;KACR,UAAU,KAAK;KACf,SAAS;KACV;IACD;KACE,QAAQ;KACR,UAAU,KAAK;KACf,SAAS;KACV;IACD;KACE,QAAQ;KACR,UAAU,KAAK;KACf,SAAS;KACV;IAED,GAAG,MAAM,KAAK,EAAE,QAAQ,KAAK,WAAW,QAAQ,GAAG,GAAG,OAAO;KAC3D,SAAS,IAAI,GAAG,UAAU;KAC1B,gBAAgB,KAAK,aAAa,EAAE;KACpC,SAAS,YAAY,MAAM;AACzB,cAAQ,GAAR;OACE,KAAK,EACH,QAAO;OACT,KAAK,EACH,QAAO;OACT,KAAK,EACH,QAAO;OACT,KAAK,EACH,QAAO;OACT,KAAK,EACH,QAAO;OACT,KAAK,EACH,QAAO;OACT,QACE,QAAO,GAAG,IAAI,EAAE;;QAEnB,EAAE,CAAA;KACN,EAAE;IACJ;AAKD,GAHA,EAAe,WAAW,EAAQ,EAGlC,KAAK,qBAAqB,EAAQ,KAAI,MAAK,EAAE,OAAO;;EAGtD,aAAa;AAEX,GAAI,KAAK,sBACP,KAAK,mBAAmB,SAAQ,MAAO;AACrC,MAAe,cAAc,EAAI;KACjC;;EAQP;CACF,CAAC"}

package/dist/components/studentInputs/TrueFalse.mjs

@@ -0,0 +1,19 @@
+import "../../_virtual/_rolldown/runtime.mjs";
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./TrueFalse.vue_vue_type_script_lang.mjs";
+import { createElementBlock as n, createVNode as r, openBlock as i, resolveComponent as a } from "vue";
+//#region src/components/studentInputs/TrueFalse.vue
+var o = { "data-viewable": "TrueFalse" };
+function _sfc_render(e, t, s, c, l, u) {
+	let d = a("RadioMultipleChoice");
+	return i(), n("div", o, [r(d, {
+		"choice-list": ["True", "False"],
+		MouseTrap: e.MouseTrap,
+		submit: e.submit
+	}, null, 8, ["MouseTrap", "submit"])]);
+}
+var s = /* @__PURE__ */ e(t, [["render", _sfc_render]]);
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=TrueFalse.mjs.map

package/dist/components/studentInputs/TrueFalse.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueFalse.mjs","names":[],"sources":["../../../src/components/studentInputs/TrueFalse.vue"],"sourcesContent":["<template>\n  <div data-viewable=\"TrueFalse\">\n    <RadioMultipleChoice :choice-list=\"['True', 'False']\" :MouseTrap=\"MouseTrap\" :submit=\"submit\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport RadioMultipleChoice from './RadioMultipleChoice.vue';\n\nexport default defineComponent({\n  name: 'TrueFalse',\n  components: {\n    RadioMultipleChoice,\n  },\n  props: {\n    MouseTrap: {\n      type: Object as PropType<any>,\n      required: true,\n    },\n    submit: {\n      type: Function as PropType<(selection: number) => void>,\n      required: true,\n    },\n  },\n});\n</script>\n"],"mappings":";;;;;UACO,iBAAc,aAAW;;;aAA9B,EAEM,OAFN,GAEM,CADJ,EAAgG,GAAA;EAA1E,eAAa,CAAA,QAAA,QAAiB;EAAG,WAAW,EAAA;EAAY,QAAQ,EAAA"}

package/dist/components/studentInputs/TrueFalse.vue_vue_type_script_lang.mjs

@@ -0,0 +1,21 @@
+import e from "./RadioMultipleChoice.mjs";
+import { defineComponent as t } from "vue";
+//#region src/components/studentInputs/TrueFalse.vue?vue&type=script&lang.ts
+var n = t({
+	name: "TrueFalse",
+	components: { RadioMultipleChoice: e },
+	props: {
+		MouseTrap: {
+			type: Object,
+			required: !0
+		},
+		submit: {
+			type: Function,
+			required: !0
+		}
+	}
+});
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=TrueFalse.vue_vue_type_script_lang.mjs.map

package/dist/components/studentInputs/TrueFalse.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueFalse.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../src/components/studentInputs/TrueFalse.vue"],"sourcesContent":["<template>\n  <div data-viewable=\"TrueFalse\">\n    <RadioMultipleChoice :choice-list=\"['True', 'False']\" :MouseTrap=\"MouseTrap\" :submit=\"submit\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType } from 'vue';\nimport RadioMultipleChoice from './RadioMultipleChoice.vue';\n\nexport default defineComponent({\n  name: 'TrueFalse',\n  components: {\n    RadioMultipleChoice,\n  },\n  props: {\n    MouseTrap: {\n      type: Object as PropType<any>,\n      required: true,\n    },\n    submit: {\n      type: Function as PropType<(selection: number) => void>,\n      required: true,\n    },\n  },\n});\n</script>\n"],"mappings":";;;AAUA,IAAA,IAAe,EAAgB;CAC7B,MAAM;CACN,YAAY,EACV,qBAAA,GACD;CACD,OAAO;EACL,WAAW;GACT,MAAM;GACN,UAAU;GACX;EACD,QAAQ;GACN,MAAM;GACN,UAAU;GACX;EACF;CACF,CAAC"}