TN8 Item Styleguide

Bar Chart Single

Presentation Options

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 } }

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" standalone="no"?>
<assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1" xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" adaptive="false" identifier="BarChart-Single" timeDependent="false"
title="Dog Park" xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd">
  <responseDeclaration baseType="string" cardinality="ordered" identifier="RESPONSE">
    <correctResponse>
      <value>0 9</value>
      <value>1 2</value>
      <value>2 3</value>
      <value>3 6</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration baseType="integer" cardinality="single" identifier="SCORE">
    <defaultValue>
      <value>0</value>
    </defaultValue>
  </outcomeDeclaration>
  <itemBody>
    <div class="row">
      <div class="span6">
        <p>
          Here are some phony instructions...read this and look at the Table below:
        </p>
        <div style="text-align:center">
          <table class="table table-bordered" style="width:260px;margin: 28px auto;">
            <thead>
              <tr>
                <th style="text-align:center;vertical-align:middle;">Color<br/>of Dogs</th>
                <th style="text-align:center;">Number<br/>of Dogs</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td style="text-align:center;">Mixed</td>
                <td style="text-align:center;">9</td>
              </tr>
              <tr>
                <td style="text-align:center;">White</td>
                <td style="text-align:center;">2</td>
              </tr>
              <tr>
                <td style="text-align:center;">Black</td>
                <td style="text-align:center;">3</td>
              </tr>
              <tr>
                <td style="text-align:center;">Other</td>
                <td style="text-align:center;">6</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="span6">
        <div class="well">
          <p style="margin-bottom: 18px;">
            <strong>Instructions:</strong>  The chart below is an <u>incorrect</u> 
            representation of the Dog Park data in the table to the left.  Using your mouse or
			touch (iPad), click and drag each bar of the Dog Park data series up or down to
			correct the graph below.
          <p />
          
          <div id="RESPONSE"></div>
          
          <customInteraction class="tei-graphing" responseIdentifier="RESPONSE">
            <customOption><![CDATA[
              {
                chart: {
                  renderTo: 'RESPONSE',
                  type: 'column',
                  animation: false,
                  plotShadow: true,
                  plotBorderWidth: 1
                },
                title: {
                  text: 'Dog Park Data'
                },
                tooltip: false,
                xAxis: {
                  title: {
                    text: 'Color of Dogs'
                  },
                  categories: [
                    'Mixed',
                    'White',
                    'Black',
                    'Other'
                  ]
                },
                yAxis: {
                  minorTickInterval: 'auto',
                  min: 0,
                  max: 20,
                  title: {
                    text: 'Number of Dogs'
                  }
                },
                legend: {
                  enabled: false
                },
                plotOptions: {
                  series: {
                    cursor: 'ns-resize',
                    point: {
                      events: {
                      }
                    },
                    stickyTracking: false
                  },
                  column: {
                    pointPadding: 0.2,
                    borderWidth: 1.0
                  }
                },
                series: [
                  {
                    dataQtiIsResponse: true,
                    data: [
                      3,
                      3,
                      3,
                      3
                    ],
                    draggable: true,
                    dragMin: 0,
                    dragMax: 20,
                    snapping: true,
                    snappingInterval: 1,
                    name: 'Dog Color'
                  }
                ]
              }
            ]]></customOption>
          </customInteraction>          
          
        </div>
      </div>
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>

Here are some phony instructions...read this and look at the Table below:

Color
of Dogs		 Number
of Dogs
Mixed 9
White 2
Black 3
Other 6

Instructions: The chart below is an incorrect representation of the Dog Park data in the table to the left. Using your mouse or touch (iPad), click and drag each bar of the Dog Park data series up or down to correct the graph below.