For multiple cardinality items, maxChoices is ignored when set to a value less than two (i.e., 0, 1). See Single Cardinality choice interactions for interactions where you want only one possible choice. If this is set to a value of 0 (or 1), the maxChoices is interpreted to be infinite; the student could select all of the items as their answer if they so desire. If set to a value greater than 2, and less than the number of answers offered, then the student is limited to that number of selections. If they attempt to make an additional choice, the system will let them know that they have reached their limit.
There is now the option to customize the maxChoicesMessage that appears when too many choices have been selected. Below is an
example message that will show
"Hello World"
<[
{
identifier : 'RESPONSE',
cardinality : 'multiple',
maxChoices : 2,
maxChoicesMessage: "Hello World"
} ]>
There is now an option for multiple cardinality hotspot items to set the minimum amount of choices (minChoices) the student must make before the question is considered 'Answered', and until the minChoices have been met the item status will remain 'Not Answered'.
If minChoices is undefined, then the default is set to 1 and the item is considered answered if one choice exists.
If minChoices is specified as 0, then the item is also considered answered if only one choice exists.
If minChoices is any number greater than 1, the student must make that number of choices before the item is considered answered.
If a complex hotspot interaction is inside a composite item there is an option to have the complex hotspot interaction be ignored when the answered status of the item is being determined.
To do this, add the class ignore-answered to the interactions class attribute.
Example: <customInteraction class="tei-complexhotspot ignore-answered" responseIdentifier="RESPONSE">
| 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="complex-hotspot-2" title="UK Airports - Complex Hotspot - Multiple Cardinality" adaptive="false" timeDependent="false">
<responseDeclaration identifier="RESPONSE" cardinality="multiple" baseType="identifier">
<correctResponse>
<value>C</value>
</correctResponse>
</responseDeclaration>
<outcomeDeclaration identifier="SCORE" cardinality="single" baseType="float"/>
<itemBody>
<div class="row">
<div class="span6">
<h4>Complex Hotspot (Multiple Cardinality)</h4>
<hr/>
<p>
This item shows how you can use Complex Hotspot to implement a wide variety of hotspot
shapes, with the ability to draw a different hotspot shape for every hotspot. Also demonstrated
is the use of the "preSelected" (true) attribute for the Edinburgh hotspot.
</p>
<p>
The picture to the right illustrates four of the most popular destinations for air travelers arriving
in the United Kingdom: London, Manchester, Edinburgh and Glasgow.
</p>
<p>
Click on all the hotspots to view the different behaviors. Which one of the circles is London?
</p>
</div>
<div class="span6">
<customInteraction class="tei-complexhotspot" responseIdentifier="RESPONSE">
<object type="image/png" width="206" height="280" data="images/uk.png">UK Map</object>
<hotspotChoice shape="circle" coords="77,115,10" identifier="A"/>
<hotspotChoice shape="circle" coords="118,184,10" identifier="B"/>
<hotspotChoice shape="circle" coords="150,235,10" identifier="C"/>
<hotspotChoice shape="circle" coords="96,114,10" identifier="D"/>
<customOption><![CDATA[
{
identifier : 'RESPONSE',
cardinality : 'multiple',
maxChoices : 0,
hotspots:[
{
identifier: 'A',
mainShape: function(paper,attr) {
var a = {
'fill': '#FFFFFF',
'fill-opacity': '0',
'stroke': '#000000',
'stroke-width': 1,
'opacity': '1'
};
var c = paper.circle( attr.x, attr.y, attr.r ).attr(a);
return [c];
},
alterShape: function(paper,attr) {
var a = {
'fill': '#FD0000',
'fill-opacity': '1',
'stroke': '#FD0000',
'stroke-width': 0,
'opacity': '1'
};
var c = paper.circle( attr.x, attr.y, attr.r ).attr(a);
a.fill = '#FFFFFF';
a.stroke = '#FFFFFF';
var c1 = paper.circle( attr.x, attr.y, attr.r-5 ).attr(a);
return [c,c1];
},
preSelected: false
},
{
identifier: 'B',
mainShape: function(paper,attr) {
var a = {
'fill': '#FFFFFF',
'fill-opacity': '0',
'stroke': '#000000',
'stroke-width': 1,
'opacity': '1'
};
var c = paper.circle( attr.x, attr.y, attr.r ).attr(a);
return [c];
},
alterShape: function(paper,attr) {
var a = {
'fill': '#FD0000',
'fill-opacity': '1',
'stroke': '#FD0000',
'stroke-width': 0,
'opacity': '1'
};
var l = parseInt(attr.x-attr.r);
var t = parseInt(attr.y-attr.r);
var w = parseInt(attr.x) + parseInt(attr.r) - l;
var h = parseInt(attr.y) + parseInt(attr.r) - t;
var r = paper.rect( l, t, w, h ).attr(a);
var b = {
'fill': '#FFFFFF',
'fill-opacity': '0',
'stroke': '#FFFFFF',
'stroke-width': 2,
'opacity': '1'
};
var line1 = paper.path( ["M", l+3, t+3 , "L", l+w-3, t+h-3 ] ).attr(b);
var line2 = paper.path( ["M", l+w-3, t+3 , "L", l+3, t+h-3 ] ).attr(b);
return [r,line1,line2];
},
preSelected: false
},
{
identifier: 'C',
mainShape: function(paper,attr) {
var a = {
'fill': '#FFFFFF',
'fill-opacity': '0',
'stroke': '#000000',
'stroke-width': 1,
'opacity': '1'
};
var c = paper.circle( attr.x, attr.y, attr.r ).attr(a);
return [c];
},
alterShape: function(paper,attr) {
var a = {
'fill': '#FD0000',
'fill-opacity': '1',
'stroke': '#FD0000',
'stroke-width': 0,
'opacity': '1'
};
var c = paper.circle( attr.x, attr.y, attr.r ).attr(a);
a.stroke = '#FFFFFF';
a['stroke-width'] = 2;
var txt = paper.text( attr.x, attr.y, 'X' ).attr(a);
return [c];
},
preSelected: false
},
{
identifier: 'D',
mainShape: function(paper,attr) {
var a = {
'fill': '#FD0000',
'fill-opacity': '1',
'stroke': '#000000',
'stroke-width': 1,
'opacity': '1'
};
var c = paper.circle( attr.x, attr.y, attr.r ).attr(a);
return [c];
},
alterShape: function(paper,attr) {
var a = {
'fill': '#468847',
'fill-opacity': '1',
'stroke': '#FD0000',
'stroke-width': 0,
'opacity': '1'
};
var c = paper.circle( attr.x, attr.y, attr.r ).attr(a);
return [c];
},
preSelected: true
}
]
}
]]></customOption>
</customInteraction>
</div>
</div>
</itemBody>
<responseProcessing
template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct"/>
</assessmentItem>
This item shows how you can use Complex Hotspot to implement a wide variety of hotspot shapes, with the ability to draw a different hotspot shape for every hotspot. Also demonstrated is the use of the "preSelected" (true) attribute for the Edinburgh hotspot.
The picture to the right illustrates four of the most popular destinations for air travelers arriving in the United Kingdom: London, Manchester, Edinburgh and Glasgow.
Click on all the hotspots to view the different behaviors. Which one of the circles is London?