TN8 Item Styleguide ::: Zoom Numberline

Zoom Numberline

The Zoom Numberline interaction is a good way to use a Numberline while enabling finer-grained detail. Zoom Numberline interactions are triggered by specifying the following QTI Custom Interaction class attribute:
<customInteraction class="tei-zoomnumberline" responseIdentifier="RESPONSE">

This customInteraction contains only one element, <customOption>, which describes everything about the numberline, including its major/minor scales, point attributes, and label settings.

You "dock" a Zoom Numberline interaction to a <div> element with an id specified using the divId property of the configuration object. Here is an example div element: <div id="myNumberline" />

The following is a complete <customOption> configuration object where the Zoom Numberline is docked to the div with id="myNumberline":

<customOption><![CDATA[
  {
    divId: 'myNumberline',
    width:600,
    height:240,
    labelsOnTop: true,
    largeHashMarkIntervals: 10,
    increment: 1,
    smallHashMarkIntervals: 2,
    invisibleSnapToIntervals: 10,
    pointStyle: {
      closed: false,
      size: 8
    }
  }
]]></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-numberline-zoom" title="Zoom Numberline">
  <responseDeclaration identifier="RESPONSE" cardinality="single" baseType="float" />
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="float" />
  <itemBody>
    <p class="lead center">
      Use the number line to plot the <em>approximate</em> area of 
      a circle with a diameter of 2 units.
    </p>
    <p class="center muted">
      Click anywhere on the number line to begin.
    </p>
    <div id="myNumberline" class="center"></div>

    <customInteraction class="tei-zoomnumberline" responseIdentifier="RESPONSE">
      <customOption><![CDATA[
        {
          divId: 'myNumberline',
          width:600,
          height:240,
          labelsOnTop: 'true',
          largeHashMarkIntervals: 10,
          increment: 1,
          smallHashMarkIntervals: 2,
          invisibleSnapToIntervals: 10,
          startPoint: 0,
          pointStyle: {
            closed: 'true',
            size: 8,
          }
        }
      ]]></customOption>
    </customInteraction>
    
  </itemBody>
</assessmentItem>