@webwriter/quiz 1.1.3 → 2.0.0

package/src/widgets/webwriter-order.ts

@@ -1,327 +0,0 @@
-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 SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js"
-import "@shoelace-style/shoelace/dist/themes/light.css"
-import { Sortable } from "@shopify/draggable"
-import IconPlus from "bootstrap-icons/icons/plus.svg"
-
-import { WebwriterOrderItem } from "./webwriter-order-item"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import LOCALIZE from "../../localization/generated"
-import {msg} from "@lit/localize"
-
-export 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-order": WebwriterOrder;
-}}
-
-@customElement("webwriter-order")
-export class WebwriterOrder extends LitElementWw {
-
-  localize = LOCALIZE
-
-  static scopedElements = {
-    "sl-button": SlButton,
-    "sl-icon": SlIcon
-  }
-
-  static styles = css`
-    :host {
-      display: flex !important;
-      flex-direction: column;
-      align-items: flex-start;
-      counter-reset: orderItem;
-      gap: 2px;
-    }
-
-    :host([layout=tiles]) {
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 15px;
-    }
-
-    :host(:is([contenteditable=true], [contenteditable=""])) {
-      --text-color: var(--sl-color-success-700);
-    }
-
-    :host ::slotted(*::part(counter)) {
-      counter-increment: orderItem;
-      content: counter(orderItem) '. ';
-      cursor: move;
-      text-align: right;
-      padding-right: 0.5em;
-      min-width: 1.5em;
-      color: var(--text-color, auto);
-    }
-
-    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;
-      padding: var(--sl-spacing-x-small);
-      padding-left: 0;
-    }
-
-    #add-option {
-      order: 2147483647;
-    }
-
-    #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;
-    }
-// broken for some reason o.O
-/* 
-    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
-      display: none;
-    } */
-  `
-
-  get layout(): "list" | "tiles" {
-    return this.children?.item(0)?.getAttribute("layout") as any ?? "list"
-  }
-
-  @property({type: String, attribute: true, reflect: true}) //@ts-ignore
-  @option({
-    type: "select",
-    options: [
-      {value: "list", label: {"en": "List"}},
-      {value: "tiles", label: {"en": "Tiles"}}
-    ]
-  })
-  set layout(value) {
-    this.querySelectorAll("webwriter-order-item").forEach(el => el.setAttribute("layout", value))
-    this.requestUpdate("layout")
-  }
-
-  get hideOrderButtons() {
-    return !!this.items[0]?.hideOrderButtons
-  }
-
-  @property({type: Boolean, attribute: true, reflect: true}) //@ts-ignore
-  @option({type: Boolean, label: {"en": "Hide order buttons", "de": "Pfeile zum Verschieben verstecken"}})
-  set hideOrderButtons(value: boolean) {
-    this.items.forEach(item => item.hideOrderButtons = value)
-  }
-
-  @property({type: String, attribute: true, reflect: true})
-  @option({
-    type: "select",
-    label: {"de": "Lösung anzeigen", "en": "Show solution"},
-    options: [
-      {value: "right", label: {"en": "Right answers", "de": "Korrekte Antworten"}},
-      {value: "both", label: {"en": "all (indicator)", "de": "Alle (Indikator)"}},
-      {value: "full", label: {"en": "all (conclusive)", "de": "Alle (vollständig)"}}
-    ],
-  })
-  accessor showSolution = "right"
-
-  observer: MutationObserver
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.addEventListener("ww-moveup", this.handleMove)
-    this.addEventListener("ww-movedown", this.handleMove)
-    this.addEventListener("ww-moveto", this.handleMove)
-    this.observer = new MutationObserver(() => {
-      this.items.forEach(item => item.requestUpdate())
-      if(this.isContentEditable) {
-        this.solution = this.items.map(item => item.id)
-      }
-      this.clearDropPreviews()
-    })
-    this.observer.observe(this, {childList: true})
-    // this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, this.orderSheet]
-  }
-
-  serializedCallback() {
-    this.shuffleItems()
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.observer?.disconnect()
-    this.observer = undefined
-  }
-
-  orderSheet = new CSSStyleSheet()
-
-  addItem() {
-    const orderItem = this.ownerDocument.createElement("webwriter-order-item")
-    const p = this.ownerDocument.createElement("p")
-    orderItem.appendChild(p)
-    orderItem.setAttribute("layout", this.layout)
-    this.append(orderItem)
-    this.solution = [...this.#solution, orderItem.id]
-    this.ownerDocument.getSelection().setBaseAndExtent(p, 0, p, 0)
-  }
-
-  shuffleItems() {
-    const n = this.items.length
-    const nums = shuffle([...(new Array(n)).keys()])
-    this.innerHTML = nums.map(i => this.children.item(i).outerHTML).join("")
-  }
-
-  clearDropPreviews = () => {
-    this.items.forEach(item => item.dropPreview = undefined)
-  }
-  
-  @query("#items-slot")
-  accessor itemsSlot: HTMLSlotElement
-
-  @queryAssignedElements()
-  accessor items: WebwriterOrderItem[]
-
-  handleKeyDown(e: KeyboardEvent) {
-    if(e.key == "ArrowDown") {
-      e.stopPropagation()
-      e.preventDefault()
-    }
-    else if(e.key === "ArrowUp") {
-      e.stopPropagation()
-      e.preventDefault()
-    }
-  }
-
-  /*
-  If contenteditable: Reorder solution -> Triggers orderSheet change
-  If not contenteditable: Reorder value -> Triggers orderSheet change 
-  */
-  
-  moveChild(elem: HTMLElement, i: number) {
-    /*
-    let items = this.items.map(el => el !== elem? el: undefined)
-    items.splice(i, 0, elem as WebwriterOrderItem)
-    items = items.filter(child => child)
-    this.replaceChildren(...items)
-    this.items.forEach(item => item.requestUpdate())*/
-    if(i === 0) {
-      this.insertAdjacentElement("afterbegin", elem)
-    }
-    else if(i < this.items.length) {
-      this.items[i].insertAdjacentElement("beforebegin", elem)
-    }
-    else {
-      this.insertAdjacentElement("beforeend", elem)
-    }
-  }
-
-  handleMove = (e: CustomEvent) => {
-    const elem = e.target as HTMLElement
-    const children = Array.from(this.children)
-    const pos = children.indexOf(elem)
-    let i: number
-    if(e.type === "ww-moveup") {
-      i = Math.max(0, pos - 1)
-    }
-    else if(e.type === "ww-movedown") {
-      i = Math.min(children.length, pos + 2)
-
-    }
-    else if(e.type === "ww-moveto") {
-      i = e.detail.i
-    }
-    this.moveChild(elem, i)
-  }
-
-
-  #solution: string[] = []
-
-  get solution() {
-    return this.#solution?.length? this.#solution: undefined
-  }
-
-  @property({attribute: false})
-  set solution(value: string[]) {
-    this.#solution = value
-    if(value) {
-      this.dispatchEvent(new CustomEvent("ww-answer-change", {
-        bubbles: true,
-        composed: true
-      }))
-    }
-  }
-
-  
-  reportSolution() {
-    this.solution.forEach((id, i) => (this.querySelector(`#${id}`) as any).validOrder = i)
-    let wrongSolution: boolean = false
-    this.items.forEach(item => {
-      if(this.items.indexOf(item) != this.solution.indexOf(item.id)){
-        wrongSolution = true
-        if(this.showSolution != "full"){
-          this.items.forEach(i => {
-            i.showSolution = false
-          })
-        }
-      }
-    })
-    if(wrongSolution){
-      if(this.showSolution != "right"){
-        this.style.backgroundColor = "#F9B5C4"
-      }
-    }else{
-      this.style.backgroundColor = "#BCE194"
-    }
-    this.items.forEach(item=>{
-      item.style.pointerEvents="none"
-    })
-  }
-
-  reset() {
-    this.solution = undefined
-    this.style.backgroundColor = ""
-    this.shuffleItems()
-    this.items.forEach(item=>{
-      item.style.pointerEvents="auto"
-    })
-  }
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-      this.showSolution = this.showSolution
-  }
-
-  render() {
-    return html`
-      <slot id="items-slot" @webwriter-clear-drop-preview=${this.clearDropPreviews}></slot>
-      ${this.hasAttribute("contenteditable")?html`
-      <sl-button size="small" id="add-option" @click=${() => this.addItem()}>
-        <sl-icon src=${IconPlus}></sl-icon><span>${msg("Add Option")}</span>
-      </sl-button>
-      `:""}
-    `
-  }
-}

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

@@ -1,161 +0,0 @@
-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"
-
-import LOCALIZE from "../../localization/generated"
-import {msg} from "@lit/localize"
-
-declare global {interface HTMLElementTagNameMap {
-  "webwriter-pairing-item": WebwriterPairingItem;
-}}
-
-@customElement("webwriter-pairing-item")
-export class WebwriterPairingItem extends LitElementWw {
-
-  localize = LOCALIZE
-
-  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

@@ -1,193 +0,0 @@
-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 type { WebwriterPairingItem } from "./webwriter-pairing-item"
-
-import LOCALIZE from "../../localization/generated"
-import {msg} from "@lit/localize"
-
-declare global {interface HTMLElementTagNameMap {
-  "webwriter-pairing": WebwriterPairing;
-}}
-
-@customElement("webwriter-pairing")
-export class WebwriterPairing extends LitElementWw {
-
-  localize = LOCALIZE
-
-  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>
-    `
-  }
-}