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" />.
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
}
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"?>
<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-multiple" title="Chart - bar - two series" adaptive="false" timeDependent="false">
<responseDeclaration cardinality="record" identifier="RESPONSE">
<correctResponse>
<value fieldIdentifier="series1_points" baseType="string">0 100,1 120,2 140</value>
<value fieldIdentifier="series2_points" baseType="string">0 100,1 150,2 150</value>
</correctResponse>
</responseDeclaration>
<outcomeDeclaration identifier="SCORE" cardinality="single" baseType="integer" />
<itemBody>
<div class="row">
<div class="span6">
<p>Larry and Marco tracked rainfall in each of their home
towns in the first months of the year.</p>
<p>Larry lives in Spring Hill, which received 100 cm of
rain in the first month of the year. In February, Spring
Hill experienced a 20% increase in rainfall over the prior
month. March rainfall was 30 cm greater than the average
rainfall across the prior two months.</p>
<p>Marco recorded rainfall in Sweetwater, which had the
same amount of rainfall in January as Spring Hill. The
following two months both had 150 cm of rain.</p>
<p>Drag the bars on the graph up and down to show how much
rain Spring Hill and Sweetwater received in January,
February, and March.</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',
plotShadow: true,
plotBorderWidth: 1,
animation: false
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
title: {
text: 'Months of the Year'
},
categories: [
'January',
'February',
'March'
]
},
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
title: {
text: 'Rainfall (cm)'
}
},
legend: {
backgroundColor: '#FFFFFF',
verticalAlign: 'bottom',
shadow: true
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name + '</b><br/>' + this.x + ': ' + Highcharts.numberFormat(this.y, 0) + ' cm';
}
},
plotOptions: {
series: {
cursor: 'ns-resize',
events: {
legendItemClick: function(event) {
return false;
}
},
point: {
events: {
}
}
},
stickyTracking: false
},
column: {
pointPadding: 0.2,
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
},
series: [
{
name: 'Spring Hill',
draggable: true,
dragMin: 0,
dragMax: 190,
data: [20, 20, 20],
dataQtiIsResponse: true,
snapping: true,
snappingInterval: 10
},
{
name: 'Sweetwater',
draggable: true,
dragMin: 0,
dragMax: 190,
data: [20, 20, 20],
dataQtiIsResponse: true,
snapping: true,
snappingInterval: 10
}
]
}
]]></customOption>
</customInteraction>
</div>
</div>
</div>
</itemBody>
<responseProcessing>
<responseCondition>
<responseIf>
<match>
<variable identifier="RESPONSE"/>
<correct identifier="RESPONSE"/>
</match>
<setOutcomeValue identifier="SCORE">
<baseValue baseType="float">1</baseValue>
</setOutcomeValue>
</responseIf>
</responseCondition>
</responseProcessing>
</assessmentItem>
Larry and Marco tracked rainfall in each of their home towns in the first months of the year.
Larry lives in Spring Hill, which received 100 cm of rain in the first month of the year. In February, Spring Hill experienced a 20% increase in rainfall over the prior month. March rainfall was 30 cm greater than the average rainfall across the prior two months.
Marco recorded rainfall in Sweetwater, which had the same amount of rainfall in January as Spring Hill. The following two months both had 150 cm of rain.
Drag the bars on the graph up and down to show how much rain Spring Hill and Sweetwater received in January, February, and March.