TN8 Item Styleguide ::: Draggable Line Chart

Draggable Line Chart

Charting interactions are triggered by <customInteraction responseIdentifier="RESPONSE" class="tei-graphing">. For customInteraction's with class="tei-graphing", the item compiler scans the QTI xml for only one element: <customOption>. Contained inside <customOption> should be a javascript object that describes the initialization options for the draggable Line Chart.

There are many options for initializing the chart object. Only a few of these are described here. The definitive reference is at highcharts.js. You can also examine the included Item XML link to see a good example of the many configuration options for Draggable Line Charts.

The "Line" chart type is the default chart type, so you don't have to initialize the chart type (unlike other tei-graphing chart types). You must also specify the id of the html element where you want to place the chart. In the following case, our item QTI markup contains a <div id="RESPONSE" />.

Axis Title Formatting

The title of each axis can now be formatted. The font-weight and font-style for both the x-axis and y-axis can be specified based on the available options.

For font-weight there are 14 choices: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit.
For font-style there are 4 choices: normal | italic | oblique | inherit.

Below are two axis examples with title formatting:
xAxis: { title: { text: 'X Axis Title', style: {'font-weight': 'normal', 'font-style': 'italic'} } yAxis: { title: { text: 'Y Axis Title', style: {'font-weight': 'bold', 'font-style': 'italic'} }

chart: {
  renderTo: 'RESPONSE',
  animation: false
}

Point Labels

The labels for points can now be hidden on both the x-axis, y-axis or both.

Hiding the point labels is accomplished by adding labels: {enabled: false} to the appropriate axis.

Below is an example of an axis with labels hidden:
xAxis: { labels: { enabled: false } }

Descending Axes

Points on the x and/or y-axis can be configured to be in descending order. For example 10, 9, 8, 7, 6...

To have descending point labels, use reversed: true on the appropriate axis. In addition to reversing the axis, if you want the categories to start from a given value, you can define that thru the series low attribute.

Below is an example of a descending axis starting at 20:
{ xAxis: { reversed: true }, series: [ { data: [ { y:3, low:20 } ] } ] }

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"
identifier="Chart-line-single" title="Chart - line - single" adaptive="false" timeDependent="false">
  <responseDeclaration baseType="string" cardinality="ordered" identifier="RESPONSE">
    <correctResponse>
      <value>0 70</value>
      <value>1 210</value>
      <value>2 350</value>
      <value>3 420</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="integer" />
  <itemBody>
    <div class="row">
      <div class="span6">
        <p>Tina wants to know what her vitamin C intake will be
        each day when she eats a different amount of oranges. One
        medium orange contains approximately 70 mg of vitamin
        C.</p>
        <p>She eats one orange on Monday, three oranges on Tuesday,
        five oranges on Wednesday, and six oranges on Friday.</p>
        <div class="center" style="margin-top:28px;">
          <img src="assets/images/oranges.jpg" width="200" height="240" alt="oranges" />
        </div>
      </div>
      <div class="span6">
        <div class="well">
          <p>Graph how much vitamin C she will intake on Tuesday,
          Wednesday, and Friday.</p>
          
          <div id="RESPONSE"></div>
          <customInteraction class="tei-graphing" responseIdentifier="RESPONSE">
            <customOption><![CDATA[
              {
                chart: {
                  renderTo: 'RESPONSE',
                  animation: false,
                  plotShadow: true,
                  plotBorderWidth: 1
                },
                title: {
                  text: 'Tina\'s Vitamin C Intake'
                },
                xAxis: {
                  title: {
                    text: 'Day of Week'
                  },
                  categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Friday'
                  ]
                },
                yAxis: {
                  minorTickInterval: 'auto',
                  min: 0,
                  max: 500,
                  title: {
                    text: 'mg of Vitamin C'
                  }
                },
                legend: {
                  enabled: false
                },
                plotOptions: {
                  series: {
                    cursor: 'ns-resize',
                    point: {
                      events: {
                      }
                    },
                    stickyTracking: false
                  },
                  column: {
                    stacking: 'normal'
                  }
                },
                tooltip: {
                  formatter: function() {
                    return 'Day of Week: '+this.x+'<br/>Vitamin C: '+Highcharts.numberFormat(this.y,0) + ' mg';
                  }
                },
                series: [
                  {
                    dataQtiIsResponse: true,
                    marker: {
                      radius: 10
                    },
                    data: [
                      40,
                      40,
                      40,
                      40
                    ],
                    draggable: true,
                    dragMin: 0,
                    dragMax: 500,
                    snapping: true,
                    snappingInterval: 10,
                    name: 'mg of Vitamin C'
                  }
                ]
              }
            ]]></customOption>
          </customInteraction>
        </div>
      </div>
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>