Sharebar?

A basic implementation of custom interaction and portableCustomInteraction

A basic implementation of custom interaction and portableCustomInteraction

Hi,

I created this post because I did not find any example of portableCustomInteraction implementation. Based on the XSD and the implementation in other systems I have created the following implementation.
I have attached a preview page that will load the examples and also added a implementation using TAO modules.
As a base I have used this pages:

The basic implementation is in pci.zip.

assessmentItem
<assessmentItem
  xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1"
  xmlns:pci="http://www.imsglobal.org/xsd/portableCustomInteraction"
  xmlns:xi="http://www.w3.org/2001/XInclude"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1   http://www.imsglobal.org/xsd/qti/qtiv2p1/imsqti_v2p1.xsd"
  identifier="_10001"
  title="Math_A.1_GraphEquation">
    <responseDeclaration identifier="RESPONSE" cardinality="single" baseType="string" />
    <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="float" />
    <stylesheet href="../shared/graphInteraction.css" type="text/css" media="all" title="Default stylesheet" />
    <itemBody>
      <div><p>Graph the solution to the following equation: x2</p></div>
      <customInteraction responseIdentifier="RESPONSE">
        <pci:portableCustomInteraction customInteractionTypeIdentifier="graphInteraction">
          <pci:responseSchema href="http://imsglobal.org/schema/json/v1.0/response.json" />
          <pci:resources location="../shared/sharedLibraries.xml">
            <pci:libraries>
              <pci:lib id="Edmentum/d3-5.9.1" />
              <pci:lib id="Edmentum/graphInteraction-1.0.0" />
            </pci:libraries>
          </pci:resources>
          <pci:properties>
            <pci:entry key="x">-10,10</pci:entry>
            <pci:entry key="y">-10,10</pci:entry>
            <pci:entry key="showAxes">true</pci:entry>
            <pci:entry key="xStep">1</pci:entry>
            <pci:entry key="yStep">1</pci:entry>
            <pci:entry key="prompt">Use the drawing tool(s) to form the correct answer on the provided graph.</pci:entry>
          </pci:properties>
          <pci:markup>
            <div class="graph-interaction">
              <div class="graph-interaction__prompt" />
              <div class="graph-interaction__canvas" />
            </div>
          </pci:markup>
        </pci:portableCustomInteraction>
      </customInteraction>
    </itemBody>
</assessmentItem>

sharedLibraries.xml

<repository>
    <resources vendor="Edmentum">
      <libraries>
        <lib name="graphInteraction-1.0.0" href="../shared/graphInteraction.js"/>
        <lib name="d3-5.9.1" href="https://d3js.org/d3.v5.min.js"/>
      </libraries>
    </resources>
</repository>

imsmanifest.xml

<manifest xmlns="http://www.imsglobal.org/xsd/imscp_v1p1" xmlns:imsmd="http://ltsc.ieee.org/xsd/LOM" xmlns:imsqti="http://www.imsglobal.org/xsd/imsqti_metadata_v2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsglobal.org/xsd/imscp_v1p1 http://www.imsglobal.org/xsd/qti/qtiv2p1/qtiv2p1_imscpv1p2_v1p0.xsd" identifier="_1312">
    <metadata>
      <schema>QTIv2.1 Package</schema>
      <schemaversion>1.0.0</schemaversion>
    </metadata>
    <organizations />
    <resources>
      <resource identifier="test_100" type="imsqti_test_xmlv2p1" href="assessment.xml">
        <file href="assessment.xml" />
        <dependency identifierref="_10001" />
      </resource>
      <resource identifier="_10001" type="imsqti_item_xmlv2p1" href="id-10001/10001.xml">
        <file href="id-10001/10001.xml" />
        <file href="shared/sharedLibraries.xml" />
        <file href="shared/graphInteraction.js" />
        <file href="shared/graphInteraction.css" />
      </resource>
    </resources>
</manifest>

graphInteraction.js

/** GraphInteraction: A Custom Interaction Hook implemented as an AMD Module. */
define(
    ['qtiCustomInteractionContext', 'Edmentum/d3-5.9.1'],
    function(qtiCustomInteractionContext, d3) {
      function GraphInteraction(dom) {
        // render the interaction ...
        d3.select(dom.querySelector('.graph-interaction__canvas')).append('svg:svg'));
      }
      
      var graphInteractionHook = {
        getTypeIdentifier: function() { return 'graphInteraction'; },
        initialize: function(id, dom, config){
          this.id = id;
          this.interaction = new GraphInteraction(dom);
        },
        setResponse: function(response) { },
        getResponse: function() { },
        resetResponse: function() { },
        destroy: function() { },
        setSerializedState : function(state) { },
        getSerializedState: function() { },
        resetSerializedState: function() { },
      };
      
      // The Custom Interaction Hook registers to the graphInteractionHook object.
      qtiCustomInteractionContext.register(graphInteractionHook);
    });

I have also done implementation that is uses <modules> in file 'pci-modules.zip'.

Do you see anything wrong in my implementation? I tried to follow the draft v1 standard.