TN8 Item Styleguide

Manipulatives - Fraction Model

Presentation Options

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 Fraction Model below. 

<object data="null" type="text/plugin+xml">
  <param name="markup" value="markup" valuetype="DATA"><![CDATA[
    <div id="grannieSmithPie" style="margin: 0px auto"></div>
  ]]></param>
  <param name="script" value="script" valuetype="DATA"><![CDATA[
    $(document).ready(function () {
      var myFractionModel = FractionModelAPI.createItem({
        div: 'grannieSmithPie',
        stem_div: 'stem',
        alignment: 'center',
        models: [
          {
            active: true,
            startSegments: 1,
            minSegments: 1,
            maxSegments: 12,
            selectedSegments: [],
            text: "Grannie Smith\'s Pie",
            style: {
              radius: 80,
              fillColor: '#FFFFFF',
              strokeColor: '#000000',
              strokeWeight: 2
            }
          }
        ]
      });
      myFractionModel.initialize();
    });
  ]]></param>
  <param name="scriptlibs" value="scriptlibs" valuetype="DATA"><![CDATA[
    { "src":"public/javascripts/easeljs-0.6.0.min.js","key":"easel" },
    { "src":"public/javascripts/fractionmodel-lib.js","key":"fractionmodel" }
  ]]></param>
</object>
Get Responses:[ Click Get Responses ]
Item XML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  adaptive="false" identifier="FractionModel-Choice-cloze" 
  timeDependent="false" title="Fraction Model with Choice - Cloze" 
  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd">
  <responseDeclaration baseType="identifier" cardinality="single" identifier="RESPONSE">
    <correctResponse>
      <value>L</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration baseType="integer" cardinality="single" identifier="SCORE"/>
  <itemBody>
    <div class="row">
      <div class="span6">
        <p>
          Grannie Smith invites the Stooges over for dinner.  She serves her 
          famous apple pie.  Slice the pie into the right number of pieces so that 
          each Stooge gets exactly one equal piece, then answer the question to the right.
        </p>

        <object data="null" type="text/plugin+xml">
          <param name="markup" value="markup" valuetype="DATA" ><![CDATA[
            <div id="grannieSmithPie" style="margin: 0px auto"></div>
          ]]></param>
          <param name="script" value="script" valuetype="DATA"><![CDATA[
            $(document).ready(function () {
              var myFractionModel = FractionModelAPI.createItem({
              div: 'grannieSmithPie',
              stem_div: 'stem',
              alignment: 'center',
              models: [
                {
                  active: true,
                  startSegments: 1,
                  minSegments: 1,
                  maxSegments: 12,
                  selectedSegments: [],
                  text: "Grannie Smith\'s Pie",
                  style: {
                	radius: 80,
                 	fillColor: '#FFFFFF',
                 	strokeColor: '#000000',
                	strokeWeight: 2
                  }
                }
              ]
            });
            myFractionModel.initialize();
          });
        ]]></param>
        <param name="scriptlibs" value="scriptlibs" valuetype="DATA"><![CDATA[
          { "src":"public/javascripts/easeljs-0.6.0.min.js","key":"easel" },
          { "src":"public/javascripts/fractionmodel-lib.js","key":"fractionmodel" }
        ]]></param>
      </object>

      <br />
    </div>
    <div class="span6">
      <p>
        Select the missing word in the sign below:
      </p>
      <choiceInteraction class="clozeblock-sign clozeblank-width-60px" maxChoices="1" 
        responseIdentifier="RESPONSE" shuffle="false">
        <simpleChoice identifier="L">Larry</simpleChoice>
        <simpleChoice identifier="M">Moe</simpleChoice>
        <simpleChoice identifier="C">Curly</simpleChoice>
        <simpleChoice identifier="Lu">Luggage</simpleChoice>
      </choiceInteraction>				
      <div style="position:relative;margin:0 auto;width:170px;">
        <img alt="Never Leave ________ Unattended" src="images/sign-cloze.png"/>
        <div id="sign" style="left:55px;top:36px;"/>
      </div>
    </div>			
  </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct"/>
</assessmentItem>

Grannie Smith invites the Stooges over for dinner. She serves her famous apple pie. Slice the pie into the right number of pieces so that each Stooge gets exactly one equal piece, then answer the question to the right.


Select the missing word in the sign below:

Never Leave ________ Unattended