@webwriter/quiz 1.0.0

package/src/snippets/pairing.html

@@ -0,0 +1,10 @@
+<webwriter-task>
+  <webwriter-task-prompt slot="prompt"><p></p></webwriter-task-prompt>
+  <webwriter-pairing>
+    <webwriter-pairing-item>
+      <picture>
+        <img>
+      </picture>
+    </webwriter-pairing-item>
+  </webwriter-pairing>
+</webwriter-task>

package/src/snippets/speech.html

@@ -0,0 +1,4 @@
+<webwriter-task>
+  <webwriter-task-prompt slot="prompt"><p></p></webwriter-task-prompt>
+  <webwriter-speech></webwriter-speech>
+</webwriter-task>

package/src/snippets/text.html

@@ -0,0 +1,4 @@
+<webwriter-task>
+  <webwriter-task-prompt slot="prompt"><p></p></webwriter-task-prompt>
+  <webwriter-text></webwriter-text>
+</webwriter-task>

package/src/snippets/wordsearch.html

@@ -0,0 +1,4 @@
+<webwriter-task>
+  <webwriter-task-prompt slot="prompt"><p></p></webwriter-task-prompt>
+  <webwriter-wordsearch></webwriter-wordsearch>
+</webwriter-task>

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

@@ -0,0 +1,251 @@
+import {css, html, PropertyValues} from "lit"
+import {styleMap} from "lit/directives/style-map.js"
+import {classMap} from "lit/directives/class-map.js"
+import {unsafeStatic} from "lit/static-html.js"
+import {LitElementWw} from "@webwriter/lit"
+import {customElement, property, query} from "lit/decorators.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 SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js"
+import "@shoelace-style/shoelace/dist/themes/light.css"
+import { keyed } from "lit/directives/keyed.js"
+import IconX from "bootstrap-icons/icons/x.svg"
+import IconCheck from "bootstrap-icons/icons/check.svg"
+
+
+declare global {interface HTMLElementTagNameMap {
+  "webwriter-choice-item": WebwriterChoiceItem;
+}}
+
+@customElement("webwriter-choice-item")
+export class WebwriterChoiceItem extends LitElementWw {
+
+  static localization = {}
+
+  msg = (str: string) => this.lang in WebwriterChoiceItem.localization? WebwriterChoiceItem.localization[this.lang][str] ?? str: str
+
+  @property({type: Boolean, attribute: false})
+  accessor active = false
+
+  @property({type: Boolean, attribute: false})
+  accessor valid: true | false | undefined
+
+  // inactive + invalid/no validity -> nothing
+  // active + no validity -> blue circle
+  // inactive/active + valid -> green upper checkmark
+  // active + invalid -> red upper cross
+
+
+  @property({type: String, attribute: true, reflect: true})
+  accessor layout: "list" | "tiles" = "list"
+
+  static scopedElements = {
+    "sl-radio": SlRadio,
+    "sl-checkbox": SlCheckbox,
+    "sl-icon": SlIcon
+  }
+
+  static styles = css`
+
+    :host {
+      width: 100%;
+      position: relative;
+    }
+
+    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
+      display: none;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) .user-only {
+      display: none;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) sl-checkbox.valid {
+      --webwriter-control-color-600: var(--sl-color-success-600);
+      --webwriter-control-color-400: var(--sl-color-success-400);
+    }
+
+    sl-checkbox {
+      display: block;
+      width: 100%;
+      &::part(base) {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: unset;
+      }
+
+      &::part(control) {
+        cursor: pointer;
+        border-radius: var(--webwriter-choice-radius, 2px);
+        border-width: 2px;
+      }
+
+      &::part(control):not(:hover){
+        border-color: var(--sl-color-gray-500);
+      }
+
+      &::part(control):hover {
+        border-color: var(--sl-color-gray-700);
+      }
+
+      &::part(control--checked):not(:hover) {
+        background-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+        border-color: var(--sl-color-gray-500);
+      }
+      &::part(control--checked):hover {
+        background-color: var(--webwriter-control-color-400, var(--sl-color-primary-400));
+        border-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+      }
+
+      &::part(label) {
+        width: 100%;
+      }
+    }
+
+    .solution {
+      position: absolute;
+      top: -6px;
+      left: -6px;
+      border: 2px solid var(--sl-color-gray-500);
+      border-radius: var(--webwriter-choice-radius, 2px);
+      width: 12px;
+      height: 12px;
+      z-index: 1;
+      color: white;
+
+      &[data-valid] {
+        background: var(--sl-color-success-600);
+      }
+
+      &:not([data-valid]) {
+        background: var(--sl-color-danger-600);
+      }
+    }
+
+    :host([layout=tiles]) {
+      position: relative;
+      overflow: visible !important;
+
+      & ::slotted(:is(picture, audio, video, img, iframe)) {
+        height: 100%;
+        width: 100%;
+      }
+
+      & ::slotted(:not(:is(picture, audio, video, img, iframe))) {
+        margin: 5px !important;
+      }
+
+      sl-checkbox {
+      display: block;
+      &::part(base) {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: unset;
+        position: static;
+      }
+
+      &::part(control) {
+        position: absolute;
+        bottom: -10px;
+        left: -10px;
+        cursor: pointer;
+        border-radius: var(--webwriter-choice-radius, 2px);
+        z-index: 100;
+        border-color: var(--sl-color-gray-500);
+      }
+
+      &::part(control--checked):not(:hover) {
+        background-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+        border-color: var(--sl-color-gray-500);
+      }
+      &::part(control--checked):hover {
+        background-color: var(--webwriter-control-color-400, var(--sl-color-primary-400));
+        border-color: var(--webwriter-control-color-600, var(--sl-color-primary-600));
+      }
+
+      &::part(label) {
+        aspect-ratio: 1;
+        min-width: 125px;
+        max-width: 350px;
+        min-height: 125px;
+        max-height: 350px;
+        overflow: hidden;
+        resize: both;
+        margin-inline-start: 0;
+        overflow-y: auto;
+        scrollbar-width: thin;
+      }
+    }    
+    }
+  `
+
+  handleClick = (e: PointerEvent) => {
+    const checkboxClicked = e.composedPath().some(v => (v as HTMLElement)?.classList?.contains("checkbox__control"))
+    const editable = this.isContentEditable
+    if(editable && !checkboxClicked) {
+      e.preventDefault()
+    }
+    else {
+      e.stopImmediatePropagation()
+    }
+  }
+
+  handleChange = (e: CustomEvent) => {
+    if(this.isContentEditable) {
+      this.valid = !this.valid
+    }
+    else {
+      this.active = !this.active
+    }
+  }
+
+  @query("sl-checkbox")
+  accessor checkbox: SlCheckbox
+
+  observer: MutationObserver
+
+  protected async updated(_changedProperties: PropertyValues) {
+    await this.checkbox.updateComplete
+    const labelEl = this.checkbox.shadowRoot.querySelector(".checkbox__label") as HTMLElement
+
+    if(_changedProperties.has("layout") && this.layout === "list") {
+      this.syncSize(true)
+      this.observer?.disconnect()
+    }
+    else if(_changedProperties.has("layout") && this.layout === "tiles") {
+      this.syncSize()
+      this.observer = new MutationObserver(() => this.syncSize())
+      this.observer.observe(labelEl, {attributeFilter: ["style"], attributes: true})
+    }
+  }
+
+  syncSize(clear=false) {
+    const labelEl = this.checkbox?.shadowRoot.querySelector(".checkbox__label") as HTMLElement
+    if(labelEl && !clear) {
+      this.style.width = labelEl.style.width
+      this.style.height = labelEl.style.height
+    }
+    else if(labelEl && clear) {
+      this.style.width = labelEl.style.width = null
+      this.style.height = labelEl.style.height = null
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.observer?.disconnect()
+  }
+
+  render() {
+    return keyed(this.layout, html`
+      ${this.valid !== undefined && (this.active || !this.active && this.valid)? html`<sl-icon class="solution user-only" ?data-valid=${this.valid} src=${this.valid? IconCheck: IconX}></sl-icon>`: null}
+      <sl-checkbox class=${classMap({valid: this.valid, active: this.active})} exportparts="base, control, label" @click=${this.handleClick} @sl-change=${this.handleChange} ?checked=${this.isContentEditable? this.valid: this.active}>
+        <slot part="slot" style=${styleMap({"--ww-placeholder": `"${this.msg("Option")}"`})}></slot>
+      </sl-checkbox>
+    `)
+  }
+}

package/src/widgets/webwriter-choice.ts

@@ -0,0 +1,310 @@
+import {html, css, PropertyValueMap, TemplateResult, PropertyValues} from "lit"
+import {styleMap} from "lit/directives/style-map.js"
+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"
+
+import IconPlusSquare from "bootstrap-icons/icons/plus-square.svg"
+import IconPlusCircle from "bootstrap-icons/icons/plus-circle.svg"
+import { WebwriterChoiceItem } from "./webwriter-choice-item.js"
+import "@shoelace-style/shoelace/dist/themes/light.css"
+import MiniMasonry from "minimasonry"
+
+
+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-choice": WebwriterChoice;
+}}
+
+@customElement("webwriter-choice")
+export class WebwriterChoice extends LitElementWw {
+
+  @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"}},
+    ]
+  })
+  accessor mode: "truefalse" | "single" | "multiple" = "single"
+
+
+  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-choice-item").forEach(el => el.setAttribute("layout", value))
+    this.requestUpdate("layout")
+  }
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  @option({
+    type: Boolean,
+    label: {"en": "Random Choice Order"}
+  })
+  accessor randomOrder = false
+
+
+  get solution() {
+    const validIDs = this.items.filter(item => item.valid).map(item => item.id)
+    return validIDs.length? validIDs: undefined
+  }
+
+  set solution(value: string[]) {
+    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 = undefined; item.active = false})
+    this.shuffleItems()
+  }
+
+  static scopedElements = {
+    "sl-button": SlButton,
+    "sl-icon": SlIcon,
+    "sl-radio": SlRadio,
+    "sl-checkbox": SlCheckbox,
+    "sl-radio-button": SlRadioButton,
+    "sl-radio-group": SlRadioGroup
+  }
+
+  @query("slot")
+  accessor slotEl: HTMLSlotElement
+  
+  @action()
+  addItem() {
+    /*
+    if(this.ownerDocument.getSelection().containsNode(this, true)) {
+      this.ownerDocument.getSelection().modify("move", "backward", "character")
+    }
+    setTimeout(() => {*/
+      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() as WebwriterChoiceItem[]
+    const n = items.length
+    const nums = shuffle([...(new Array(n)).keys()])
+    items.forEach((el, i) => el.style.order = String(nums[i]))
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    const observer = new MutationObserver(() => {
+      if(!this.contentEditable && this.randomOrder) {
+        this.shuffleItems()
+      }
+    })
+    observer.observe(this, {childList: true})
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    if(!this.contentEditable && this.randomOrder) {
+      this.shuffleItems()
+    }
+  }
+
+  static 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;
+    }    
+  `
+
+  @queryAssignedElements()
+  accessor items: WebwriterChoiceItem[]
+
+  #value: number[] = []
+
+  get value() {
+    return this.#value
+  }
+
+  @property({type: Array, attribute: false})
+  set value(value: number[]) {
+    this.#value = value
+    this.items.forEach((item, i) => {
+      this.isContentEditable
+        ? item.valid = this.#value.includes(i)
+        : item.active = this.#value.includes(i)
+    })
+  }
+
+  private applyValue() {
+    this.#value = this.items
+    .map((item, i) => [item.valid, i] as [boolean, number])
+    .filter(([valid]) => valid)
+    .map(([_, i]) => i)
+  }
+
+  handleControlChange = (e: CustomEvent) => {
+    if(this.mode === "single") {
+      const item = e.target as WebwriterChoiceItem
+      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
+    }))
+  }
+
+  handleSlotChange(e: Event) {
+    this.requestUpdate()
+  }
+
+  protected willUpdate(changed: PropertyValueMap<any>) {
+    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())
+    }
+  }
+
+  @query("#items-slot")
+  accessor itemsSlotEl: HTMLSlotElement
+
+  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"? IconPlusSquare: IconPlusCircle}></sl-icon><span>Add Option</span>
+      </sl-button>
+    `
+  }
+}