feat: navigate by sections

public/assets/qti-test-package/assessment.xml

@@ -29,7 +29,7 @@
       <qti-assessment-item-ref identifier="ITM-text_entry" href="items/text_entry.xml" />
     </qti-assessment-section>
 
-    <qti-assessment-section identifier="basic" title="2. Advanced Level" visible="true">
+    <qti-assessment-section identifier="advanced" title="2. Advanced Level" visible="true">
 
       <qti-rubric-block use="instructions" view="candidate">
         <qti-content-body>

src/lib/qti-test/components/index.ts

@@ -1,11 +1,13 @@
 /* test functionality webcomponents which are tested and can be used in your project */
+export * from './test-navigation';
 export * from './test-next';
 export * from './test-prev';
 export * from './test-view';
 export * from './test-item-link';
 export * from './test-end-attempt';
 export * from './test-show-correct-response';
 export * from './test-paging-buttons-stamp';
-export * from './test-navigation';
 export * from './test-container';
 export * from './test-print-item-variables';
+export * from './test-section-buttons-stamp';
+export * from './test-section-link';

src/lib/qti-test/components/test-paging-buttons-stamp.stories.ts

@@ -79,23 +79,6 @@ export const Title: Story = {
             <test-item-link class="{{item.active ? 'active' : ''}}" item-id="{{ item.identifier }}"
               >{{ item.index }}:{{ item.title }}</test-item-link
             >
-            <dl>
-              <dt>title:</dt>
-              <dd>{{ item.title }}</dd>
-              <dt>type:</dt>
-              <dd>{{ item.type }}</dd>
-              <dt>active:</dt>
-              <dd>{{ item.active }}</dd>
-              <dt>correct:</dt>
-              <dd>{{ item.correct }}</dd>
-              <dt>incorrect:</dt>
-              <dd>{{ item.incorrect }}</dd>
-              <dt>completed:</dt>
-              <dd>{{ item.completed }}</dd>
-              <dt>response:</dt>
-              <dd>{{ item.response }}</dd>
-              <dd>{{ item.volgnummer }}</dd>
-            </dl>
           </template>
         </test-paging-buttons-stamp>
       </test-navigation>

src/lib/qti-test/components/test-paging-buttons-stamp.ts

@@ -37,33 +37,6 @@ export class TestPagingButtonsStamp extends LitElement {
     const items = this.computedContext.testParts.flatMap(testPart =>
       testPart.sections.flatMap(section => section.items)
     );
-    // const items = this._testContext.items.reduce(
-    //   (acc, item) => {
-    //     const isDepInfoItem = item.category?.split(' ').includes(this.skipOnCategory);
-    //     const newIndex = isDepInfoItem ? 'i' : acc.counter++;
-    //     acc.result.push({
-    //       ...item,
-    //       newIndex // Assign the new index, which only increments for non-info items
-    //     });
-    //     return acc;
-    //   },
-    //   { counter: 0, result: [] }
-    // ).result;
-
-    // // Get the index of the current item
-    // const itemIndex = items.findIndex(item => item.identifier === this._sessionContext.navItemId);
-
-    // // Calculate the start and end range based on maxDisplayedItems
-    // const start = Math.max(0, itemIndex - this.maxDisplayedItems);
-    // const end = Math.min(items.length, itemIndex + this.maxDisplayedItems + 1);
-
-    // // console.log('start', start, 'end', end);
-    // // Adjust the items array to only include the clamped range
-    // const clampedItems = items.slice(start, end);
-
-    // const items = this._testContext.items;
-    // const items = this.testContextController.computedContext.items;
-    // console.log(items);
 
     return html` ${items.map(item => this.myTemplate({ item }))} `;
   }

src/lib/qti-test/components/test-section-buttons-stamp.stories.ts

@@ -0,0 +1,74 @@
+import { getWcStorybookHelpers } from 'wc-storybook-helpers';
+import { html } from 'lit';
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { TestSectionButtonsStamp } from './test-section-buttons-stamp';
+
+import '../../../../.storybook/utilities.css';
+
+const { events, args, argTypes, template } = getWcStorybookHelpers('test-section-buttons-stamp');
+
+type Story = StoryObj<TestSectionButtonsStamp & typeof args>;
+
+const meta: Meta<TestSectionButtonsStamp> = {
+  component: 'test-section-buttons-stamp',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events
+    }
+  }
+};
+export default meta;
+
+export const Default: Story = {
+  render: args =>
+    html` <qti-test>
+      <test-navigation>
+        <test-container test-url="/assets/qti-test-package/assessment.xml"></test-container>
+        ${template(
+          args,
+          html`<template>
+            <test-section-link section-id="{{ item.identifier }}"> {{ item.newIndex }} </test-section-link>
+          </template>`
+        )}
+      </test-navigation>
+    </qti-test>`
+};
+
+export const Title: Story = {
+  render: () => html`
+    <qti-test>
+      <test-navigation
+        .initContext=${[
+          {
+            identifier: 'ITEM001',
+            title: 'Test title',
+            volgnummer: 2
+          },
+          {
+            identifier: 'ITEM002',
+            title: 'Test title 2',
+            volgnummer: 2
+          }
+        ]}
+        .configContext=${{
+          infoItemCategory: 'info'
+        }}
+        .sessionContext=${{
+          navItemId: 'ITEM001'
+        }}
+      >
+        <test-container test-url="/assets/qti-test-package/assessment.xml"></test-container>
+        <test-section-buttons-stamp>
+          <template>
+            <test-section-link class="{{item.active ? 'active' : ''}}" section-id="{{ item.identifier }}">
+              {{ item.title }}
+            </test-section-link>
+          </template>
+        </test-section-buttons-stamp>
+      </test-navigation>
+    </qti-test>
+  `
+};

src/lib/qti-test/components/test-section-buttons-stamp.ts

@@ -0,0 +1,47 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prepareTemplate } from 'stampino';
+import { consume } from '@lit/context';
+
+import { computedContext } from '../../exports/computed.context';
+
+import type { ComputedContext } from '../../exports/computed.context';
+import type { TemplateFunction } from 'stampino';
+
+@customElement('test-section-buttons-stamp')
+export class TestSectionButtonsStamp extends LitElement {
+  @consume({ context: computedContext, subscribe: true })
+  private computedContext: ComputedContext;
+
+  myTemplate: TemplateFunction;
+  private _internals: ElementInternals;
+
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._internals.ariaLabel = 'pagination';
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    const templateElement = this.querySelector<HTMLTemplateElement>('template');
+    this.myTemplate = prepareTemplate(templateElement);
+  }
+
+  render() {
+    if (!this.computedContext) return html``;
+    const sections = this.computedContext.testParts.flatMap(testPart => testPart.sections);
+
+    return html` ${sections.map(item => this.myTemplate({ item }))} `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'test-section-buttons-stamp': TestSectionButtonsStamp;
+  }
+}

src/lib/qti-test/components/test-section-link.ts

@@ -0,0 +1,47 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import * as styles from './styles';
+
+@customElement('test-section-link')
+export class TestSectionLink extends LitElement {
+  static styles = css`
+    :host {
+      ${styles.btn};
+    }
+    :host([disabled]) {
+      ${styles.dis};
+    }
+  `;
+
+  @property({ type: String, attribute: 'section-id' })
+  private sectionId: string = null;
+
+  private _requestItem(identifier: string) {
+    this.dispatchEvent(
+      new CustomEvent('qti-request-navigation', {
+        composed: true,
+        bubbles: true,
+        detail: {
+          type: 'section',
+          id: identifier
+        }
+      })
+    );
+  }
+
+  constructor() {
+    super();
+    this.addEventListener('click', () => this._requestItem(this.sectionId));
+  }
+
+  render() {
+    return html` <slot></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'test-section-link': TestSectionLink;
+  }
+}