@webwriter/quiz 1.0.0

package/package.json

@@ -0,0 +1,199 @@
+{
+  "name": "@webwriter/quiz",
+  "version": "1.0.0",
+  "keywords": [
+    "webwriter-widget"
+  ],
+  "scripts": {
+    "prepublishOnly": "npx @webwriter/build"
+  },
+  "license": "MIT",
+  "author": "Frederic Salmen <frederic@fsalmen.de>",
+  "dependencies": {
+    "@shoelace-style/shoelace": "^2.13.1",
+    "@shopify/draggable": "^1.1.3",
+    "@webwriter/lit": "file:../lit",
+    "bootstrap-icons": "^1.11.3",
+    "interactjs": "^1.10.26",
+    "lit": "^3.2.0",
+    "minimasonry": "^1.3.2",
+    "sortablejs": "^1.15.2"
+  },
+  "devDependencies": {
+    "@types/minimasonry": "^1.3.5",
+    "@types/sortablejs": "^1.15.7"
+  },
+  "peerDependencies": {
+    "@webwriter/phet-simulation": "^1.0.0"
+  },
+  "exports": {
+    "./widgets/webwriter-quiz.*": {
+      "source": "./src/widgets/webwriter-quiz.ts",
+      "default": "./dist/widgets/webwriter-quiz.*"
+    },
+    "./snippets/choice.html": "./src/snippets/choice.html",
+    "./snippets/order.html": "./src/snippets/order.html",
+    "./snippets/text.html": "./src/snippets/text.html",
+    "./snippets/mark.html": "./src/snippets/mark.html",
+    "./snippets/speech.html": "./src/snippets/speech.html",
+    "./widgets/webwriter-task.*": {
+      "source": "./src/widgets/webwriter-task.ts",
+      "default": "./dist/widgets/webwriter-task.*"
+    },
+    "./widgets/webwriter-task-prompt.*": {
+      "source": "./src/widgets/webwriter-task-prompt.ts",
+      "default": "./dist/widgets/webwriter-task-prompt.*"
+    },
+    "./widgets/webwriter-task-hint.*": {
+      "source": "./src/widgets/webwriter-task-hint.ts",
+      "default": "./dist/widgets/webwriter-task-hint.*"
+    },
+    "./widgets/webwriter-task-explainer.*": {
+      "source": "./src/widgets/webwriter-task-explainer.ts",
+      "default": "./dist/widgets/webwriter-task-explainer.*"
+    },
+    "./widgets/webwriter-choice.*": {
+      "source": "./src/widgets/webwriter-choice.ts",
+      "default": "./dist/widgets/webwriter-choice.*"
+    },
+    "./widgets/webwriter-choice-item.*": {
+      "source": "./src/widgets/webwriter-choice-item.ts",
+      "default": "./dist/widgets/webwriter-choice-item.*"
+    },
+    "./widgets/webwriter-order.*": {
+      "source": "./src/widgets/webwriter-order.ts",
+      "default": "./dist/widgets/webwriter-order.*"
+    }, 
+    "./widgets/webwriter-order-item.*": {
+      "source": "./src/widgets/webwriter-order-item.ts",
+      "default": "./dist/widgets/webwriter-order-item.*"
+    },
+    "./widgets/webwriter-pairing.*": {
+      "source": "./src/widgets/webwriter-pairing.ts",
+      "default": "./dist/widgets/webwriter-pairing.*"
+    },
+    "./widgets/webwriter-pairing-item.*": {
+      "source": "./src/widgets/webwriter-pairing-item.ts",
+      "default": "./dist/widgets/webwriter-pairing-item.*"
+    },
+    "./widgets/webwriter-text.*": {
+      "source": "./src/widgets/webwriter-text.ts",
+      "default": "./dist/widgets/webwriter-text.*"
+    },
+    "./widgets/webwriter-mark.*": {
+      "source": "./src/widgets/webwriter-mark.ts",
+      "default": "./dist/widgets/webwriter-mark.*"
+    },
+    "./widgets/webwriter-speech.*": {
+      "source": "./src/widgets/webwriter-speech.ts",
+      "default": "./dist/widgets/webwriter-speech.*"
+    },
+    "./widgets/webwriter-cloze.*": {
+      "source": "./src/widgets/webwriter-cloze.ts",
+      "default": "./dist/widgets/webwriter-cloze.*"
+    },
+    "./widgets/webwriter-cloze-gap.*": {
+      "source": "./src/widgets/webwriter-cloze-gap.ts",
+      "default": "./dist/widgets/webwriter-cloze-gap.*"
+    },
+    "./package.json": "./package.json"
+  },
+  "editingConfig": {
+    "./widgets/webwriter-choice-item": {
+      "group": "",
+      "content": "(p | flow)+",
+      "uninsertable": true,
+      "draggable": false,
+      "selectable": false,
+      "isolating": false
+    },
+    "./widgets/webwriter-choice": {
+      "group": "answer",
+      "content": "webwriter-choice-item+",
+      "uninsertable": true
+    },
+    "./widgets/webwriter-order-item": {
+      "group": "",
+      "content": "(p | flow)+",
+      "uninsertable": true,
+      "draggable": true,
+      "selectable": false,
+      "isolating": false
+    },
+    "./widgets/webwriter-order": {
+      "group": "answer",
+      "content": "webwriter-order-item+",
+      "uninsertable": true
+    },
+    "./widgets/webwriter-pairing": {
+      "group": "answer",
+      "content": "webwriter-pairing-item+",
+      "uninsertable": true,
+      "isolating": true
+    },
+    "./widgets/webwriter-pairing-item": {
+      "group": "",
+      "content": "picture | flow",
+      "uninsertable": true,
+      "draggable": true,
+      "isolating": true
+    },
+    "./widgets/webwriter-text": {
+      "group": "answer",
+      "uninsertable": true
+    },
+    "./widgets/webwriter-mark": {
+      "group": "answer inlinecontainer",
+      "content": "(text | br | wbr)*",
+      "isolating": true,
+      "defining": true,
+      "marks": "",
+      "uninsertable": true
+    },
+    "./widgets/webwriter-speech": {
+      "group": "answer",
+      "uninsertable": true
+    },
+    "./widgets/webwriter-cloze": {
+      "group": "answer",
+      "content": "p",
+      "uninsertable": true,
+      "isolating": true
+    },
+    "./widgets/webwriter-cloze-gap": {
+      "group": "phrasing",
+      "inline": true,
+      "atom": true,
+      "uninsertable": true,
+      "isolating": false
+    },
+    "./widgets/webwriter-task": {
+      "content": "webwriter-task-prompt webwriter-task-hint? answer webwriter-task-explainer*",
+      "uninsertable": true,
+      "isolating": true
+    },
+    "./widgets/webwriter-task-prompt": {
+      "group": "",
+      "defining": true,
+      "content": "(p | flow)+",
+      "uninsertable": true
+    },
+    "./widgets/webwriter-task-hint": {
+      "group": "containerinline",
+      "defining": true,
+      "content": "p",
+      "isolating": true,
+      "uninsertable": true
+    },
+    "./widgets/webwriter-task-explainer": {
+      "group": "",
+      "defining": true,
+      "isolating": true,
+      "content": "(p | flow)+",
+      "uninsertable": true
+    },
+    "./widgets/webwriter-quiz": {
+      "content": "webwriter-task*"
+    }
+  }
+}

package/src/lib/combobox.ts

@@ -0,0 +1,456 @@
+import { LitElement, html, css, CSSResultArray, CSSResult, PropertyValueMap, PropertyValues } from "lit"
+import { customElement, property, query, queryAssignedElements } from "lit/decorators.js"
+import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js"
+import SlOption from "@shoelace-style/shoelace/dist/components/option/option.component.js"
+import IconChevronDown from "bootstrap-icons/icons/chevron-down.svg"
+
+import { ifDefined } from "lit/directives/if-defined.js"
+import { styleMap } from "lit/directives/style-map.js"
+
+@customElement("ww-combobox")
+export class Combobox extends LitElement {
+
+  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true}
+
+  constructor() {
+    super()
+    this.addEventListener("focus", e => {this.active = true; this.open = true})
+    this.addEventListener("focusout", e => {
+      this.active = this.open = false
+    })
+    this.addEventListener("blur", e => {
+      this.active = this.open = false
+    })
+    this.value = this.defaultValue = this.multiple? []: ""
+  }
+
+  tabIndex = 0
+
+  @property({attribute: false}) //@ts-ignore
+  accessor value: string[] | string
+
+  @property({attribute: false}) //@ts-ignore
+  accessor defaultValue: string[] | string
+
+  @query("input") //@ts-ignore
+  accessor input: HTMLInputElement
+
+  @query("#toggle")
+  accessor toggleButton: HTMLInputElement
+
+  @query("slot:not([name])")
+  accessor slotElement: HTMLSlotElement
+
+  @queryAssignedElements()
+  accessor optionElements: HTMLElement[]
+
+  @property({type: String, attribute: true}) //@ts-ignore
+  accessor autocomplete: SlInput["autocomplete"] = "off"
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor active: boolean
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor inputDisabled: boolean = false
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor multiple: boolean = false
+
+  @property({type: String}) //@ts-ignore
+  accessor placeholder: string
+  
+  @property({type: String, attribute: true, reflect: true})
+  accessor emptyValue: string
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor open: boolean = false
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor suggestions: boolean = false
+
+  @property({type: String, attribute: "help-text"}) //@ts-ignore
+  accessor helpText: string
+
+  @property({type: Number, attribute: true})
+  accessor fixLength: number
+  
+  @property({type: String, attribute: true})
+  accessor separator: string = " "
+
+  @property({type: String, attribute: true})
+  accessor placement = "bottom" as const
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor autosize = false
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor disabled = false
+
+  @property({type: Boolean, attribute: true, reflect: true})
+  accessor required = false
+
+  @property({type: String, attribute: true, reflect: true})
+  accessor type: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week"
+
+  @property({type: String, attribute: true, reflect: true})
+  accessor label: string
+
+  get validity() {
+    return this.input.validity
+  }
+
+  get validationMessage() {
+    return this.input.validationMessage
+  }
+
+  setValidity(isValid: boolean) {
+    const host = this
+    const required = Boolean(this.required)
+    host.toggleAttribute('data-required', required)
+    host.toggleAttribute('data-optional', !required)
+    host.toggleAttribute('data-invalid', !isValid)
+    host.toggleAttribute('data-valid', isValid)
+  }
+
+  focus() {
+    if(this.inputDisabled && this.suggestions) {
+      this.open = !this.open
+      super.focus()
+    }
+    else {
+      this.input?.focus()
+    }
+  }
+
+  blur() {
+    this.open = false
+  }
+
+  getForm() {
+    return this.input.form
+  }
+
+  static styles: CSSResult | CSSResultArray = [SlInput.styles, css`
+    * {
+      font-family: var(--sl-font-sans);
+    }
+
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+
+    [part=base] {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+      border-radius: var(--sl-input-border-radius-medium);
+      max-width: 100%;
+      min-height: var(--sl-input-height-medium);
+      padding: 0 var(--sl-input-spacing-medium);
+      padding-right: 0;
+      background: white;
+    }
+
+    :host(:not([inputDisabled]):not([disabled])) {
+      cursor: text;
+    }
+
+    :host([inputDisabled]:not([disabled])), :host([inputDisabled]:not([disabled])) input {
+      cursor: pointer;
+    }
+
+    :host([multiple]) [part=base] {
+      flex-wrap: wrap;
+    }
+
+    :host([filled]) [part=base] {
+      background: var(--sl-input-filled-background-color);
+    }
+
+    :host([active]) [part=base] {
+      border-color: var(--sl-input-border-color-focus);
+      box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+    }
+
+    :host([disabled]) [part=base] {
+      background: none;
+    }
+
+    :host(:hover) [part=base] {
+      border-color: var(--sl-color-gray-400);
+    }
+
+    #values {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.25rem;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      flex-wrap: wrap;
+    }
+
+    #values > * {
+      margin-top: 0.125rem;
+      margin-bottom: 0.125rem;
+    }
+
+    #options {
+      display: block;
+      font-family: var(--sl-font-sans);
+      font-size: var(--sl-font-size-medium);
+      font-weight: var(--sl-font-weight-normal);
+      box-shadow: var(--sl-shadow-large);
+      background: var(--sl-panel-background-color);
+      border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+      border-radius: var(--sl-border-radius-medium);
+      padding-block: var(--sl-spacing-x-small);
+      padding-inline: 0;
+      overflow: auto;
+      overscroll-behavior: none;
+      width: 100%;
+      max-height: var(--auto-size-available-height);
+    }
+
+    :host(:is(:not([open]), :not([suggestions]))) #options {
+      display: none;
+    }
+
+    #options::part(base) {
+      width: 100%;
+      border-top: none;
+    }
+
+    input {
+      flex-grow: 1;
+      display: inline-flex;
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: var(--sl-input-font-size-small);
+    }
+
+    :host(:not([suggestions])) sl-menu, :host(:not([suggestions])) #toggle {
+      display: none;
+    }
+
+    #toggle {
+      padding-right: var(--sl-input-spacing-medium);
+    }
+
+    :host([size=small]) #toggle {
+      padding-right: var(--sl-spacing-2x-small);
+      font-size: var(--sl-input-font-size-small);
+    }
+
+    #toggle::part(base) {
+      padding: 0;
+    }
+
+    #toggle::part(base) {
+      transition: transform 0.25s ease;
+    }
+
+    :host([open]) #toggle::part(base) {
+      transform: rotate(180deg);
+    }
+
+    :host([open]) {
+      z-index: 100;
+    }
+
+    sl-dropdown::part(panel) {
+      width: 100%;
+    }
+
+    [part=suffix] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      max-width: 50%;
+      flex-grow: 0;
+    }
+
+    [part=label]::slotted(*), label {
+      align-self: flex-start;
+      margin-bottom: var(--sl-spacing-3x-small);
+    }
+
+    :host([required]) [part=label]::after {
+      content: "*";
+      margin-left: 0.25ch;
+    }
+
+    :host(:not([help-text])) #help-text {
+      display: none;
+    }
+
+    #help-text {
+      font-size: var(--sl-input-help-text-font-size-medium);
+      color: var(--sl-input-help-text-color);
+      margin-top: var(--sl-spacing-3x-small);
+    }
+
+    slot[name=prefix]::slotted(:last-child) {
+      margin-right: 1ch;
+    }
+
+    :host([size=small]) [part=base] {
+      min-height: var(--sl-input-height-small);
+      padding: 0 var(--sl-input-spacing-small);
+    }
+
+    #hide {
+      height: 0;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      white-space: pre;
+      overflow: hidden;
+      font-size: var(--sl-input-font-size-small);
+    }
+  `]
+
+  handleTextInput(e: Event) {
+    const input = e.target as HTMLInputElement
+    e.preventDefault()
+    if(!this.multiple && this.fixLength && input.value.length < this.fixLength) {
+      input.value = this.value as string
+    }
+    else if(!this.multiple) {
+      this.value = input.value
+    }
+    else if(input.value === this.separator) {
+      input.value = ""
+    }
+    else {
+      this.value = [...this.valueList.slice(0, -1), ...input.value.split(this.separator)]
+      input.value = this.valueList.at(-1)!
+    }
+    this.dispatchInput()
+    this.setValidity(this.validity.valid)
+  }
+
+  handleInputKeydown(e: KeyboardEvent) {
+    const input = e.target as HTMLInputElement
+    if(this.multiple && e.key === "Backspace" && input.selectionStart === 0 && input.selectionEnd === 0) {
+      e.preventDefault()
+      this.value = this.valueList.slice(0, -1)
+    }
+    this.requestUpdate()
+  }
+
+  handleOptionClick = (e: PointerEvent) => {
+    const option = (e.target as HTMLElement).closest("sl-option") as SlOption | null
+    if(option) {
+      this.value = option.value
+      this.focus()
+      this.open = false
+      this.dispatchChange()
+      this.requestUpdate()
+    }
+  }
+
+  dispatchChange() {
+    this.dispatchEvent(new CustomEvent("sl-change", {composed: true, bubbles: true}))
+  }
+
+  dispatchInput() {
+    this.dispatchEvent(new CustomEvent("sl-input", {composed: true, bubbles: true}))
+  }
+
+  get valueList() {
+    return (this.multiple? this.value || []: [this.value])  as string[]
+  }
+
+  get inputSize() {
+    return !this.multiple? undefined: Math.min(
+      Math.max(this.placeholder?.length ?? 1, this.valueList.at(-1)!?.length ?? 1 - 1),
+      40
+    )
+  }
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties)
+    this.requestUpdate()
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this.requestUpdate()
+  }
+
+  @query("#hide")
+  accessor hideEl: HTMLElement
+
+  @query("input")
+  accessor inputEl: HTMLInputElement
+
+  get inputWidth() {
+    return this.hideEl? this.hideEl.offsetWidth: 0
+  }
+
+  get inputValue() {
+    const value = this.multiple? this.valueList.at(-1) ?? "": String(this.value ?? "")
+    return value !== this.emptyValue? value: ""
+  }
+
+  render() {
+    const input = html`
+      <input
+        part="input"
+        type=${this.type}
+        size=${ifDefined(this.inputSize)}
+        .value=${this.inputValue}
+        placeholder=${this.multiple && this.valueList.length > 1? "": this.placeholder}
+        ?disabled=${this.disabled || this.inputDisabled}
+        @input=${this.handleTextInput}
+        @change=${this.dispatchChange}
+        @keydown=${this.handleInputKeydown}
+        autocomplete=${this.autocomplete as any}
+        style=${this.autosize? styleMap({width: `calc(${this.inputWidth}px + 2ch)`}): undefined}
+      >
+    `
+    return html`
+      <slot name="label" part="label" @click=${this.focus}>
+        <label>${this.label}</label> 
+      </slot>
+      <div part="base" id="anchor" tabindex=${0}>
+        <slot name="prefix"></slot>
+        ${this.multiple? html`
+          <span id="values">
+            <slot name="values"></slot>
+            ${this.valueList.slice(0, -1).map(v => html`
+              <sl-tag size="small" variant="primary">${v}</sl-tag>
+            `)}
+            ${input}
+          </span>
+        `: input}
+        <div part="suffix">
+          <slot name="suffix"></slot>
+            <sl-icon-button
+              slot="trigger"
+              part="trigger"
+              id="toggle"
+              src=${IconChevronDown}
+              @focus=${(e: Event) => e.stopPropagation()}
+              @click=${(e: Event) => {this.open = !this.open; e.stopPropagation()}}
+              @mousedown=${(e: Event) => {e.stopPropagation(); e.preventDefault()}}
+            ></sl-icon-button>
+        </div>
+      </div>
+      <sl-popup anchor="anchor" placement=${this.placement} strategy="fixed" ?active=${this.open} auto-size="vertical" auto-size-padding="10" flip shift>
+          <sl-menu id="options" @click=${this.handleOptionClick}>
+            <slot></slot>
+          </sl-menu>
+        </sl-popup>
+      <div id="help-text">${this.helpText}</div>
+      <span id="hide">${this.inputEl?.value}</span>
+    `
+  }
+}

package/src/lib/highlighter-fill.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" fill="currentColor" class="bi bi-highlighter" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path style="fill:#ffffff;stroke-width:0.0388979" d="M 12.979378,2.8366808 11.180665,1.1061689 11.312696,0.99938614 c 0.224798,-0.18180931 0.45821,-0.26011138 0.787279,-0.26410617 0.520565,-0.006315 0.605828,0.0505579 1.812273,1.20892583 1.20551,1.1574723 1.264697,1.239359 1.259768,1.7428933 -0.003,0.3118719 -0.08504,0.5291149 -0.285756,0.7571853 l -0.108172,0.1229081 z" id="path310" />
+  <path style="fill:#ffffff;stroke-width:0.0327363" d="M 4.3293683,11.575933 C 2.3884046,9.6659098 2.3670623,9.6434959 2.4318197,9.5830841 2.4678415,9.5494798 4.3833896,7.8593211 6.6885933,5.827176 8.993797,3.795031 10.924803,2.0910543 10.97972,2.0405615 l 0.09985,-0.091804 1.524504,1.5011639 1.524504,1.501164 -3.894388,4.2701545 C 8.0922741,11.569823 6.329137,13.495058 6.316105,13.499537 6.3030731,13.504037 5.4090417,12.638394 4.3293683,11.575933 Z" id="path306" />
+  <path style="fill:#ffffff;stroke-width:0.0401442" d="m 3.0376721,12.881037 -0.8289193,-0.721793 0.011549,-0.90713 0.011549,-0.907129 1.8721139,1.628923 1.8721139,1.628923 H 4.9213333 3.8665914 Z" id="path308" />
+  <path fill-rule="evenodd" d="m 11.096,0.644 a 2,2 0 0 1 2.791,0.036 l 1.433,1.433 a 2,2 0 0 1 0.035,2.791 l -0.413,0.435 -8.07,8.995 A 0.5,0.5 0 0 1 6.5,14.5 h -3 A 0.5,0.5 0 0 1 3.266,14.442 L 2.854,14.854 A 0.5,0.5 0 0 1 2.5,15 h -2 A 0.5,0.5 0 0 1 0.146,14.146 L 1.558,12.734 A 0.5,0.5 0 0 1 1.5,12.5 v -3 A 0.5,0.5 0 0 1 1.666,9.128 l 8.995,-8.07 z M 10.981,2.114 2.727,9.52 6.48,13.273 13.886,5.019 Z m 3.585,2.17 0.064,-0.068 A 1,1 0 0 0 14.613,2.82 L 13.18,1.387 A 1,1 0 0 0 11.784,1.369 L 11.716,1.434 Z M 5.293,13.5 2.5,10.707 v 1.586 L 3.707,13.5 Z" id="path2" />
+</svg>

package/src/snippets/choice.html

@@ -0,0 +1,8 @@
+<webwriter-task>
+  <webwriter-task-prompt slot="prompt"><p></p></webwriter-task-prompt>
+  <webwriter-choice>
+    <webwriter-choice-item>
+      <p></p>
+    </webwriter-choice-item>
+  </webwriter-choice>
+</webwriter-task>

package/src/snippets/cloze.html

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

package/src/snippets/mark.html

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

package/src/snippets/order.html

@@ -0,0 +1,8 @@
+<webwriter-task>
+  <webwriter-task-prompt slot="prompt"><p></p></webwriter-task-prompt>
+  <webwriter-order>
+    <webwriter-order-item>
+      <p></p>
+    </webwriter-order-item>
+  </webwriter-order>
+</webwriter-task>