xml example

src/lib/qti-components/qti-interaction/qti-media-interaction/qti-media-interaction.stories.ts

@@ -1,11 +1,14 @@
 import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
+import { useRef, virtual } from 'haunted';
+import '../../../qti-item';
 
-import './qti-media-interaction';
+import xml from './qti-media-interaction.xml?raw';
+import { QtiAssessmentItem } from '../../qti-assessment-item/qti-assessment-item';
 
 export default {
   component: 'qti-media-interaction',
-
+  decorators: [story => html`${virtual(story)()}`],
   argTypes: {
     autostart: { type: 'boolean', description: '' },
     minPlays: { type: 'number', description: '' },
@@ -42,3 +45,22 @@ export const Interaction = {
 
   args: {}
 };
+
+export const XML = {
+  render: () => {
+    const qtiItemRef = useRef<QtiAssessmentItem>(null);
+
+    return html` <qti-item
+        @qti-outcome-changed=${action(`qti-outcome-changed`)}
+        @qti-interaction-changed=${action(`qti-interaction-changed`)}
+        @qti-item-connected=${({ detail }) => (qtiItemRef.current = detail)}
+        xml=${xml}
+      ></qti-item>
+      <button
+        class="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+        @click=${() => qtiItemRef.current.processResponse()}
+      >
+        PROCESS
+      </button>`;
+  }
+};

src/lib/qti-components/qti-interaction/qti-media-interaction/qti-media-interaction.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<qti-assessment-item
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqtiasi_v3p0 https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqti_asiv3p0_v1p0.xsd
+                        http://www.duo.nl/schema/dep_extension ../dep_extension.xsd"
+    title="32bll7"
+    identifier="ITM-32bll7"
+    time-dependent="false"
+    label="32bll7"
+    xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+    xmlns:dep="http://www.duo.nl/schema/dep_extension"
+>
+    <qti-item-body>
+        <qti-media-interaction autostart="false" loop="true" response-identifier="RESPONSE">
+            <qti-prompt>Play this video.</qti-prompt>
+            <video width="320" height="240" controls="true">
+                <source src="qti-media-interaction/earth.mp4" type="video/mp4" /> Your browser does
+                not support the video tag. </video>
+        </qti-media-interaction>
+    </qti-item-body>
+</qti-assessment-item>