By default, a vivid blue glow is applied to each focused or selected hotspot. However, you can specify a more "subtle" glow - similar to the regular
hotspot interaction - by applying the class subtle-glows to the <customInteraction>.
Furthermore, you can override the default blue glow color by specifying a glowColor property in the <customOption> configuration in the item XML, followed by a color hex code.
Below is an example that will set the glowColor to #FF0000 (red):
<customInteraction class="tei-complexhotspot subtle-glows" responseIdentifier="RESPONSE">
<customOption><![CDATA[
{
identifier : 'RESPONSE',
cardinality : 'multiple',
maxChoices : 2,
glowColor: '#FF0000',
...
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 - Single Cardinality" adaptive="false" timeDependent="false">
<responseDeclaration identifier="RESPONSE" cardinality="single" 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 (Single 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 : 'single',
maxChoices : 1,
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?