TN8 Item Styleguide ::: Manipulatives

Manipulatives - Probability Spinner

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 Probability Spinner below.

<object data="null" type="text/plugin+xml">
  <param name="markup" value="markup" valuetype="DATA"><![CDATA[<div id="probabilitySpinner" class="probabilitySpinnerInteraction" style="margin: 0px auto"></div>]]></param>
  <param name="script" value="script" valuetype="DATA"><![CDATA[
    $(document).ready(function () {
      var spinner = ProbabilitySpinnerAPI.createSpinner({
        div: 'probabilitySpinner',
        stem_div: 'prompt',
        numSegments: 12,
        prompt: 'Select the number of spins',
        alignment: 'center',
        radius: 100,
        width: 700,
        spins: [
          { label : '5 Spins', values : [ 0,1,0,0,2,0,1,1,0,0,0,0 ] },
          { label : '10 Spins', values : [ 1,3,1,0,1,0,2,0,1,0,1,0 ] },
          { label : '50 Spins', values : [ 3,7,4,6,4,3,6,4,4,6,3,4 ] },
          { label : '100 Spins', values : [ 8,14,7,8,9,9,5,8,12,10,4,6 ] },
          { label : '200 Spins', values : [ 17,23,15,21,17,15,20,16,17,15,13,11 ] },
          { label : '500 Spins', values : [ 40,45,42,41,42,43,43,41,42,40,41,40 ] },
          { label : '1000 Spins', values : [ 81,87,82,83,84,83,83,82,83,85,83,84 ] }
        ]
      });
      spinner.initialize();
    });
  ]]></param>
  <param name="scriptlibs" value="scriptlibs" valuetype="DATA"><![CDATA[
    { "src":"public/javascripts/easeljs-0.6.0.min.js","key":"easel" },
    { "src":"public/javascripts/tweenjs-0.4.0.min.js","key":"tween" },
    { "src":"public/javascripts/probabilityspinner-lib.js","key":"probspinner" }
  ]]></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-Spinner-1" title="Order - Spinner" 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>
    <p style="margin-bottom:28px;">
      Stephen believes that the spinner is not working properly and often sticks on the segment
      labeled 'E.' Experiment with the spinner by trying different numbers of spins.
    </p>
        
    <object data="null" type="text/plugin+xml">
      <param name="markup" value="markup" valuetype="DATA"><![CDATA[
        <div id="probabilitySpinner" class="probabilitySpinnerInteraction" style="margin: 0px auto"></div>
      ]]></param>
      <param name="script" value="script" valuetype="DATA"><![CDATA[
        $(document).ready(function () {
          var spinner = ProbabilitySpinnerAPI.createSpinner({
            div: 'probabilitySpinner',
            stem_div: 'prompt',
            numSegments: 12,
            prompt: 'Select the number of spins',
            alignment: 'center',
            radius: 100,
            width: 700,
            spins: [
              { label : '5 Spins', values : [ 0,1,0,0,2,0,1,1,0,0,0,0 ] },
              { label : '10 Spins', values : [ 1,3,1,0,1,0,2,0,1,0,1,0 ] },
              { label : '50 Spins', values : [ 3,7,4,6,4,3,6,4,4,6,3,4 ] },
              { label : '100 Spins', values : [ 8,14,7,8,9,9,5,8,12,10,4,6 ] },
              { label : '200 Spins', values : [ 17,23,15,21,17,15,20,16,17,15,13,11 ] },
              { label : '500 Spins', values : [ 40,45,42,41,42,43,43,41,42,40,41,40 ] },
              { label : '1000 Spins', values : [ 81,87,82,83,84,83,83,82,83,85,83,84 ] }
            ]
          });
          spinner.initialize();
        });
      ]]></param>
      <param name="scriptlibs" value="scriptlibs" valuetype="DATA"><![CDATA[
        { "src":"public/javascripts/easeljs-0.6.0.min.js","key":"easel" },
        { "src":"public/javascripts/tweenjs-0.4.0.min.js","key":"tween" },
        { "src":"public/javascripts/probabilityspinner-lib.js","key":"probspinner" }
      ]]></param>
    </object>

    <br/>
    <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>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>