@webwriter/quiz 1.0.0

package/src/widgets/webwriter-pairing-item.ts

@@ -0,0 +1,156 @@
+import {html, css} from "lit"
+import {LitElementWw, option} from "@webwriter/lit"
+import {customElement, property} from "lit/decorators.js"
+import "@shoelace-style/shoelace/dist/themes/light.css"
+
+declare global {interface HTMLElementTagNameMap {
+  "webwriter-pairing-item": WebwriterPairingItem;
+}}
+
+@customElement("webwriter-pairing-item")
+export class WebwriterPairingItem extends LitElementWw {
+
+  tabIndex = -1
+
+  static styles = css`
+
+    :host {
+      aspect-ratio: 1;
+      min-width: 125px;
+      max-width: 350px;
+      min-height: 125px;
+      max-height: 350px;
+      position: relative;
+      overflow: hidden;
+      overflow-y: auto;
+      scrollbar-width: thin;
+      resize: both;
+      border: 2px solid var(--sl-color-gray-500);
+      border-radius: 5px;
+      background: white;
+    }
+
+    slot {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      box-sizing: border-box;
+      position: relative;
+      font-size: 0.8em;
+      z-index: 1;
+    }
+
+    :host([droppreview]) slot {
+      background: lightblue;
+    }
+
+    ::slotted(*) {
+      height: 100%;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    ::slotted(:not(:is(picture, audio, video, img, iframe))) {
+      padding: 5px !important;
+    }
+
+    #handle {
+      box-sizing: border-box;
+      border-radius: 2px;
+      position: absolute;
+      left: 1px;
+      bottom: 1px;
+      width: 20px;
+      height: 30px;
+      display: inline-block;
+      overflow: hidden;
+      line-height: 5px;
+      padding: 6px 4px;
+      cursor: move;
+      vertical-align: middle;
+      font-size: 12px;
+      font-family: sans-serif;
+      letter-spacing: 2px;
+      color: #cccccc;
+      text-shadow: 1px 0 1px black;
+      font-weight: 600;
+      opacity: 0.95;
+      z-index: 100;
+    }
+    #handle::after {
+      content: '.. .. ..';
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none !important;
+    }
+
+    #click-overlay {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+    }
+
+    #click-overlay:hover {
+      background: var(--sl-color-primary-600);
+      opacity: 10%;
+    }
+
+    :host(.ww-selected) #click-overlay {
+      display: none;
+    }
+  `
+
+  @property({attribute: true, reflect: true, converter: {toAttribute: (v: boolean) => v? "true": "false", fromAttribute: (attr: string) => attr === "true"}})
+  accessor draggable = true
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor dropPreview = false
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.addEventListener("dragstart", e => {
+      if(e.target !== this) {
+        e.preventDefault()
+      }
+      // this.dropPreview = undefined
+      e.dataTransfer.setData("text/html", this.outerHTML)
+      e.dataTransfer.setData("text/plain", this.id)
+      // setTimeout(() => this.baseEl.style.visibility = "hidden")
+      e.stopPropagation()
+    })
+    this.addEventListener("drop", e => {
+      e.stopPropagation()
+      const id = e.dataTransfer.getData("text/plain")
+      const el = document.querySelector(`webwriter-pairing-item#${id}`)
+      if(!el) {
+        const html = e.dataTransfer.getData("text/html")
+        this.parentElement.insertAdjacentHTML("beforeend", html)
+      }
+      else if(el && !this.contains(el)) {
+        this.parentElement.insertAdjacentElement("beforeend", el)
+      }
+      this.dispatchEvent(new CustomEvent("ww-pairwith", {bubbles: true, detail: {with: id}}))
+    }, {passive: true})
+    this.addEventListener("dragover", e => {
+      this.dropPreview = true
+      e.preventDefault()
+      e.stopImmediatePropagation()
+    })
+    this.addEventListener("dragleave", () => this.dropPreview = false, {passive: true})
+    document.addEventListener("dragend", (e) => {
+      // (e.target as HTMLElement)?.remove()
+      this.dropPreview = false
+    }, {passive: true})
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+      <div class="author-only" id="handle" @click=${() => this.dispatchEvent(new FocusEvent("focus"))}></div>
+
+    `
+  }
+}

package/src/widgets/webwriter-pairing.ts

@@ -0,0 +1,188 @@
+import {html, css, PropertyValues} from "lit"
+import {LitElementWw, option} from "@webwriter/lit"
+import {customElement, property, queryAll} from "lit/decorators.js"
+import "@shoelace-style/shoelace/dist/themes/light.css"
+
+import IconPlus from "bootstrap-icons/icons/plus.svg"
+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 { WebwriterPairingItem } from "./webwriter-pairing-item"
+
+declare global {interface HTMLElementTagNameMap {
+  "webwriter-pairing": WebwriterPairing;
+}}
+
+@customElement("webwriter-pairing")
+export class WebwriterPairing extends LitElementWw {
+
+  static shadowRootOptions = {...LitElementWw.shadowRootOptions, slotAssignment: "manual" as const}
+
+  static scopedElements = {
+    "sl-button": SlButton,
+    "sl-icon": SlIcon
+  }
+
+  static styles = css`
+    :host {
+      display: flex !important;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 30px;
+      padding-bottom: 30px;
+    }
+
+    sl-button {
+
+      &::part(base) {
+        width: 125px;
+        height: 125px;
+        border: 1px solid darkgray;
+        border-radius: 2px;
+        padding: 10px;
+        overflow: hidden;
+      }
+
+      &::part(label) {
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .pair {
+      position: relative;
+
+      & .a-slot, & .b-slot {
+        display: block;
+
+        &:is(:focus-within, :has(::selection)) {
+          background: green;
+        }
+      }
+
+      & .b-slot {
+        position: absolute;
+        left: 20px;
+        top: 20px;
+        z-index: 1000;
+      }
+    }
+
+  `
+
+  @property({attribute: true, reflect: true})
+  @option({type: "select", options: [
+    {value: "drag"},
+    {value: "memory"}
+  ]})
+  accessor mode: "drag" | "memory" = "drag"
+
+  @property({type: Array, attribute: true, reflect: true})
+  accessor solution: ([string, string] | string)[] = []
+  
+  addItem = () => {
+    const item = document.createElement("webwriter-pairing-item")
+    const picture = document.createElement("picture")
+    item.appendChild(picture)
+    this.appendChild(item)
+  }
+
+  Pair = (i: number) => {
+    return html`<div class="pair">
+      <slot class="a-slot" name=${`${i}a`}></slot>
+      <slot class="b-slot" name=${`${i}b`}></slot>
+    </div>`
+  }
+
+  getPairSlot() {}
+
+  
+  get pairs() {
+    let allPairs = Array.from(this.children)  as (WebwriterPairingItem | [WebwriterPairingItem, WebwriterPairingItem])[]
+    for(const [a, b] of this.solution) {
+      const elA = this.querySelector(`webwriter-pairing-item#${a}`) as WebwriterPairingItem
+      const elB = this.querySelector(`webwriter-pairing-item#${b}`) as WebwriterPairingItem
+      allPairs.splice(allPairs.indexOf(elA), 1, [elA, elB])
+      allPairs.splice(allPairs.indexOf(elB), 1)
+    }
+    return allPairs
+  }
+
+  pair(a: string, b?: string) {
+    let pairIds = this.pairs.map(entry => Array.isArray(entry)? [entry[0].id, entry[1].id]: entry.id)
+    const pairIndexOfA = this.solution.findIndex(val => Array.isArray(val) && val.includes(a))
+    const pairIndexOfB = this.solution.findIndex(val => Array.isArray(val) && val.includes(b))
+    if(!b) {
+      pairIds.splice(pairIndexOfA, 1, (pairIds[pairIndexOfA] as [string, string]).filter(id => id !== a)[0])
+      pairIds.push(a)
+    }
+    else {
+      if(pairIndexOfB !== -1) {
+        pairIds.splice(pairIndexOfB, 1, (pairIds[pairIndexOfB] as [string, string]).filter(id => id !== b)[0])
+      }
+      const indexOfA = this.solution.indexOf(a)
+      pairIds.splice(indexOfA, 1, [a, b])
+      pairIds = pairIds.filter(id => id !== b)
+    }
+    this.solution = pairIds.filter(entry => Array.isArray(entry)) as any
+  }
+
+  handlePairWith(e: CustomEvent) {
+    if(e.type === "ww-pairwith") {
+      this.pair((e.target as HTMLElement).id, e.detail.with)
+    }
+  }
+
+  observer: MutationObserver
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.observer = new MutationObserver(() => {
+      let childIds = Array.from(this.children).map(child => child.id)
+      let solution = [...this.solution]
+      // solution = solution.filter(k => childIds.includes(k as any))
+      // solution = [...solution, ...childIds]
+      this.requestUpdate()
+    })
+    this.observer.observe(this, {childList: true})
+    this.addEventListener("ww-pairwith", this.handlePairWith)
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.observer.disconnect()
+  }
+  
+  protected willUpdate(_changedProperties: PropertyValues): void {
+    // this.solution = this.solution.filter(id => childIds.includes(id))
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    const slots = Array.from(this.slots)
+    for(const value of this.pairs) {
+      if(Array.isArray(value)) {
+        const [a, b] = value
+        slots.shift().assign(a)
+        slots.shift().assign(b)
+      }
+      else {
+        slots.shift().assign(value)
+        slots.shift()
+      }
+    }
+  }
+
+  @queryAll("slot")
+  accessor slots: NodeListOf<HTMLSlotElement>
+
+  render() {
+    return html`
+      ${this.pairs.map((el, i) => this.Pair(i))}
+      <sl-button @click=${this.addItem}>
+        <sl-icon src=${IconPlus}></sl-icon>
+      </sl-button>
+    `
+  }
+}

package/src/widgets/webwriter-quiz.ts

@@ -0,0 +1,281 @@
+import {css, html, PropertyValues} 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"
+import IconUIChecksGrid from "bootstrap-icons/icons/ui-checks-grid.svg"
+import Icon123 from "bootstrap-icons/icons/123.svg"
+import IconCardText from "bootstrap-icons/icons/card-text.svg"
+import IconHighlighter from "bootstrap-icons/icons/highlighter.svg"
+import IconSubtract from "bootstrap-icons/icons/subtract.svg"
+import IconBodyText from "bootstrap-icons/icons/body-text.svg"
+import IconMic from "bootstrap-icons/icons/mic.svg"
+import IconImage from "bootstrap-icons/icons/image.svg"
+import IconSearch from "bootstrap-icons/icons/search.svg"
+import IconGrid3x3Gap from "bootstrap-icons/icons/grid-3x3-gap.svg"
+
+import "@shoelace-style/shoelace/dist/themes/light.css"
+import { WebwriterTask } from "./webwriter-task.js"
+
+
+function shuffle<T>(a: T[]) {
+  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;
+}
+
+declare global {interface HTMLElementTagNameMap {
+  "webwriter-quiz": WebwriterQuiz;
+}}
+
+@customElement("webwriter-quiz")
+export class WebwriterQuiz extends LitElementWw {
+
+  static localization = {}
+
+  msg = (str: string) => this.lang in WebwriterQuiz.localization? WebwriterQuiz.localization[this.lang][str] ?? str: str
+
+  get answerTypes() {
+    return {
+      "webwriter-choice": {
+        label: this.msg("Choice"),
+        icon: IconUIChecksGrid
+      },
+      "webwriter-order": {
+        label: this.msg("Order"),
+        icon: Icon123
+      },
+      "webwriter-text": {
+        label: this.msg("Text"),
+        icon: IconCardText
+      },
+      "webwriter-mark": {
+        label: this.msg("Mark"),
+        icon: IconHighlighter
+      },/*
+      "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: IconMic
+      },
+      /*"webwriter-wordsearch": {
+        label: this.msg("Word Search"),
+        advanced: true,
+        icon: IconSearch
+      },
+      "webwriter-memory": {
+        label: this.msg("Memory"),
+        advanced: true,
+        icon: IconGrid3x3Gap
+      }*/
+    }
+  }
+
+  static scopedElements = {
+    "sl-button": SlButton,
+    "sl-button-group": SlButtonGroup,
+    "sl-icon": SlIcon,
+    "sl-dropdown": SlDropdown,
+    "sl-menu": SlMenu,
+    "sl-menu-item": SlMenuItem,
+  }
+
+  addTask(answerTypeName: string) {
+    const task = this.ownerDocument.createElement("webwriter-task") as WebwriterTask
+    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)
+  }
+
+  static 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;
+      }
+    }
+  `
+  
+  @property({type: Boolean, attribute: true, reflect: true})
+  @option({type: Boolean, label: {"en": "Random Task Order"}})
+  accessor randomOrder = false
+
+  get counter(): "number" | "roman" | "roman-capitalized" | "alphabetical" | "alphabetical-capitalized" {
+    return this.tasks[0]?.counter
+  }
+
+  @property({attribute: true}) //@ts-ignore
+  @option({
+    type: "select",
+    label: {
+      "en": "Counter"
+    },
+    options: [
+      {value: undefined, 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."}},
+    ]
+  })
+  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: Event) {
+    this.submitted = true
+    this.dispatchEvent(new Event("submit"))
+    this.tasks.forEach(task => task.handleSubmit())
+  }
+
+  handleReset = () => {
+    this.tasks.forEach(task => task.reset())
+    this.requestUpdate()
+    this.submitted = false
+  }
+
+  observer: MutationObserver
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.observer = new MutationObserver(() => {
+      if(!this.contentEditable && this.randomOrder) {
+        this.shuffleTasks()
+      }
+    })
+    this.observer.observe(this, {childList: true})
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.observer.disconnect()
+  }
+
+  @query("slot")
+  accessor slotEl: HTMLSlotElement
+
+  @queryAssignedElements()
+  accessor tasks: WebwriterTask[]
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor submitted = false
+
+  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>
+      `
+  }
+}