TN8 Item Styleguide

Numberline

Presentation Options

Numberline interactions are triggered by specifying the following QTI Custom Interaction class attribute:
<customInteraction class="tei-numberline" 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 can limit the number of solutions that a student can plot by altering the width of the number line as follows -

Number of buttons available on interaction Number of solutions that can be placed by test taker Recommended minimum width

You "dock" a 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="numLineDiv" />. Furthermore, a Numberline interaction also provides a set of properties that define the control panel used to manipulate the numberline. This control panel is docked at a div with an id specified using the panelDivId property of the configuration object. See the example configuration below.

The following is a complete <customOption> configuration object where the Numberline is docked to the div with id="numLineDiv", and the control panel for the numberline is docked to a div with id="numberline-panel" : 

<customOption><![CDATA[
{
  divId: 'numLineDiv',
  width:650,
  labelsOnTop: 'true',
  largeHashMarkIntervals: 10,
  smallHashMarkIntervals: 2,
  invisibleSnapToIntervals: 1,
  startPoint: -5,
  increment: 1,
  pointStyle: {
    size: 8,
    colorSelected: '#000000',
    colorDisabled: 'grey'
  },
  panelDivId : 'numberline-panel',
  buttons : [
    'closed-closed',
    'closed-open',
    'open-closed',
    'open-open',
    'arrow-open',
    'arrow-closed',
    'open-arrow',
    'closed-arrow',
    'closed-dot'
  ],
  plottedLine:{
    lineWeight: 8
  }
}
]]></customOption>
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="customInteraction-numberline" timeDependent="false" 
  title="Numberline" 
  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd">
  <responseDeclaration baseType="float" cardinality="single" identifier="RESPONSE"/>
  <outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE"/>
  <itemBody>
    <p class="lead">What is the solution of the inequality 5x + 2 > 12?</p>
    <p class="lead">Plot the solution set on the number line below.</p>
    <div class="center">
      <div id="numLineDiv"/>
    </div>
    <div id="numberline-panel" class="panel-nl rounded-all-nl" />

    <customInteraction class="tei-numberline" responseIdentifier="RESPONSE">
      <customOption><![CDATA[
        {
          divId: 'numLineDiv',
          width:650,
          labelsOnTop: 'true',
          largeHashMarkIntervals: 10,
          smallHashMarkIntervals: 2,
          invisibleSnapToIntervals: 1,
          startPoint: -5,
          increment: 1,
          pointStyle: {
            closed: 'true',
            size: 8,
            color: '#F04141',
            colorSelected: '#000000',
            colorDisabled: 'grey'
          },
          panelDivId : 'numberline-panel',
          buttons : [
            'closed-closed',
            'closed-open',
            'open-closed',
            'open-open',
            'arrow-open',
            'arrow-closed',
            'open-arrow',
            'closed-arrow',
            'closed-dot'
          ],
          plottedLine:{
            lineWeight: 8
          }
        }
      ]]></customOption>
    </customInteraction>

  </itemBody>
</assessmentItem>

What is the solution of the inequality 5x + 2 > 12?

Plot the solution set on the number line below.