@citolab/qti-components 7.1.0 → 7.1.2

package/dist/chunks/chunk-EHRC7LG6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/qti-test/components/test-container.ts","inline:../../../item.css?inline"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { until } from 'lit/directives/until.js';\n\nimport { watch } from '../../decorators/watch';\nimport itemCss from '../../../item.css?inline';\nimport { qtiTransformTest } from '../../qti-transformers';\n\n/**\n * `<test-container>` is a custom element designed for hosting the qti-assessment-item.\n * The `qti-assessment-test` will be placed inside the shadow DOM of this element.\n * The element loads the test from the provided URL and renders it inside the shadow DOM.\n *\n * ```html\n * <qti-test>\n *   <test-navigation>\n *      <test-container class=\"m-4 bg-white\" test-url=\"./path/to/assessmenttest.xml\"></test-container>\n *   </test-navigation>\n * </qti-test>\n * ```\n */\n@customElement('test-container')\nexport class TestContainer extends LitElement {\n  /** URL of the item to load */\n  @property({ type: String, attribute: 'test-url' })\n  testURL: string = null;\n\n  /** A parsed HTML document */\n  @state()\n  testDoc: DocumentFragment = null;\n\n  /** The raw XML string */\n  @state()\n  testXML: string = null;\n\n  /** Template content if provided */\n  private templateContent = null;\n\n  @watch('testURL', { waitUntilFirstUpdate: true })\n  protected async handleTestURLChange() {\n    if (!this.testURL) return;\n    try {\n      const api = await qtiTransformTest().load(this.testURL);\n      this.testDoc = api.htmlDoc();\n    } catch (error) {\n      console.error('Error loading or parsing XML:', error);\n    }\n  }\n\n  @watch('testXML', { waitUntilFirstUpdate: true })\n  protected handleTestXMLChange() {\n    if (!this.testXML) return;\n    try {\n      this.testDoc = qtiTransformTest().parse(this.testXML).htmlDoc();\n    } catch (error) {\n      console.error('Error parsing XML:', error);\n    }\n  }\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback();\n    this.initializeTemplateContent();\n    this.applyStyles();\n    if (this.testURL) {\n      this.handleTestURLChange();\n    }\n    if (this.testXML) {\n      this.handleTestXMLChange();\n    }\n  }\n\n  private initializeTemplateContent() {\n    const template = this.querySelector('template') as HTMLTemplateElement;\n    this.templateContent = template ? template.content : html``;\n  }\n\n  private applyStyles() {\n    const sheet = new CSSStyleSheet();\n    sheet.replaceSync(itemCss);\n    this.shadowRoot.adoptedStyleSheets = [sheet];\n  }\n\n  render() {\n    return html`\n      ${this.templateContent}\n      <slot></slot>\n      ${until(this.testDoc, html`<span>Loading...</span>`)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-container': TestContainer;\n  }\n}\n","@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;\n\n:root,\n:host {\n  /* Active colors */\n  --qti-bg-active: #ffecec;\n  --qti-border-active: #f86d70;\n\n  /* Correct colors */\n  --qti-correct-light: #c8e6c9;\n  --qti-correct: #66bb6a;\n\n  /* Gap size */\n  --qti-gap-size: 1rem;\n\n  /* Background colors */\n  --qti-bg: white;\n  --qti-hover-bg: #f9fafb;\n\n  /* Light theme colors */\n  --qti-light-bg-active: #f0f0f0; /* Light gray */\n  --qti-light-border-active: #d0d0d0; /* Medium gray */\n\n  /* Dark theme colors */\n  --qti-dark-bg-active: #1f2937; /* Dark gray */\n  --qti-dark-border-active: #64748b; /* Medium gray */\n\n  /* Disabled colors */\n  --qti-disabled-bg: #f3f4f6;\n  --qti-disabled-color: #45484f;\n\n  /* Border properties */\n  --qti-border-thickness: 2px;\n  --qti-border-style: solid;\n  --qti-border-color: #c6cad0;\n  --qti-border-radius: 0.3rem;\n  --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));\n\n  /* Focus & active states */\n  --qti-focus-border-width: 5px;\n  --qti-focus-color: #bddcff7e;\n\n  /* Class-specific variables */\n\n  /* Form elements */\n  --qti-form-size: 1rem;\n\n  /* Order buttons */\n  --qti-order-size: 2rem;\n\n  /* Generic padding for all elements */\n  --qti-padding-vertical: 0.5rem; /* py-2 */\n  --qti-padding-horizontal: 0.5rem; /* px-2 */\n}\n\n/* SVG masks and backgrounds */\n\n.chevron {\n  background: url(\"data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E\")\n    no-repeat center right 6px;\n}\n\n.handle {\n  background-image: radial-gradient(\n    circle at center,\n    rgb(0 0 0 / 10%) 0,\n    rgb(0 0 0 / 20%) 2px,\n    rgb(255 255 255 / 0%) 2px,\n    rgb(255 255 255 / 0%) 100%\n  );\n  background-repeat: repeat-y;\n  background-position: left center;\n  background-size: 14px 8px;\n}\n\n.check-mask {\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n          mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n}\n\n/* \n  Following are classes that can be applied to elements and element states, so they are not used directly \n  The @apply directive is used to apply these classes to elements\n*/\n\n/* Apply .bordered to an element */\n\n.bordered {\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .form rules for checkbox and radiobutton */\n\n.form {\n\n  display: grid;\n  place-content: center;\n  width: var(--qti-form-size);\n  height: var(--qti-form-size);\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .button rules for button-like elements, such as drags and buttons */\n\n.button {\n\n  border-radius: var(--qti-border-radius);\n  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .select for the select dropdown element */\n\n.select {\n\n  border-radius: var(--qti-border-radius);\n  position: relative;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n  padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background: url(\"data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E\")\n    no-repeat center right 6px;\n}\n\n/* Apply .text for the input text and textarea */\n\n.text {\n\n  border-radius: 0;\n  cursor: text;\n  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n  background: unset;\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .spot for hotspot shapes */\n\n.spot {\n\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  padding: 0;\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .point for circular small hotspots */\n\n.point {\n\n  border-radius: 100%;\n  border: 1px solid white;\n  background-color: black;\n  opacity: 0.5;\n  padding: 0;\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .drag for draggable elements */\n\n.drag {\n\n  transition:\n    transform 200ms ease-out,\n    box-shadow 200ms ease-out,\n    rotate 200ms ease-out;\n  cursor: grab;\n  background-color: var(--qti-bg);\n  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n  border-radius: var(--qti-border-radius);\n  padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(\n    circle at center,\n    rgb(0 0 0 / 10%) 0,\n    rgb(0 0 0 / 20%) 2px,\n    rgb(255 255 255 / 0%) 2px,\n    rgb(255 255 255 / 0%) 100%\n  ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;\n}\n\n/* Apply .dragging for the dragging state of a draggable element */\n\n.dragging {\n  pointer-events: none;\n  rotate: -2deg;\n  box-shadow:\n    0 8px 12px rgb(0 0 0 / 20%),\n    0 4px 8px rgb(0 0 0 / 10%);\n}\n\n/* Apply .drop for an element where you can drop the draggable */\n\n.drop {\n\n  background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><circle cx=\"10\" cy=\"10\" r=\"7\" stroke=\"%23CCCCCC\" stroke-width=\"1\" fill=\"transparent\" /></svg>')\n    center no-repeat;\n  border-radius: var(--qti-border-radius);\n  position: relative;\n  background-color: var(--qti-bg);\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .dropping for an indicator where you can drop the draggable */\n\n.dropping {\n  background-color: var(--qti-bg-active);\n}\n\n/* Apply .order for a small circular button */\n\n.order {\n\n  display: grid;\n  place-content: center;\n\n  /* background-color: var(--qti-bg-active); */\n  border-radius: 100%;\n  width: var(--qti-order-size);\n  height: var(--qti-order-size);\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .check-size for radio and checkbox size */\n\n.check-size {\n  width: calc(var(--qti-form-size) - 6px);\n  height: calc(var(--qti-form-size) - 6px);\n}\n\n/* Apply .check for checkbox */\n\n.check {\n  gap: 0.5rem;\n  border-radius: var(--qti-border-radius);\n  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n  outline: none;\n  cursor: pointer;\n}\n\n/* Apply .check-radio for outer circle of the radio buttons */\n\n.check-radio {\n\n  border-radius: 100%;\n\n  display: grid;\n\n  place-content: center;\n\n  width: var(--qti-form-size);\n\n  height: var(--qti-form-size);\n\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n  outline: none;\n}\n\n/* Apply .check-radio-checked for the inner checked radio */\n\n.check-radio-checked {\n  background-color: var(--qti-border-active);\n  border-radius: 100%;\n}\n\n/* Apply .check-checkbox for outer square of the checkbox */\n\n.check-checkbox {\n\n  display: flex;\n  place-items: center;\n  border-radius: var(--qti-border-radius);\n  display: grid;\n  place-content: center;\n  width: var(--qti-form-size);\n  height: var(--qti-form-size);\n  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n  outline: none;\n}\n\n/* Apply .check-checkbox-checked for the inner checkmark */\n\n.check-checkbox-checked {\n  background-color: var(--qti-border-active);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n          mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n}\n\n/* Apply .hov for hover state */\n\n.hov {\n  background-color: var(--qti-hover-bg);\n}\n\n/* Apply .foc for focus state */\n\n.foc {\n  box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n}\n\n/* Apply .act for active state */\n\n.act {\n  border-color: var(--qti-border-active);\n  background-color: var(--qti-bg-active);\n}\n\n.act-bg {\n  background-color: var(--qti-bg-active);\n}\n\n.act-bor {\n  border-color: var(--qti-border-active);\n}\n\n/* Apply .rdo for readonly state */\n\n.rdo {\n  cursor: pointer;\n  background-color: var(--qti-bg);\n  outline: 0;\n  border: none;\n}\n\n/* Apply .dis for disabled state */\n\n.dis {\n  cursor: not-allowed;\n  background-color: var(--qti-disabled-bg);\n  color: var(--qti-disabled-color);\n  border-color: var(--qti-border-color);\n  outline: 4px solid var(--qti-disabled-bg);\n}\n\n/* base */\n\n/* ============================\n   QTI 3 shared css\n   1.  Display\n   2.  Special Flex styles\n   3.  Margin\n   4.  Padding\n   5.  Horizontal Alignment styles\n   6.  Vertical Alignment styles\n   7.  Height\n   8.  Width\n   9.  Text-Indent\n   10. List Style\n   11. Layout\n   12. Other QTI 3 presentation utilities\n   ============================ */\n\n/* ==========\n  Display css\n  =========== */\n\n.qti-display-inline {\n  display: inline;\n}\n\n.qti-display-inline-block {\n  display: inline-block;\n}\n\n.qti-display-block {\n  display: block;\n}\n\n.qti-display-flex {\n  display: flex;\n}\n\n.qti-display-inline-flex {\n  display: inline-flex;\n}\n\n.qti-display-grid {\n  display: grid;\n}\n\n.qti-display-inline-grid {\n  display: inline-grid;\n}\n\n.qti-display-table {\n  display: table;\n}\n\n.qti-display-table-cell {\n  display: table-cell;\n}\n\n.qti-display-table-row {\n  display: table-row;\n}\n\n.qti-display-list-item {\n  display: list-item;\n}\n\n.qti-display-inherit {\n  display: inherit;\n}\n\n/* \n   * hidden to screen readers and sighted\n   */\n\n.qti-hidden {\n  display: none;\n}\n\n/*\n  * visible to screen readers, hidden to sighted\n   */\n\n.qti-visually-hidden {\n  position: fixed !important;\n  overflow: hidden;\n  clip: rect(1px 1px 1px 1px);\n  height: 1px;\n  width: 1px;\n  border: 0;\n  margin: -1px;\n}\n\n/* =============================\n     Special flex styles\n     ============================= */\n\n.qti-flex-direction-column {\n  flex-direction: column;\n}\n\n.qti-flex-direction-row {\n  flex-direction: row;\n}\n\n.qti-flex-grow-1 {\n  flex-grow: 1;\n}\n\n.qti-flex-grow-0 {\n  flex-grow: 0;\n}\n\n/* =========\n    Margin css\n    ========== */\n\n/**\n   * For margin Top and Bottom and Left and Right\n   */\n\n.qti-margin-0 {\n  margin: 0 !important;\n}\n\n.qti-margin-1 {\n  margin: 0.25rem !important;\n}\n\n.qti-margin-2 {\n  margin: 0.5rem !important;\n}\n\n.qti-margin-3 {\n  margin: 1rem !important;\n}\n\n.qti-margin-4 {\n  margin: 1.5rem !important;\n}\n\n.qti-margin-5 {\n  margin: 3rem !important;\n}\n\n.qti-margin-auto {\n  margin: auto !important;\n}\n\n/*\n   For margin Left and Right\n   */\n\n.qti-margin-x-0 {\n  margin-right: 0 !important;\n  margin-left: 0 !important;\n}\n\n.qti-margin-x-1 {\n  margin-right: 0.25rem !important;\n  margin-left: 0.25rem !important;\n}\n\n.qti-margin-x-2 {\n  margin-right: 0.5rem !important;\n  margin-left: 0.5rem !important;\n}\n\n.qti-margin-x-3 {\n  margin-right: 1rem !important;\n  margin-left: 1rem !important;\n}\n\n.qti-margin-x-4 {\n  margin-right: 1.5rem !important;\n  margin-left: 1.5rem !important;\n}\n\n.qti-margin-x-5 {\n  margin-right: 3rem !important;\n  margin-left: 3rem !important;\n}\n\n.qti-margin-x-auto {\n  margin-right: auto !important;\n  margin-left: auto !important;\n}\n\n/*\n   For margin Top and Bottom\n   */\n\n.qti-margin-y-0 {\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n}\n\n.qti-margin-y-1 {\n  margin-top: 0.25rem !important;\n  margin-bottom: 0.25rem !important;\n}\n\n.qti-margin-y-2 {\n  margin-top: 0.5rem !important;\n  margin-bottom: 0.5rem !important;\n}\n\n.qti-margin-y-3 {\n  margin-top: 1rem !important;\n  margin-bottom: 1rem !important;\n}\n\n.qti-margin-y-4 {\n  margin-top: 1.5rem !important;\n  margin-bottom: 1.5rem !important;\n}\n\n.qti-margin-y-5 {\n  margin-top: 3rem !important;\n  margin-bottom: 3rem !important;\n}\n\n.qti-margin-y-auto {\n  margin-top: auto !important;\n  margin-bottom: auto !important;\n}\n\n/*\n   For margin Top\n   */\n\n.qti-margin-t-0 {\n  margin-top: 0 !important;\n}\n\n.qti-margin-t-1 {\n  margin-top: 0.25rem !important;\n}\n\n.qti-margin-t-2 {\n  margin-top: 0.5rem !important;\n}\n\n.qti-margin-t-3 {\n  margin-top: 1rem !important;\n}\n\n.qti-margin-t-4 {\n  margin-top: 1.5rem !important;\n}\n\n.qti-margin-t-5 {\n  margin-top: 3rem !important;\n}\n\n.qti-margin-t-auto {\n  margin-top: auto !important;\n}\n\n/* \n  For margin Bottom\n   */\n\n.qti-margin-b-0 {\n  margin-bottom: 0 !important;\n}\n\n.qti-margin-b-1 {\n  margin-bottom: 0.25rem !important;\n}\n\n.qti-margin-b-2 {\n  margin-bottom: 0.5rem !important;\n}\n\n.qti-margin-b-3 {\n  margin-bottom: 1rem !important;\n}\n\n.qti-margin-b-4 {\n  margin-bottom: 1.5rem !important;\n}\n\n.qti-margin-b-5 {\n  margin-bottom: 3rem !important;\n}\n\n.qti-margin-b-auto {\n  margin-bottom: auto !important;\n}\n\n/*\n   For margin Start LTR\n   */\n\n.qti-margin-s-0 {\n  margin-left: 0 !important;\n}\n\n.qti-margin-s-1 {\n  margin-left: 0.25rem !important;\n}\n\n.qti-margin-s-2 {\n  margin-left: 0.5rem !important;\n}\n\n.qti-margin-s-3 {\n  margin-left: 1rem !important;\n}\n\n.qti-margin-s-4 {\n  margin-left: 1.5rem !important;\n}\n\n.qti-margin-s-5 {\n  margin-left: 3rem !important;\n}\n\n.qti-margin-s-auto {\n  margin-left: auto !important;\n}\n\n/* \n  For margin End LTR\n   */\n\n.qti-margin-e-0 {\n  margin-right: 0 !important;\n}\n\n.qti-margin-e-1 {\n  margin-right: 0.25rem !important;\n}\n\n.qti-margin-e-2 {\n  margin-right: 0.5rem !important;\n}\n\n.qti-margin-e-3 {\n  margin-right: 1rem !important;\n}\n\n.qti-margin-e-4 {\n  margin-right: 1.5rem !important;\n}\n\n.qti-margin-e-5 {\n  margin-right: 3rem !important;\n}\n\n.qti-margin-e-auto {\n  margin-right: auto !important;\n}\n\n/* =========\n    Padding css\n    ========== */\n\n/*\n  For padding Top and Bottom and Left and Right\n   */\n\n.qti-padding-0 {\n  padding: 0 !important;\n}\n\n.qti-padding-1 {\n  padding: 0.25rem !important;\n}\n\n.qti-padding-2 {\n  padding: 0.5rem !important;\n}\n\n.qti-padding-3 {\n  padding: 1rem !important;\n}\n\n.qti-padding-4 {\n  padding: 1.5rem !important;\n}\n\n.qti-padding-5 {\n  padding: 3rem !important;\n}\n\n/*\n   For padding Left and Right\n   */\n\n.qti-padding-x-0 {\n  padding-right: 0 !important;\n  padding-left: 0 !important;\n}\n\n.qti-padding-x-1 {\n  padding-right: 0.25rem !important;\n  padding-left: 0.25rem !important;\n}\n\n.qti-padding-x-2 {\n  padding-right: 0.5rem !important;\n  padding-left: 0.5rem !important;\n}\n\n.qti-padding-x-3 {\n  padding-right: 1rem !important;\n  padding-left: 1rem !important;\n}\n\n.qti-padding-x-4 {\n  padding-right: 1.5rem !important;\n  padding-left: 1.5rem !important;\n}\n\n.qti-padding-x-5 {\n  padding-right: 3rem !important;\n  padding-left: 3rem !important;\n}\n\n/*\n    For padding Top and Bottom\n   */\n\n.qti-padding-y-0 {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n}\n\n.qti-padding-y-1 {\n  padding-top: 0.25rem !important;\n  padding-bottom: 0.25rem !important;\n}\n\n.qti-padding-y-2 {\n  padding-top: 0.5rem !important;\n  padding-bottom: 0.5rem !important;\n}\n\n.qti-padding-y-3 {\n  padding-top: 1rem !important;\n  padding-bottom: 1rem !important;\n}\n\n.qti-padding-y-4 {\n  padding-top: 1.5rem !important;\n  padding-bottom: 1.5rem !important;\n}\n\n.qti-padding-y-5 {\n  padding-top: 3rem !important;\n  padding-bottom: 3rem !important;\n}\n\n/*\n   For padding Top\n   */\n\n.qti-padding-t-0 {\n  padding-top: 0 !important;\n}\n\n.qti-padding-t-1 {\n  padding-top: 0.25rem !important;\n}\n\n.qti-padding-t-2 {\n  padding-top: 0.5rem !important;\n}\n\n.qti-padding-t-3 {\n  padding-top: 1rem !important;\n}\n\n.qti-padding-t-4 {\n  padding-top: 1.5rem !important;\n}\n\n.qti-padding-t-5 {\n  padding-top: 3rem !important;\n}\n\n/*\n   For padding Bottom\n   */\n\n.qti-padding-b-0 {\n  padding-bottom: 0 !important;\n}\n\n.qti-padding-b-1 {\n  padding-bottom: 0.25rem !important;\n}\n\n.qti-padding-b-2 {\n  padding-bottom: 0.5rem !important;\n}\n\n.qti-padding-b-3 {\n  padding-bottom: 1rem !important;\n}\n\n.qti-padding-b-4 {\n  padding-bottom: 1.5rem !important;\n}\n\n.qti-padding-b-5 {\n  padding-bottom: 3rem !important;\n}\n\n/*\n    For padding Start LTR\n   */\n\n.qti-padding-s-0 {\n  padding-left: 0 !important;\n}\n\n.qti-padding-s-1 {\n  padding-left: 0.25rem !important;\n}\n\n.qti-padding-s-2 {\n  padding-left: 0.5rem !important;\n}\n\n.qti-padding-s-3 {\n  padding-left: 1rem !important;\n}\n\n.qti-padding-s-4 {\n  padding-left: 1.5rem !important;\n}\n\n.qti-padding-s-5 {\n  padding-left: 3rem !important;\n}\n\n/*\n   For padding End LTR\n   */\n\n.qti-padding-e-0 {\n  padding-right: 0 !important;\n}\n\n.qti-padding-e-1 {\n  padding-right: 0.25rem !important;\n}\n\n.qti-padding-e-2 {\n  padding-right: 0.5rem !important;\n}\n\n.qti-padding-e-3 {\n  padding-right: 1rem !important;\n}\n\n.qti-padding-e-4 {\n  padding-right: 1.5rem !important;\n}\n\n.qti-padding-e-5 {\n  padding-right: 3rem !important;\n}\n\n/* ====================\n     Horizontal alignment\n     ==================== */\n\n.qti-align-left {\n  text-align: left;\n}\n\n.qti-align-center {\n  text-align: center;\n}\n\n.qti-align-right {\n  text-align: right;\n}\n\n/* ==================\n     Vertical alignment\n     ================== */\n\n.qti-valign-top {\n  vertical-align: top;\n}\n\n.qti-valign-middle {\n  vertical-align: middle;\n}\n\n.qti-valign-baseline {\n  vertical-align: baseline;\n}\n\n.qti-valign-bottom {\n  vertical-align: bottom;\n}\n\n/* =============\n     Height styles\n     ============= */\n\n.qti-height-0 {\n  height: 0;\n}\n\n.qti-height-px {\n  height: 1px;\n}\n\n.qti-height-0p5 {\n  height: 0.125rem;\n}\n\n.qti-height-1 {\n  height: 0.25rem;\n}\n\n.qti-height-1p5 {\n  height: 0.375rem;\n}\n\n.qti-height-2 {\n  height: 0.5rem;\n}\n\n.qti-height-2p5 {\n  height: 0.625rem;\n}\n\n.qti-height-3 {\n  height: 0.75rem;\n}\n\n.qti-height-3p5 {\n  height: 0.875rem;\n}\n\n.qti-height-4 {\n  height: 1rem;\n}\n\n.qti-height-5 {\n  height: 1.25rem;\n}\n\n.qti-height-6 {\n  height: 1.5rem;\n}\n\n.qti-height-7 {\n  height: 1.75rem;\n}\n\n.qti-height-8 {\n  height: 2rem;\n}\n\n.qti-height-9 {\n  height: 2.25rem;\n}\n\n.qti-height-10 {\n  height: 2.5rem;\n}\n\n.qti-height-11 {\n  height: 2.75rem;\n}\n\n.qti-height-12 {\n  height: 3rem;\n}\n\n.qti-height-14 {\n  height: 3.5rem;\n}\n\n.qti-height-16 {\n  height: 4rem;\n}\n\n.qti-height-20 {\n  height: 5rem;\n}\n\n.qti-height-24 {\n  height: 6rem;\n}\n\n.qti-height-28 {\n  height: 7rem;\n}\n\n.qti-height-32 {\n  height: 8rem;\n}\n\n.qti-height-36 {\n  height: 9rem;\n}\n\n.qti-height-40 {\n  height: 10rem;\n}\n\n.qti-height-44 {\n  height: 11rem;\n}\n\n.qti-height-48 {\n  height: 12rem;\n}\n\n.qti-height-52 {\n  height: 13rem;\n}\n\n.qti-height-56 {\n  height: 14rem;\n}\n\n.qti-height-60 {\n  height: 15rem;\n}\n\n.qti-height-64 {\n  height: 16rem;\n}\n\n.qti-height-72 {\n  height: 18rem;\n}\n\n.qti-height-80 {\n  height: 20rem;\n}\n\n.qti-height-96 {\n  height: 24rem;\n}\n\n.qti-height-1-2 {\n  height: 50%;\n}\n\n.qti-height-1-3 {\n  height: 33.3333%;\n}\n\n.qti-height-2-3 {\n  height: 66.6667%;\n}\n\n.qti-height-1-4 {\n  height: 25%;\n}\n\n.qti-height-2-4 {\n  height: 50%;\n}\n\n.qti-height-3-4 {\n  height: 75%;\n}\n\n.qti-height-1-5 {\n  height: 20%;\n}\n\n.qti-height-2-5 {\n  height: 40%;\n}\n\n.qti-height-3-5 {\n  height: 60%;\n}\n\n.qti-height-4-5 {\n  height: 80%;\n}\n\n.qti-height-1-6 {\n  height: 16.6667%;\n}\n\n.qti-height-2-6 {\n  height: 33.3333%;\n}\n\n.qti-height-3-6 {\n  height: 50%;\n}\n\n.qti-height-4-6 {\n  height: 66.6667%;\n}\n\n.qti-height-5-6 {\n  height: 83.3333%;\n}\n\n.qti-height-auto {\n  height: auto;\n}\n\n.qti-height-full {\n  height: 100%;\n}\n\n/* ============\n     Width styles\n     ============ */\n\n.qti-width-0 {\n  width: 0;\n}\n\n.qti-width-px {\n  width: 1px;\n}\n\n.qti-width-0p5 {\n  width: 0.125rem;\n}\n\n.qti-width-1 {\n  width: 0.25rem;\n}\n\n.qti-width-1p5 {\n  width: 0.375rem;\n}\n\n.qti-width-2 {\n  width: 0.5rem;\n}\n\n.qti-width-2p5 {\n  width: 0.625rem;\n}\n\n.qti-width-3 {\n  width: 0.75rem;\n}\n\n.qti-width-3p5 {\n  width: 0.875rem;\n}\n\n.qti-width-4 {\n  width: 1rem;\n}\n\n.qti-width-5 {\n  width: 1.25rem;\n}\n\n.qti-width-6 {\n  width: 1.5rem;\n}\n\n.qti-width-7 {\n  width: 1.75rem;\n}\n\n.qti-width-8 {\n  width: 2rem;\n}\n\n.qti-width-9 {\n  width: 2.25rem;\n}\n\n.qti-width-10 {\n  width: 2.5rem;\n}\n\n.qti-width-11 {\n  width: 2.75rem;\n}\n\n.qti-width-12 {\n  width: 3rem;\n}\n\n.qti-width-14 {\n  width: 3.5rem;\n}\n\n.qti-width-16 {\n  width: 4rem;\n}\n\n.qti-width-20 {\n  width: 5rem;\n}\n\n.qti-width-24 {\n  width: 6rem;\n}\n\n.qti-width-28 {\n  width: 7rem;\n}\n\n.qti-width-32 {\n  width: 8rem;\n}\n\n.qti-width-36 {\n  width: 9rem;\n}\n\n.qti-width-40 {\n  width: 10rem;\n}\n\n.qti-width-44 {\n  width: 11rem;\n}\n\n.qti-width-48 {\n  width: 12rem;\n}\n\n.qti-width-52 {\n  width: 13rem;\n}\n\n.qti-width-56 {\n  width: 14rem;\n}\n\n.qti-width-60 {\n  width: 15rem;\n}\n\n.qti-width-64 {\n  width: 16rem;\n}\n\n.qti-width-72 {\n  width: 18rem;\n}\n\n.qti-width-80 {\n  width: 20rem;\n}\n\n.qti-width-96 {\n  width: 24rem;\n}\n\n.qti-width-auto {\n  width: auto;\n}\n\n.qti-width-1-2 {\n  width: 50%;\n}\n\n.qti-width-1-3 {\n  width: 33.3333%;\n}\n\n.qti-width-2-3 {\n  width: 66.6667%;\n}\n\n.qti-width-1-4 {\n  width: 25%;\n}\n\n.qti-width-2-4 {\n  width: 50%;\n}\n\n.qti-width-3-4 {\n  width: 75%;\n}\n\n.qti-width-1-5 {\n  width: 20%;\n}\n\n.qti-width-2-5 {\n  width: 40%;\n}\n\n.qti-width-3-5 {\n  width: 60%;\n}\n\n.qti-width-4-5 {\n  width: 80%;\n}\n\n.qti-width-1-6 {\n  width: 16.6667%;\n}\n\n.qti-width-2-6 {\n  width: 33.3333%;\n}\n\n.qti-width-3-6 {\n  width: 50%;\n}\n\n.qti-width-4-6 {\n  width: 66.6667%;\n}\n\n.qti-width-5-6 {\n  width: 83.3333%;\n}\n\n.qti-width-1-12 {\n  width: 8.3333%;\n}\n\n.qti-width-2-12 {\n  width: 16.6667%;\n}\n\n.qti-width-3-12 {\n  width: 25%;\n}\n\n.qti-width-4-12 {\n  width: 33.3333%;\n}\n\n.qti-width-5-12 {\n  width: 41.6667%;\n}\n\n.qti-width-6-12 {\n  width: 50%;\n}\n\n.qti-width-7-12 {\n  width: 58.3333%;\n}\n\n.qti-width-8-12 {\n  width: 66.6667%;\n}\n\n.qti-width-9-12 {\n  width: 75%;\n}\n\n.qti-width-10-12 {\n  width: 83.3333%;\n}\n\n.qti-width-11-12 {\n  width: 91.6667%;\n}\n\n.qti-width-full,\n.qti-fullwidth {\n  width: 100%;\n}\n\n/* ==================\n     Text Indent styles\n     ================== */\n\n.qti-text-indent-0 {\n  text-indent: 0;\n}\n\n.qti-text-indent-px {\n  text-indent: 1px;\n}\n\n.qti-text-indent-0p5 {\n  text-indent: 0.125rem;\n}\n\n.qti-text-indent-1 {\n  text-indent: 0.25rem;\n}\n\n.qti-text-indent-1p5 {\n  text-indent: 0.375rem;\n}\n\n.qti-text-indent-2 {\n  text-indent: 0.5rem;\n}\n\n.qti-text-indent-2p5 {\n  text-indent: 0.625rem;\n}\n\n.qti-text-indent-3 {\n  text-indent: 0.75rem;\n}\n\n.qti-text-indent-3p5 {\n  text-indent: 0.875rem;\n}\n\n.qti-text-indent-4 {\n  text-indent: 1rem;\n}\n\n.qti-text-indent-5 {\n  text-indent: 1.25rem;\n}\n\n.qti-text-indent-6 {\n  text-indent: 1.5rem;\n}\n\n.qti-text-indent-7 {\n  text-indent: 1.75rem;\n}\n\n.qti-text-indent-8 {\n  text-indent: 2rem;\n}\n\n.qti-text-indent-12 {\n  text-indent: 3rem;\n}\n\n.qti-text-indent-16 {\n  text-indent: 4rem;\n}\n\n.qti-text-indent-20 {\n  text-indent: 5rem;\n}\n\n.qti-text-indent-24 {\n  text-indent: 6rem;\n}\n\n.qti-text-indent-28 {\n  text-indent: 7rem;\n}\n\n.qti-text-indent-32 {\n  text-indent: 8rem;\n}\n\n/* =================\n     List Style styles\n     ================= */\n\n.qti-list-style-type-none {\n  list-style-type: none;\n}\n\n.qti-list-style-type-disc {\n  list-style-type: disc;\n}\n\n.qti-list-style-type-circle {\n  list-style-type: circle;\n}\n\n.qti-list-style-type-square {\n  list-style-type: square;\n}\n\n.qti-list-style-type-decimal {\n  list-style-type: decimal;\n}\n\n.qti-list-style-type-decimal-leading-zero {\n  list-style-type: decimal-leading-zero;\n}\n\n.qti-list-style-type-lower-alpha {\n  list-style-type: lower-alpha;\n}\n\n.qti-list-style-type-upper-alpha {\n  list-style-type: upper-alpha;\n}\n\n.qti-list-style-type-lower-roman {\n  list-style-type: lower-roman;\n}\n\n.qti-list-style-type-upper-roman {\n  list-style-type: upper-roman;\n}\n\n.qti-list-style-type-lower-latin {\n  list-style-type: lower-latin;\n}\n\n.qti-list-style-type-upper-latin {\n  list-style-type: upper-latin;\n}\n\n.qti-list-style-type-lower-greek {\n  list-style-type: lower-greek;\n}\n\n.qti-list-style-type-arabic-indic {\n  list-style-type: arabic-indic;\n}\n\n.qti-list-style-type-armenian {\n  list-style-type: armenian;\n}\n\n.qti-list-style-type-lower-armenian {\n  list-style-type: lower-armenian;\n}\n\n.qti-list-style-type-upper-armenian {\n  list-style-type: upper-armenian;\n}\n\n.qti-list-style-type-bengali {\n  list-style-type: bengali;\n}\n\n.qti-list-style-type-cambodian {\n  list-style-type: cambodian;\n}\n\n.qti-list-style-type-simp-chinese-formal {\n  list-style-type: simp-chinese-formal;\n}\n\n.qti-list-style-type-simp-chinese-informal {\n  list-style-type: simp-chinese-informal;\n}\n\n.qti-list-style-type-trad-chinese-formal {\n  list-style-type: trad-chinese-formal;\n}\n\n.qti-list-style-type-trad-chinese-informal {\n  list-style-type: trad-chinese-informal;\n}\n\n.qti-list-style-type-cjk-ideographic {\n  list-style-type: cjk-ideographic;\n}\n\n.qti-list-style-type-cjk-heavenly-stem {\n  list-style-type: cjk-heavenly-stem;\n}\n\n.qti-list-style-type-cjk-earthly-branch {\n  list-style-type: cjk-earthly-branch;\n}\n\n.qti-list-style-type-devanagari {\n  list-style-type: devanagari;\n}\n\n.qti-list-style-type-ethiopic-halehame-ti-er {\n  list-style-type: ethiopic-halehame-ti-er;\n}\n\n.qti-list-style-type-ethiopic-halehame-ti-et {\n  list-style-type: ethiopic-halehame-ti-et;\n}\n\n.qti-list-style-type-ethiopic-halehame-am {\n  list-style-type: ethiopic-halehame-am;\n}\n\n.qti-list-style-type-ethiopic-halehame {\n  list-style-type: ethiopic-halehame;\n}\n\n.qti-list-style-type-georgian {\n  list-style-type: georgian;\n}\n\n.qti-list-style-type-gujarati {\n  list-style-type: gujarati;\n}\n\n.qti-list-style-type-gurmukhi {\n  list-style-type: gurmukhi;\n}\n\n.qti-list-style-type-hangul {\n  list-style-type: hangul;\n}\n\n.qti-list-style-type-hangul-consonant {\n  list-style-type: hangul-consonant;\n}\n\n.qti-list-style-type-hebrew {\n  list-style-type: hebrew;\n}\n\n.qti-list-style-type-hiragana {\n  list-style-type: hiragana;\n}\n\n.qti-list-style-type-hiragana-iroha {\n  list-style-type: hiragana-iroha;\n}\n\n.qti-list-style-type-khmer {\n  list-style-type: khmer;\n}\n\n.qti-list-style-type-korean-hangul-formal {\n  list-style-type: korean-hangul-formal;\n}\n\n.qti-list-style-type-korean-hanja-formal {\n  list-style-type: korean-hanja-formal;\n}\n\n.qti-list-style-type-korean-hanja-informal {\n  list-style-type: korean-hanja-informal;\n}\n\n.qti-list-style-type-lao {\n  list-style-type: lao;\n}\n\n.qti-list-style-type-malayalam {\n  list-style-type: malayalam;\n}\n\n.qti-list-style-type-mongolian {\n  list-style-type: mongolian;\n}\n\n.qti-list-style-type-myanmar {\n  list-style-type: myanmar;\n}\n\n.qti-list-style-type-oriya {\n  list-style-type: oriya;\n}\n\n.qti-list-style-type-persian {\n  list-style-type: persian;\n}\n\n.qti-list-style-type-thai {\n  list-style-type: thai;\n}\n\n.qti-list-style-type-tibetan {\n  list-style-type: tibetan;\n}\n\n.qti-list-style-type-telugu {\n  list-style-type: telugu;\n}\n\n.qti-list-style-type-urdu {\n  list-style-type: urdu;\n}\n\n/* =========================\n     Other QTI 3 Presentation Utilities\n     ========================= */\n\n.qti-bordered {\n  border: 1px solid var(--table-border-color);\n}\n\n.qti-underline {\n  text-decoration: underline;\n  text-decoration-color: var(--foreground);\n}\n\n.qti-italic {\n  font-style: italic;\n}\n\n.qti-well {\n  min-height: 20px;\n  padding: 19px;\n  margin-bottom: 20px;\n  background-color: var(--well-bg);\n  border: var(--well-border);\n  border-radius: 4px;\n  box-shadow: var(--well-box-shadow);\n}\n\n/* Set writing-mode to vertical-rl \n     Typical for CJK vertical text */\n\n.qti-writing-mode-vertical-rl {\n  writing-mode: vertical-rl;\n}\n\n/* Set writing-mode to vertical-lr\n     Typical for Mongolian vertical text  */\n\n.qti-writing-mode-vertical-lr {\n  writing-mode: vertical-lr;\n}\n\n/* Set writing-mode to horizontal-tb \n     Browser default */\n\n.qti-writing-mode-horizontal-tb {\n  writing-mode: horizontal-tb;\n}\n\n/* Float an element left */\n\n.qti-float-left {\n  float: left;\n}\n\n/* Float an element right */\n\n.qti-float-right {\n  float: right;\n}\n\n/* Remove a float */\n\n.qti-float-none {\n  float: none;\n}\n\n/* Clearfix Hack to apply to a container of \n   floated content that overflows the container. */\n\n.qti-float-clearfix::after {\n  content: '';\n  clear: both;\n  display: table;\n}\n\n.qti-float-clear-left\n  .qti-float-clear-right\n  .qti-float-clear-both\n  \n  /* Set text-orientation to upright */\n  .qti-text-orientation-upright {\n  text-orientation: upright;\n}\n\n/* stylelint-disable number-max-precision */\n\n@layer qti-base {\n  .qti-layout-row {\n    display: flex;\n    flex-wrap: wrap;\n    width: 100%;\n    gap: 2.1276595745%;\n  }\n\n  .qti-layout-row [class*='qti-layout-col']:not(:empty) {\n    box-sizing: border-box;\n  }\n\n  .qti-layout-row [class*='qti-layout-col']:empty {\n    width: 0;\n    overflow: hidden; /* to fully collapse if there’s padding or borders */\n  }\n\n  .qti-layout-col1 {\n    width: 6.3829787234%;\n  }\n\n  .qti-layout-col2 {\n    width: 14.8936170213%;\n  }\n\n  .qti-layout-col3 {\n    width: 23.4042553191%;\n  }\n\n  .qti-layout-col4 {\n    width: 31.914893617%;\n  }\n\n  .qti-layout-col5 {\n    width: 40.4255319149%;\n  }\n\n  .qti-layout-col6 {\n    width: 48.9361702128%;\n  }\n\n  .qti-layout-col7 {\n    width: 57.4468085106%;\n  }\n\n  .qti-layout-col8 {\n    width: 65.9574468085%;\n  }\n\n  .qti-layout-col9 {\n    width: 74.4680851064%;\n  }\n\n  .qti-layout-col10 {\n    width: 82.9787234043%;\n  }\n\n  .qti-layout-col11 {\n    width: 91.4893617021%;\n  }\n\n  .qti-layout-col12 {\n    width: 100%;\n  }\n\n  .qti-layout-offset1 {\n    margin-left: 8.5106382979%;\n  }\n\n  .qti-layout-offset2 {\n    margin-left: 17.0212765957%;\n  }\n\n  .qti-layout-offset3 {\n    margin-left: 25.5319148936%;\n  }\n\n  .qti-layout-offset4 {\n    margin-left: 34.0425531915%;\n  }\n\n  .qti-layout-offset5 {\n    margin-left: 42.5531914894%;\n  }\n\n  .qti-layout-offset6 {\n    margin-left: 51.0638297872%;\n  }\n\n  .qti-layout-offset7 {\n    margin-left: 59.5744680851%;\n  }\n\n  .qti-layout-offset8 {\n    margin-left: 68.085106383%;\n  }\n\n  .qti-layout-offset9 {\n    margin-left: 76.5957446809%;\n  }\n\n  .qti-layout-offset10 {\n    margin-left: 85.1063829787%;\n  }\n\n  .qti-layout-offset11 {\n    margin-left: 93.6170212766%;\n  }\n\n  .qti-layout-offset12 {\n    margin-left: 102.1276595745%;\n  }\n\n  @media (width <= 767px) {\n    [class*='qti-layout-col'] {\n      width: 100%;\n    }\n  }\n}\n\n[view],\nqti-outcome-declaration,\nqti-response-declaration {\n  display: none;\n}\n\n[view].show {\n  display: block;\n}\n\n:host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\n/* components */\n\n@layer qti-components {\n  qti-choice-interaction {\n    &.qti-input-control-hidden {\n      & qti-simple-choice {\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &::part(ch) {\n          display: none;\n        }\n\n        &:state(--checked),\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n          background-color: var(--qti-bg-active);\n        }\n\n        &:state(readonly),\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &:state(disabled),\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        border-radius: var(--qti-border-radius);\n\n        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n    }\n\n    &:not(.qti-input-control-hidden) {\n      & qti-simple-choice {\n\n        &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &:state(--checked),\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n          background-color: var(--qti-bg-active);\n        }\n\n        &:state(readonly),\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &:state(disabled),\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        &::part(cha) {\n          width: calc(var(--qti-form-size) - 6px);\n          height: calc(var(--qti-form-size) - 6px);\n        }\n\n        &:state(radio)::part(ch) {\n          border-radius: 100%;\n          display: grid;\n          place-content: center;\n          width: var(--qti-form-size);\n          height: var(--qti-form-size);\n          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n          outline: none;\n        }\n\n        &:state(radio):state(--checked)::part(cha) {\n          background-color: var(--qti-border-active);\n          border-radius: 100%;\n        }\n\n        &:state(checkbox)::part(ch) {\n          display: flex;\n          place-items: center;\n          border-radius: var(--qti-border-radius);\n          display: grid;\n          place-content: center;\n          width: var(--qti-form-size);\n          height: var(--qti-form-size);\n          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n          outline: none;\n        }\n\n        &:state(checkbox):state(--checked)::part(cha) {\n          background-color: var(--qti-border-active);\n          -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n                  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n        }\n\n        gap: 0.5rem;\n\n        border-radius: var(--qti-border-radius);\n\n        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n        outline: none;\n\n        cursor: pointer\n      }\n    }\n\n    & qti-simple-choice {\n      width: -moz-fit-content;\n      width: fit-content;\n      cursor: pointer;\n\n      &:state(correct-response),\n      &[data-correct-response='true'] {\n        &::after {\n          content: '\\02714';\n          color: var(--qti-correct);\n        }\n      }\n    }\n\n    & qti-simple-choice > p {\n      margin: 0 !important;\n      padding: 0 !important;\n    }\n  }\n\n  .hover-border {\n    border: 2px solid #000; /* Adjust the border style and color as needed */\n  }\n\n  qti-graphic-gap-match-interaction {\n    position: relative;\n\n    &.qti-selections-light {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n        border-color: var(--qti-light-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n      }\n    }\n\n    &.qti-selections-dark {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n        border-color: var(--qti-dark-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n      }\n    }\n\n    /* General styles for active and enabled states */\n    &:state(--dragzone-active)::part(drags) {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    &:state(--dragzone-enabled)::part(drags) {\n      background-color: var(--qti-bg-active);\n    }\n\n    & qti-gap-img,\n    qti-gap-text {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      cursor: grab;\n    }\n\n    & qti-associable-hotspot {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border: 2px solid transparent;\n\n      &[enabled] {\n\n        /* Light theme override */\n        .qti-selections-light {\n          background-color: var(--qti-light-bg-active);\n        }\n\n        /* Dark theme override */\n        .qti-selections-dark {\n          background-color: var(--qti-dark-bg-active);\n        }\n        background-color: var(--qti-bg-active)\n      }\n\n      &[active] {\n\n        /* Light theme override */\n        .qti-selections-light {\n          background-color: var(--qti-light-bg-active);\n          border-color: var(--qti-light-border-active);\n        }\n\n        /* Dark theme override */\n        .qti-selections-dark {\n          background-color: var(--qti-dark-bg-active);\n          border-color: var(--qti-dark-border-active);\n        }\n        border-color: var(--qti-border-active);\n        background-color: var(--qti-bg-active)\n      }\n\n      &[disabled] {\n\n        &:not(:empty) {\n          cursor: default !important;\n        }\n\n        cursor: not-allowed;\n\n        background-color: var(--qti-disabled-bg);\n\n        color: var(--qti-disabled-color);\n\n        border-color: var(--qti-border-color);\n\n        outline: 4px solid var(--qti-disabled-bg)\n      }\n\n      &:empty::after {\n        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */\n        content: '\\0000a0'; /* when empty, put a space in it */\n      }\n\n      &:not(:empty) {\n        padding: 0;\n        width: auto;\n      }\n\n      &:not(:empty) > * {\n        flex: 1;\n        transform: rotate(0); /* rotate-0 */\n        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */\n      }\n    }\n\n    & img {\n      margin: 0;\n      padding: 0;\n    }\n  }\n\n  qti-text-entry-interaction {\n    &::part(input) {\n      border-radius: 0;\n      cursor: text;\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n      background: unset;\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n      outline: none;\n    }\n\n    &:hover {\n      background-color: var(--qti-hover-bg);\n    }\n\n    &:focus-within {\n      &::part(input) {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        border-color: var(--qti-border-active);\n      }\n    }\n  }\n\n  qti-extended-text-interaction {\n    &::part(textarea) {\n      border-radius: 0;\n      cursor: text;\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n      background: unset;\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n      outline: none;\n    }\n\n    &:hover {\n      background-color: var(--qti-hover-bg);\n    }\n\n    &:focus-within {\n      &::part(textarea) {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        border-color: var(--qti-border-active);\n      }\n    }\n  }\n\n  qti-gap-match-interaction {\n    &.qti-selections-light {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n        border-color: var(--qti-light-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n      }\n    }\n\n    &.qti-selections-dark {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n        border-color: var(--qti-dark-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n      }\n    }\n\n    /* General styles for active and enabled states */\n    &:state(--dragzone-active)::part(drags) {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    &:state(--dragzone-enabled)::part(drags) {\n      background-color: var(--qti-bg-active);\n    }\n\n    & qti-gap-text {\n\n      &[dragging] {\n        pointer-events: none;\n        rotate: -2deg;\n        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),\n    0 4px 8px rgb(0 0 0 / 10%);\n      }\n\n      &:hover {\n        background-color: var(--qti-hover-bg);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n      }\n\n      transition: transform 200ms ease-out,\n    box-shadow 200ms ease-out,\n    rotate 200ms ease-out;\n\n      cursor: grab;\n\n      background-color: var(--qti-bg);\n\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n      border-radius: var(--qti-border-radius);\n\n      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);\n\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n      outline: none;\n\n      background-image: radial-gradient(\n    circle at center,\n    rgb(0 0 0 / 10%) 0,\n    rgb(0 0 0 / 20%) 2px,\n    rgb(255 255 255 / 0%) 2px,\n    rgb(255 255 255 / 0%) 100%\n  );\n\n      background-repeat: repeat-y;\n\n      background-position: left center;\n\n      background-size: 14px 8px\n    }\n\n    & qti-gap {\n\n      &[disabled] {\n\n        &:not(:empty) {\n          cursor: default !important;\n        }\n\n        cursor: not-allowed;\n\n        background-color: var(--qti-disabled-bg);\n\n        color: var(--qti-disabled-color);\n\n        border-color: var(--qti-border-color);\n\n        outline: 4px solid var(--qti-disabled-bg)\n      }\n\n      &[enabled] {\n\n        /* Light theme override */\n        .qti-selections-light {\n          border-color: var(--qti-light-border-active);\n        }\n\n        /* Dark theme override */\n        .qti-selections-dark {\n          border-color: var(--qti-dark-border-active);\n        }\n        background-color: var(--qti-bg-active)\n      }\n\n      &[active] {\n\n        /* Light theme override */\n        .qti-selections-light {\n          background-color: var(--qti-light-bg-active);\n          border-color: var(--qti-light-border-active);\n        }\n\n        /* Dark theme override */\n        .qti-selections-dark {\n          background-color: var(--qti-dark-bg-active);\n          border-color: var(--qti-dark-border-active);\n        }\n        border-color: var(--qti-border-active);\n        background-color: var(--qti-bg-active)\n      }\n\n      display: inline-flex;\n      align-items: center;\n\n      &:empty::after {\n        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */\n        content: '\\0000a0'; /* when empty, put a space in it */\n      }\n\n      &:not(:empty) {\n        display: inline-flex;\n        padding: 0;\n        width: auto;\n      }\n\n      &:not(:empty) > * {\n        flex: 1;\n        transform: rotate(0); /* rotate-0 */\n        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */\n      }\n\n      background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><circle cx=\"10\" cy=\"10\" r=\"7\" stroke=\"%23CCCCCC\" stroke-width=\"1\" fill=\"transparent\" /></svg>')\n    center no-repeat;\n\n      border-radius: var(--qti-border-radius);\n\n      position: relative;\n\n      background-color: var(--qti-bg);\n\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n      outline: none\n    }\n  }\n\n  qti-hotspot-interaction {\n    & qti-hotspot-choice {\n      &[shape='circle'] {\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &:state(--checked),\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n        }\n\n        &:state(--readonly),\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &:state(--disabled),\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        width: 100%;\n\n        height: 100%;\n\n        background-color: transparent;\n\n        padding: 0;\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n\n      &[shape='rect'] {\n\n        /* &:hover {\n          @apply hov;\n        } */\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &:state(--checked),\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        width: 100%;\n\n        height: 100%;\n\n        background-color: transparent;\n\n        padding: 0;\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n\n      &[shape='poly'] {\n        &:hover::after {\n          content: '';\n          width: 100%;\n          height: 100%;\n          background: repeating-linear-gradient(\n            45deg,\n            var(--qti-border-active),\n            var(--qti-border-active) 5px,\n            transparent 5px,\n            transparent 10px\n          );\n          display: block;\n        }\n\n        &:state(--checked)::after,\n        &[aria-checked='true']::after {\n          content: '';\n          width: 100%;\n          height: 100%;\n          background: repeating-linear-gradient(\n            45deg,\n            transparent,\n            transparent 5px,\n            var(--qti-border-active) 5px,\n            var(--qti-border-active) 10px\n          );\n          display: block;\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n      }\n    }\n  }\n\n  qti-hottext-interaction {\n    /* &:not(.qti-input-control-hidden),\n    &:not(.qti-unselected-hidden) { */\n    qti-hottext {\n      display: inline-flex;\n      align-items: center;\n\n      &:hover {\n        background-color: var(--qti-hover-bg);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n      }\n\n      &::part(cha) {\n        width: calc(var(--qti-form-size) - 6px);\n        height: calc(var(--qti-form-size) - 6px);\n      }\n\n      &:state(radio)::part(ch) {\n        border-radius: 100%;\n        display: grid;\n        place-content: center;\n        width: var(--qti-form-size);\n        height: var(--qti-form-size);\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n        outline: none;\n      }\n\n      &:state(radio):state(--checked)::part(cha) {\n        background-color: var(--qti-border-active);\n        border-radius: 100%;\n      }\n\n      &:state(checkbox)::part(ch) {\n        display: flex;\n        place-items: center;\n        border-radius: var(--qti-border-radius);\n        display: grid;\n        place-content: center;\n        width: var(--qti-form-size);\n        height: var(--qti-form-size);\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n        outline: none;\n      }\n\n      &:state(checkbox):state(--checked)::part(cha) {\n        background-color: var(--qti-border-active);\n        -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n                mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E\");\n      }\n\n      &:state(correct-response),\n      &[data-correct-response='true'] {\n        &::after {\n          content: '\\02714';\n          color: #16a34a; /* text-green-600 */\n        }\n      }\n\n      gap: 0.5rem;\n\n      border-radius: var(--qti-border-radius);\n\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n      outline: none;\n\n      cursor: pointer\n    }\n\n    &.qti-input-control-hidden {\n      qti-hottext {\n        /* --qti-padding-md: 0.1rem;\n        --qti-padding-lg: 0.2rem;\n        --qti-border-radius-md: 0.3rem;\n        --qti-border-thickness: 1px;\n        --qti-font-weight-semibold: 400; */\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        /* @layer qti-variants { */\n        &::part(ch) {\n          display: none;\n        }\n\n        &:state(--checked) {\n          border-color: var(--qti-border-active);\n          background-color: var(--qti-bg-active);\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        border-radius: var(--qti-border-radius);\n\n        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n\n      /* } */\n    }\n\n    &.qti-unselected-hidden {\n      qti-hottext {\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        cursor: pointer;\n\n        &::part(ch) {\n          display: none;\n        }\n\n        &:state(--checked) {\n          background-color: var(--qti-bg-active);\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n      }\n    }\n  }\n\n  qti-inline-choice-interaction {\n    &::part(select) {\n\n      &:hover {\n        background-color: var(--qti-hover-bg);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n      }\n\n      border-radius: var(--qti-border-radius);\n\n      position: relative;\n\n      -webkit-appearance: none;\n\n         -moz-appearance: none;\n\n              appearance: none;\n\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n      padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);\n\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n      outline: none;\n\n      background: url(\"data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E\")\n    no-repeat center right 6px\n    }\n  }\n\n  qti-match-interaction:not(.qti-match-tabular) {\n    &:state(--dragzone-enabled) qti-simple-match-set:first-of-type {\n      background-color: var(--qti-bg-active);\n    }\n\n    &:state(--dragzone-active) qti-simple-match-set:first-of-type {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    /* The draggables */\n    & qti-simple-match-set:first-of-type {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: flex-start; /* Prevents children from stretching */\n      gap: var(--qti-gap-size);\n      border: 2px solid transparent;\n\n      & qti-simple-associable-choice {\n\n        &[dragging] {\n          pointer-events: none;\n          rotate: -2deg;\n          box-shadow: 0 8px 12px rgb(0 0 0 / 20%),\n    0 4px 8px rgb(0 0 0 / 10%);\n        }\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        transition: transform 200ms ease-out,\n    box-shadow 200ms ease-out,\n    rotate 200ms ease-out;\n\n        cursor: grab;\n\n        background-color: var(--qti-bg);\n\n        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n        border-radius: var(--qti-border-radius);\n\n        padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none;\n\n        background-image: radial-gradient(\n    circle at center,\n    rgb(0 0 0 / 10%) 0,\n    rgb(0 0 0 / 20%) 2px,\n    rgb(255 255 255 / 0%) 2px,\n    rgb(255 255 255 / 0%) 100%\n  );\n\n        background-repeat: repeat-y;\n\n        background-position: left center;\n\n        background-size: 14px 8px\n      }\n    }\n\n    /* The droppables */\n    & qti-simple-match-set:last-of-type {\n      display: grid;\n      grid-auto-columns: 1fr; /* auto-cols-fr */\n      grid-auto-flow: column; /* grid-flow-col */\n      gap: var(--qti-gap-size); /* gap-2 */\n      width: 100%; /* w-full */\n\n      & qti-simple-associable-choice {\n        display: flex;\n        flex-direction: column;\n      }\n\n      & > qti-simple-associable-choice {\n        /* a droppable qti-simple-associable-choice */\n        box-sizing: border-box;\n        display: grid;\n        grid-row: 2 / 4;\n        grid-template-rows: subgrid;\n\n        & img {\n          max-width: 100%;\n          height: auto;\n        }\n\n        &[enabled] {\n          &::part(dropslot) {\n            background-color: var(--qti-bg-active);\n          }\n        }\n\n        &[disabled] {\n          &::part(dropslot) {\n            cursor: not-allowed;\n            background-color: var(--qti-disabled-bg);\n            color: var(--qti-disabled-color);\n            border-color: var(--qti-border-color);\n            outline: 4px solid var(--qti-disabled-bg);\n          }\n        }\n\n        &[active] {\n          &::part(dropslot) {\n            border-color: var(--qti-border-active);\n            background-color: var(--qti-bg-active);\n          }\n        }\n\n        &::part(dropslot) {\n\n          &[dragging] {\n            pointer-events: none;\n            rotate: -2deg;\n            box-shadow: 0 8px 12px rgb(0 0 0 / 20%),\n    0 4px 8px rgb(0 0 0 / 10%);\n          }\n\n          &:focus {\n            box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n          }\n\n          min-height: 6rem;\n          gap: var(--qti-gap-size);\n          box-sizing: border-box;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><circle cx=\"10\" cy=\"10\" r=\"7\" stroke=\"%23CCCCCC\" stroke-width=\"1\" fill=\"transparent\" /></svg>')\n    center no-repeat;\n          border-radius: var(--qti-border-radius);\n          position: relative;\n          background-color: var(--qti-bg);\n          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n          outline: none;\n        }\n\n        & > *:not(qti-simple-associable-choice) {\n          pointer-events: none;\n        }\n\n        & > qti-simple-associable-choice {\n\n          &::part(dropslot) {\n            display: none;\n          }\n\n          &:hover {\n            background-color: var(--qti-hover-bg);\n          }\n\n          &:focus {\n            box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n          }\n\n          flex-basis: fit-content;\n\n          transition: transform 200ms ease-out,\n    box-shadow 200ms ease-out,\n    rotate 200ms ease-out;\n\n          cursor: grab;\n\n          background-color: var(--qti-bg);\n\n          padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n          border-radius: var(--qti-border-radius);\n\n          padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);\n\n          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n          outline: none;\n\n          background-image: radial-gradient(\n    circle at center,\n    rgb(0 0 0 / 10%) 0,\n    rgb(0 0 0 / 20%) 2px,\n    rgb(255 255 255 / 0%) 2px,\n    rgb(255 255 255 / 0%) 100%\n  );\n\n          background-repeat: repeat-y;\n\n          background-position: left center;\n\n          background-size: 14px 8px;\n        }\n      }\n    }\n  }\n\n  qti-order-interaction:state(--dragzone-active)::part(drags) {\n    border-color: var(--qti-border-active);\n    background-color: var(--qti-bg-active);\n  }\n\n  qti-order-interaction:state(--dragzone-enabled)::part(drags) {\n    background-color: var(--qti-bg-active);\n  }\n\n  qti-order-interaction {\n    &::part(qti-simple-choice),\n    & qti-simple-choice {\n\n      &[dragging] {\n        pointer-events: none;\n        rotate: -2deg;\n        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),\n    0 4px 8px rgb(0 0 0 / 10%);\n      }\n\n      &:hover {\n        background-color: var(--qti-hover-bg);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n      }\n\n      transition: transform 200ms ease-out,\n    box-shadow 200ms ease-out,\n    rotate 200ms ease-out;\n\n      cursor: grab;\n\n      background-color: var(--qti-bg);\n\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n      border-radius: var(--qti-border-radius);\n\n      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);\n\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n      outline: none;\n\n      background-image: radial-gradient(\n    circle at center,\n    rgb(0 0 0 / 10%) 0,\n    rgb(0 0 0 / 20%) 2px,\n    rgb(255 255 255 / 0%) 2px,\n    rgb(255 255 255 / 0%) 100%\n  );\n\n      background-repeat: repeat-y;\n\n      background-position: left center;\n\n      background-size: 14px 8px\n    }\n\n    &::part(qti-simple-choice) {\n      display: flex;\n      overflow: hidden;\n      align-items: center;\n      width: 100%;\n      text-overflow: ellipsis;\n    }\n\n    &::part(drops) {\n      gap: 0.5rem; /* gap-2 */\n    }\n\n    &::part(drags) {\n      gap: 0.5rem; /* gap-2 */\n    }\n\n    &::part(drop-list) {\n\n      &[enabled] {\n\n        /* Light theme override */\n        .qti-selections-light {\n          border-color: var(--qti-light-border-active);\n        }\n\n        /* Dark theme override */\n        .qti-selections-dark {\n          border-color: var(--qti-dark-border-active);\n        }\n        background-color: var(--qti-bg-active)\n      }\n\n      &:hover {\n        background-color: var(--qti-hover-bg);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n      }\n\n      display: flex;\n      min-height: 4rem;\n      background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><circle cx=\"10\" cy=\"10\" r=\"7\" stroke=\"%23CCCCCC\" stroke-width=\"1\" fill=\"transparent\" /></svg>')\n    center no-repeat;\n      border-radius: var(--qti-border-radius);\n      position: relative;\n      background-color: var(--qti-bg);\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n      outline: none;\n    }\n\n    &::part(active) {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    & drop-list {\n      &[shape='circle'] {\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n          background-color: var(--qti-bg-active);\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        width: 100%;\n\n        height: 100%;\n\n        background-color: transparent;\n\n        padding: 0;\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n\n      &[shape='square'] {\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n          background-color: var(--qti-bg-active);\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        width: 100%;\n\n        height: 100%;\n\n        background-color: transparent;\n\n        padding: 0;\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n    }\n  }\n\n  qti-associate-interaction {\n    /* General styles for active and enabled states */\n    &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    &:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {\n      background-color: var(--qti-bg-active);\n    }\n\n    & qti-simple-associable-choice, /* drags when in lightdom */\n    &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {\n\n      &:hover {\n        background-color: var(--qti-hover-bg);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n      }\n\n      &[dragging] {\n        pointer-events: none;\n        rotate: -2deg;\n        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),\n    0 4px 8px rgb(0 0 0 / 10%);\n      }\n\n      transition: transform 200ms ease-out,\n    box-shadow 200ms ease-out,\n    rotate 200ms ease-out;\n\n      cursor: grab;\n\n      background-color: var(--qti-bg);\n\n      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);\n\n      border-radius: var(--qti-border-radius);\n\n      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);\n\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n      outline: none;\n\n      background-image: radial-gradient(\n    circle at center,\n    rgb(0 0 0 / 10%) 0,\n    rgb(0 0 0 / 20%) 2px,\n    rgb(255 255 255 / 0%) 2px,\n    rgb(255 255 255 / 0%) 100%\n  );\n\n      background-repeat: repeat-y;\n\n      background-position: left center;\n\n      background-size: 14px 8px\n    }\n\n    /* display: flex;\n    overflow: hidden;\n    align-items: center; */\n\n    /* &::part(drop-container) {\n      display: flex;\n      flex-direction: column;\n      gap: var(--qti-gap-size);\n    } */\n\n    &::part(drop-list) {\n\n      display: grid;\n      height: 3rem;\n      min-width: 10rem;\n      background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><circle cx=\"10\" cy=\"10\" r=\"7\" stroke=\"%23CCCCCC\" stroke-width=\"1\" fill=\"transparent\" /></svg>')\n    center no-repeat;\n      border-radius: var(--qti-border-radius);\n      position: relative;\n      background-color: var(--qti-bg);\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n      outline: none;\n    }\n\n    &::part(drop-list):focus {\n      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n    }\n\n    &::part(drop-list)[dragging] {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    /* &::part(drop-list) {\n      @apply act;\n    } */\n  }\n\n  qti-graphic-order-interaction {\n    & qti-hotspot-choice {\n      width: 100%;\n      height: 100%;\n      background-color: rgb(255 255 255 / 30%);\n      padding: 0;\n\n      &:hover {\n        background-color: rgb(255 255 255 / 70%);\n      }\n\n      &:focus {\n        background-color: rgb(255 255 255 / 70%);\n      }\n\n      &:state(--checked),\n      &[aria-checked='true'] {\n        background-color: rgb(255 255 255 / 70%);\n      }\n\n      &[aria-readonly='true'] {\n        cursor: pointer;\n        background-color: var(--qti-bg);\n        outline: 0;\n        border: none;\n      }\n\n      &[aria-disabled='true'] {\n        cursor: not-allowed;\n        background-color: var(--qti-disabled-bg);\n        color: var(--qti-disabled-color);\n        border-color: var(--qti-border-color);\n        outline: 4px solid var(--qti-disabled-bg);\n      }\n\n      &[aria-ordervalue] {\n        display: grid;\n        place-content: center;\n      }\n\n      &[aria-ordervalue]::after {\n        content: attr(aria-ordervalue) !important;\n      }\n\n      &[aria-ordercorrectvalue] {\n        display: grid;\n        place-content: center;\n      }\n\n      /* When both attributes are present */\n      &[aria-ordercorrectvalue][aria-ordervalue]::after {\n        content: 'C=' attr(aria-ordercorrectvalue) '  R=' attr(aria-ordervalue) !important;\n        color: var(--qti-correct);\n      }\n\n      /* When only aria-ordercorrectvalue is present */\n      &[aria-ordercorrectvalue]:not([aria-ordervalue])::after {\n        content: 'C=' attr(aria-ordercorrectvalue) !important;\n        color: var(--qti-correct);\n      }\n    }\n\n    &.qti-selections-light {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n        border-color: var(--qti-light-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n      }\n    }\n\n    &.qti-selections-dark {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n        border-color: var(--qti-dark-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n      }\n    }\n\n    /* General styles for active and enabled states */\n    &:state(--dragzone-active)::part(drags) {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    &:state(--dragzone-enabled)::part(drags) {\n      background-color: var(--qti-bg-active);\n    }\n  }\n\n  qti-graphic-associate-interaction {\n    position: relative;\n    display: block;\n\n    & qti-associable-hotspot {\n      &[shape='circle'] {\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n          background-color: var(--qti-bg-active);\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        width: 100%;\n\n        height: 100%;\n\n        background-color: transparent;\n\n        padding: 0;\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n\n      &[shape='square'] {\n\n        &:hover {\n          background-color: var(--qti-hover-bg);\n        }\n\n        &:focus {\n          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n        }\n\n        &[aria-checked='true'] {\n          border-color: var(--qti-border-active);\n          background-color: var(--qti-bg-active);\n        }\n\n        &[aria-readonly='true'] {\n          cursor: pointer;\n          background-color: var(--qti-bg);\n          outline: 0;\n          border: none;\n        }\n\n        &[aria-disabled='true'] {\n          cursor: not-allowed;\n          background-color: var(--qti-disabled-bg);\n          color: var(--qti-disabled-color);\n          border-color: var(--qti-border-color);\n          outline: 4px solid var(--qti-disabled-bg);\n        }\n\n        width: 100%;\n\n        height: 100%;\n\n        background-color: transparent;\n\n        padding: 0;\n\n        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n        outline: none\n      }\n    }\n\n    &.qti-selections-light {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n        border-color: var(--qti-light-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-light-bg-active);\n      }\n    }\n\n    &.qti-selections-dark {\n      &:state(--dragzone-active)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n        border-color: var(--qti-dark-border-active);\n      }\n\n      &:state(--dragzone-enabled)::part(drags) {\n        background-color: var(--qti-dark-bg-active);\n      }\n    }\n\n    /* General styles for active and enabled states */\n    &:state(--dragzone-active)::part(drags) {\n      border-color: var(--qti-border-active);\n      background-color: var(--qti-bg-active);\n    }\n\n    &:state(--dragzone-enabled)::part(drags) {\n      background-color: var(--qti-bg-active);\n    }\n  }\n\n  qti-slider-interaction {\n    --qti-tick-color: rgb(229 231 235 / 100%);\n    --qti-tick-width: 1px;\n  }\n\n  qti-select-point-interaction {\n    &::part(point) {\n      &:hover {\n        background-color: var(--qti-hover-bg);\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);\n      }\n\n      border-radius: 100%;\n\n      border: 1px solid white;\n\n      background-color: black;\n\n      opacity: 0.5;\n\n      padding: 0;\n\n      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);\n\n      outline: none;\n    }\n  }\n\n  qti-position-object-stage {\n    & qti-position-object-interaction {\n      /* no styles necessary, only layout styles, defined in the component */\n    }\n  }\n\n  qti-prompt {\n    margin: 0.5rem 0; /* my-2 */\n    display: block;\n    width: 100%;\n  }\n}\n\nqti-test-part:not(:has(qti-assessment-item)),\nqti-assessment-section:not(:has(qti-assessment-item)),\nqti-assessment-item-ref:not(:has(qti-assessment-item)) {\n  display: none;\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,YAAY,YAAY;AACjC,SAAS,eAAe,UAAU,aAAa;AAC/C,SAAS,aAAa;;;ACFtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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","names":[]}

package/dist/chunks/chunk-ELXD2ZSR.js

@@ -0,0 +1,218 @@
+import {
+  sessionContext
+} from "./chunk-UZ4QB5IO.js";
+import {
+  testContext
+} from "./chunk-CJADUWEC.js";
+import {
+  computedContext
+} from "./chunk-6Z5YR5U2.js";
+import {
+  __decorateClass
+} from "./chunk-63WMM765.js";
+
+// src/lib/qti-test/components/test-navigation.ts
+import { consume, provide } from "@lit/context";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var TestNavigation = class extends LitElement {
+  constructor() {
+    super();
+    this.identifier = void 0;
+    this.initContext = [];
+    this.configContext = {};
+    this.autoScoreItems = false;
+    this.addEventListener("qti-assessment-test-connected", this._handleTestConnected.bind(this));
+    this.addEventListener("qti-assessment-item-connected", this._handleItemConnected.bind(this));
+    this.addEventListener("qti-interaction-changed", this._handleInteractionChanged.bind(this));
+    this.addEventListener("test-end-attempt", this._handleTestEndAttempt.bind(this));
+    this.addEventListener("test-show-correct-response", this._handleTestShowCorrectResponse.bind(this));
+  }
+  _handleTestEndAttempt(_event) {
+    const qtiItemEl = this._testElement.querySelector(
+      `qti-assessment-item-ref[identifier="${this._sessionContext.navItemId}"]`
+    );
+    const qtiAssessmentItemEl = qtiItemEl.assessmentItem;
+    const reportValidityAfterScoring = this.configContext?.reportValidityAfterScoring === true ? true : false;
+    qtiAssessmentItemEl.processResponse(true, reportValidityAfterScoring);
+  }
+  _handleTestShowCorrectResponse(event) {
+    const qtiItemEl = this._testElement.querySelector(
+      `qti-assessment-item-ref[identifier="${this._sessionContext.navItemId}"]`
+    );
+    const qtiAssessmentItemEl = qtiItemEl.assessmentItem;
+    qtiAssessmentItemEl.showCorrectResponse(event.detail);
+  }
+  _handleInteractionChanged(_event) {
+    if (this.autoScoreItems) {
+      const assessmentItem = _event.composedPath()[0].closest("qti-assessment-item");
+      const scoreOutcomeIdentifier = assessmentItem.variables.find((v) => v.identifier === "SCORE");
+      if (scoreOutcomeIdentifier.externalScored === null && assessmentItem.adaptive === "false") {
+        assessmentItem.processResponse();
+      }
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  /* PK: on test connected we can build the computed context */
+  _handleTestConnected(event) {
+    this._testElement = event.detail;
+    const testPartElements = Array.from(this._testElement?.querySelectorAll(`qti-test-part`) || []);
+    this.computedContext = {
+      testParts: testPartElements.map((testPart) => {
+        const sectionElements = [...testPart.querySelectorAll(`qti-assessment-section`)];
+        return {
+          active: false,
+          identifier: testPart.identifier,
+          sections: sectionElements.map((section) => {
+            const itemElements = [...section.querySelectorAll(`qti-assessment-item-ref`)];
+            return {
+              active: false,
+              identifier: section.identifier,
+              title: section.title,
+              items: itemElements.map((item) => {
+                return {
+                  active: false,
+                  identifier: item.identifier,
+                  href: item.href,
+                  variables: []
+                };
+              })
+            };
+          })
+        };
+      })
+    };
+  }
+  /* PK: on item connected we can add item only properties in the xml */
+  _handleItemConnected(event) {
+    const itemElement = event.detail;
+    this.computedContext = {
+      ...this.computedContext,
+      testParts: this.computedContext.testParts.map((testPart) => {
+        return {
+          ...testPart,
+          sections: testPart.sections.map((section) => {
+            return {
+              ...section,
+              items: section.items.map((item) => {
+                if (item.identifier !== itemElement.identifier) {
+                  return item;
+                }
+                return {
+                  ...item,
+                  label: itemElement.getAttribute("label"),
+                  title: itemElement.title,
+                  adaptive: itemElement.adaptive == "true" || false,
+                  timeDependent: itemElement.timeDependent == "true" || false,
+                  variables: itemElement._context.variables
+                };
+              })
+            };
+          })
+        };
+      })
+    };
+  }
+  /* PK: on every change of the candidate we will recomputed the computedContext */
+  willUpdate(_changedProperties) {
+    if (!this.computedContext) return;
+    let itemIndex = 1;
+    this.computedContext = {
+      ...this.computedContext,
+      testParts: this.computedContext.testParts.map((testPart) => {
+        return {
+          ...testPart,
+          active: this._sessionContext?.navPartId === testPart.identifier || false,
+          sections: testPart.sections.map((section) => {
+            return {
+              ...section,
+              active: this._sessionContext?.navSectionId === section.identifier || false,
+              completed: section.items.every(
+                (item) => this._testContext.items.find((i) => i.identifier === item.identifier)?.variables.find((v) => v.identifier === "completionStatus").value === "completed"
+              ),
+              items: section.items.map((item) => {
+                const itemContext = this._testContext?.items.find((i) => i.identifier === item.identifier);
+                let computedItem;
+                if (this.initContext) {
+                  const initContext = this.initContext.find((i) => i.identifier === item.identifier);
+                  computedItem = { ...item, ...itemContext, ...initContext };
+                } else {
+                  computedItem = { ...item, ...itemContext };
+                }
+                const rawscore = computedItem.variables?.find((vr) => vr.identifier == "SCORE")?.value;
+                const score = parseInt(rawscore?.toString());
+                const completionStatus = computedItem.variables?.find((v) => v.identifier === "completionStatus")?.value;
+                const categories = computedItem.category ? computedItem.category?.split(" ") : [];
+                const type = categories.includes(this.configContext?.infoItemCategory) ? "info" : "regular";
+                const active = this._sessionContext?.navItemId === computedItem.identifier || false;
+                const correct = (
+                  // this._testContext.view === 'scorer' &&
+                  type == "regular" && score !== void 0 && !isNaN(score) && score > 0 || false
+                );
+                const incorrect = (
+                  // this._testContext.view === 'scorer' &&
+                  type == "regular" && score !== void 0 && !isNaN(score) && score <= 0 || false
+                );
+                const completed = (
+                  // this._testContext.view === 'candidate' &&
+                  completionStatus === "completed"
+                );
+                const response = computedItem.variables?.find((v) => v.identifier === "RESPONSE")?.value || "";
+                const index = categories.includes(this.configContext?.infoItemCategory) ? null : itemIndex++;
+                return {
+                  ...computedItem,
+                  //   rawscore, // not necessary for outside world
+                  //   score, // not necessary for outside world
+                  //   completionStatus, // not necessary for outside world
+                  //   categories, // not necessary for outside world
+                  type,
+                  active,
+                  correct,
+                  incorrect,
+                  completed,
+                  index,
+                  response,
+                  view: this._sessionContext.view
+                };
+              })
+            };
+          })
+        };
+      })
+    };
+  }
+};
+__decorateClass([
+  property({ type: String })
+], TestNavigation.prototype, "identifier", 2);
+__decorateClass([
+  state()
+], TestNavigation.prototype, "initContext", 2);
+__decorateClass([
+  state(),
+  consume({ context: testContext, subscribe: true })
+], TestNavigation.prototype, "_testContext", 2);
+__decorateClass([
+  state(),
+  consume({ context: sessionContext, subscribe: true })
+], TestNavigation.prototype, "_sessionContext", 2);
+__decorateClass([
+  state()
+], TestNavigation.prototype, "configContext", 2);
+__decorateClass([
+  state(),
+  provide({ context: computedContext })
+], TestNavigation.prototype, "computedContext", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "auto-score-items" })
+], TestNavigation.prototype, "autoScoreItems", 2);
+TestNavigation = __decorateClass([
+  customElement("test-navigation")
+], TestNavigation);
+
+export {
+  TestNavigation
+};
+//# sourceMappingURL=chunk-ELXD2ZSR.js.map

package/dist/chunks/chunk-ELXD2ZSR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/qti-test/components/test-navigation.ts"],"sourcesContent":["import { consume, provide } from '@lit/context';\nimport { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { testContext } from '../../exports/test.context';\nimport { sessionContext } from '../../exports/session.context';\nimport { computedContext } from '../../exports/computed.context';\n\nimport type { ComputedItemContext } from '../../exports/computed-item.context';\nimport type { QtiAssessmentItem } from '../../qti-components';\nimport type { OutcomeVariable } from '../../exports/variables';\nimport type { ComputedContext } from '../../exports/computed.context';\nimport type { PropertyValues } from 'lit';\nimport type { QtiAssessmentItemRef, QtiAssessmentSection, QtiAssessmentTest, QtiTestPart } from '../core';\nimport type { ConfigContext } from '../../exports/config.context';\nimport type { SessionContext } from '../../exports/session.context';\nimport type { TestContext } from '../../exports/test.context';\n\ntype CustomEventMap = {\n  'test-end-attempt': CustomEvent;\n  'test-show-correct-response': CustomEvent<{ value: boolean }>;\n};\n\ndeclare global {\n  interface GlobalEventHandlersEventMap extends CustomEventMap {}\n}\n\n@customElement('test-navigation')\nexport class TestNavigation extends LitElement {\n  @property({ type: String }) identifier = undefined;\n\n  @state()\n  public initContext: { identifier: string; [key: string]: any }[] = [];\n\n  @state()\n  @consume({ context: testContext, subscribe: true })\n  public _testContext?: TestContext;\n\n  @state()\n  @consume({ context: sessionContext, subscribe: true })\n  public _sessionContext?: SessionContext;\n\n  @state()\n  public configContext: ConfigContext = {};\n\n  @state()\n  @provide({ context: computedContext })\n  public computedContext: ComputedContext;\n\n  @property({ type: Boolean, attribute: 'auto-score-items' }) autoScoreItems = false;\n\n  private _testElement: QtiAssessmentTest;\n\n  constructor() {\n    super();\n    this.addEventListener('qti-assessment-test-connected', this._handleTestConnected.bind(this));\n    this.addEventListener('qti-assessment-item-connected', this._handleItemConnected.bind(this));\n\n    this.addEventListener('qti-interaction-changed', this._handleInteractionChanged.bind(this));\n\n    this.addEventListener('test-end-attempt', this._handleTestEndAttempt.bind(this));\n    this.addEventListener('test-show-correct-response', this._handleTestShowCorrectResponse.bind(this));\n  }\n\n  private _handleTestEndAttempt(_event: CustomEvent) {\n    const qtiItemEl = this._testElement.querySelector<QtiAssessmentItemRef>(\n      `qti-assessment-item-ref[identifier=\"${this._sessionContext.navItemId}\"]`\n    );\n    const qtiAssessmentItemEl = qtiItemEl.assessmentItem;\n    const reportValidityAfterScoring = this.configContext?.reportValidityAfterScoring === true ? true : false;\n    qtiAssessmentItemEl.processResponse(true, reportValidityAfterScoring);\n  }\n\n  private _handleTestShowCorrectResponse(event: CustomEvent) {\n    const qtiItemEl = this._testElement.querySelector<QtiAssessmentItemRef>(\n      `qti-assessment-item-ref[identifier=\"${this._sessionContext.navItemId}\"]`\n    );\n    const qtiAssessmentItemEl = qtiItemEl.assessmentItem;\n    qtiAssessmentItemEl.showCorrectResponse(event.detail);\n  }\n\n  private _handleInteractionChanged(_event: CustomEvent) {\n    if (this.autoScoreItems) {\n      const assessmentItem = (_event.composedPath()[0] as HTMLElement).closest('qti-assessment-item');\n      const scoreOutcomeIdentifier = assessmentItem.variables.find(v => v.identifier === 'SCORE') as OutcomeVariable;\n      if (scoreOutcomeIdentifier.externalScored === null && assessmentItem.adaptive === 'false') {\n        assessmentItem.processResponse();\n      }\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  /* PK: on test connected we can build the computed context */\n  _handleTestConnected(event: CustomEvent) {\n    this._testElement = event.detail as QtiAssessmentTest;\n    const testPartElements = Array.from(this._testElement?.querySelectorAll<QtiTestPart>(`qti-test-part`) || []);\n    this.computedContext = {\n      testParts: testPartElements.map(testPart => {\n        const sectionElements = [...testPart.querySelectorAll<QtiAssessmentSection>(`qti-assessment-section`)];\n        return {\n          active: false,\n          identifier: testPart.identifier,\n          sections: sectionElements.map(section => {\n            const itemElements = [...section.querySelectorAll<QtiAssessmentItemRef>(`qti-assessment-item-ref`)];\n            return {\n              active: false,\n              identifier: section.identifier,\n              title: section.title,\n              items: itemElements.map(item => {\n                return {\n                  active: false,\n                  identifier: item.identifier,\n                  href: item.href,\n                  variables: []\n                } as ComputedItemContext;\n              })\n            };\n          })\n        };\n      })\n    };\n\n    // const sections = this.computedContext?.testParts.flatMap(testPart => testPart.sections);\n\n    // let id;\n    // if (this.navigate === 'section') {\n    //   id = sections.find(section => section.active).identifier;\n    // }\n    // if (this.navigate === 'item') {\n    //   id = sections.flatMap(section => section.items).find(item => item.active).identifier;\n    // }\n\n    // if (id) {\n    //   this.dispatchEvent(\n    //     new CustomEvent('qti-request-navigation', {\n    //       detail: { type: this.navigate, id },\n    //       bubbles: true,\n    //       composed: true\n    //     })\n    //   );\n    // }\n  }\n\n  /* PK: on item connected we can add item only properties in the xml */\n  _handleItemConnected(event: CustomEvent) {\n    const itemElement = event.detail as QtiAssessmentItem;\n    this.computedContext = {\n      ...this.computedContext,\n      testParts: this.computedContext.testParts.map(testPart => {\n        return {\n          ...testPart,\n          sections: testPart.sections.map(section => {\n            return {\n              ...section,\n              items: section.items.map(item => {\n                if (item.identifier !== itemElement.identifier) {\n                  return item;\n                }\n                return {\n                  ...item,\n                  label: itemElement.getAttribute('label'),\n                  title: itemElement.title,\n                  adaptive: itemElement.adaptive == 'true' || false,\n                  timeDependent: itemElement.timeDependent == 'true' || false,\n                  variables: (itemElement as any)._context.variables\n                };\n              })\n            };\n          })\n        };\n      })\n    };\n  }\n\n  /* PK: on every change of the candidate we will recomputed the computedContext */\n  protected willUpdate(_changedProperties: PropertyValues): void {\n    if (!this.computedContext) return;\n\n    let itemIndex = 1;\n    this.computedContext = {\n      ...this.computedContext,\n      testParts: this.computedContext.testParts.map(testPart => {\n        return {\n          ...testPart,\n          active: this._sessionContext?.navPartId === testPart.identifier || false,\n          sections: testPart.sections.map(section => {\n            return {\n              ...section,\n              active: this._sessionContext?.navSectionId === section.identifier || false,\n              completed: section.items.every(\n                item =>\n                  this._testContext.items\n                    .find(i => i.identifier === item.identifier)\n                    ?.variables.find(v => v.identifier === 'completionStatus').value === 'completed'\n              ),\n\n              items: section.items.map(item => {\n                const itemContext = this._testContext?.items.find(i => i.identifier === item.identifier);\n                let computedItem;\n\n                if (this.initContext) {\n                  const initContext = this.initContext.find(i => i.identifier === item.identifier);\n                  computedItem = { ...item, ...itemContext, ...initContext };\n                } else {\n                  computedItem = { ...item, ...itemContext };\n                }\n\n                const rawscore = computedItem.variables?.find(vr => vr.identifier == 'SCORE')?.value;\n                const score = parseInt(rawscore?.toString());\n                const completionStatus = computedItem.variables?.find(v => v.identifier === 'completionStatus')?.value;\n                const categories = computedItem.category ? computedItem.category?.split(' ') : [];\n\n                const type = categories.includes(this.configContext?.infoItemCategory) ? 'info' : 'regular'; // rounded-full\n                const active = this._sessionContext?.navItemId === computedItem.identifier || false; // !border-sky-600\n\n                const correct =\n                  // this._testContext.view === 'scorer' &&\n                  (type == 'regular' && score !== undefined && !isNaN(score) && score > 0) || false; // bg-green-100 border-green-400\n                const incorrect =\n                  // this._testContext.view === 'scorer' &&\n                  (type == 'regular' && score !== undefined && !isNaN(score) && score <= 0) || false; // bg-red-100 border-red-400\n                const completed =\n                  // this._testContext.view === 'candidate' &&\n                  completionStatus === 'completed';\n                // || item.category === this.host._configContext?.infoItemCategory || false\n                const response = computedItem.variables?.find(v => v.identifier === 'RESPONSE')?.value || '';\n\n                const index = categories.includes(this.configContext?.infoItemCategory) ? null : itemIndex++;\n\n                return {\n                  ...computedItem,\n                  //   rawscore, // not necessary for outside world\n                  //   score, // not necessary for outside world\n                  //   completionStatus, // not necessary for outside world\n                  //   categories, // not necessary for outside world\n                  type,\n                  active,\n                  correct,\n                  incorrect,\n                  completed,\n                  index,\n                  response,\n                  view: this._sessionContext.view\n                };\n              })\n            };\n          })\n        };\n      })\n    };\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunks/chunk-EQUEIZJL.js

@@ -0,0 +1,27 @@
+import {
+  computedContext
+} from "./chunk-6Z5YR5U2.js";
+import {
+  __decorateClass
+} from "./chunk-H2JE6IVU.js";
+
+// src/lib/qti-test/components/test-print-context.ts
+import { html, LitElement } from "lit";
+import { consume } from "@lit/context";
+import { customElement } from "lit/decorators.js";
+var TestPrintContext = class extends LitElement {
+  render() {
+    return html` <small><pre>${JSON.stringify(computedContext, null, 2)}</pre></small> `;
+  }
+};
+__decorateClass([
+  consume({ context: computedContext, subscribe: true })
+], TestPrintContext.prototype, "computedContext", 2);
+TestPrintContext = __decorateClass([
+  customElement("test-print-context")
+], TestPrintContext);
+
+export {
+  TestPrintContext
+};
+//# sourceMappingURL=chunk-EQUEIZJL.js.map

package/dist/chunks/chunk-EQUEIZJL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/qti-test/components/test-print-context.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { consume } from '@lit/context';\nimport { customElement } from 'lit/decorators.js';\n\nimport { computedContext } from '../../exports/computed.context';\n\nimport type { ComputedContext } from '../../exports/computed.context';\n\n@customElement('test-print-context')\nexport class TestPrintContext extends LitElement {\n  @consume({ context: computedContext, subscribe: true })\n  public computedContext?: ComputedContext;\n\n  render() {\n    return html` <small><pre>${JSON.stringify(computedContext, null, 2)}</pre></small> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-print-context': TestPrintContext;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAOvB,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAI/C,SAAS;AACP,WAAO,oBAAoB,KAAK,UAAU,iBAAiB,MAAM,CAAC,CAAC;AAAA,EACrE;AACF;AALS;AAAA,EADN,QAAQ,EAAE,SAAS,iBAAiB,WAAW,KAAK,CAAC;AAAA,GAD3C,iBAEJ;AAFI,mBAAN;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB;","names":[]}

package/dist/chunks/chunk-EREPAU3B.js

@@ -0,0 +1,80 @@
+import {
+  computedContext
+} from "./chunk-6Z5YR5U2.js";
+import {
+  __decorateClass
+} from "./chunk-H2JE6IVU.js";
+
+// src/lib/qti-test/components/test-print-item-variables.ts
+import { html, LitElement } from "lit";
+import { consume } from "@lit/context";
+import { customElement } from "lit/decorators.js";
+var TestPrintVariables = class extends LitElement {
+  // Store previous active item reference
+  render() {
+    const activeItems = this.computedContext?.testParts.flatMap(
+      (testPart) => testPart.sections.flatMap((section) => section.items).find((item) => item.active)
+    );
+    if (!activeItems) return html``;
+    const activeItem = activeItems.length > 0 ? activeItems[0] : null;
+    if (activeItem) {
+      const responseVariables = activeItem.variables?.filter((v) => {
+        if (v.type !== "response") {
+          return false;
+        }
+        if (v.identifier.toLowerCase().startsWith("response")) {
+          return true;
+        }
+        if (v.correctResponse) {
+          return true;
+        }
+      });
+      const sortedResponseVariables = responseVariables?.sort((a, b) => a.identifier.localeCompare(b.identifier));
+      const correctResponseArray = sortedResponseVariables.map((r) => {
+        if (r.mapping && r.mapping.mapEntries.length > 0) {
+          return r.mapping.mapEntries.map((m) => {
+            return `${m.mapKey}=${m.mappedValue}pt `;
+          }).join("&");
+        }
+        if (r.areaMapping && r.areaMapping.areaMapEntries.length > 0) {
+          return r.areaMapping.areaMapEntries.map((m) => {
+            return `${m.coords} ${m.shape}=${m.mappedValue}`;
+          });
+        }
+        if (r.correctResponse) {
+          return Array.isArray(r.correctResponse) ? r.correctResponse.join("&") : r.correctResponse;
+        }
+        return [];
+      });
+      const correctResponse = correctResponseArray.join("&");
+      const response = sortedResponseVariables.length === 0 ? "" : sortedResponseVariables?.map((v) => {
+        if (Array.isArray(v.value)) {
+          return v.value.join("&");
+        }
+        return v.value;
+      }).join("#");
+      const itemToReturn = {
+        ...activeItem,
+        response,
+        correctResponse: this._previousActiveItem?.identifier === activeItem.identifier && this._previousActiveItem?.correctResponse ? this._previousActiveItem.correctResponse : correctResponse
+      };
+      if (this.mode === "summed") {
+        delete itemToReturn.variables;
+      }
+      this._previousActiveItem = itemToReturn;
+      return html` <small><pre>${JSON.stringify(itemToReturn, null, 2)}</pre></small> `;
+    }
+    return html``;
+  }
+};
+__decorateClass([
+  consume({ context: computedContext, subscribe: true })
+], TestPrintVariables.prototype, "computedContext", 2);
+TestPrintVariables = __decorateClass([
+  customElement("test-print-item-variables")
+], TestPrintVariables);
+
+export {
+  TestPrintVariables
+};
+//# sourceMappingURL=chunk-EREPAU3B.js.map

package/dist/chunks/chunk-EREPAU3B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/qti-test/components/test-print-item-variables.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { consume } from '@lit/context';\nimport { customElement } from 'lit/decorators.js';\n\nimport { computedContext } from '../../exports/computed.context';\n\nimport type { ResponseVariable } from '../../exports/variables';\nimport type { ComputedContext, ComputedItem } from '../../exports/computed.context';\n\n@customElement('test-print-item-variables')\nexport class TestPrintVariables extends LitElement {\n  @consume({ context: computedContext, subscribe: true })\n  public computedContext?: ComputedContext;\n\n  private _previousActiveItem?: ComputedItem & { correctResponse: string; response: string }; // Store previous active item reference\n\n  render() {\n    const activeItems = this.computedContext?.testParts.flatMap(testPart =>\n      testPart.sections.flatMap(section => section.items).find(item => item.active)\n    );\n    if (!activeItems) return html``;\n    const activeItem = activeItems.length > 0 ? activeItems[0] : null;\n    if (activeItem) {\n      const responseVariables: ResponseVariable[] = activeItem.variables?.filter(v => {\n        if (v.type !== 'response') {\n          return false;\n        }\n        if (v.identifier.toLowerCase().startsWith('response')) {\n          return true;\n        }\n        if ((v as ResponseVariable).correctResponse) {\n          return true;\n        }\n      });\n      // sort the response variables by the order of the string: identifier\n      const sortedResponseVariables = responseVariables?.sort((a, b) => a.identifier.localeCompare(b.identifier));\n      const correctResponseArray = sortedResponseVariables.map(r => {\n        if (r.mapping && r.mapping.mapEntries.length > 0) {\n          return r.mapping.mapEntries\n            .map(m => {\n              return `${m.mapKey}=${m.mappedValue}pt `;\n            })\n            .join('&');\n        }\n        if (r.areaMapping && r.areaMapping.areaMapEntries.length > 0) {\n          return r.areaMapping.areaMapEntries.map(m => {\n            return `${m.coords} ${m.shape}=${m.mappedValue}`;\n          });\n        }\n        if (r.correctResponse) {\n          return Array.isArray(r.correctResponse) ? r.correctResponse.join('&') : r.correctResponse;\n        }\n        return [];\n      });\n      const correctResponse = correctResponseArray.join('&');\n      const response =\n        sortedResponseVariables.length === 0\n          ? ''\n          : sortedResponseVariables\n              ?.map(v => {\n                if (Array.isArray(v.value)) {\n                  return v.value.join('&');\n                }\n                return v.value;\n              })\n              .join('#');\n      const itemToReturn = {\n        ...activeItem,\n        response,\n        correctResponse:\n          this._previousActiveItem?.identifier === activeItem.identifier && this._previousActiveItem?.correctResponse\n            ? this._previousActiveItem.correctResponse\n            : correctResponse\n      };\n      if (this.mode === 'summed') {\n        delete itemToReturn.variables;\n      }\n      this._previousActiveItem = itemToReturn;\n      return html` <small><pre>${JSON.stringify(itemToReturn, null, 2)}</pre></small> `;\n    }\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'test-print-item-variables': TestPrintVariables;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAQvB,IAAM,qBAAN,cAAiC,WAAW;AAAA;AAAA,EAMjD,SAAS;AACP,UAAM,cAAc,KAAK,iBAAiB,UAAU;AAAA,MAAQ,cAC1D,SAAS,SAAS,QAAQ,aAAW,QAAQ,KAAK,EAAE,KAAK,UAAQ,KAAK,MAAM;AAAA,IAC9E;AACA,QAAI,CAAC,YAAa,QAAO;AACzB,UAAM,aAAa,YAAY,SAAS,IAAI,YAAY,CAAC,IAAI;AAC7D,QAAI,YAAY;AACd,YAAM,oBAAwC,WAAW,WAAW,OAAO,OAAK;AAC9E,YAAI,EAAE,SAAS,YAAY;AACzB,iBAAO;AAAA,QACT;AACA,YAAI,EAAE,WAAW,YAAY,EAAE,WAAW,UAAU,GAAG;AACrD,iBAAO;AAAA,QACT;AACA,YAAK,EAAuB,iBAAiB;AAC3C,iBAAO;AAAA,QACT;AAAA,MACF,CAAC;AAED,YAAM,0BAA0B,mBAAmB,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,cAAc,EAAE,UAAU,CAAC;AAC1G,YAAM,uBAAuB,wBAAwB,IAAI,OAAK;AAC5D,YAAI,EAAE,WAAW,EAAE,QAAQ,WAAW,SAAS,GAAG;AAChD,iBAAO,EAAE,QAAQ,WACd,IAAI,OAAK;AACR,mBAAO,GAAG,EAAE,MAAM,IAAI,EAAE,WAAW;AAAA,UACrC,CAAC,EACA,KAAK,GAAG;AAAA,QACb;AACA,YAAI,EAAE,eAAe,EAAE,YAAY,eAAe,SAAS,GAAG;AAC5D,iBAAO,EAAE,YAAY,eAAe,IAAI,OAAK;AAC3C,mBAAO,GAAG,EAAE,MAAM,IAAI,EAAE,KAAK,IAAI,EAAE,WAAW;AAAA,UAChD,CAAC;AAAA,QACH;AACA,YAAI,EAAE,iBAAiB;AACrB,iBAAO,MAAM,QAAQ,EAAE,eAAe,IAAI,EAAE,gBAAgB,KAAK,GAAG,IAAI,EAAE;AAAA,QAC5E;AACA,eAAO,CAAC;AAAA,MACV,CAAC;AACD,YAAM,kBAAkB,qBAAqB,KAAK,GAAG;AACrD,YAAM,WACJ,wBAAwB,WAAW,IAC/B,KACA,yBACI,IAAI,OAAK;AACT,YAAI,MAAM,QAAQ,EAAE,KAAK,GAAG;AAC1B,iBAAO,EAAE,MAAM,KAAK,GAAG;AAAA,QACzB;AACA,eAAO,EAAE;AAAA,MACX,CAAC,EACA,KAAK,GAAG;AACjB,YAAM,eAAe;AAAA,QACnB,GAAG;AAAA,QACH;AAAA,QACA,iBACE,KAAK,qBAAqB,eAAe,WAAW,cAAc,KAAK,qBAAqB,kBACxF,KAAK,oBAAoB,kBACzB;AAAA,MACR;AACA,UAAI,KAAK,SAAS,UAAU;AAC1B,eAAO,aAAa;AAAA,MACtB;AACA,WAAK,sBAAsB;AAC3B,aAAO,oBAAoB,KAAK,UAAU,cAAc,MAAM,CAAC,CAAC;AAAA,IAClE;AACA,WAAO;AAAA,EACT;AACF;AAtES;AAAA,EADN,QAAQ,EAAE,SAAS,iBAAiB,WAAW,KAAK,CAAC;AAAA,GAD3C,mBAEJ;AAFI,qBAAN;AAAA,EADN,cAAc,2BAA2B;AAAA,GAC7B;","names":[]}