@pie-element/simple-cloze 0.1.4-next.6 → 0.1.4-next.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/author.js +2 -0
- package/dist/author/index.d.ts +6 -0
- package/dist/author/index.js +194 -235
- package/dist/author/index.js.map +1 -1
- package/dist/browser/author/index.js +3497 -3436
- package/dist/browser/author/index.js.map +1 -1
- package/dist/browser/{client-Dt8SOe5Z.js → client-BSTc3boO.js} +650 -755
- package/dist/browser/client-BSTc3boO.js.map +1 -0
- package/dist/browser/controller/index.js +42 -32
- package/dist/browser/controller/index.js.map +1 -1
- package/dist/browser/delivery/index.js +129 -136
- package/dist/browser/delivery/index.js.map +1 -1
- package/dist/browser/dist-CYpSKy-4.js +80 -0
- package/dist/browser/dist-CYpSKy-4.js.map +1 -0
- package/dist/browser/i18n-DJMxdTMU.js +1612 -0
- package/dist/browser/i18n-DJMxdTMU.js.map +1 -0
- package/dist/browser/plain-text-iaQZhkGe.js +53 -0
- package/dist/browser/plain-text-iaQZhkGe.js.map +1 -0
- package/dist/browser/print/index.js +64 -21
- package/dist/browser/print/index.js.map +1 -1
- package/dist/controller/defaults.d.ts +1 -0
- package/dist/controller/index.d.ts +51 -8
- package/dist/controller/index.js +121 -29
- package/dist/controller/index.js.map +1 -1
- package/dist/controller/plain-text.d.ts +11 -0
- package/dist/delivery/index.d.ts +9 -4
- package/dist/delivery/index.js +2826 -267
- package/dist/delivery/index.js.map +1 -1
- package/dist/i18n.d.ts +7 -0
- package/dist/index.iife.js +9 -3
- package/dist/index.js +2826 -267
- package/dist/index.js.map +1 -1
- package/dist/print/index.d.ts +7 -0
- package/dist/print/index.js +2775 -28
- package/dist/print/index.js.map +1 -1
- package/module/print.js +2383 -600
- package/module/print.js.map +1 -1
- package/package.json +2 -1
- package/dist/browser/client-Dt8SOe5Z.js.map +0 -1
|
@@ -1,52 +1,62 @@
|
|
|
1
|
+
import { t as e } from "../plain-text-iaQZhkGe.js";
|
|
1
2
|
//#region src/controller/defaults.ts
|
|
2
|
-
var
|
|
3
|
+
var t = {
|
|
3
4
|
model: {
|
|
4
5
|
prompt: "<p>Enter your answer:</p>",
|
|
5
6
|
promptEnabled: !0,
|
|
6
|
-
correctAnswer: ""
|
|
7
|
+
correctAnswer: "",
|
|
8
|
+
teacherInstructionsEnabled: !0
|
|
7
9
|
},
|
|
8
10
|
configuration: { prompt: {
|
|
9
11
|
label: "Prompt",
|
|
10
12
|
settings: !0
|
|
11
13
|
} }
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
}, n = (t) => e(t).toLowerCase(), r = (e) => typeof e == "string" && e.replace(/(<(?!img|iframe|source)([^>]+)>)/gi, "").replace(/ /gi, " ").trim().length > 0, i = (e, t) => {
|
|
15
|
+
let r = n(t?.value);
|
|
16
|
+
if (!r) return "unanswered";
|
|
17
|
+
let i = n(e?.correctAnswer);
|
|
18
|
+
return i && r === i ? "correct" : "incorrect";
|
|
19
|
+
}, a = (e, t) => +(i(e, t) === "correct"), o = (e, t, r) => {
|
|
20
|
+
let i = ["Response is compared with the answer key as plain text, ignoring case and extra spaces."];
|
|
21
|
+
return n(e?.correctAnswer) ? i.push(t === "correct" ? "Response matches the answer key." : "Response does not match the answer key.") : i.push("No correct answer is defined, so no response can score."), i.push(`Final score: ${r}.`), i;
|
|
22
|
+
}, s = (e, t, n = {}) => new Promise((n) => {
|
|
23
|
+
let r = i(e, t);
|
|
24
|
+
if (r === "unanswered") {
|
|
25
|
+
n({
|
|
19
26
|
score: 0,
|
|
20
|
-
empty: !0
|
|
27
|
+
empty: !0,
|
|
28
|
+
traceLog: ["Student did not enter a response. Score is 0."]
|
|
21
29
|
});
|
|
22
30
|
return;
|
|
23
31
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
32
|
+
let a = +(r === "correct");
|
|
33
|
+
n({
|
|
34
|
+
score: a,
|
|
35
|
+
empty: !1,
|
|
36
|
+
traceLog: o(e, r, a)
|
|
27
37
|
});
|
|
28
|
-
}),
|
|
29
|
-
...
|
|
30
|
-
...
|
|
31
|
-
}),
|
|
32
|
-
t
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
}), c = (e = {}) => ({
|
|
39
|
+
...t.model,
|
|
40
|
+
...e
|
|
41
|
+
}), l = (e) => ({ ...e }), u = (t, n, r) => new Promise((a) => {
|
|
42
|
+
let o = n || {}, s = r || {}, l = c(t || {}), u = {
|
|
43
|
+
prompt: l.promptEnabled ? l.prompt : null,
|
|
44
|
+
disabled: s.mode !== "gather",
|
|
45
|
+
mode: s.mode,
|
|
46
|
+
role: s.role,
|
|
47
|
+
language: l.language
|
|
38
48
|
};
|
|
39
|
-
|
|
40
|
-
}),
|
|
41
|
-
|
|
49
|
+
s.mode === "evaluate" && (u.correctness = i(l, o), u.correctAnswer = e(l.correctAnswer)), s.role === "instructor" && (s.mode === "view" || s.mode === "evaluate") ? u.teacherInstructions = l.teacherInstructionsEnabled ? l.teacherInstructions : null : u.teacherInstructions = null, a(u);
|
|
50
|
+
}), d = (t, n) => new Promise((r) => {
|
|
51
|
+
n?.mode !== "evaluate" && n?.role === "instructor" ? r({
|
|
42
52
|
id: "1",
|
|
43
|
-
|
|
44
|
-
}) :
|
|
45
|
-
}),
|
|
46
|
-
let
|
|
47
|
-
return (
|
|
53
|
+
value: e(t?.correctAnswer)
|
|
54
|
+
}) : r(null);
|
|
55
|
+
}), f = (e = {}, t = {}) => {
|
|
56
|
+
let i = {};
|
|
57
|
+
return t?.prompt?.required && !r(e?.prompt) && (i.prompt = "This field is required."), n(e?.correctAnswer) || (i.correctAnswer = "No correct answer defined."), i;
|
|
48
58
|
};
|
|
49
59
|
//#endregion
|
|
50
|
-
export {
|
|
60
|
+
export { d as createCorrectResponseSession, c as createDefaultModel, i as getCorrectness, a as getPartialScore, u as model, l as normalizeSession, s as outcome, f as validate };
|
|
51
61
|
|
|
52
62
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/controller/defaults.ts","../../../src/controller/index.ts"],"sourcesContent":["export default {\n model: {\n prompt: '<p>Enter your answer:</p>',\n promptEnabled: true,\n correctAnswer: '',\n },\n configuration: {\n prompt: {\n label: 'Prompt',\n settings: true,\n },\n },\n};\n","import defaults from './defaults';\n\nconst
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/controller/defaults.ts","../../../src/controller/index.ts"],"sourcesContent":["export default {\n model: {\n prompt: '<p>Enter your answer:</p>',\n promptEnabled: true,\n correctAnswer: '',\n teacherInstructionsEnabled: true,\n },\n configuration: {\n prompt: {\n label: 'Prompt',\n settings: true,\n },\n },\n};\n","import defaults from './defaults';\nimport { toPlainText } from './plain-text';\n\nexport type SimpleClozeQuestion = {\n id?: string;\n element?: string;\n prompt?: string;\n promptEnabled?: boolean;\n correctAnswer?: string;\n teacherInstructions?: string;\n teacherInstructionsEnabled?: boolean;\n /** The learner-facing strings' language, as `@pie-lib/translator` reads it (`en_US`, `es_ES`, …). */\n language?: string;\n [key: string]: unknown;\n};\n\nexport type SimpleClozeSession = {\n id?: string;\n element?: string;\n /** The learner's typed answer. */\n value?: unknown;\n [key: string]: unknown;\n};\n\nexport type SimpleClozeEnv = {\n mode?: string;\n role?: string;\n [key: string]: unknown;\n};\n\nexport type SimpleClozeCorrectness = 'correct' | 'incorrect' | 'unanswered';\n\nexport type SimpleClozeOutcome = {\n score: number;\n empty: boolean;\n traceLog: string[];\n};\n\ntype FieldConfig = { required?: boolean };\nexport type SimpleClozeValidationConfig = {\n prompt?: FieldConfig;\n [key: string]: unknown;\n};\n\n/**\n * Both sides compare as plain text, case-insensitively: an answer key authored\n * as HTML matches the text a learner types.\n */\nconst comparable = (value: unknown): string => toPlainText(value).toLowerCase();\n\n// Strips tags except img, iframe and source (media counts as content), as\n// multiple-choice's `getContent` does.\nconst hasContent = (html: unknown): boolean =>\n typeof html === 'string' &&\n html\n .replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '')\n .replace(/ /gi, ' ')\n .trim().length > 0;\n\n/**\n * A response with no text is unanswered; an answer key with no text matches\n * nothing, so a blank key never scores.\n */\nexport const getCorrectness = (\n question: SimpleClozeQuestion | null | undefined,\n session: SimpleClozeSession | null | undefined\n): SimpleClozeCorrectness => {\n const response = comparable(session?.value);\n if (!response) {\n return 'unanswered';\n }\n\n const key = comparable(question?.correctAnswer);\n if (key && response === key) {\n return 'correct';\n }\n\n return 'incorrect';\n};\n\n/** Single response, all-or-nothing: 1 when it matches the answer key, else 0. */\nexport const getPartialScore = (\n question: SimpleClozeQuestion | null | undefined,\n session: SimpleClozeSession | null | undefined\n): number => (getCorrectness(question, session) === 'correct' ? 1 : 0);\n\nconst getTraceLog = (\n question: SimpleClozeQuestion | null | undefined,\n correctness: SimpleClozeCorrectness,\n score: number\n): string[] => {\n const traceLog = [\n 'Response is compared with the answer key as plain text, ignoring case and extra spaces.',\n ];\n if (!comparable(question?.correctAnswer)) {\n traceLog.push('No correct answer is defined, so no response can score.');\n } else {\n traceLog.push(\n correctness === 'correct'\n ? 'Response matches the answer key.'\n : 'Response does not match the answer key.'\n );\n }\n traceLog.push(`Final score: ${score}.`);\n return traceLog;\n};\n\nexport const outcome = (\n question: SimpleClozeQuestion | null | undefined,\n session: SimpleClozeSession | null | undefined,\n _env: SimpleClozeEnv = {}\n): Promise<SimpleClozeOutcome> =>\n new Promise((resolve) => {\n const correctness = getCorrectness(question, session);\n\n if (correctness === 'unanswered') {\n resolve({\n score: 0,\n empty: true,\n traceLog: ['Student did not enter a response. Score is 0.'],\n });\n return;\n }\n\n const score = correctness === 'correct' ? 1 : 0;\n resolve({ score, empty: false, traceLog: getTraceLog(question, correctness, score) });\n });\n\nexport const createDefaultModel = (model: SimpleClozeQuestion = {}): SimpleClozeQuestion => ({\n ...defaults.model,\n ...model,\n});\n\nexport const normalizeSession = (s: SimpleClozeSession | null | undefined): SimpleClozeSession => ({\n ...s,\n});\n\nexport const model = (\n question: SimpleClozeQuestion | null | undefined,\n session: SimpleClozeSession | null | undefined,\n env: SimpleClozeEnv | null | undefined\n): Promise<Record<string, unknown>> => {\n return new Promise((resolve) => {\n const safeSession = session || {};\n const safeEnv = env || {};\n const normalizedQuestion = createDefaultModel(question || {});\n\n const out: Record<string, unknown> = {\n prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,\n disabled: safeEnv.mode !== 'gather',\n mode: safeEnv.mode,\n role: safeEnv.role,\n language: normalizedQuestion.language,\n };\n\n if (safeEnv.mode === 'evaluate') {\n out.correctness = getCorrectness(normalizedQuestion, safeSession);\n // The key is shown in the text input, so it goes out as plain text.\n out.correctAnswer = toPlainText(normalizedQuestion.correctAnswer);\n }\n\n if (safeEnv.role === 'instructor' && (safeEnv.mode === 'view' || safeEnv.mode === 'evaluate')) {\n out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled\n ? normalizedQuestion.teacherInstructions\n : null;\n } else {\n out.teacherInstructions = null;\n }\n\n resolve(out);\n });\n};\n\nexport const createCorrectResponseSession = (\n question: SimpleClozeQuestion | null | undefined,\n env: SimpleClozeEnv | null | undefined\n): Promise<SimpleClozeSession | null> => {\n return new Promise((resolve) => {\n if (env?.mode !== 'evaluate' && env?.role === 'instructor') {\n // The player sets `id` and `element` on the entry from the item config.\n resolve({ id: '1', value: toPlainText(question?.correctAnswer) });\n } else {\n resolve(null);\n }\n });\n};\n\nexport const validate = (\n model: SimpleClozeQuestion = {},\n config: SimpleClozeValidationConfig = {}\n): Record<string, string> => {\n const errors: Record<string, string> = {};\n\n if (config?.prompt?.required && !hasContent(model?.prompt)) {\n errors.prompt = 'This field is required.';\n }\n\n if (!comparable(model?.correctAnswer)) {\n errors.correctAnswer = 'No correct answer defined.';\n }\n\n return errors;\n};\n"],"mappings":";;AAAA,IAAA,IAAe;CACb,OAAO;EACL,QAAQ;EACR,eAAe;EACf,eAAe;EACf,4BAA4B;CAC9B;CACA,eAAe,EACb,QAAQ;EACN,OAAO;EACP,UAAU;CACZ,EACF;AACF,GCmCM,KAAc,MAA2B,EAAY,CAAK,CAAC,CAAC,YAAY,GAIxE,KAAc,MAClB,OAAO,KAAS,YAChB,EACG,QAAQ,sCAAsC,EAAE,CAAC,CACjD,QAAQ,YAAY,GAAG,CAAC,CACxB,KAAK,CAAC,CAAC,SAAS,GAMR,KACX,GACA,MAC2B;CAC3B,IAAM,IAAW,EAAW,GAAS,KAAK;CAC1C,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IAAM,EAAW,GAAU,aAAa;CAK9C,OAJI,KAAO,MAAa,IACf,YAGF;AACT,GAGa,KACX,GACA,MACY,IAAe,GAAU,CAAO,MAAM,YAE9C,KACJ,GACA,GACA,MACa;CACb,IAAM,IAAW,CACf,yFACF;CAWA,OAVK,EAAW,GAAU,aAAa,IAGrC,EAAS,KACP,MAAgB,YACZ,qCACA,yCACN,IANA,EAAS,KAAK,yDAAyD,GAQzE,EAAS,KAAK,gBAAgB,EAAM,EAAE,GAC/B;AACT,GAEa,KACX,GACA,GACA,IAAuB,CAAC,MAExB,IAAI,SAAS,MAAY;CACvB,IAAM,IAAc,EAAe,GAAU,CAAO;CAEpD,IAAI,MAAgB,cAAc;EAChC,EAAQ;GACN,OAAO;GACP,OAAO;GACP,UAAU,CAAC,+CAA+C;EAC5D,CAAC;EACD;CACF;CAEA,IAAM,IAAQ,QAAgB;CAC9B,EAAQ;EAAE;EAAO,OAAO;EAAO,UAAU,EAAY,GAAU,GAAa,CAAK;CAAE,CAAC;AACtF,CAAC,GAEU,KAAsB,IAA6B,CAAC,OAA4B;CAC3F,GAAG,EAAS;CACZ,GAAG;AACL,IAEa,KAAoB,OAAkE,EACjG,GAAG,EACL,IAEa,KACX,GACA,GACA,MAEO,IAAI,SAAS,MAAY;CAC9B,IAAM,IAAc,KAAW,CAAC,GAC1B,IAAU,KAAO,CAAC,GAClB,IAAqB,EAAmB,KAAY,CAAC,CAAC,GAEtD,IAA+B;EACnC,QAAQ,EAAmB,gBAAgB,EAAmB,SAAS;EACvE,UAAU,EAAQ,SAAS;EAC3B,MAAM,EAAQ;EACd,MAAM,EAAQ;EACd,UAAU,EAAmB;CAC/B;CAgBA,AAdI,EAAQ,SAAS,eACnB,EAAI,cAAc,EAAe,GAAoB,CAAW,GAEhE,EAAI,gBAAgB,EAAY,EAAmB,aAAa,IAG9D,EAAQ,SAAS,iBAAiB,EAAQ,SAAS,UAAU,EAAQ,SAAS,cAChF,EAAI,sBAAsB,EAAmB,6BACzC,EAAmB,sBACnB,OAEJ,EAAI,sBAAsB,MAG5B,EAAQ,CAAG;AACb,CAAC,GAGU,KACX,GACA,MAEO,IAAI,SAAS,MAAY;CAC9B,AAAI,GAAK,SAAS,cAAc,GAAK,SAAS,eAE5C,EAAQ;EAAE,IAAI;EAAK,OAAO,EAAY,GAAU,aAAa;CAAE,CAAC,IAEhE,EAAQ,IAAI;AAEhB,CAAC,GAGU,KACX,IAA6B,CAAC,GAC9B,IAAsC,CAAC,MACZ;CAC3B,IAAM,IAAiC,CAAC;CAUxC,OARI,GAAQ,QAAQ,YAAY,CAAC,EAAW,GAAO,MAAM,MACvD,EAAO,SAAS,4BAGb,EAAW,GAAO,aAAa,MAClC,EAAO,gBAAgB,+BAGlB;AACT"}
|
|
@@ -1,173 +1,166 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
super(e.TYPE, {
|
|
9
|
-
bubbles: !0,
|
|
10
|
-
composed: !0,
|
|
11
|
-
detail: {
|
|
12
|
-
complete: n,
|
|
13
|
-
component: t,
|
|
14
|
-
hasModel: r
|
|
15
|
-
}
|
|
16
|
-
}), this.component = t, this.complete = n;
|
|
17
|
-
}
|
|
18
|
-
}, D = class e extends CustomEvent {
|
|
19
|
-
static {
|
|
20
|
-
this.TYPE = "session-changed";
|
|
21
|
-
}
|
|
22
|
-
constructor(t, n) {
|
|
23
|
-
super(e.TYPE, {
|
|
24
|
-
bubbles: !0,
|
|
25
|
-
composed: !0,
|
|
26
|
-
detail: {
|
|
27
|
-
complete: n,
|
|
28
|
-
component: t
|
|
29
|
-
}
|
|
30
|
-
}), this.component = t, this.complete = n;
|
|
31
|
-
}
|
|
32
|
-
}, O = (e) => {
|
|
33
|
-
let t = e;
|
|
34
|
-
return t ? typeof t.onSessionChange == "function" || typeof t.onAudioStarted == "function" || typeof t.onAudioEnded == "function" : !1;
|
|
1
|
+
import { A as e, C as t, E as n, F as r, M as i, N as a, O as o, S as s, T as c, _ as l, a as u, b as d, c as f, g as p, j as m, k as h, l as g, m as _, n as v, p as y, r as b, s as x, t as S, u as C, v as w, x as T, y as E } from "../client-BSTc3boO.js";
|
|
2
|
+
import { a as D, i as O, n as ee, t as k } from "../dist-CYpSKy-4.js";
|
|
3
|
+
import { n as A, r as te, t as j } from "../i18n-DJMxdTMU.js";
|
|
4
|
+
//#region src/delivery/TeacherInstructions.svelte
|
|
5
|
+
var M = p("<div class=\"teacher-instructions pie-teacher-instructions svelte-1jhejbv\"><button type=\"button\" class=\"teacher-instructions-toggle pie-teacher-instructions-toggle svelte-1jhejbv\"> </button> <div class=\"teacher-instructions-content pie-teacher-instructions-content svelte-1jhejbv\"></div></div>"), N = {
|
|
6
|
+
hash: "svelte-1jhejbv",
|
|
7
|
+
code: ".teacher-instructions.svelte-1jhejbv {margin-bottom:1rem;}.teacher-instructions-toggle.svelte-1jhejbv {padding:0;border:0;border-bottom:1px dotted currentColor;background:transparent;font:inherit;color:var(--pie-primary, #3f51b5);cursor:pointer;}.teacher-instructions-toggle.svelte-1jhejbv:focus-visible {outline:2px solid var(--pie-button-focus-outline, #3b82f6);outline-offset:2px;}.teacher-instructions-content.svelte-1jhejbv {padding-top:1rem;}"
|
|
35
8
|
};
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
Object.assign(e, t);
|
|
57
|
-
} catch {
|
|
58
|
-
return t;
|
|
59
|
-
}
|
|
60
|
-
return e;
|
|
61
|
-
}
|
|
62
|
-
function M({ sourceEl: e, fallbackSelector: t, component: n, complete: r, session: i }) {
|
|
63
|
-
let a = k(e, { fallbackSelector: t });
|
|
64
|
-
return a ? typeof a.onSessionChange == "function" ? (a.onSessionChange(i), a) : (a.dispatchEvent(new D(n, r)), a) : null;
|
|
9
|
+
function P(s, l) {
|
|
10
|
+
a(l, !0), f(s, N);
|
|
11
|
+
let p = v(l, "html", 7), m = v(l, "language", 7), b = h(!1), x = `simple-cloze-teacher-instructions-${Math.random().toString(36).slice(2, 10)}`;
|
|
12
|
+
var S = {
|
|
13
|
+
get html() {
|
|
14
|
+
return p();
|
|
15
|
+
},
|
|
16
|
+
set html(t) {
|
|
17
|
+
p(t), e();
|
|
18
|
+
},
|
|
19
|
+
get language() {
|
|
20
|
+
return m();
|
|
21
|
+
},
|
|
22
|
+
set language(t) {
|
|
23
|
+
m(t), e();
|
|
24
|
+
}
|
|
25
|
+
}, C = M(), w = t(C), D = c(w, !0), O = n(w, 2);
|
|
26
|
+
return g(O, p, !0), r(O), r(C), T((e) => {
|
|
27
|
+
u(w, "aria-expanded", d(b)), u(w, "aria-controls", x), y(D, e), u(O, "id", x), u(O, "hidden", !d(b));
|
|
28
|
+
}, [() => A(d(b) ? "hideTeacherInstructions" : "showTeacherInstructions", m())]), E("click", w, () => o(b, !d(b))), _(s, C), i(S);
|
|
65
29
|
}
|
|
30
|
+
w(["click"]), S(P, {
|
|
31
|
+
html: {},
|
|
32
|
+
language: {}
|
|
33
|
+
}, [], [], { mode: "open" });
|
|
66
34
|
//#endregion
|
|
67
35
|
//#region src/delivery/SimpleCloze.svelte
|
|
68
|
-
var
|
|
69
|
-
"$$slots",
|
|
70
|
-
"$$events",
|
|
71
|
-
"$$legacy",
|
|
72
|
-
"$$host"
|
|
73
|
-
]), P = T("<div class=\"mb-4 prose\"></div>"), F = d("<svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\"><circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"#bce2ff\"></circle><path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"#bce2ff\"></path><polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"#1a9cff\"></polygon></svg>"), I = d("<svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\"><path style=\"fill: #D0CAC5; stroke: #E6E3E0; stroke-width: 0.75; stroke-miterlimit: 10;\" d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\"></path><path style=\"fill: #B3ABA4; stroke: #CDC7C2; stroke-width: 0.5; stroke-miterlimit: 10;\" d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\"></path><circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\"></circle><path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"#bce2ff\"></path><polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"#1a9cff\"></polygon></svg>"), L = T("<button type=\"button\" class=\"mb-3 flex items-center gap-2 cursor-pointer select-none\"><!> <span class=\"text-sm hover:underline\"> </span></button>"), R = T("<span class=\"correctness-icon svelte-1glps5n\" style=\"background-color: #0EA449;\"><svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"></path></svg></span>"), z = T("<span class=\"correctness-icon svelte-1glps5n\" style=\"background-color: #BF0D00;\"><svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"></path></svg></span>"), B = T("<div class=\"p-4\"><!> <!> <div class=\"relative inline-block\"><!> <!> <input type=\"text\" placeholder=\"Enter your answer...\" class=\"outline-none px-3 py-2 rounded svelte-1glps5n\"/></div></div>"), V = {
|
|
36
|
+
var ne = p("<div class=\"simple-cloze-prompt svelte-1glps5n\"></div>"), re = l("<svg preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\" focusable=\"false\" class=\"svelte-1glps5n\"><circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"#bce2ff\"></circle><path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"#bce2ff\"></path><polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"#1a9cff\"></polygon></svg>"), ie = l("<svg preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\" focusable=\"false\" class=\"svelte-1glps5n\"><path style=\"fill: #D0CAC5; stroke: #E6E3E0; stroke-width: 0.75; stroke-miterlimit: 10;\" d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\"></path><path style=\"fill: #B3ABA4; stroke: #CDC7C2; stroke-width: 0.5; stroke-miterlimit: 10;\" d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\"></path><circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\"></circle><path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"#bce2ff\"></path><polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"#1a9cff\"></polygon></svg>"), ae = p("<button type=\"button\" class=\"simple-cloze-toggle svelte-1glps5n\"><span class=\"simple-cloze-toggle-icon svelte-1glps5n\" aria-hidden=\"true\"><!></span> <span class=\"simple-cloze-toggle-label svelte-1glps5n\"> </span></button>"), oe = p("<span class=\"correctness-icon correctness-icon--correct svelte-1glps5n\" aria-hidden=\"true\"><svg fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\" class=\"svelte-1glps5n\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"></path></svg></span>"), se = p("<span class=\"correctness-icon correctness-icon--incorrect svelte-1glps5n\" aria-hidden=\"true\"><svg fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\" class=\"svelte-1glps5n\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"></path></svg></span>"), ce = p("<div class=\"simple-cloze-root svelte-1glps5n\"><!> <!> <!> <div class=\"simple-cloze-response svelte-1glps5n\"><!> <input type=\"text\" spellcheck=\"false\"/> <span class=\"sr-only svelte-1glps5n\" role=\"status\"> </span></div></div>"), le = {
|
|
74
37
|
hash: "svelte-1glps5n",
|
|
75
|
-
code: "\n
|
|
38
|
+
code: "\n /*\n * Self-contained: players ship no Tailwind, so nothing here relies on host\n * utility classes or a CSS reset. Colours are `--pie-*` theme variables with\n * the fallbacks `@pie-lib/render-ui`'s `color` module uses.\n */.simple-cloze-root.svelte-1glps5n {padding:1rem;color:var(--pie-text, black);}.simple-cloze-prompt.svelte-1glps5n {margin-bottom:1rem;}.simple-cloze-prompt.svelte-1glps5n p {margin:0.5em 0;}.simple-cloze-prompt.svelte-1glps5n strong {font-weight:600;}.simple-cloze-toggle.svelte-1glps5n {display:flex;align-items:center;gap:0.5rem;margin:0 0 0.75rem;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;user-select:none;}.simple-cloze-toggle.svelte-1glps5n:hover .simple-cloze-toggle-label:where(.svelte-1glps5n) {text-decoration:underline;}.simple-cloze-toggle.svelte-1glps5n:focus-visible {outline:2px solid var(--pie-button-focus-outline, #3b82f6);outline-offset:2px;}.simple-cloze-toggle-icon.svelte-1glps5n {display:inline-flex;}.simple-cloze-toggle-icon.svelte-1glps5n svg:where(.svelte-1glps5n) {width:25px;height:25px;}.simple-cloze-toggle-label.svelte-1glps5n {font-size:0.875rem;line-height:1.25rem;}.simple-cloze-response.svelte-1glps5n {position:relative;display:inline-block;}.simple-cloze-input.svelte-1glps5n {box-sizing:border-box;margin:0;padding:0.5rem 0.75rem;\n /* The text colour, as ECR's input border: a light grey fails 3:1 (WCAG 1.4.11). */border:1px solid var(--pie-text, black);border-radius:0.25rem;background-color:transparent;color:var(--pie-text, black);font:inherit;}.simple-cloze-input.svelte-1glps5n:disabled {opacity:1;color:var(--pie-text, black);-webkit-text-fill-color:currentColor;}.simple-cloze-input.svelte-1glps5n:focus-visible {outline:2px solid var(--pie-button-focus-outline, #3b82f6);outline-offset:2px;}.simple-cloze-input--correct.svelte-1glps5n {border:2px solid var(--pie-correct-tertiary, #0ea449);}.simple-cloze-input--incorrect.svelte-1glps5n {border:2px solid var(--pie-incorrect-icon, #bf0d00);}.simple-cloze-input[readonly].svelte-1glps5n {font-weight:600;}.correctness-icon.svelte-1glps5n {position:absolute;top:-8px;left:-8px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--pie-white, #ffffff);}.correctness-icon.svelte-1glps5n svg:where(.svelte-1glps5n) {width:12px;height:12px;}.correctness-icon--correct.svelte-1glps5n {background-color:var(--pie-correct-tertiary, #0ea449);}.correctness-icon--incorrect.svelte-1glps5n {background-color:var(--pie-incorrect-icon, #bf0d00);}.sr-only.svelte-1glps5n {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}"
|
|
76
39
|
};
|
|
77
|
-
function
|
|
78
|
-
|
|
79
|
-
let w = null,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
})
|
|
83
|
-
if (
|
|
84
|
-
|
|
85
|
-
|
|
40
|
+
function F(l, p) {
|
|
41
|
+
a(p, !0), f(l, le);
|
|
42
|
+
let S = v(p, "model", 7, null), w = v(p, "session", 7, null), D = `simple-cloze-${Math.random().toString(36).slice(2, 10)}`, O = `${D}-prompt`, k = `${D}-feedback`, M = h(null), N = h(null), F = h(!1), I = m(() => S()?.mode === "evaluate"), L = m(() => S()?.correctness), R = m(() => d(L) === "correct"), z = m(() => d(L) === "incorrect"), ue = m(() => d(L) === "unanswered"), B = m(() => typeof S()?.prompt == "string" ? S().prompt : ""), V = m(() => typeof S()?.correctAnswer == "string" ? S().correctAnswer : ""), de = m(() => typeof w()?.value == "string" ? w().value : ""), H = m(() => d(I) && !d(R) && !!d(V).trim()), U = m(() => d(F) && d(H)), W = m(() => d(I) ? d(U) ? j("correctAnswerShown", S()?.language) : d(R) ? j("correct", S()?.language) : d(z) ? j("incorrect", S()?.language) : d(ue) ? j("unanswered", S()?.language) : "" : "");
|
|
43
|
+
s(() => {
|
|
44
|
+
d(H) || o(F, !1);
|
|
45
|
+
}), s(() => {
|
|
46
|
+
if (!d(N)) return;
|
|
47
|
+
let e = d(U) ? d(V) : d(de);
|
|
48
|
+
d(N).value !== e && (d(N).value = e);
|
|
49
|
+
}), s(() => {
|
|
50
|
+
if (!d(M) || !d(B)) return;
|
|
51
|
+
let e = (e) => console.warn("simple-cloze: MathJax render failed", e);
|
|
52
|
+
try {
|
|
53
|
+
Promise.resolve(te(d(M))).catch(e);
|
|
54
|
+
} catch (t) {
|
|
55
|
+
e(t);
|
|
86
56
|
}
|
|
87
|
-
}), l(() => {
|
|
88
|
-
w && (e(T) && x?.model?.correctAnswer ? w.value = x.model.correctAnswer : e(T) || (w.value = x?.session?.response || ""));
|
|
89
57
|
});
|
|
90
|
-
function
|
|
58
|
+
function fe(e) {
|
|
91
59
|
let t = e.target, n = t.value;
|
|
92
|
-
|
|
60
|
+
ee({
|
|
93
61
|
sourceEl: t,
|
|
94
|
-
fallbackSelector: "simple-cloze",
|
|
95
|
-
component: "simple-cloze",
|
|
96
62
|
session: {
|
|
97
|
-
...
|
|
98
|
-
|
|
63
|
+
...w(),
|
|
64
|
+
value: n
|
|
99
65
|
},
|
|
100
66
|
complete: n.trim().length > 0
|
|
101
67
|
});
|
|
102
68
|
}
|
|
103
|
-
function
|
|
104
|
-
|
|
69
|
+
function pe() {
|
|
70
|
+
d(H) && o(F, !d(F));
|
|
105
71
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
72
|
+
var me = {
|
|
73
|
+
get model() {
|
|
74
|
+
return S();
|
|
75
|
+
},
|
|
76
|
+
set model(t = null) {
|
|
77
|
+
S(t), e();
|
|
78
|
+
},
|
|
79
|
+
get session() {
|
|
80
|
+
return w();
|
|
81
|
+
},
|
|
82
|
+
set session(t = null) {
|
|
83
|
+
w(t), e();
|
|
84
|
+
}
|
|
85
|
+
}, G = ce(), K = t(G), he = (e) => {
|
|
86
|
+
{
|
|
87
|
+
let t = m(() => S()?.language);
|
|
88
|
+
P(e, {
|
|
89
|
+
get html() {
|
|
90
|
+
return S().teacherInstructions;
|
|
91
|
+
},
|
|
92
|
+
get language() {
|
|
93
|
+
return d(t);
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
110
97
|
};
|
|
111
|
-
|
|
112
|
-
|
|
98
|
+
C(K, (e) => {
|
|
99
|
+
S()?.teacherInstructions && e(he);
|
|
113
100
|
});
|
|
114
|
-
var
|
|
115
|
-
var
|
|
116
|
-
|
|
117
|
-
}, l = (e) => {
|
|
118
|
-
u(e, I());
|
|
119
|
-
};
|
|
120
|
-
m(i, (t) => {
|
|
121
|
-
e(T) ? t(o) : t(l, -1);
|
|
122
|
-
});
|
|
123
|
-
var d = a(v(i, 2));
|
|
124
|
-
s(r), C(() => {
|
|
125
|
-
y(r, "aria-pressed", e(T)), ee(d, `${e(T) ? "Hide" : "Show"} correct answer`);
|
|
126
|
-
}), c("click", r, D), u(n, r);
|
|
101
|
+
var q = n(K, 2), ge = (e) => {
|
|
102
|
+
var t = ne();
|
|
103
|
+
g(t, () => d(B), !0), r(t), b(t, (e) => o(M, e), () => d(M)), T(() => u(t, "id", O)), _(e, t);
|
|
127
104
|
};
|
|
128
|
-
|
|
129
|
-
|
|
105
|
+
C(q, (e) => {
|
|
106
|
+
d(B) && e(ge);
|
|
130
107
|
});
|
|
131
|
-
var
|
|
132
|
-
|
|
108
|
+
var J = n(q, 2), _e = (e) => {
|
|
109
|
+
var i = ae(), a = t(i), o = t(a), s = (e) => {
|
|
110
|
+
_(e, re());
|
|
111
|
+
}, l = (e) => {
|
|
112
|
+
_(e, ie());
|
|
113
|
+
};
|
|
114
|
+
C(o, (e) => {
|
|
115
|
+
d(U) ? e(s) : e(l, -1);
|
|
116
|
+
}), r(a);
|
|
117
|
+
var f = c(n(a, 2), !0);
|
|
118
|
+
r(i), T((e) => {
|
|
119
|
+
u(i, "aria-pressed", d(U)), y(f, e);
|
|
120
|
+
}, [() => A(d(U) ? "hideCorrectAnswer" : "showCorrectAnswer", S()?.language)]), E("click", i, pe), _(e, i);
|
|
133
121
|
};
|
|
134
|
-
|
|
135
|
-
|
|
122
|
+
C(J, (e) => {
|
|
123
|
+
d(H) && e(_e);
|
|
136
124
|
});
|
|
137
|
-
var
|
|
138
|
-
|
|
125
|
+
var Y = n(J, 2), X = t(Y), ve = (e) => {
|
|
126
|
+
_(e, oe());
|
|
127
|
+
}, ye = (e) => {
|
|
128
|
+
_(e, se());
|
|
139
129
|
};
|
|
140
|
-
|
|
141
|
-
|
|
130
|
+
C(X, (e) => {
|
|
131
|
+
d(I) && (d(R) || d(U)) ? e(ve) : d(I) && d(z) && e(ye, 1);
|
|
142
132
|
});
|
|
143
|
-
var
|
|
144
|
-
let
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
133
|
+
var Z = n(X, 2);
|
|
134
|
+
let Q;
|
|
135
|
+
b(Z, (e) => o(N, e), () => d(N));
|
|
136
|
+
var $ = n(Z, 2), be = c($, !0);
|
|
137
|
+
return r(Y), r(G), T((e, t) => {
|
|
138
|
+
Q = x(Z, 1, "simple-cloze-input svelte-1glps5n", null, Q, {
|
|
139
|
+
"simple-cloze-input--correct": d(I) && (d(R) || d(U)),
|
|
140
|
+
"simple-cloze-input--incorrect": d(I) && d(z) && !d(U)
|
|
141
|
+
}), u(Z, "placeholder", e), u(Z, "aria-labelledby", d(B) ? O : void 0), u(Z, "aria-label", t), u(Z, "aria-describedby", d(W) ? k : void 0), Z.disabled = S()?.disabled, Z.readOnly = d(U), u($, "id", k), y(be, d(W));
|
|
142
|
+
}, [() => j("placeholder", S()?.language), () => d(B) ? void 0 : j("answerInput", S()?.language)]), E("input", Z, fe), _(l, G), i(me);
|
|
151
143
|
}
|
|
152
|
-
w(["click"]),
|
|
144
|
+
w(["click", "input"]), S(F, {
|
|
153
145
|
model: { type: "Object" },
|
|
154
146
|
session: { type: "Object" }
|
|
155
147
|
}, [], []);
|
|
156
148
|
//#endregion
|
|
157
149
|
//#region src/delivery/index.ts
|
|
158
|
-
var
|
|
159
|
-
_internalSession = null;
|
|
150
|
+
var I = F.element, L = class extends I {
|
|
160
151
|
_playerSession = null;
|
|
161
152
|
_model = null;
|
|
162
153
|
_isComplete = () => {
|
|
163
|
-
let e = this.
|
|
154
|
+
let e = this._playerSession?.value;
|
|
164
155
|
return typeof e == "string" && e.trim().length > 0;
|
|
165
156
|
};
|
|
166
157
|
_dispatchModelSet = () => {
|
|
167
|
-
|
|
158
|
+
queueMicrotask(() => {
|
|
159
|
+
this.dispatchEvent(new D(this.tagName.toLowerCase(), this._isComplete(), this._model !== void 0));
|
|
160
|
+
});
|
|
168
161
|
};
|
|
169
162
|
_dispatchSessionChanged = () => {
|
|
170
|
-
this.dispatchEvent(new
|
|
163
|
+
this.dispatchEvent(new O(this.tagName.toLowerCase(), this._isComplete()));
|
|
171
164
|
};
|
|
172
165
|
set model(e) {
|
|
173
166
|
this._model = e, super.model = e, this._dispatchModelSet();
|
|
@@ -176,19 +169,19 @@ var U = H.element, W = class extends U {
|
|
|
176
169
|
return this._model;
|
|
177
170
|
}
|
|
178
171
|
set session(e) {
|
|
179
|
-
this._playerSession = e,
|
|
172
|
+
this._playerSession = e, super.session = e, this._dispatchSessionChanged();
|
|
180
173
|
}
|
|
181
174
|
get session() {
|
|
182
|
-
return this.
|
|
175
|
+
return this._playerSession;
|
|
183
176
|
}
|
|
184
177
|
onSessionChange = (e) => {
|
|
185
|
-
|
|
178
|
+
this._playerSession = k(this._playerSession, e), super.session = e, this._dispatchSessionChanged();
|
|
186
179
|
};
|
|
187
180
|
connectedCallback() {
|
|
188
181
|
super.connectedCallback(), this.onSessionChange = this.onSessionChange;
|
|
189
182
|
}
|
|
190
183
|
};
|
|
191
184
|
//#endregion
|
|
192
|
-
export {
|
|
185
|
+
export { L as default };
|
|
193
186
|
|
|
194
187
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["t","e"],"sources":["../../../../../lib-svelte/delivery-events/dist/index2.js","../../../../../lib-svelte/delivery-events/dist/index3.js","../../../src/delivery/SimpleCloze.svelte","../../../src/delivery/index.ts"],"sourcesContent":["//#region ../../shared/player-events/dist/index.js\nvar e = class e extends CustomEvent {\n\tstatic {\n\t\tthis.TYPE = \"model-set\";\n\t}\n\tconstructor(t, n, r) {\n\t\tsuper(e.TYPE, {\n\t\t\tbubbles: !0,\n\t\t\tcomposed: !0,\n\t\t\tdetail: {\n\t\t\t\tcomplete: n,\n\t\t\t\tcomponent: t,\n\t\t\t\thasModel: r\n\t\t\t}\n\t\t}), this.component = t, this.complete = n;\n\t}\n}, t = class e extends CustomEvent {\n\tstatic {\n\t\tthis.TYPE = \"session-changed\";\n\t}\n\tconstructor(t, n) {\n\t\tsuper(e.TYPE, {\n\t\t\tbubbles: !0,\n\t\t\tcomposed: !0,\n\t\t\tdetail: {\n\t\t\t\tcomplete: n,\n\t\t\t\tcomponent: t\n\t\t\t}\n\t\t}), this.component = t, this.complete = n;\n\t}\n};\n//#endregion\nexport { e as ModelSetEvent, t as SessionChangedEvent };\n","import { SessionChangedEvent as e } from \"./index2.js\";\n//#region src/session-bridge.ts\nvar t = (e) => {\n\tlet t = e;\n\treturn t ? typeof t.onSessionChange == \"function\" || typeof t.onAudioStarted == \"function\" || typeof t.onAudioEnded == \"function\" : !1;\n};\nfunction n(e, n = {}) {\n\tlet r = n.hostPredicate ?? t, i = e;\n\tfor (; i;) {\n\t\tif (r(i)) return i;\n\t\ti = i.parentElement;\n\t}\n\tif (typeof document < \"u\" && n.fallbackSelector) {\n\t\tlet e = document.querySelector(n.fallbackSelector);\n\t\tif (r(e)) return e;\n\t}\n\treturn null;\n}\nfunction r(e) {\n\treturn !!e && typeof e == \"object\" && !Array.isArray(e);\n}\nfunction i(e, t) {\n\tif (e === t) return e;\n\tif (!r(e) || !r(t) || Object.isFrozen(e) || !Object.isExtensible(e)) return t;\n\ttry {\n\t\tfor (let n of Object.keys(e)) n in t || delete e[n];\n\t\tObject.assign(e, t);\n\t} catch {\n\t\treturn t;\n\t}\n\treturn e;\n}\nfunction a({ sourceEl: t, fallbackSelector: r, component: i, complete: a, session: o }) {\n\tlet s = n(t, { fallbackSelector: r });\n\treturn s ? typeof s.onSessionChange == \"function\" ? (s.onSessionChange(o), s) : (s.dispatchEvent(new e(i, a)), s) : null;\n}\n//#endregion\nexport { a as forwardSessionChange, n as resolveDeliveryHost, i as writeSessionInPlace };\n","<svelte:options\n customElement={{\n shadow: 'none',\n props: {\n model: { type: 'Object' },\n session: { type: 'Object' }\n }\n }}\n/>\n\n<script lang=\"ts\">\nimport { onMount } from 'svelte';\nimport { forwardSessionChange } from '@pie-lib/delivery-events-svelte';\n\n// Props using $props() in Svelte 5 custom element mode\nlet props = $props<{ model?: any; session?: any }>();\n\nlet inputElement: HTMLInputElement | null = null;\nlet showCorrectAnswer = $state(false);\n\nonMount(() => {\n if (inputElement) {\n // Set initial value from session\n inputElement.value = props?.session?.response || '';\n\n inputElement.addEventListener('input', handleInput);\n }\n\n return () => {\n if (inputElement) {\n inputElement.removeEventListener('input', handleInput);\n }\n };\n});\n\n// Update input value when session changes externally\n$effect(() => {\n if (inputElement && !showCorrectAnswer) {\n const sessionValue = props?.session?.response || '';\n if (inputElement.value !== sessionValue) {\n inputElement.value = sessionValue;\n }\n }\n});\n\n// Update input value when showing correct answer\n$effect(() => {\n if (inputElement) {\n if (showCorrectAnswer && props?.model?.correctAnswer) {\n inputElement.value = props.model.correctAnswer;\n } else if (!showCorrectAnswer) {\n inputElement.value = props?.session?.response || '';\n }\n }\n});\n\nfunction handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n // Replace the session object so host players can detect updates reliably.\n const updatedSession = {\n ...props.session,\n response: newValue,\n };\n\n forwardSessionChange({\n sourceEl: target,\n fallbackSelector: 'simple-cloze',\n component: 'simple-cloze',\n session: updatedSession,\n complete: newValue.trim().length > 0,\n });\n}\n\nfunction toggleCorrectAnswer() {\n showCorrectAnswer = !showCorrectAnswer;\n}\n\n// Computed values\nconst isEvaluateMode = $derived(props?.model?.env?.mode === 'evaluate');\nconst correctness = $derived(props?.model?.correctness);\nconst isCorrect = $derived(correctness === 'correct');\nconst isIncorrect = $derived(correctness === 'incorrect');\n</script>\n\n<div class=\"p-4\">\n {#if props?.model?.prompt}\n <div class=\"mb-4 prose\">{@html props.model.prompt}</div>\n {/if}\n\n {#if isEvaluateMode && isIncorrect}\n <button\n type=\"button\"\n class=\"mb-3 flex items-center gap-2 cursor-pointer select-none\"\n onclick={toggleCorrectAnswer}\n aria-pressed={showCorrectAnswer}\n >\n {#if showCorrectAnswer}\n <!-- Hide correct answer icon (open state) -->\n <svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\">\n <circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"#bce2ff\" />\n <path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"#bce2ff\" />\n <polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"#1a9cff\" />\n </svg>\n {:else}\n <!-- Show correct answer icon (closed state) -->\n <svg style=\"width: 25px; height: 25px;\" preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\">\n <path style=\"fill: #D0CAC5; stroke: #E6E3E0; stroke-width: 0.75; stroke-miterlimit: 10;\" d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\" />\n <path style=\"fill: #B3ABA4; stroke: #CDC7C2; stroke-width: 0.5; stroke-miterlimit: 10;\" d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\" />\n <circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\" />\n <path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"#bce2ff\" />\n <polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"#1a9cff\" />\n </svg>\n {/if}\n <span class=\"text-sm hover:underline\">\n {showCorrectAnswer ? 'Hide' : 'Show'} correct answer\n </span>\n </button>\n {/if}\n\n <div class=\"relative inline-block\">\n {#if isEvaluateMode && (isCorrect || showCorrectAnswer)}\n <span class=\"correctness-icon\" style=\"background-color: #0EA449;\">\n <svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/>\n </svg>\n </span>\n {/if}\n {#if isEvaluateMode && isIncorrect && !showCorrectAnswer}\n <span class=\"correctness-icon\" style=\"background-color: #BF0D00;\">\n <svg style=\"width: 12px; height: 12px; color: white;\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n </svg>\n </span>\n {/if}\n <input\n bind:this={inputElement}\n type=\"text\"\n placeholder=\"Enter your answer...\"\n disabled={props?.model?.disabled}\n readonly={showCorrectAnswer}\n class=\"outline-none px-3 py-2 rounded\"\n style:border={isEvaluateMode && (isCorrect || showCorrectAnswer) ? 'solid 2px #0EA449' : isEvaluateMode && isIncorrect && !showCorrectAnswer ? 'solid 2px #BF0D00' : 'solid 1px #d1d5db'}\n style:color={isEvaluateMode && (isCorrect || isIncorrect) ? 'black' : ''}\n />\n </div>\n</div>\n\n<style>\n /* Custom styles for correct answer display */\n input[readonly] {\n font-weight: 600;\n }\n\n .correctness-icon {\n position: absolute;\n top: -8px;\n left: -8px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n }\n</style>\n","// Import the Svelte component compiled as custom element\nimport SimpleClozeComponent from './SimpleCloze.svelte';\nimport {\n ModelSetEvent,\n SessionChangedEvent,\n writeSessionInPlace,\n} from '@pie-lib/delivery-events-svelte';\n\n// Get the base Svelte custom element class\nconst SvelteElementClass = (SimpleClozeComponent as any).element;\n\n// Create a wrapper that properly handles session updates\nclass SimpleClozeElement extends SvelteElementClass {\n _internalSession: any = null;\n /**\n * The session object the player handed us. A player reads the learner's\n * response back off this object, so every update is written into it as well\n * as into the copy the component renders from.\n */\n _playerSession: any = null;\n _model: any = null;\n\n _isComplete = () => {\n const response = this._internalSession?.response;\n return typeof response === 'string' && response.trim().length > 0;\n };\n\n _dispatchModelSet = () => {\n this.dispatchEvent(\n new ModelSetEvent(this.tagName.toLowerCase(), this._isComplete(), this._model !== undefined)\n );\n };\n\n _dispatchSessionChanged = () => {\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this._isComplete()));\n };\n\n set model(m: any) {\n this._model = m;\n super.model = m;\n this._dispatchModelSet();\n }\n\n get model() {\n return this._model;\n }\n\n set session(s: any) {\n this._playerSession = s;\n this._internalSession = s;\n super.session = s;\n this._dispatchSessionChanged();\n }\n\n get session() {\n return this._internalSession;\n }\n\n onSessionChange = (updatedSession: any) => {\n writeSessionInPlace(this._playerSession, updatedSession);\n this._internalSession = updatedSession;\n super.session = updatedSession;\n this._dispatchSessionChanged();\n };\n\n connectedCallback() {\n super.connectedCallback();\n (this as any).onSessionChange = this.onSessionChange;\n }\n}\n\n// Export the custom element class\n// The demo loader will register it with customElements.define()\nexport default SimpleClozeElement;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/delivery/TeacherInstructions.svelte","../../../src/delivery/SimpleCloze.svelte","../../../src/delivery/index.ts"],"sourcesContent":["<script lang=\"ts\">\nimport { tCommon } from '../i18n';\n\nlet { html, language }: { html: string; language?: string } = $props();\n\nlet expanded = $state(false);\nconst panelId = `simple-cloze-teacher-instructions-${Math.random().toString(36).slice(2, 10)}`;\n</script>\n\n<!-- Collapsed by default, as multiple-choice shows them; the controller sends them to instructors only. -->\n<div class=\"teacher-instructions pie-teacher-instructions\">\n <button\n type=\"button\"\n class=\"teacher-instructions-toggle pie-teacher-instructions-toggle\"\n aria-expanded={expanded}\n aria-controls={panelId}\n onclick={() => (expanded = !expanded)}\n >\n {tCommon(expanded ? 'hideTeacherInstructions' : 'showTeacherInstructions', language)}\n </button>\n <div id={panelId} class=\"teacher-instructions-content pie-teacher-instructions-content\" hidden={!expanded}>\n {@html html}\n </div>\n</div>\n\n<style>\n .teacher-instructions {\n margin-bottom: 1rem;\n }\n\n .teacher-instructions-toggle {\n padding: 0;\n border: 0;\n border-bottom: 1px dotted currentColor;\n background: transparent;\n font: inherit;\n color: var(--pie-primary, #3f51b5);\n cursor: pointer;\n }\n\n .teacher-instructions-toggle:focus-visible {\n outline: 2px solid var(--pie-button-focus-outline, #3b82f6);\n outline-offset: 2px;\n }\n\n .teacher-instructions-content {\n padding-top: 1rem;\n }\n</style>\n","<svelte:options\n customElement={{\n shadow: 'none',\n props: {\n model: { type: 'Object' },\n session: { type: 'Object' }\n }\n }}\n/>\n\n<script lang=\"ts\">\nimport { forwardSessionChange } from '@pie-lib/delivery-events-svelte';\nimport { renderMath } from '@pie-element/shared-math-rendering-mathjax';\nimport { t, tCommon } from '../i18n';\nimport TeacherInstructions from './TeacherInstructions.svelte';\n\nlet { model = null, session = null }: { model?: any; session?: any } = $props();\n\n// Per-instance ids: a page can hold several instances, and several versions of\n// this element, each with its own Svelte runtime.\nconst instanceId = `simple-cloze-${Math.random().toString(36).slice(2, 10)}`;\nconst promptId = `${instanceId}-prompt`;\nconst feedbackId = `${instanceId}-feedback`;\n\nlet promptElement: HTMLDivElement | null = $state(null);\nlet inputElement: HTMLInputElement | null = $state(null);\nlet showCorrectAnswer = $state(false);\n\nconst isEvaluateMode = $derived(model?.mode === 'evaluate');\nconst correctness = $derived(model?.correctness);\nconst isCorrect = $derived(correctness === 'correct');\nconst isIncorrect = $derived(correctness === 'incorrect');\nconst isUnanswered = $derived(correctness === 'unanswered');\nconst prompt = $derived(typeof model?.prompt === 'string' ? model.prompt : '');\nconst correctAnswer = $derived(typeof model?.correctAnswer === 'string' ? model.correctAnswer : '');\nconst sessionValue = $derived(typeof session?.value === 'string' ? session.value : '');\n// As in multiple-choice, any response short of correct can be revealed,\n// including none.\nconst canShowCorrectAnswer = $derived(isEvaluateMode && !isCorrect && !!correctAnswer.trim());\nconst showingCorrectAnswer = $derived(showCorrectAnswer && canShowCorrectAnswer);\n\nconst feedbackText = $derived.by(() => {\n if (!isEvaluateMode) return '';\n if (showingCorrectAnswer) return t('correctAnswerShown', model?.language);\n if (isCorrect) return t('correct', model?.language);\n if (isIncorrect) return t('incorrect', model?.language);\n if (isUnanswered) return t('unanswered', model?.language);\n return '';\n});\n\n// Leaving evaluate mode, or a response that turned correct, turns the reveal\n// off, so gather mode never starts on the answer key.\n$effect(() => {\n if (!canShowCorrectAnswer) {\n showCorrectAnswer = false;\n }\n});\n\n// The input shows the session value, or the answer key while it is revealed.\n// A player that resets or replaces the session clears or restores it.\n$effect(() => {\n if (!inputElement) return;\n const next = showingCorrectAnswer ? correctAnswer : sessionValue;\n if (inputElement.value !== next) {\n inputElement.value = next;\n }\n});\n\n// Typesets the prompt's math each time it renders. `renderMath` resolves once\n// MathJax has run, so a load failure arrives as a rejection.\n$effect(() => {\n if (!promptElement || !prompt) return;\n const warn = (err: unknown) => console.warn('simple-cloze: MathJax render failed', err);\n try {\n Promise.resolve(renderMath(promptElement)).catch(warn);\n } catch (err) {\n warn(err);\n }\n});\n\nfunction handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n const newValue = target.value;\n\n // The player owns the session's `id` and `element` (the versioned tag it\n // registered this element under), so neither is written here.\n forwardSessionChange({\n sourceEl: target,\n session: { ...session, value: newValue },\n complete: newValue.trim().length > 0,\n });\n}\n\nfunction toggleCorrectAnswer() {\n if (!canShowCorrectAnswer) return;\n showCorrectAnswer = !showCorrectAnswer;\n}\n</script>\n\n<div class=\"simple-cloze-root\">\n {#if model?.teacherInstructions}\n <TeacherInstructions html={model.teacherInstructions} language={model?.language} />\n {/if}\n\n {#if prompt}\n <div bind:this={promptElement} id={promptId} class=\"simple-cloze-prompt\">{@html prompt}</div>\n {/if}\n\n {#if canShowCorrectAnswer}\n <button\n type=\"button\"\n class=\"simple-cloze-toggle\"\n onclick={toggleCorrectAnswer}\n aria-pressed={showingCorrectAnswer}\n >\n <span class=\"simple-cloze-toggle-icon\" aria-hidden=\"true\">\n {#if showingCorrectAnswer}\n <svg preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-283 359 34 35\" focusable=\"false\">\n <circle cx=\"-266\" cy=\"375.9\" r=\"14\" fill=\"#bce2ff\" />\n <path d=\"M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z\" fill=\"#bce2ff\" />\n <polygon points=\"-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6\" fill=\"#1a9cff\" />\n </svg>\n {:else}\n <svg preserveAspectRatio=\"xMinYMin meet\" version=\"1.1\" viewBox=\"-129.5 127 34 35\" focusable=\"false\">\n <path style=\"fill: #D0CAC5; stroke: #E6E3E0; stroke-width: 0.75; stroke-miterlimit: 10;\" d=\"M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z\" />\n <path style=\"fill: #B3ABA4; stroke: #CDC7C2; stroke-width: 0.5; stroke-miterlimit: 10;\" d=\"M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z\" />\n <circle cx=\"-114.2\" cy=\"143.5\" r=\"14\" fill=\"white\" />\n <path d=\"M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z\" fill=\"#bce2ff\" />\n <polygon points=\"-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2\" fill=\"#1a9cff\" />\n </svg>\n {/if}\n </span>\n <span class=\"simple-cloze-toggle-label\">\n {tCommon(showingCorrectAnswer ? 'hideCorrectAnswer' : 'showCorrectAnswer', model?.language)}\n </span>\n </button>\n {/if}\n\n <div class=\"simple-cloze-response\">\n {#if isEvaluateMode && (isCorrect || showingCorrectAnswer)}\n <span class=\"correctness-icon correctness-icon--correct\" aria-hidden=\"true\">\n <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/>\n </svg>\n </span>\n {:else if isEvaluateMode && isIncorrect}\n <span class=\"correctness-icon correctness-icon--incorrect\" aria-hidden=\"true\">\n <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" focusable=\"false\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\n </svg>\n </span>\n {/if}\n <input\n bind:this={inputElement}\n type=\"text\"\n class=\"simple-cloze-input\"\n class:simple-cloze-input--correct={isEvaluateMode && (isCorrect || showingCorrectAnswer)}\n class:simple-cloze-input--incorrect={isEvaluateMode && isIncorrect && !showingCorrectAnswer}\n placeholder={t('placeholder', model?.language)}\n spellcheck=\"false\"\n aria-labelledby={prompt ? promptId : undefined}\n aria-label={prompt ? undefined : t('answerInput', model?.language)}\n aria-describedby={feedbackText ? feedbackId : undefined}\n disabled={model?.disabled}\n readonly={showingCorrectAnswer}\n oninput={handleInput}\n />\n <span id={feedbackId} class=\"sr-only\" role=\"status\">{feedbackText}</span>\n </div>\n</div>\n\n<style>\n /*\n * Self-contained: players ship no Tailwind, so nothing here relies on host\n * utility classes or a CSS reset. Colours are `--pie-*` theme variables with\n * the fallbacks `@pie-lib/render-ui`'s `color` module uses.\n */\n .simple-cloze-root {\n padding: 1rem;\n color: var(--pie-text, black);\n }\n\n .simple-cloze-prompt {\n margin-bottom: 1rem;\n }\n\n .simple-cloze-prompt :global(p) {\n margin: 0.5em 0;\n }\n\n .simple-cloze-prompt :global(strong) {\n font-weight: 600;\n }\n\n .simple-cloze-toggle {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0 0 0.75rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n user-select: none;\n }\n\n .simple-cloze-toggle:hover .simple-cloze-toggle-label {\n text-decoration: underline;\n }\n\n .simple-cloze-toggle:focus-visible {\n outline: 2px solid var(--pie-button-focus-outline, #3b82f6);\n outline-offset: 2px;\n }\n\n .simple-cloze-toggle-icon {\n display: inline-flex;\n }\n\n .simple-cloze-toggle-icon svg {\n width: 25px;\n height: 25px;\n }\n\n .simple-cloze-toggle-label {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n\n .simple-cloze-response {\n position: relative;\n display: inline-block;\n }\n\n .simple-cloze-input {\n box-sizing: border-box;\n margin: 0;\n padding: 0.5rem 0.75rem;\n /* The text colour, as ECR's input border: a light grey fails 3:1 (WCAG 1.4.11). */\n border: 1px solid var(--pie-text, black);\n border-radius: 0.25rem;\n background-color: transparent;\n color: var(--pie-text, black);\n font: inherit;\n }\n\n .simple-cloze-input:disabled {\n opacity: 1;\n color: var(--pie-text, black);\n -webkit-text-fill-color: currentColor;\n }\n\n .simple-cloze-input:focus-visible {\n outline: 2px solid var(--pie-button-focus-outline, #3b82f6);\n outline-offset: 2px;\n }\n\n .simple-cloze-input--correct {\n border: 2px solid var(--pie-correct-tertiary, #0ea449);\n }\n\n .simple-cloze-input--incorrect {\n border: 2px solid var(--pie-incorrect-icon, #bf0d00);\n }\n\n .simple-cloze-input[readonly] {\n font-weight: 600;\n }\n\n .correctness-icon {\n position: absolute;\n top: -8px;\n left: -8px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n color: var(--pie-white, #ffffff);\n }\n\n .correctness-icon svg {\n width: 12px;\n height: 12px;\n }\n\n .correctness-icon--correct {\n background-color: var(--pie-correct-tertiary, #0ea449);\n }\n\n .correctness-icon--incorrect {\n background-color: var(--pie-incorrect-icon, #bf0d00);\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n</style>\n","// Import the Svelte component compiled as custom element\nimport SimpleClozeComponent from './SimpleCloze.svelte';\nimport {\n ModelSetEvent,\n SessionChangedEvent,\n writeSessionInPlace,\n} from '@pie-lib/delivery-events-svelte';\n\n// Get the base Svelte custom element class\nconst SvelteElementClass = (SimpleClozeComponent as any).element;\n\n// Create a wrapper that properly handles session updates\nclass SimpleClozeElement extends SvelteElementClass {\n /**\n * The session object the player handed us, which `session` returns. A player\n * reads the learner's response back off this object, so every update is\n * written into it; the component renders from a fresh copy so its `$derived`\n * reads re-run.\n */\n _playerSession: any = null;\n _model: any = null;\n\n _isComplete = () => {\n const value = this._playerSession?.value;\n return typeof value === 'string' && value.trim().length > 0;\n };\n\n /**\n * Dispatched a microtask later: on load a player sets the model and then the\n * session in the same task (`element.model = …; element.session = …`), and\n * `complete` can only report a restored response once the session is here.\n */\n _dispatchModelSet = () => {\n queueMicrotask(() => {\n this.dispatchEvent(\n new ModelSetEvent(this.tagName.toLowerCase(), this._isComplete(), this._model !== undefined)\n );\n });\n };\n\n _dispatchSessionChanged = () => {\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this._isComplete()));\n };\n\n set model(m: any) {\n this._model = m;\n super.model = m;\n this._dispatchModelSet();\n }\n\n get model() {\n return this._model;\n }\n\n set session(s: any) {\n this._playerSession = s;\n super.session = s;\n this._dispatchSessionChanged();\n }\n\n get session() {\n return this._playerSession;\n }\n\n onSessionChange = (updatedSession: any) => {\n // A frozen or missing player session cannot be written into; the update\n // then replaces it, as `writeSessionInPlace` returns.\n this._playerSession = writeSessionInPlace(this._playerSession, updatedSession);\n super.session = updatedSession;\n this._dispatchSessionChanged();\n };\n\n connectedCallback() {\n super.connectedCallback();\n (this as any).onSessionChange = this.onSessionChange;\n }\n}\n\n// Export the custom element class\n// The demo loader will register it with customElements.define()\nexport default SimpleClozeElement;\n"],"mappings":"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"}
|