TN8 Item Styleguide ::: Fraction Model

Fraction Model - Example 1

Fraction Model interactions are triggered by specifying the following QTI Custom Interaction class attribute:
<customInteraction class="tei-fractionmodel" responseIdentifier="RESPONSE">

The QTI schema of a Fraction Model customInteraction contains only one element, <customOption>, which contains an object that describes everything about the interaction, including the number and type of models inside the interaction. Inside the configuration object there is a models array which defines properties of each Fraction Model "model" in an interaction, including startSegments, minSegments, maxSegments, radius, title text, and more.

The following is a complete <customOption> configuration object example of a models definition with one model:

<customOption><![CDATA[
{
  div: 'interaction-RESPONSE',
  stem_div: 'stem',
  alignment: 'center',
  models: [
    {
      active: true,
      startSegments: 2,
      minSegments: 1,
      maxSegments: 12,
      selectedSegments: [],
      text: 'The Fraction Tool',
      style: {
        radius: 150,
        fillColor: '#FF0000',
        strokeColor: '#000000',
        strokeWeight: 2
      }
    }
  ]
}
]]></customOption>

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"
  adaptive="false" timeDependent="false"
  identifier="customInteraction-fractionmodel-1" title="Fraction Model - Example 1">
  <responseDeclaration identifier="RESPONSE" cardinality="single" baseType="string">
    <correctResponse>
      <value>3/8</value>
    </correctResponse>
  </responseDeclaration>  
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="float" />
  <itemBody>
    <div class="row">
      <div class="span6">
        <p>
          A pie is divided into quarters. Each slice is then divided in half. One half of the
          pie is eaten at lunch. One slice is eaten at snack time.
        </p>
        <p>
          Use the Fraction Tool to the right to shade the portion of the pie that is left. The Fraction Tool
          buttons divide the circle into fewer or more pieces. Pieces of the circle can be
          shaded by selecting them.
        </p>
      </div>
      <div class="span6">

        <div id="RESPONSE"></div>
        <customInteraction class="tei-fractionmodel" responseIdentifier="RESPONSE">
          <customOption><![CDATA[
            {
              div: 'RESPONSE',
              stem_div: 'stem',
              alignment: 'center',
              models: [{   
                active: true,
                startSegments: 2,
                minSegments: 1,
                maxSegments: 12,
                selectedSegments: [],
                text: "The Fraction Tool",
                style: { 
                  radius: 150,
                  fillColor: '#FF0000',
                  strokeColor: '#000000',
                  strokeWeight: 2
                }
              }]
            }
          ]]></customOption>
        </customInteraction>

      </div>
    </div>
  </itemBody>
  <responseProcessing>
    <responseCondition>
      <responseIf>
        <equal tolerance="0.000000000001" toleranceMode="absolute">
          <divide>
            <customOperator class="qti.customOperators.math.fraction.Numerator">
              <variable identifier="RESPONSE"/>
            </customOperator>
            <customOperator class="qti.customOperators.math.fraction.Denominator">
              <variable identifier="RESPONSE"/>
            </customOperator>
          </divide>
          <divide>
            <customOperator class="qti.customOperators.math.fraction.Numerator">
              <correct identifier="RESPONSE"/>
            </customOperator>
            <customOperator class="qti.customOperators.math.fraction.Denominator">
              <correct identifier="RESPONSE"/>
            </customOperator>
          </divide>
        </equal>
        <setOutcomeValue identifier="SCORE">
          <baseValue baseType="float">1</baseValue>
        </setOutcomeValue>
      </responseIf>
      <responseElse>
        <setOutcomeValue identifier="SCORE">
          <baseValue baseType="float">0</baseValue>
        </setOutcomeValue>
      </responseElse>
    </responseCondition>
  </responseProcessing>  
</assessmentItem>