@webwriter/quiz 1.1.3 → 2.0.0

package/src/widgets/webwriter-task.ts

@@ -1,547 +1,216 @@
-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"
-
-import "@shoelace-style/shoelace/dist/themes/light.css"
-import { WebwriterTaskExplainer } from "./webwriter-task-explainer"
-
-import LOCALIZE from "../../localization/generated"
-import {msg} from "@lit/localize"
-
-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" ]
-  )
-}
-
-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 {
-
-  localize = LOCALIZE
-
-  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
-  }
-
-  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
-    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 style="display: none" 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 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": `"${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}>${msg("Check your answers")}</sl-button>
-          <sl-button ?disabled=${!this.isChanged && !this.submitted} id="reset" class="user-only" @click=${this.handleReset}>${msg("Try again")}</sl-button>
-        </sl-button-group>
-      `}
-    `
-  }
-}
+import { msg, str } from "@lit/localize";
+import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";
+import SlIcon from "@shoelace-style/shoelace/dist/components/icon/icon.component.js";
+import SlTag from "@shoelace-style/shoelace/dist/components/tag/tag.component.js";
+import { LitElementWw, type OptionDeclaration } from "@webwriter/lit";
+import ArrowDownIcon from "bootstrap-icons/icons/arrow-down.svg";
+import ArrowUpIcon from "bootstrap-icons/icons/arrow-up.svg";
+import WarningIcon from "bootstrap-icons/icons/exclamation-triangle.svg";
+import TrashIcon from "bootstrap-icons/icons/trash.svg";
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import type { IWebWriterQuizType } from "../api";
+import { commonStyles } from "../lib/utils";
+import { mutateWithStableSelection } from "../lib/webwriter-quirks";
+import type { WebwriterQuiz } from "./webwriter-quiz";
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"webwriter-task": WebwriterTask;
+	}
+}
+
+/**
+ * A task describes a single quiz question, which consists of a
+ * `<webwriter-task-prompt>`, an optional `<webwriter-quiz-hint>` and an answer
+ * of a certain type, such as `<webwriter-choice>`.
+ *
+ * The `<webwriter-task-prompt>` must be assigned to the `prompt` slot, the
+ * `<webwriter-quiz-hint>` must be assigned to the `hint` slot and the answer
+ * must be assigned to the default slot.
+ */
+@customElement("webwriter-task")
+export class WebwriterTask extends LitElementWw {
+	/** @internal */
+	get dynamicOptions(): Record<string, OptionDeclaration> {
+		return {
+			"points": { type: Number, label: { _: msg("Points") } },
+		};
+	}
+
+	/** @internal */
+	static scopedElements = {
+		"sl-icon-button": SlIconButton,
+		"sl-icon": SlIcon,
+		"sl-tag": SlTag,
+	};
+
+	static styles = [
+		commonStyles,
+		css`
+			:host {
+				display: block;
+			}
+
+			sl-tag {
+				margin-top: -5px;
+				margin-bottom: -5px;
+			}
+
+			.quiz-header {
+				margin-bottom: var(--sl-spacing-3x-small);
+
+				display: flex;
+				align-items: center;
+
+				.title {
+					font-weight: bold;
+				}
+
+				.required-warning {
+					margin-left: var(--sl-spacing-small);
+
+					sl-icon {
+						padding-right: var(--sl-spacing-2x-small);
+					}
+				}
+
+				.spacer {
+					flex-grow: 1;
+				}
+
+				.actions {
+					opacity: 0;
+					display: flex;
+					align-items: center;
+
+					sl-icon-button::part(base) {
+						/* Ensures that icon buttons match the 1.5 line height of the header text */
+						padding: 0.25em;
+					}
+				}
+
+				.points {
+					font-variant-numeric: tabular-nums;
+				}
+			}
+
+			:host(:hover) .actions {
+				opacity: 1;
+			}
+		`,
+	];
+
+	@property({ type: Number, attribute: "points", reflect: true })
+	private accessor points = 1;
+
+	@state() private accessor requiredWarning = false;
+
+	@state() private accessor score: number | undefined;
+
+	@state() private accessor gradable = false;
+
+	private gradabilityUpdate = 0;
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.updateGradability();
+	}
+
+	protected willUpdate(changedProperties: Map<PropertyKey, unknown>) {
+		if (changedProperties.has("points") && (!Number.isFinite(this.points) || this.points <= 0)) {
+			this.points = 1;
+		}
+	}
+
+	/** @internal */
+	showRequiredWarning(show: boolean) {
+		this.requiredWarning = show;
+	}
+
+	/** @internal */
+	showScore(score: number | undefined) {
+		this.score = score;
+	}
+
+	/** @internal */
+	resetFeedback() {
+		this.requiredWarning = false;
+		this.score = undefined;
+	}
+
+	private formatScore(score: number) {
+		return Number(score.toFixed(2));
+	}
+
+	private updateGradability() {
+		const update = ++this.gradabilityUpdate;
+		const questionTypes = Array.from(this.children).filter(child => !child.slot);
+		this.gradable = questionTypes.some(
+			child => typeof (child as Partial<IWebWriterQuizType>).checkAnswer === "function",
+		);
+
+		for (const questionType of questionTypes) {
+			if (customElements.get(questionType.localName)) continue;
+			customElements.whenDefined(questionType.localName).then(() => {
+				if (update === this.gradabilityUpdate) this.updateGradability();
+			});
+		}
+	}
+
+	private QuizHeader() {
+		const quiz = this.parentElement as WebwriterQuiz | null;
+		if (!quiz || quiz.tagName !== "WEBWRITER-QUIZ") return nothing;
+
+		const allTasks = Array.from(quiz.children);
+		const index = allTasks.indexOf(this);
+
+		return html`
+			<div class=${classMap({ "quiz-header": true })}>
+				<div class="title">${msg(str`Question ${index + 1}`)}</div>
+				${this.requiredWarning
+					? html`<sl-tag variant="danger" class="required-warning">
+							<sl-icon src=${WarningIcon}></sl-icon> ${msg("Unanswered")}
+						</sl-tag>`
+					: nothing}
+				<div class="spacer"></div>
+				<span class="actions author-only">
+					<sl-icon-button
+						src=${ArrowUpIcon}
+						?disabled=${index === 0}
+						@click=${() => mutateWithStableSelection(this, () => allTasks[index - 1].before(this))}
+					></sl-icon-button>
+					<sl-icon-button
+						src=${ArrowDownIcon}
+						?disabled=${index === allTasks.length - 1}
+						@click=${() => mutateWithStableSelection(this, () => allTasks[index + 1].after(this))}
+					></sl-icon-button>
+					<sl-icon-button src=${TrashIcon} @click=${() => this.remove()}></sl-icon-button>
+				</span>
+				${this.gradable ? this.TaskResult(quiz) : nothing}
+			</div>
+		`;
+	}
+
+	private TaskResult(quiz: WebwriterQuiz) {
+		if (quiz.hidePoints) {
+			if (this.score === undefined) return nothing;
+			if (this.score === 0) return html`<sl-tag variant="danger">${msg("Incorrect")}</sl-tag>`;
+			if (this.score === this.points) return html`<sl-tag variant="success">${msg("Correct")}</sl-tag>`;
+			return html`<sl-tag variant="warning">${msg("Partially correct")}</sl-tag>`;
+		}
+
+		return html`<span>
+			${this.score !== undefined ? html`${this.formatScore(this.score)} / ` : nothing}
+			<span class="points">${this.points}</span>
+			${this.points === 1 ? msg("point") : msg("points")}
+		</span>`;
+	}
+
+	render() {
+		return html`${this.QuizHeader()}
+			<slot name="prompt"></slot>
+			<slot @slotchange=${this.updateGradability}></slot> `;
+	}
+}