TN8 Item Styleguide ::: Hotspot - Multiple Cardinality

Hotspot Interaction - Multiple Cardinality

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

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

One added hotspotInteraction option is supported for multiple cardinality interactions: maxChoices. For example, if you have four hotspotChoice's, but you set maxChoices="2", then the student will receive a warning message upon selecting a third choice.

There are several options for specifying the outline/fill styles of the hotspots. We call these hotspot styles "themes", and there are presently several 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 is what is rendered when you specify no theme.

	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.

Minimum Choices

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.

<hotspotInteraction minChoices="2" class="theme-bluefill" responseIdentifier="RESPONSE">

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="multiple" identifier="RESPONSE">
    <correctResponse>
      <value>A</value>
      <value>B</value>
      <value>D</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE" />
  <itemBody>
    <div class="row">
      <div class="span6">
        <h4>Hotspot (Multiple Cardinality)</h4>
        <hr />
        <p>This item demonstrates a <em>hotspotInteraction</em> with multiple cardinality. You 
        can choose any number of hotspots. 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 all of the cities North of London</span>.</p>
      </div>
      <div class="span6">
        <hotspotInteraction maxChoices="0" 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>