@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-quiz.js

@@ -0,0 +1,323 @@
+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-quiz.ts
+import { css, html } from "lit";
+import { LitElementWw, option } from "@webwriter/lit";
+import { customElement, property, query, queryAssignedElements } from "lit/decorators.js";
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js";
+import SlButtonGroup from "@shoelace-style/shoelace/dist/components/button-group/button-group.component.js";
+import SlDropdown from "@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js";
+import SlMenu from "@shoelace-style/shoelace/dist/components/menu/menu.component.js";
+import SlMenuItem from "@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js";
+import SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js";
+
+// ../../node_modules/bootstrap-icons/icons/ui-checks-grid.svg
+var ui_checks_grid_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ui-checks-grid" viewBox="0 0 16 16">%0A  <path d="M2 10h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1m9-9h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1m0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.354.854a.5.5 0 1 0-.708-.708L3 3.793l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0z"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/123.svg
+var __default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-123" viewBox="0 0 16 16">%0A  <path d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169.676 0 1.174.44 1.174 1.106 0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179.01.707-.55 1.216-1.421 1.21-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918 1.478 0 2.642-.839 2.62-2.144-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678-.026-1.053-.933-1.855-2.359-1.845-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944.703 0 1.206.435 1.206 1.07.005.64-.504 1.106-1.2 1.106h-.75z"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/card-text.svg
+var card_text_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-text" viewBox="0 0 16 16">%0A  <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"/>%0A  <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/highlighter.svg
+var highlighter_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-highlighter" viewBox="0 0 16 16">%0A  <path fill-rule="evenodd" d="M11.096.644a2 2 0 0 1 2.791.036l1.433 1.433a2 2 0 0 1 .035 2.791l-.413.435-8.07 8.995a.5.5 0 0 1-.372.166h-3a.5.5 0 0 1-.234-.058l-.412.412A.5.5 0 0 1 2.5 15h-2a.5.5 0 0 1-.354-.854l1.412-1.412A.5.5 0 0 1 1.5 12.5v-3a.5.5 0 0 1 .166-.372l8.995-8.07zm-.115 1.47L2.727 9.52l3.753 3.753 7.406-8.254zm3.585 2.17.064-.068a1 1 0 0 0-.017-1.396L13.18 1.387a1 1 0 0 0-1.396-.018l-.068.065zM5.293 13.5 2.5 10.707v1.586L3.707 13.5z"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/mic.svg
+var mic_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">%0A  <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/>%0A  <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3"/>%0A</svg>';
+
+// src/widgets/webwriter-quiz.ts
+function shuffle(a) {
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+var _submitted_dec, _tasks_dec, _slotEl_dec, _counter_dec, _randomOrder_dec, _a, _WebwriterQuiz_decorators, _init, _randomOrder, _slotEl, _tasks, _submitted;
+_WebwriterQuiz_decorators = [customElement("webwriter-quiz")];
+var _WebwriterQuiz = class _WebwriterQuiz extends (_a = LitElementWw, _randomOrder_dec = [property({ type: Boolean, attribute: true, reflect: true }), option({ type: Boolean, label: { "en": "Random Task Order" } })], _counter_dec = [property({ attribute: true }), option({
+  type: "select",
+  label: {
+    "en": "Counter"
+  },
+  options: [
+    { value: void 0, label: { "en": "None" } },
+    { value: "number", label: { "en": "1. 2. 3." } },
+    { value: "roman", label: { "en": "i. ii. iii." } },
+    { value: "roman-capitalized", label: { "en": "I. II. III." } },
+    { value: "alphabetical", label: { "en": "a. b. c." } },
+    { value: "alphabetical-capitalized", label: { "en": "A. B. C." } }
+  ]
+})], _slotEl_dec = [query("slot")], _tasks_dec = [queryAssignedElements()], _submitted_dec = [property({ type: Boolean, attribute: true, reflect: true })], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __publicField(this, "msg", (str) => this.lang in _WebwriterQuiz.localization ? _WebwriterQuiz.localization[this.lang][str] ?? str : str);
+    __privateAdd(this, _randomOrder, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __publicField(this, "handleReset", () => {
+      this.tasks.forEach((task) => task.reset());
+      this.requestUpdate();
+      this.submitted = false;
+    });
+    __publicField(this, "observer");
+    __privateAdd(this, _slotEl, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _tasks, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _submitted, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+  }
+  get answerTypes() {
+    return {
+      "webwriter-choice": {
+        label: this.msg("Choice"),
+        icon: ui_checks_grid_default
+      },
+      "webwriter-order": {
+        label: this.msg("Order"),
+        icon: __default
+      },
+      "webwriter-text": {
+        label: this.msg("Text"),
+        icon: card_text_default
+      },
+      "webwriter-mark": {
+        label: this.msg("Mark"),
+        icon: highlighter_default
+      },
+      /*
+      "webwriter-pairing": {
+        label: this.msg("Pairing"),
+        icon: IconSubtract
+      },
+      "webwriter-cloze": {
+        label: this.msg("Cloze"),
+        icon: IconBodyText
+      },*/
+      "webwriter-speech": {
+        label: this.msg("Speech"),
+        //advanced: true,
+        icon: mic_default
+      }
+      /*"webwriter-wordsearch": {
+        label: this.msg("Word Search"),
+        advanced: true,
+        icon: IconSearch
+      },
+      "webwriter-memory": {
+        label: this.msg("Memory"),
+        advanced: true,
+        icon: IconGrid3x3Gap
+      }*/
+    };
+  }
+  addTask(answerTypeName) {
+    const task = this.ownerDocument.createElement("webwriter-task");
+    task.setAttribute("counter", this.counter);
+    const prompt = this.ownerDocument.createElement("webwriter-task-prompt");
+    const p = this.ownerDocument.createElement("p");
+    prompt.append(p);
+    prompt.slot = "prompt";
+    const answer = this.ownerDocument.createElement(answerTypeName);
+    task.appendChild(prompt);
+    task.appendChild(answer);
+    this.appendChild(task);
+    document.getSelection().setBaseAndExtent(p, 0, p, 0);
+  }
+  get counter() {
+    return this.tasks[0]?.counter;
+  }
+  set counter(value) {
+    this.tasks.forEach((el) => el.counter = value);
+  }
+  shuffleTasks() {
+    const n = this.tasks.length;
+    const nums = shuffle([...new Array(n).keys()]);
+    this.tasks.forEach((el, i) => el.style.order = String(nums[i]));
+  }
+  handleSubmit(e) {
+    this.submitted = true;
+    this.dispatchEvent(new Event("submit"));
+    this.tasks.forEach((task) => task.handleSubmit());
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.observer = new MutationObserver(() => {
+      if (!this.contentEditable && this.randomOrder) {
+        this.shuffleTasks();
+      }
+    });
+    this.observer.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer.disconnect();
+  }
+  get isChanged() {
+    return this.tasks.some((task) => task.isChanged);
+  }
+  render() {
+    const basicAnswerTypes = Object.keys(this.answerTypes).filter((k) => !this.answerTypes[k]?.advanced);
+    const otherAnswerTypes = Object.keys(this.answerTypes).filter((k) => this.answerTypes[k]?.advanced);
+    return html`
+      <slot ?inert=${this.submitted} @ww-answer-change=${() => this.requestUpdate()}></slot>
+        <sl-button-group class="user-only user-actions">
+          <sl-button id="submit" @click=${this.handleSubmit}>Submit</sl-button>
+          <sl-button ?disabled=${!this.isChanged} id="reset" @click=${this.handleReset}>Reset</sl-button>
+        </sl-button-group>
+      <sl-button-group class="author-only">
+        ${basicAnswerTypes.map((k) => html`
+          <sl-button @click=${() => this.addTask(k)}>
+            <sl-icon src=${this.answerTypes[k]?.icon}></sl-icon>
+            ${this.answerTypes[k].label}
+          </sl-button>
+        `)}
+        <sl-dropdown data-empty=${!otherAnswerTypes.length} placement="bottom-end" hoist>
+          <sl-button slot="trigger" caret></sl-button>
+          <sl-menu>
+            ${otherAnswerTypes.map((k) => html`
+            <sl-menu-item @click=${() => this.addTask(k)}>
+              <sl-icon src=${this.answerTypes[k]?.icon}></sl-icon>
+              ${this.answerTypes[k].label}
+            </sl-menu-item>
+            `)}
+          </sl-menu>
+        </sl-dropdown>
+      </sl-button-group>
+      `;
+  }
+};
+_init = __decoratorStart(_a);
+_randomOrder = new WeakMap();
+_slotEl = new WeakMap();
+_tasks = new WeakMap();
+_submitted = new WeakMap();
+__decorateElement(_init, 4, "randomOrder", _randomOrder_dec, _WebwriterQuiz, _randomOrder);
+__decorateElement(_init, 3, "counter", _counter_dec, _WebwriterQuiz);
+__decorateElement(_init, 4, "slotEl", _slotEl_dec, _WebwriterQuiz, _slotEl);
+__decorateElement(_init, 4, "tasks", _tasks_dec, _WebwriterQuiz, _tasks);
+__decorateElement(_init, 4, "submitted", _submitted_dec, _WebwriterQuiz, _submitted);
+_WebwriterQuiz = __decorateElement(_init, 0, "WebwriterQuiz", _WebwriterQuiz_decorators, _WebwriterQuiz);
+__publicField(_WebwriterQuiz, "localization", {});
+__publicField(_WebwriterQuiz, "scopedElements", {
+  "sl-button": SlButton,
+  "sl-button-group": SlButtonGroup,
+  "sl-icon": SlIcon,
+  "sl-dropdown": SlDropdown,
+  "sl-menu": SlMenu,
+  "sl-menu-item": SlMenuItem
+});
+__publicField(_WebwriterQuiz, "styles", css`
+    :host {
+      border-top: 1px solid darkgray;
+      border-bottom: 1px solid darkgray;
+      padding: 1ch;
+      display: flex !important;
+      flex-direction: column;
+      gap: 2rem;
+      counter-reset: task;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) .user-only {
+      display: none;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) ::slotted(*) {
+      order: unset !important;
+    }
+
+    sl-button-group::part(base) {
+      display: flex;
+    }
+
+    sl-button-group > *:not(sl-dropdown) {
+      flex-grow: 1;
+    }
+
+    sl-dropdown[data-empty] {
+      display: none;
+    }
+
+    sl-button:not([caret])::part(label) {
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: space-evenly;
+      align-items: center;
+    }
+
+    sl-icon {
+      width: 18px;
+      height: 18px;
+    }
+
+    sl-menu::part(menu) {
+      z-index: 10000;
+    }
+
+    .user-actions {
+      & #submit {
+        flex-grow: 3;
+      }
+
+      & #reset {
+        flex-grow: 1;
+      }
+    }
+  `);
+__runInitializers(_init, 1, _WebwriterQuiz);
+var WebwriterQuiz = _WebwriterQuiz;
+export {
+  WebwriterQuiz
+};