@webwriter/quiz 1.0.0

package/src/widgets/webwriter-task.ts

@@ -0,0 +1,544 @@
+import {html, css, PropertyValues} from "lit"
+import {styleMap} from "lit/directives/style-map.js"
+import {LitElementWw, option} from "@webwriter/lit"
+import {customElement, queryAssignedElements, property, query, queryAll} 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"
+
+import IconPatchQuestion from "bootstrap-icons/icons/patch-question.svg"
+import IconPatchQuestionFill from "bootstrap-icons/icons/patch-question-fill.svg"
+import IconPatchCheck from "bootstrap-icons/icons/patch-check.svg"
+import IconPatchCheckFill from "bootstrap-icons/icons/patch-check-fill.svg"
+
+async function arrayBufferToDataUrl(buffer: ArrayBuffer | Uint8Array) {
+  return new Promise(r => {
+    const reader = new FileReader()
+    reader.onload = () => r(reader.result as string)
+    reader.readAsDataURL(new Blob([buffer]))
+  }) as Promise<string>
+}
+
+async function dataUrlToArrayBuffer(url: string) {
+  return await (await (await fetch(url)).blob()).arrayBuffer()
+}
+
+function getKeyMaterial(password: string) {
+  let enc = new TextEncoder();
+  return window.crypto.subtle.importKey(
+    "raw", 
+    enc.encode(password), 
+    {name: "PBKDF2"}, 
+    false, 
+    ["deriveBits", "deriveKey"]
+  );
+}
+
+function getKey(keyMaterial: CryptoKey, salt: ArrayBufferView) {
+  return window.crypto.subtle.deriveKey(
+    {
+      "name": "PBKDF2",
+      salt: salt, 
+      "iterations": 100000,
+      "hash": "SHA-256"
+    },
+    keyMaterial,
+    { "name": "AES-GCM", "length": 256},
+    true,
+    [ "encrypt", "decrypt" ]
+  )
+}
+
+import "@shoelace-style/shoelace/dist/themes/light.css"
+import { WebwriterTaskExplainer } from "./webwriter-task-explainer"
+function romanOrdinal(num: number, capitalize=false) {
+  let roman = {
+    m: 1000,
+    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: number, 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
+}
+
+
+
+interface Answer {
+  solution: any
+  reportSolution(): void
+  reset(): void
+}
+
+declare global {interface HTMLElementTagNameMap {
+  "webwriter-task": WebwriterTask;
+}}
+
+@customElement("webwriter-task")
+export class WebwriterTask extends LitElementWw {
+
+  static localization = {}
+
+  static 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
+  }
+
+  msg = (str: string) => this.lang in WebwriterTask.localization? WebwriterTask.localization[this.lang][str] ?? str: str
+
+  static 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;
+      }
+    }
+
+  `
+
+  @queryAssignedElements({slot: "hint"})
+  accessor hints: HTMLElement[]
+
+  get hasHintElement() {
+    return this.hints.length > 0
+  }
+
+  get hasHintContent() {
+    return this.hints.some(hint => hint.innerText.trim() !== "")
+  }
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor hint = false
+
+  @property({type: Boolean, state: true, attribute: false, reflect: false})
+  accessor isChanged = false
+  
+  get directSubmit() {
+    return !this.closest("webwriter-quiz")
+  }
+
+  @property({type: Boolean, attribute: false, reflect: true})
+  private set directSubmit(value: boolean) {
+    return
+  }
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor submitted = false
+
+  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(): WebwriterTaskExplainer[] {
+    return Array.from(this.querySelectorAll("webwriter-task-explainer")) as unknown as WebwriterTaskExplainer[]
+  }
+
+  toggleExplainers = () => {
+    if(this.explainers.length) {
+      this.explainers.forEach(explainer => explainer.remove())
+      this.activeExplainer = undefined
+    }
+    else {
+      const solutionExplainer = this.ownerDocument.createElement("webwriter-task-explainer")
+      solutionExplainer.slot = "explainer"
+      solutionExplainer.id = "solution"
+      solutionExplainer.active = true/*
+      const elseExplainer = this.ownerDocument.createElement("webwriter-task-explainer")
+      elseExplainer.slot = "explainer"
+      elseExplainer.id = "else"*/
+      this.append(solutionExplainer)
+      this.ownerDocument.getSelection().setBaseAndExtent(solutionExplainer, 0, solutionExplainer, 0)
+      this.requestUpdate()
+      this.activeExplainer = "solution"
+    }
+  }
+
+  @property({attribute: false, state: true})
+  private accessor hintOpen = false
+
+  @property({attribute: true, reflect: true})
+  accessor counter: "number" | "roman" | "roman-capitalized" | "alphabetical" | "alphabetical-capitalized"
+
+  get index() {
+    return [...(this?.parentElement?.children ?? [])].indexOf(this)
+  }
+
+  get ordinalExpr() {
+    if(this.index === undefined || this.index === -1) {
+      return undefined
+    }
+    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)}.`
+    }
+  }
+
+  observer: MutationObserver
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.observer = new MutationObserver(() => this.requestUpdate())
+    this.parentElement && this.observer.observe(this.parentElement, {childList: true})
+    this.addEventListener("keydown", (e) => this.handleHintKeydown(e))
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    if(this.isContentEditable) {
+      this.#decodeSolution()
+    }
+  }
+
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.observer.disconnect()
+  }
+
+  @property({type: String, attribute: true, reflect: true})
+  accessor solution: string
+
+  /** Property containing the password currently entered by the author or user */
+  @property({type: String, attribute: false, reflect: false})
+  // @option({type: String, label: {_: "Password"}, description: {_: "Password-protects quiz answers"}})
+  accessor password: string = "B08bxd82SAOf"
+
+  @property({type: String, attribute: true, reflect: true})
+  accessor salt: string
+  
+  @property({type: String, attribute: true, reflect: true})
+  accessor iv: string
+
+  async #encodeSolution() {
+    const value = this.answer.solution as any
+    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)
+  }
+
+  async #decodeSolution() {
+    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")
+    }
+  }
+
+  checkSolution() {
+    const solution = this.#decodeSolution()
+    return Object.entries(solution).every(([k, v]) => {
+      return JSON.stringify(this.answer[k]) === JSON.stringify(v)
+    })
+  }
+
+  reportSolution() {
+    // @ts-ignore
+    this.answer.reportSolution(this.#decodeSolution())
+  }
+
+  @query("slot:not([name])")
+  accessor slotEl: HTMLSlotElement
+
+  @query("slot[name=hint]")
+  accessor hintSlotEl: HTMLSlotElement
+
+  get answer() {
+    return this.slotEl?.assignedElements()[0] as HTMLElement
+  }
+
+
+
+  handleHintSlotChange = (e: Event) => {
+    if(!this.hasHintElement) {
+      this.hintOpen = false
+      this.hint = false
+    }
+  }
+
+  handleHintKeydown = (e: KeyboardEvent) => {
+    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
+    }
+  }
+
+  handleSubmit = async () => {
+    await this.#decodeSolution()
+    this.answer.reportSolution()
+    this.dispatchEvent(new SubmitEvent("submit", {bubbles: true, composed: true}))
+    this.activeExplainer = this.explainers[0].id
+    this.submitted = true
+  }
+
+  handleReset = () => {
+    this.answer.reset && this.answer.reset()
+    this.isChanged = false
+    this.submitted = false
+  }
+
+  handleAnswerChange = async (e: CustomEvent) => {
+    this.isChanged = true
+    if(this.isContentEditable) {
+      this.#encodeSolution()
+    }
+  }
+
+  handleSlotChange = (e: Event) => {
+    this.requestUpdate()
+    if(this.isContentEditable) {
+      const solution = this.#decodeSolution() ?? {}
+      Object.entries(solution).forEach(([k, v]) => {
+        this.answer[k] = v
+      })
+    }
+  }
+
+  @property()
+  accessor activeExplainer: string
+
+  selectExplainer(id: string) {
+    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? IconPatchCheck: IconPatchCheckFill} @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? IconPatchQuestion: IconPatchQuestionFill} @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>
+      `}
+    `
+  }
+}

package/src/widgets/webwriter-text.ts

@@ -0,0 +1,131 @@
+import {html, css} from "lit"
+import {LitElementWw, option} from "@webwriter/lit"
+import {customElement, property, query} from "lit/decorators.js"
+import {ifDefined} from "lit/directives/if-defined.js"
+
+import SlTextarea from "@shoelace-style/shoelace/dist/components/textarea/textarea.component.js"
+import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js"
+import "@shoelace-style/shoelace/dist/themes/light.css"
+
+declare global {interface HTMLElementTagNameMap {
+  "webwriter-text": WebwriterText;
+}}
+
+@customElement("webwriter-text")
+export class WebwriterText extends LitElementWw {
+
+  @property({type: String, attribute: true, reflect: true})
+  @option({
+    type: "select",
+    label: {"en": "Type", "de": "Typ"},
+    options: [
+      {value: "long-text", label: {"en": "Long Text", "de": "Langer Text"}},
+      {value: "text", label: {"en": "Short Text", "de": "Kurzer Text"}},
+      {value: "number", label: {"en": "Number", "de": "Zahl"}},
+      {value: "date", label: {"en": "Date", "de": "Datum"}},
+      {value: "time", label: {"en": "Time", "de": "Uhrzeit"}},
+      {value: "datetime-local", label: {"en": "Date & Time", "de": "Datum & Uhrzeit"}}
+    ]
+  })
+  accessor type: "date" | "datetime-local" | "number" | "text" | "time" | "long-text" = "long-text"
+
+  @property({type: String, attribute: true, reflect: true})
+  @option()
+  accessor placeholder: string
+
+  @property({type: String, attribute: true, reflect: true})
+  accessor value: string
+
+  /*
+  @property({type: Number, attribute: true, reflect: true})
+  @option({type: Number})
+  min: number
+
+  @property({type: Number, attribute: true, reflect: true})
+  @option({type: Number})
+  max: number
+
+  @property({type: Number, attribute: true, reflect: true})
+  @option({type: Number})
+  step: number
+  */
+
+  static scopedElements = {
+    "sl-textarea": SlTextarea,
+    "sl-input": SlInput
+  }
+
+  static styles = css`
+    :host(:is([contenteditable=true], [contenteditable=""])) sl-textarea::part(textarea) {
+      color: var(--sl-color-success-700);
+    }
+
+    sl-textarea {
+      resize: vertical;
+      overflow: hidden;
+      min-height: 40px;
+
+      &::part(form-control), &::part(form-control-input), &::part(base), &::part(textarea) {
+        height: 100%;
+      }
+    }
+
+    :is(sl-textarea, sl-input)[data-correct]::part(base) {
+      background: var(--sl-color-success-200);
+    }
+
+    #solution {
+      padding: 1rem;
+    }
+
+    #solution[data-correct] {
+      background: var(--sl-color-success-200);
+    }
+
+    #solution:not([data-correct]) {
+      background: var(--sl-color-danger-200);
+    }
+  `
+
+  handleChange = (e: CustomEvent) => {
+    const target = e.target as SlTextarea | SlInput
+    if(this.isContentEditable) {
+      this.solution = target.value?.trim()
+    }
+    else {
+      this.value = target.value?.trim()
+    }
+    this.dispatchEvent(new CustomEvent("ww-answer-change", {
+      detail: {value: target.value},
+      bubbles: true,
+      composed: true
+    }))
+  }
+
+  @query("sl-textarea, sl-input")
+  accessor input: SlTextarea | SlInput
+
+  focus() {
+    this.input.focus()
+  }
+
+  reset() {
+    this.solution = undefined
+    this.input.value = ""
+  }
+
+  reportSolution() {}
+
+  @property({type: String, attribute: false, reflect: false})
+  accessor solution: string
+
+  render() {
+    const correct = this.solution && this.value?.trim() === this.solution
+    const textarea = html`<sl-textarea ?data-correct=${correct} value=${this.isContentEditable? this.solution: this.value} placeholder=${this.placeholder} resize="none" @sl-change=${this.handleChange}></sl-textarea>`
+    const input = html`<sl-input ?data-correct=${correct} value=${this.isContentEditable? this.solution: this.value} placeholder=${this.placeholder} type=${this.type} @sl-change=${this.handleChange}></sl-input>`
+    return html`
+      ${this.type === "long-text"? textarea: input}
+      ${this.solution && !this.isContentEditable && !correct? html`<div id="solution" ?data-correct=${correct}>${this.solution}</div>`: undefined}
+    `
+  }
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "moduleResolution": "Bundler",
+    "module": "ES2022"
+  }
+}