TN8 Item Styleguide ::: Manipulatives

Manipulatives - Example 1

In TN8 we've introduced a way to inject custom "manipulatives" into an item. What's a manipulative? Technically, it's an object containing markup, script, and script libraries, used to create a dynamic element or "widget" in an item. From a practical standpoint, a manipulative will typically be an animation, a simulation, or some other type of component that a student can manipulate.

To create a manipulative in an item, you use a new type of <object> that we've defined. An object of type text/plugin+xml:
<object data="null" type="text/plugin+xml">

Inside this object tag you define <param> tags to describe the markup, script and scriptlibs parameters of the object. Here's an example of the object tag used to create the tumbling tetronimo below.

<object data="null" type="text/plugin+xml">
  <param name="markup" value="markup" valuetype="DATA"><![CDATA[
    <div id="tetronimo_container" class="bordered" style="width:225px;height:200px;margin:8px auto 18px;"></div>
  ]]></param>
  <param name="script" value="script" valuetype="DATA"><![CDATA[
    jQuery(function () {
      var paper = new Raphael(document.getElementById("tetronimo_container"), 225, 200);
      var tetronimo = paper.path("M 188 150 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
      tetronimo.attr({
        "fill": "#526c7a",
        "gradient": "90-#526c7a-#64a0c1",
        "stroke": "#3b4449",
        "stroke-width": "10",
        "stroke-linejoin": "round",
        "transform": "r -90"
      });
      tetronimo.animate({"transform": "r 360"}, 2000, "bounce");
    });
  ]]></param>
  <param name="scriptlibs" value="scriptlibs" valuetype="DATA"><![CDATA[
    { "src":"public/javascripts/raphael-2.1.0.min.js","key":"raphael" }
  ]]></param>
</object>

Get Responses:

[ Click Get Responses ]

Item XML

<?xml version="1.0" encoding="utf-8"?>
<assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd"
identifier="Order-vertical-1" title="Order - vertical" adaptive="false" timeDependent="false">
  <responseDeclaration identifier="RESPONSE" cardinality="ordered" baseType="identifier">
    <correctResponse>
      <value>DriverC</value>
      <value>DriverA</value>
      <value>DriverB</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="integer" />
  <itemBody>
    <div class="row">
      <div class="span6">
        <h4 style="text-align:center;">Examine the Tumbling Tetronimo</h4>
        
        <object data="null" type="text/plugin+xml">
          <param name="markup" value="markup" valuetype="DATA"><![CDATA[
            <div id="tetronimo_container" class="bordered" style="width:225px;height:200px;margin:8px auto 18px;"></div>
          ]]></param>
          <param name="script" value="script" valuetype="DATA"><![CDATA[
            jQuery(function () {
              var paper = new Raphael(document.getElementById("tetronimo_container"), 225, 200);
              var tetronimo = paper.path("M 188 150 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
              tetronimo.attr({
                "fill": "#526c7a",
                "gradient": "90-#526c7a-#64a0c1",
                "stroke": "#3b4449",
                "stroke-width": "10",
                "stroke-linejoin": "round",
                "transform": "r -90"
              });
              tetronimo.animate({"transform": "r 360"}, 2000, "bounce");
            });
          ]]></param>
          <param name="scriptlibs" value="scriptlibs" valuetype="DATA"><![CDATA[
            { "src":"public/javascripts/raphael-2.1.0.min.js","key":"raphael" }
          ]]></param>
        </object>

      </div>
      <div class="span6">
        <div class="well">
          <p>
            The following F1 drivers finished on the podium in the first ever Grand Prix of Bahrain. Can you 
            rearrange them into the correct finishing order?
          </p>
          <div class="pad8 whitebg">
            <orderInteraction responseIdentifier="RESPONSE" class="dnd-vertical">
              <simpleChoice identifier="DriverA">Rubens Barrichello</simpleChoice>
              <simpleChoice identifier="DriverB">Jenson Button</simpleChoice>
              <simpleChoice identifier="DriverC">Michael Schumacher</simpleChoice>
            </orderInteraction>
          </div>
        </div>    
      </div>    
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>