TN8 Item Styleguide

Hotspot Interaction - Single Cardinality

Presentation Options

As indicated by the single cardinality designation, hotspotInteraction's of this cardinality permit the user to select only one of the hotspots available, similar to the way in which choiceInteraction's with single cardinality function.

Presently, three different <hotspotChoice> shapes are supported: circle, rect, and poly. You can mix and match different hotspotChoice shapes in your hotspotInteraction.

There are several options for specifying the outline/fill styles of the hotspots. We call these hotspot styles "themes", and there are presently four themes from which to choose. Typically, you'll want to choose a theme that provides good contrast against the background colors in your image background. The default theme (what is rendered when you specify no theme), has the following characteristics:

default theme-bluefill theme-bluefillsolid theme-yellow theme-orange theme-invisible
strokeColor :
fillColor :

strokeWidth :
selectedStrokeWidth :

fillOpacity :
selectedOpacity :
unselectedOpacity :
blue
transparent

2
4

0.00
1.00
0.50
blue
transparent

2
4

0.25
1.00
0.50
blue
strong blue

2
4

1.00
1.00
0.50
yellow
transparent

2
4

0.00
1.00
0.50
orange
transparent

2
4

0.00
1.00
0.50
blue
transparent

2
4

0.00
1.00
0.00

In addition to these baseline themes, there is a class called subtle-glows. This class is added to the designated theme (including the default theme, if used):

<hotspotInteraction ... class="theme-bluefill subtle-glows" ... />

If you add "subtle-glows" to the class on the hotspot interaction, the focus glow on a hotspot will not be the rather large glow normally rendered. Instead, "subtle-glows" makes the focus glow inherit the selected color of the theme; and causes the focus glow to become significantly smaller (and more subtle) than the default glow.

Ignore Answer

If a hotspot interaction is inside a composite item there is an option to have the 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: <hotspotInteraction maxChoices="1" class="theme-bluefill ignore-answered" responseIdentifier="RESPONSE">

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:xsi="http://www.w3.org/2001/XMLSchema-instance"
adaptive="false" identifier="COMP-hotspot" timeDependent="false" title="UK Airports (Multiple Cardinality)"
xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd">
  <responseDeclaration baseType="identifier" cardinality="single" identifier="RESPONSE">
    <correctResponse>
      <value>C</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE" />
  <itemBody>
    <div class="row">
      <div class="span6">
        <h4>Hotspot (Single Cardinality)</h4>
        <hr />
        <p>This item demonstrates a <em>hotspotInteraction</em> with single cardinality. You 
        can choose only one hotspot. This item also demonstrates how an item author 
        can use one of the special hotspot classes available: "theme-bluefill". </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. Please 
        <span class="underline">choose London</span>.</p>
      </div>
      <div class="span6">
        <hotspotInteraction maxChoices="1" class="theme-bluefill" responseIdentifier="RESPONSE">
          <object data="assets/uk.png" height="280" type="image/png" width="206">UK Map</object>
          <hotspotChoice coords="77,115,10" identifier="A" shape="circle" />
          <hotspotChoice coords="118,184,10" identifier="B" shape="circle" />
          <hotspotChoice coords="150,235,10" identifier="C" shape="circle" />
          <hotspotChoice coords="96,114,10" identifier="D" shape="circle" />
        </hotspotInteraction>
      </div>
    </div>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>

Hotspot (Single Cardinality)

This item demonstrates a hotspotInteraction with single cardinality. You can choose only one hotspot. This item also demonstrates how an item author can use one of the special hotspot classes available: "theme-bluefill".

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.

Please choose London.