TN8 Item Styleguide ::: Bar Chart Negative

Bar Chart Negative

Draggable 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 Bar 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.

To get started, you first initialize the chart object to the chart type, e.g., type: 'column' for a vertical, draggable, bar chart. 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',
  type: 'column',
  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 } }

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-bar-neg" title="Custom Interaction - Bar Chart Neg" adaptive="false" timeDependent="false">
  <responseDeclaration baseType="string" cardinality="ordered" identifier="RESPONSE">
    <correctResponse>
      <value>0 -80</value>
      <value>1 5</value>
      <value>2 20</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="integer" />
  <itemBody>
    <div class="row">
      <div class="span6">
        <p>Shawn recorded three temperatures of water in degrees
        Fahrenheit (°F). The dry ice was −112°F,
        the regular ice was 41°F, and the room temperature
        water was 68°F.</p>
        <p>Convert the temperatures into degrees Celcius and move
        the bars on the graph to show the temperature for each
        state.</p>
      </div>
      <div class="span6">
        <div class="well">
        
          <div id="RESPONSE"></div>
          <customInteraction class="tei-graphing" responseIdentifier="RESPONSE">
            <customOption><![CDATA[
              {
                chart: {
                  renderTo: 'RESPONSE',
                  type: 'column',
                  animation: false
                },
                title: {
                  text: 'Water Temps in Different States'
                },
                xAxis: {
                  title: {
                    text: 'State'
                  },
                  categories: [
                    'Dry Ice',
                    'Regular Ice',
                    'Room Temperature'
                  ]
                },
                yAxis: {
                  min: -80,
                  max: 80,
                  minorTickInterval: 'auto',
                  title: {
                    text: 'Temperature ( �C )'
                  }
                },
                legend: {
                  enabled: false
                },
                tooltip: {
                  formatter: function() {
                    return this.x + ': ' + Highcharts.numberFormat(this.y, 0) + ' �C';
                  }
                },
                plotOptions: {
                  series: {
                    cursor: 'ns-resize',
                    stickyTracking: false
                  },
                  column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                  }
                },
                series: [{
                  name: 'Temperature',
                  draggable: true,
                  dragMin: -80,
                  dragMax: 80,
                  data: [
                    {color:'#AA46E8',y:-20},
                    {color:'#4572EE',y:10},
                    {color:'#4572EE',y:10}
                  ],
                  dataQtiIsResponse: true,
                  snapping: true,
                  snappingInterval: 5
                }]
              }
            ]]></customOption>
          </customInteraction>
        </div>
      </div>
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>