@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-task.js

@@ -0,0 +1,546 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/widgets/webwriter-task.ts
+import { html, css } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { LitElementWw } from "@webwriter/lit";
+import { customElement, queryAssignedElements, property, query } from "lit/decorators.js";
+import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js";
+import SlDetails from "@shoelace-style/shoelace/dist/components/details/details.component.js";
+import SlPopup from "@shoelace-style/shoelace/dist/components/popup/popup.component.js";
+import SlButtonGroup from "@shoelace-style/shoelace/dist/components/button-group/button-group.component.js";
+import SlTabGroup from "@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js";
+import SlTab from "@shoelace-style/shoelace/dist/components/tab/tab.component.js";
+import SlTabPanel from "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js";
+
+// ../../node_modules/bootstrap-icons/icons/patch-question.svg
+var patch_question_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-question" viewBox="0 0 16 16">%0A  <path d="M8.05 9.6c.336 0 .504-.24.554-.627.04-.534.198-.815.847-1.26.673-.475 1.049-1.09 1.049-1.986 0-1.325-.92-2.227-2.262-2.227-1.02 0-1.792.492-2.1 1.29A1.7 1.7 0 0 0 6 5.48c0 .393.203.64.545.64.272 0 .455-.147.564-.51.158-.592.525-.915 1.074-.915.61 0 1.03.446 1.03 1.084 0 .563-.208.885-.822 1.325-.619.433-.926.914-.926 1.64v.111c0 .428.208.745.585.745"/>%0A  <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911z"/>%0A  <path d="M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/patch-question-fill.svg
+var patch_question_fill_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-question-fill" viewBox="0 0 16 16">%0A  <path d="M5.933.87a2.89 2.89 0 0 1 4.134 0l.622.638.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01zM7.002 11a1 1 0 1 0 2 0 1 1 0 0 0-2 0m1.602-2.027c.04-.534.198-.815.846-1.26.674-.475 1.05-1.09 1.05-1.986 0-1.325-.92-2.227-2.262-2.227-1.02 0-1.792.492-2.1 1.29A1.7 1.7 0 0 0 6 5.48c0 .393.203.64.545.64.272 0 .455-.147.564-.51.158-.592.525-.915 1.074-.915.61 0 1.03.446 1.03 1.084 0 .563-.208.885-.822 1.325-.619.433-.926.914-.926 1.64v.111c0 .428.208.745.585.745.336 0 .504-.24.554-.627"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/patch-check.svg
+var patch_check_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-check" viewBox="0 0 16 16">%0A  <path fill-rule="evenodd" d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0"/>%0A  <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911z"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/patch-check-fill.svg
+var patch_check_fill_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-check-fill" viewBox="0 0 16 16">%0A  <path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708"/>%0A</svg>';
+
+// src/widgets/webwriter-task.ts
+async function arrayBufferToDataUrl(buffer) {
+  return new Promise((r) => {
+    const reader = new FileReader();
+    reader.onload = () => r(reader.result);
+    reader.readAsDataURL(new Blob([buffer]));
+  });
+}
+async function dataUrlToArrayBuffer(url) {
+  return await (await (await fetch(url)).blob()).arrayBuffer();
+}
+function getKeyMaterial(password) {
+  let enc = new TextEncoder();
+  return window.crypto.subtle.importKey(
+    "raw",
+    enc.encode(password),
+    { name: "PBKDF2" },
+    false,
+    ["deriveBits", "deriveKey"]
+  );
+}
+function getKey(keyMaterial, salt) {
+  return window.crypto.subtle.deriveKey(
+    {
+      "name": "PBKDF2",
+      salt,
+      "iterations": 1e5,
+      "hash": "SHA-256"
+    },
+    keyMaterial,
+    { "name": "AES-GCM", "length": 256 },
+    true,
+    ["encrypt", "decrypt"]
+  );
+}
+function romanOrdinal(num, capitalize = false) {
+  let roman = {
+    m: 1e3,
+    cm: 900,
+    d: 500,
+    cd: 400,
+    c: 100,
+    xc: 90,
+    l: 50,
+    xl: 40,
+    x: 10,
+    ix: 9,
+    v: 5,
+    iv: 4,
+    i: 1
+  };
+  let str = "";
+  for (let i of Object.keys(roman)) {
+    let q = Math.floor(num / roman[i]);
+    num -= q * roman[i];
+    str += i.repeat(q);
+  }
+  return capitalize ? str.toUpperCase() : str;
+}
+function alphabeticalOrdinal(num, capitalize = false, alphabet = "abcdefghijklmnopqrstuvwxyz") {
+  const a = alphabet[0];
+  const k = alphabet.length;
+  const str = a.repeat(Math.floor(num / k)) + alphabet[num % k];
+  return capitalize ? str.toUpperCase() : str;
+}
+var _activeExplainer_dec, _hintSlotEl_dec, _slotEl_dec, _iv_dec, _salt_dec, _password_dec, _solution_dec, _counter_dec, _hintOpen_dec, _submitted_dec, _directSubmit_dec, _isChanged_dec, _hint_dec, _hints_dec, _a, _WebwriterTask_decorators, _init, _hints, _hint, _isChanged, _submitted, _hintOpen, _counter, _solution, _password, _salt, _iv, _WebwriterTask_instances, encodeSolution_fn, decodeSolution_fn, _slotEl, _hintSlotEl, _activeExplainer;
+_WebwriterTask_decorators = [customElement("webwriter-task")];
+var _WebwriterTask = class _WebwriterTask extends (_a = LitElementWw, _hints_dec = [queryAssignedElements({ slot: "hint" })], _hint_dec = [property({ type: Boolean, attribute: true, reflect: true })], _isChanged_dec = [property({ type: Boolean, state: true, attribute: false, reflect: false })], _directSubmit_dec = [property({ type: Boolean, attribute: false, reflect: true })], _submitted_dec = [property({ type: Boolean, attribute: true, reflect: true })], _hintOpen_dec = [property({ attribute: false, state: true })], _counter_dec = [property({ attribute: true, reflect: true })], _solution_dec = [property({ type: String, attribute: true, reflect: true })], _password_dec = [property({ type: String, attribute: false, reflect: false })], _salt_dec = [property({ type: String, attribute: true, reflect: true })], _iv_dec = [property({ type: String, attribute: true, reflect: true })], _slotEl_dec = [query("slot:not([name])")], _hintSlotEl_dec = [query("slot[name=hint]")], _activeExplainer_dec = [property()], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _WebwriterTask_instances);
+    __publicField(this, "msg", (str) => this.lang in _WebwriterTask.localization ? _WebwriterTask.localization[this.lang][str] ?? str : str);
+    __privateAdd(this, _hints, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _hint, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _isChanged, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _submitted, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __publicField(this, "toggleExplainers", () => {
+      if (this.explainers.length) {
+        this.explainers.forEach((explainer) => explainer.remove());
+        this.activeExplainer = void 0;
+      } else {
+        const solutionExplainer = this.ownerDocument.createElement("webwriter-task-explainer");
+        solutionExplainer.slot = "explainer";
+        solutionExplainer.id = "solution";
+        solutionExplainer.active = true;
+        this.append(solutionExplainer);
+        this.ownerDocument.getSelection().setBaseAndExtent(solutionExplainer, 0, solutionExplainer, 0);
+        this.requestUpdate();
+        this.activeExplainer = "solution";
+      }
+    });
+    __privateAdd(this, _hintOpen, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _counter, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "observer");
+    __privateAdd(this, _solution, __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
+    // @option({type: String, label: {_: "Password"}, description: {_: "Password-protects quiz answers"}})
+    __privateAdd(this, _password, __runInitializers(_init, 36, this, "B08bxd82SAOf")), __runInitializers(_init, 39, this);
+    __privateAdd(this, _salt, __runInitializers(_init, 40, this)), __runInitializers(_init, 43, this);
+    __privateAdd(this, _iv, __runInitializers(_init, 44, this)), __runInitializers(_init, 47, this);
+    __privateAdd(this, _slotEl, __runInitializers(_init, 48, this)), __runInitializers(_init, 51, this);
+    __privateAdd(this, _hintSlotEl, __runInitializers(_init, 52, this)), __runInitializers(_init, 55, this);
+    __publicField(this, "handleHintSlotChange", (e) => {
+      if (!this.hasHintElement) {
+        this.hintOpen = false;
+        this.hint = false;
+      }
+    });
+    __publicField(this, "handleHintKeydown", (e) => {
+      console.log(document.getSelection().anchorOffset === 0, this.hints.includes(document.getSelection().anchorNode.parentElement));
+      if (e.key === "Backspace" && document.getSelection().anchorOffset === 0 && this.hints.includes(document.getSelection().anchorNode.parentElement)) {
+        this.hintOpen = false;
+        this.hint = false;
+      }
+    });
+    __publicField(this, "handleSubmit", async () => {
+      await __privateMethod(this, _WebwriterTask_instances, decodeSolution_fn).call(this);
+      this.answer.reportSolution();
+      this.dispatchEvent(new SubmitEvent("submit", { bubbles: true, composed: true }));
+      this.activeExplainer = this.explainers[0].id;
+      this.submitted = true;
+    });
+    __publicField(this, "handleReset", () => {
+      this.answer.reset && this.answer.reset();
+      this.isChanged = false;
+      this.submitted = false;
+    });
+    __publicField(this, "handleAnswerChange", async (e) => {
+      this.isChanged = true;
+      if (this.isContentEditable) {
+        __privateMethod(this, _WebwriterTask_instances, encodeSolution_fn).call(this);
+      }
+    });
+    __publicField(this, "handleSlotChange", (e) => {
+      this.requestUpdate();
+      if (this.isContentEditable) {
+        const solution = __privateMethod(this, _WebwriterTask_instances, decodeSolution_fn).call(this) ?? {};
+        Object.entries(solution).forEach(([k, v]) => {
+          this.answer[k] = v;
+        });
+      }
+    });
+    __privateAdd(this, _activeExplainer, __runInitializers(_init, 56, this)), __runInitializers(_init, 59, this);
+  }
+  get hasHintElement() {
+    return this.hints.length > 0;
+  }
+  get hasHintContent() {
+    return this.hints.some((hint) => hint.innerText.trim() !== "");
+  }
+  get directSubmit() {
+    return !this.closest("webwriter-quiz");
+  }
+  set directSubmit(value) {
+    return;
+  }
+  toggleHint() {
+    this.hintOpen = !this.hintOpen;
+    if (this.isContentEditable && this.hintOpen) {
+      this.hint = true;
+      if (!this.hasHintElement) {
+        const hintEl = this.ownerDocument.createElement("webwriter-task-hint");
+        hintEl.slot = "hint";
+        this.answer.insertAdjacentElement("beforebegin", hintEl);
+        this.ownerDocument.getSelection().setBaseAndExtent(hintEl, 0, hintEl, 0);
+      }
+    } else if (this.isContentEditable && !this.hintOpen) {
+      if (!this.hasHintContent) {
+        this.hint = false;
+        this.hintSlotEl.assignedElements().forEach((el) => el.remove());
+      }
+    }
+  }
+  get explainers() {
+    return Array.from(this.querySelectorAll("webwriter-task-explainer"));
+  }
+  get index() {
+    return [...this?.parentElement?.children ?? []].indexOf(this);
+  }
+  get ordinalExpr() {
+    if (this.index === void 0 || this.index === -1) {
+      return void 0;
+    }
+    if (this.counter === "number") {
+      return `${this.index + 1}.`;
+    } else if (this.counter === "roman") {
+      return `${romanOrdinal(this.index + 1)}.`;
+    } else if (this.counter === "roman-capitalized") {
+      return `${romanOrdinal(this.index + 1, true)}.`;
+    } else if (this.counter === "alphabetical") {
+      return `${alphabeticalOrdinal(this.index)}.`;
+    } else if (this.counter === "alphabetical-capitalized") {
+      return `${alphabeticalOrdinal(this.index, true)}.`;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.observer = new MutationObserver(() => this.requestUpdate());
+    this.parentElement && this.observer.observe(this.parentElement, { childList: true });
+    this.addEventListener("keydown", (e) => this.handleHintKeydown(e));
+  }
+  firstUpdated(_changedProperties) {
+    if (this.isContentEditable) {
+      __privateMethod(this, _WebwriterTask_instances, decodeSolution_fn).call(this);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer.disconnect();
+  }
+  checkSolution() {
+    const solution = __privateMethod(this, _WebwriterTask_instances, decodeSolution_fn).call(this);
+    return Object.entries(solution).every(([k, v]) => {
+      return JSON.stringify(this.answer[k]) === JSON.stringify(v);
+    });
+  }
+  reportSolution() {
+    this.answer.reportSolution(__privateMethod(this, _WebwriterTask_instances, decodeSolution_fn).call(this));
+  }
+  get answer() {
+    return this.slotEl?.assignedElements()[0];
+  }
+  selectExplainer(id) {
+    const explainer = this.explainers.find((node) => node.id === id);
+    explainer.active = true;
+    this.explainers.filter((node) => node.id !== id).forEach((node) => node.active = false);
+    this.activeExplainer = id;
+    setTimeout(() => this.ownerDocument.getSelection().setBaseAndExtent(explainer, 0, explainer, 0));
+  }
+  get explainerLabels() {
+    return {
+      "solution": "Explainer",
+      "else": "Else"
+    };
+  }
+  render() {
+    return html`
+      <header>
+        <span>${this.ordinalExpr}</span>
+        <slot name="prompt"></slot>
+        <div id="task-buttons">
+          <sl-icon-button class="author-only" id="feedback" src=${!this.explainers.length ? patch_check_default : patch_check_fill_default} @click=${() => this.toggleExplainers()}></sl-icon-button>
+          <sl-popup id="hint-popup" ?active=${this.hintOpen} placement="left" arrow auto-size shift @selectstart=${(e) => e.stopImmediatePropagation()}>
+            <sl-icon-button class="author-only" slot="anchor" id="hint" src=${!this.hasHintContent && !this.hintOpen ? patch_question_default : patch_question_fill_default} @click=${() => this.toggleHint()}></sl-icon-button>
+            <div id="hint-content">
+              <slot name="hint" @slotchange=${this.handleHintSlotChange}></slot>
+            </div>
+          </sl-popup>
+        </div>
+      </header>
+      <slot @ww-answer-change=${this.handleAnswerChange} @slotchange=${this.handleSlotChange} ?inert=${this.submitted}></slot>
+      <sl-tab-group id="explainer-group" placement="end" ?data-empty=${!this.explainers.length} ?data-single=${this.explainers.length === 1}>
+        ${this.explainers.map((explainer, i) => html`<sl-tab ?active=${this.activeExplainer === explainer.id} slot="nav" @click=${() => this.selectExplainer(explainer.id)}>${this.explainerLabels[explainer.id] ?? explainer.id}</sl-tab>`)}
+        <slot name="explainer" style=${styleMap({ "--ww-placeholder": `"${this.msg("Explanation")}"` })}></slot>
+      </sl-tab-group>
+      ${!this.directSubmit || !this.answer?.reportSolution ? null : html`
+        <sl-button-group class="user-only user-actions">
+          <sl-button id="submit" @click=${this.handleSubmit}>Check your answers</sl-button>
+          <sl-button ?disabled=${!this.isChanged && !this.submitted} id="reset" class="user-only" @click=${this.handleReset}>Try again</sl-button>
+        </sl-button-group>
+      `}
+    `;
+  }
+};
+_init = __decoratorStart(_a);
+_hints = new WeakMap();
+_hint = new WeakMap();
+_isChanged = new WeakMap();
+_submitted = new WeakMap();
+_hintOpen = new WeakMap();
+_counter = new WeakMap();
+_solution = new WeakMap();
+_password = new WeakMap();
+_salt = new WeakMap();
+_iv = new WeakMap();
+_WebwriterTask_instances = new WeakSet();
+encodeSolution_fn = async function() {
+  const value = this.answer.solution;
+  console.log(value);
+  let keyMaterial = await getKeyMaterial(this.password);
+  let salt = window.crypto.getRandomValues(new Uint8Array(16));
+  let iv = window.crypto.getRandomValues(new Uint8Array(12));
+  let key = await getKey(keyMaterial, salt);
+  let encoder = new TextEncoder();
+  let encodedMessage = encoder.encode(JSON.stringify(value));
+  const solution = await window.crypto.subtle.encrypt(
+    { name: "AES-GCM", iv },
+    key,
+    encodedMessage
+  );
+  this.solution = await arrayBufferToDataUrl(solution);
+  this.iv = await arrayBufferToDataUrl(iv);
+  this.salt = await arrayBufferToDataUrl(salt);
+};
+decodeSolution_fn = async function() {
+  if (!this.solution) {
+    return;
+  }
+  const encodedSolution = await dataUrlToArrayBuffer(this.solution);
+  const iv = await dataUrlToArrayBuffer(this.iv);
+  const salt = await dataUrlToArrayBuffer(this.salt);
+  let keyMaterial = await getKeyMaterial(this.password);
+  let key = await getKey(keyMaterial, new Uint8Array(salt));
+  try {
+    const solutionBuffer = await window.crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, encodedSolution);
+    let decoder = new TextDecoder();
+    const solution = JSON.parse(decoder.decode(solutionBuffer));
+    this.answer.solution = solution;
+  } catch (err) {
+    console.error(err);
+    throw new Error("Invalid password");
+  }
+};
+_slotEl = new WeakMap();
+_hintSlotEl = new WeakMap();
+_activeExplainer = new WeakMap();
+__decorateElement(_init, 4, "hints", _hints_dec, _WebwriterTask, _hints);
+__decorateElement(_init, 4, "hint", _hint_dec, _WebwriterTask, _hint);
+__decorateElement(_init, 4, "isChanged", _isChanged_dec, _WebwriterTask, _isChanged);
+__decorateElement(_init, 3, "directSubmit", _directSubmit_dec, _WebwriterTask);
+__decorateElement(_init, 4, "submitted", _submitted_dec, _WebwriterTask, _submitted);
+__decorateElement(_init, 4, "hintOpen", _hintOpen_dec, _WebwriterTask, _hintOpen);
+__decorateElement(_init, 4, "counter", _counter_dec, _WebwriterTask, _counter);
+__decorateElement(_init, 4, "solution", _solution_dec, _WebwriterTask, _solution);
+__decorateElement(_init, 4, "password", _password_dec, _WebwriterTask, _password);
+__decorateElement(_init, 4, "salt", _salt_dec, _WebwriterTask, _salt);
+__decorateElement(_init, 4, "iv", _iv_dec, _WebwriterTask, _iv);
+__decorateElement(_init, 4, "slotEl", _slotEl_dec, _WebwriterTask, _slotEl);
+__decorateElement(_init, 4, "hintSlotEl", _hintSlotEl_dec, _WebwriterTask, _hintSlotEl);
+__decorateElement(_init, 4, "activeExplainer", _activeExplainer_dec, _WebwriterTask, _activeExplainer);
+_WebwriterTask = __decorateElement(_init, 0, "WebwriterTask", _WebwriterTask_decorators, _WebwriterTask);
+__publicField(_WebwriterTask, "localization", {});
+__publicField(_WebwriterTask, "scopedElements", {
+  "sl-icon-button": SlIconButton,
+  "sl-details": SlDetails,
+  "sl-popup": SlPopup,
+  "sl-button": SlButton,
+  "sl-button-group": SlButtonGroup,
+  "sl-tab-group": SlTabGroup,
+  "sl-tab": SlTab,
+  "sl-tab-panel": SlTabPanel
+});
+__publicField(_WebwriterTask, "styles", css`
+    :host {
+      display: flex !important;
+      flex-direction: column;
+      gap: 1rem;
+      position: relative;
+      z-index: 1;
+    }
+
+
+    :host(:not([hint])) details {
+      display: none;
+    }
+
+    sl-tooltip::part(base__popup) {
+      cursor: text;
+    }
+
+    #hint-popup {
+      --arrow-color: var(--sl-color-neutral-700);
+      z-index: 1000;
+    }
+
+    #hint-popup::part(popup) {
+      z-index: 100;
+      max-width: 200px;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""]):not([hint])) #hint {
+      display: none;
+    }
+    
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) .user-only {
+      display: none;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) {
+      ::slotted([slot=prompt]:empty) {
+        display: none;
+      }
+    }
+
+    :host(:not([submitted]):not([contenteditable=true]):not([contenteditable=""])) #explainer-group {
+      display: none;
+    }
+
+    #task-buttons {
+      position: absolute;
+      right: 0;
+      top: 0;
+      background: rgba(255, 255, 255, 0.9);
+      user-select: none;
+      z-index: 100;
+    }
+
+    #hint-content {
+      background: var(--sl-color-neutral-700);
+      color: var(--sl-color-neutral-50);
+      min-width: 2ch;
+      font-size: 0.75rem;
+      padding: 0.5rem;
+      border-radius: 4px;
+      user-select: auto;
+    }
+
+    ::slotted([slot=explainer]:not([active])) {
+      display: none !important;
+    }
+
+    sl-tab-group {
+      &[data-empty] {
+        display: none;
+      }
+
+      &[data-single] sl-tab {
+        display: none;
+      }
+
+      & sl-tab::part(base) {
+        padding: 10px;
+      }
+
+      &::part(tabs) {
+        height: 100px;
+        margin-left: -1px;
+        z-index: 10;
+      }
+
+      & ::slotted([name=explainer]) {
+        height: 100%;
+      }
+    }
+
+    header {
+      display: flex;
+      flex-direction: row;
+      gap: 1ch;
+
+      & span:empty {
+        display: none;
+      } 
+
+      & slot {
+        display: block;
+        flex-grow: 1;
+      }
+    }
+
+    .user-actions {
+      & #submit {
+        flex-grow: 3;
+      }
+
+      & #reset {
+        flex-grow: 1;
+      }
+    }
+
+  `);
+__runInitializers(_init, 1, _WebwriterTask);
+var WebwriterTask = _WebwriterTask;
+export {
+  WebwriterTask
+};