Horizontal Bar Chart 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 Horizontal 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.
In addition to setting the <customInteraction>'s class to class="tei-graphing" you MUST initialize the chart object to the chart type, e.g., type: 'bar'. Also, don't forget to 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" />.
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: 'bar',
animation: false
}
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 } }
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 ] |
<?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 right or left to
correct the graph below.
</p>
<div id="RESPONSE"></div>
<customInteraction class="tei-graphing" responseIdentifier="RESPONSE">
<customOption><![CDATA[
{
chart: {
renderTo: 'RESPONSE',
type: 'bar',
animation: false,
plotShadow: true,
plotBorderWidth: 1
},
title: {
text: 'Dog Park Data'
},
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: 'ew-resize',
point: {
events: {
}
},
stickyTracking: false
},
column: {
pointPadding: 0.2,
borderWidth: 1.0
}
},
tooltip: {
formatter: function() {
return 'Dog Color: '+this.x+'<br/>Number of Dogs: '+Highcharts.numberFormat(this.y,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 right or left to correct the graph below.