@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-choice.js

@@ -0,0 +1,327 @@
+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-choice.ts
+import { html, css } from "lit";
+import { LitElementWw, option, action } from "@webwriter/lit";
+import { customElement, property, queryAssignedElements, query } from "lit/decorators.js";
+import SlButton from "@shoelace-style/shoelace/dist/components/button/button.component.js";
+import SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js";
+import SlRadio from "@shoelace-style/shoelace/dist/components/radio/radio.component.js";
+import SlCheckbox from "@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js";
+import SlRadioButton from "@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js";
+import SlRadioGroup from "@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js";
+
+// ../../node_modules/bootstrap-icons/icons/plus-square.svg
+var plus_square_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">%0A  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/plus-circle.svg
+var plus_circle_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">%0A  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
+
+// src/widgets/webwriter-choice.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 _itemsSlotEl_dec, _value_dec, _items_dec, _addItem_dec, _slotEl_dec, _randomOrder_dec, _layout_dec, _mode_dec, _a, _WebwriterChoice_decorators, _init, _mode, _randomOrder, _slotEl, _items, _value, _itemsSlotEl;
+_WebwriterChoice_decorators = [customElement("webwriter-choice")];
+var WebwriterChoice = class extends (_a = LitElementWw, _mode_dec = [property({ type: String, attribute: true, reflect: true }), option({
+  type: "select",
+  options: [
+    { value: "truefalse", label: { "en": "True/False" } },
+    { value: "single", label: { "en": "Single Choice" } },
+    { value: "multiple", label: { "en": "Multiple Choice" } }
+  ]
+})], _layout_dec = [property({ type: String, attribute: true, reflect: true }), option({
+  type: "select",
+  options: [
+    { value: "list", label: { "en": "List" } },
+    { value: "tiles", label: { "en": "Tiles" } }
+  ]
+})], _randomOrder_dec = [property({ type: Boolean, attribute: true, reflect: true }), option({
+  type: Boolean,
+  label: { "en": "Random Choice Order" }
+})], _slotEl_dec = [query("slot")], _addItem_dec = [action()], _items_dec = [queryAssignedElements()], _value_dec = [property({ type: Array, attribute: false })], _itemsSlotEl_dec = [query("#items-slot")], _a) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init, 5, this);
+    __privateAdd(this, _mode, __runInitializers(_init, 8, this, "single")), __runInitializers(_init, 11, this);
+    __privateAdd(this, _randomOrder, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _slotEl, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _items, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _value, []);
+    __publicField(this, "handleControlChange", (e) => {
+      if (this.mode === "single") {
+        const item = e.target;
+        const otherItems = this.items.filter((el) => el !== item);
+        otherItems.forEach((el) => this.isContentEditable ? el.valid = false : el.active = false);
+      }
+      this.applyValue();
+      this.dispatchEvent(new CustomEvent("ww-answer-change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      }));
+    });
+    __privateAdd(this, _itemsSlotEl, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+  }
+  get layout() {
+    return this.children?.item(0)?.getAttribute("layout") ?? "list";
+  }
+  set layout(value) {
+    this.querySelectorAll("webwriter-choice-item").forEach((el) => el.setAttribute("layout", value));
+    this.requestUpdate("layout");
+  }
+  get solution() {
+    const validIDs = this.items.filter((item) => item.valid).map((item) => item.id);
+    return validIDs.length ? validIDs : void 0;
+  }
+  set solution(value) {
+    this.items.forEach((item) => value.includes(item.id) ? item.valid = true : null);
+  }
+  reportSolution() {
+    if (!this.solution) {
+      this.items.forEach((item) => item.valid = true);
+      return;
+    }
+    this.items.forEach((item) => item.valid = (this.solution ?? []).includes(item.id));
+  }
+  reset() {
+    this.items.forEach((item) => {
+      item.valid = void 0;
+      item.active = false;
+    });
+    this.shuffleItems();
+  }
+  addItem() {
+    const choiceItem = this.ownerDocument.createElement("webwriter-choice-item");
+    const p = this.ownerDocument.createElement("p");
+    choiceItem.appendChild(p);
+    choiceItem.setAttribute("layout", this.layout);
+    this.appendChild(choiceItem);
+    this.ownerDocument.getSelection().setBaseAndExtent(p, 0, p, 0);
+  }
+  shuffleItems() {
+    const items = this.slotEl.assignedElements();
+    const n = items.length;
+    const nums = shuffle([...new Array(n).keys()]);
+    items.forEach((el, i) => el.style.order = String(nums[i]));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const observer = new MutationObserver(() => {
+      if (!this.contentEditable && this.randomOrder) {
+        this.shuffleItems();
+      }
+    });
+    observer.observe(this, { childList: true });
+  }
+  firstUpdated(_changedProperties) {
+    if (!this.contentEditable && this.randomOrder) {
+      this.shuffleItems();
+    }
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  set value(value) {
+    __privateSet(this, _value, value);
+    this.items.forEach((item, i) => {
+      this.isContentEditable ? item.valid = __privateGet(this, _value).includes(i) : item.active = __privateGet(this, _value).includes(i);
+    });
+  }
+  applyValue() {
+    __privateSet(this, _value, this.items.map((item, i) => [item.valid, i]).filter(([valid]) => valid).map(([_, i]) => i));
+  }
+  handleSlotChange(e) {
+    this.requestUpdate();
+  }
+  willUpdate(changed) {
+    if (changed.has("mode") && this.mode === "single") {
+      this.items.filter((el) => this.isContentEditable ? el.valid : el.active).slice(1).forEach((el) => this.isContentEditable ? el.valid = false : el.active = false);
+    }
+    if (changed.has("mode") && this.mode === "truefalse") {
+      this.items.forEach((el) => el.remove());
+    }
+  }
+  render() {
+    return html`
+      ${this.mode === "truefalse" ? html`
+          <sl-radio-group>
+            <sl-radio-button value="true">True</sl-radio-button>
+            <sl-radio-button value="false">False</sl-radio-button>
+          </sl-radio-group>
+        ` : html`
+          <slot id="items-slot" @sl-change=${this.handleControlChange} @slotchange=${this.handleSlotChange}></slot>
+        `}
+      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
+        <sl-icon src=${this.mode === "multiple" ? plus_square_default : plus_circle_default}></sl-icon><span>Add Option</span>
+      </sl-button>
+    `;
+  }
+};
+_init = __decoratorStart(_a);
+_mode = new WeakMap();
+_randomOrder = new WeakMap();
+_slotEl = new WeakMap();
+_items = new WeakMap();
+_value = new WeakMap();
+_itemsSlotEl = new WeakMap();
+__decorateElement(_init, 4, "mode", _mode_dec, WebwriterChoice, _mode);
+__decorateElement(_init, 3, "layout", _layout_dec, WebwriterChoice);
+__decorateElement(_init, 4, "randomOrder", _randomOrder_dec, WebwriterChoice, _randomOrder);
+__decorateElement(_init, 4, "slotEl", _slotEl_dec, WebwriterChoice, _slotEl);
+__decorateElement(_init, 1, "addItem", _addItem_dec, WebwriterChoice);
+__decorateElement(_init, 4, "items", _items_dec, WebwriterChoice, _items);
+__decorateElement(_init, 3, "value", _value_dec, WebwriterChoice);
+__decorateElement(_init, 4, "itemsSlotEl", _itemsSlotEl_dec, WebwriterChoice, _itemsSlotEl);
+WebwriterChoice = __decorateElement(_init, 0, "WebwriterChoice", _WebwriterChoice_decorators, WebwriterChoice);
+__publicField(WebwriterChoice, "scopedElements", {
+  "sl-button": SlButton,
+  "sl-icon": SlIcon,
+  "sl-radio": SlRadio,
+  "sl-checkbox": SlCheckbox,
+  "sl-radio-button": SlRadioButton,
+  "sl-radio-group": SlRadioGroup
+});
+__publicField(WebwriterChoice, "styles", css`
+    :host {
+      display: flex !important;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    :host([layout=tiles]) {
+
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 15px;
+
+      & ::slotted(*) {
+        aspect-ratio: 1;
+        min-width: 125px;
+        width: 125px;
+        max-width: 350px;
+        min-height: 125px;
+        height: 125px;
+        max-height: 350px;
+        overflow: hidden;
+        resize: both;
+        border: 2px solid var(--sl-color-gray-500);
+        border-radius: 5px;
+      }
+    }
+
+    sl-button::part(label) {
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    sl-button::part(base) {
+      border: none;
+      background: transparent;
+    }
+
+    sl-icon {
+      width: 19px;
+      height: 19px;
+    }
+
+    sl-icon::part(svg) {
+      overflow: visible;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none !important;
+    }
+
+    #add-option span {
+      margin-inline-start: 0.5em;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) ::slotted(*) {
+      order: unset !important;
+    }
+
+    :host(:not([mode=multiple])) {
+      --webwriter-choice-radius: 100%;
+    }
+
+    #add-option:not(:hover)::part(base) {
+      color: darkgray;
+    }
+
+    :host([layout=tiles]) #add-option {
+      width: 125px;
+      height: 125px;
+      overflow: hidden;
+      border: 2px solid var(--sl-color-gray-300);
+      border-radius: 5px;
+      padding: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    :host([mode=truefalse]) #add-option {
+      display: none;
+    }    
+  `);
+__runInitializers(_init, 1, WebwriterChoice);
+export {
+  WebwriterChoice,
+  shuffle
+};