TN8 Item Styleguide ::: Fraction Model

Fraction Model - Square Sides

Fraction Model interactions with Square sides are configured 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 square, startSegments, minSegments, maxSegments, radius, title text, and more.

To set the sides of a model to square, simply set the "square" property to true; e.g., square:true.

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,
      square: 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 square 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 square pie that is left. The Fraction Tool
          buttons divide the square into fewer or more pieces. Pieces of the square 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,
                square: 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>