process response button

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

@@ -15,3 +15,4 @@ export * from './test-scoring-input';
 export * from './test-toggle-scoring';
 export * from './test-item-id';
 export * from './test-scoring-buttons';
+export * from './test-process-response';

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

@@ -30,6 +30,3 @@ export class TestNext extends LitElement {
     `;
   }
 }
-
-// ${item.identifier}<br />${item.variables.find(v => v.identifier === 'completionStatus')?.value}
-// <br />${item.variables.find(v => v.identifier === 'SCORE')?.value}

src/lib/qti-test/components/test-process-response.ts

@@ -0,0 +1,29 @@
+import { css, html, LitElement } from 'lit';
+
+import { customElement, state } from 'lit/decorators.js';
+import { consume } from '@lit/context';
+import { TestContext, testContext } from '../qti-assessment-test.context';
+import { QtiAssessmentTest } from '../qti-assessment-test';
+
+@customElement('test-process-response')
+export class TestProcessResponse extends LitElement {
+  @consume({ context: testContext, subscribe: true })
+  @state()
+  public _testContext?: TestContext;
+
+  _processResponse() {
+    const currentItemIdentifier = this._testContext.items[this._testContext.itemIndex].identifier;
+    const qtiAssessmentTestEl = this.closest('qti-assessment-test') as QtiAssessmentTest;
+    const qtiItemEl = qtiAssessmentTestEl.itemRefEls.get(currentItemIdentifier);
+    const qtiAssessmentItemEl = qtiItemEl.assessmentItem;
+    qtiAssessmentItemEl.processResponse();
+  }
+
+  render() {
+    return html`
+      <button part="button" @click=${_ => this._processResponse()} id="process-response">
+        <slot></slot>
+      </button>
+    `;
+  }
+}

src/lib/qti-test/qti-test.haunted.ts

@@ -30,6 +30,8 @@ export const QtiTestHaunted = (manifestData: ManifestData, itemIndex: number, te
             <test-item-id></test-item-id>
           </div>
 
+          <test-print-score></test-print-score>
+
           <test-toggle-scoring></test-toggle-scoring>
 
           <div>
@@ -61,6 +63,8 @@ export const QtiTestHaunted = (manifestData: ManifestData, itemIndex: number, te
 
           <test-slider></test-slider>
 
+          <test-process-response>NAKIJKEN</test-process-response>
+
           <pre>
           <test-script>
           <!--

vscode.html-custom-data.json

@@ -672,13 +672,15 @@
       "references": []
     },
     {
-      "name": "qti-text-entry-interaction",
-      "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction** - undefined\n- **qti-interaction-response** - undefined",
+      "name": "qti-slider-interaction",
+      "description": "The SliderInteraction.Type (qti-slider-interaction) presents the candidate with a control for selecting a numerical value between a lower and upper bound.\n---\n\n\n### **Events:**\n - **qti-register-interaction** - emitted when the interaction wants to register itself\n- **qti-interaction-response** - emitted when the interaction changes\n\n### **Slots:**\n - _default_ - The default slot where <qti-simple-choice> must be placed.\n- **prompt** - slot where the prompt is placed.\n\n### **CSS Properties:**\n - **--show-value** - shows the current value while sliding _(default: undefined)_\n- **--show-ticks** - shows the ticks according to steps _(default: undefined)_\n- **--show-bounds** - shows value for lower and upper boundary _(default: undefined)_\n\n### **CSS Parts:**\n - **slider** - -- slider inluding, bounds and ticks and value, use it for paddings and margins\n- **bounds** - -- div for bounds, containing two divs for with min, and max bounds value\n- **ticks** - -- div for ticks, use lineair gradient and exposed css variables for styling\n- **rail** - -- div for rail, style according to needs\n- **knob** - -- div, should be relative or absolute\n- **value** - -- div, containing value",
       "attributes": [
-        { "name": "expected-length", "values": [] },
-        { "name": "pattern-mask", "values": [] },
-        { "name": "placeholder-text", "values": [] },
-        { "name": "class", "values": [] },
+        { "name": "value", "values": [] },
+        { "name": "step-label", "values": [] },
+        { "name": "reverse", "values": [] },
+        { "name": "lower-bound", "values": [] },
+        { "name": "upper-bound", "values": [] },
+        { "name": "step", "values": [] },
         { "name": "response-identifier", "values": [] },
         {
           "name": "disabled",
@@ -694,15 +696,13 @@
       "references": []
     },
     {
-      "name": "qti-slider-interaction",
-      "description": "The SliderInteraction.Type (qti-slider-interaction) presents the candidate with a control for selecting a numerical value between a lower and upper bound.\n---\n\n\n### **Events:**\n - **qti-register-interaction** - emitted when the interaction wants to register itself\n- **qti-interaction-response** - emitted when the interaction changes\n\n### **Slots:**\n - _default_ - The default slot where <qti-simple-choice> must be placed.\n- **prompt** - slot where the prompt is placed.\n\n### **CSS Properties:**\n - **--show-value** - shows the current value while sliding _(default: undefined)_\n- **--show-ticks** - shows the ticks according to steps _(default: undefined)_\n- **--show-bounds** - shows value for lower and upper boundary _(default: undefined)_\n\n### **CSS Parts:**\n - **slider** - -- slider inluding, bounds and ticks and value, use it for paddings and margins\n- **bounds** - -- div for bounds, containing two divs for with min, and max bounds value\n- **ticks** - -- div for ticks, use lineair gradient and exposed css variables for styling\n- **rail** - -- div for rail, style according to needs\n- **knob** - -- div, should be relative or absolute\n- **value** - -- div, containing value",
+      "name": "qti-text-entry-interaction",
+      "description": "\n---\n\n\n### **Events:**\n - **qti-register-interaction** - undefined\n- **qti-interaction-response** - undefined",
       "attributes": [
-        { "name": "value", "values": [] },
-        { "name": "step-label", "values": [] },
-        { "name": "reverse", "values": [] },
-        { "name": "lower-bound", "values": [] },
-        { "name": "upper-bound", "values": [] },
-        { "name": "step", "values": [] },
+        { "name": "expected-length", "values": [] },
+        { "name": "pattern-mask", "values": [] },
+        { "name": "placeholder-text", "values": [] },
+        { "name": "class", "values": [] },
         { "name": "response-identifier", "values": [] },
         {
           "name": "disabled",
@@ -842,6 +842,12 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "qti-map-response",
+      "description": "\n---\n",
+      "attributes": [{ "name": "identifier", "values": [] }],
+      "references": []
+    },
     {
       "name": "qti-mapping",
       "description": "\n---\n",
@@ -852,26 +858,20 @@
       ],
       "references": []
     },
-    {
-      "name": "qti-map-response",
-      "description": "\n---\n",
-      "attributes": [{ "name": "identifier", "values": [] }],
-      "references": []
-    },
     {
       "name": "qti-match",
       "description": "\n---\n",
       "attributes": [],
       "references": []
     },
     {
-      "name": "qti-member",
+      "name": "qti-multiple",
       "description": "\n---\n",
       "attributes": [],
       "references": []
     },
     {
-      "name": "qti-multiple",
+      "name": "qti-member",
       "description": "\n---\n",
       "attributes": [],
       "references": []