TN8 Item Styleguide ::: Hotspot - Complex Hotspot with Global Images

Hotspot Interaction - Complex Hotspot with Global Images

This is an example of a Complex Hotspot interaction that uses shared images for each hotspot. To save time and coding, you first define a globalMainShape callback function, and an alterMainShape function, then reference those these functions in your array of hotspot definitions.

...more description to come...

Get Responses:

[ Click Get Responses ]

Item XML

<?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-4" title="UK Airports - Complex Hotspot with Global Images - Single 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 (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 use predefined images in <em>globalMainShape</em> 
          and <em>globalAlterShape</em> for your hotspot shapes.
        </p>
        <p>
          The picture to the right illustrates four of the most popular orange juice destinations for air travelers arriving
          in the United Kingdom: London, Manchester, Edinburgh and Glasgow.
        </p>
        <p>
          Which one of the orange juice destinations is London?
          </p>
      </div>
      <div class="span6">
        
        <!-- we will use these images as a hotspot shapes.  note how they are hidden -->
        <object id="airportImage" class="hidden" data="images/airport.png" type="image/png" width="24" height="24" alt="airport" />
        <object id="orangeImage" class="hidden" data="images/orange.png" type="image/png" width="24" height="24" alt="orange" />
        
        <customInteraction class="tei-complexhotspot" responseIdentifier="RESPONSE">
          <object type="image/png" width="206" height="280" data="images/uk.png">UK Map</object>
          <hotspotChoice shape="rect" coords="65,103,89,127" identifier="A"/>
          <hotspotChoice shape="rect" coords="106,172,130,196" identifier="B"/>
          <hotspotChoice shape="rect" coords="138,223,162,247" identifier="C"/>
          <hotspotChoice shape="rect" coords="84,102,108,126" identifier="D"/>
          <customOption><![CDATA[
            {
              identifier : 'RESPONSE',
              cardinality : 'single',
              maxChoices : 1,
              globalMainShape : function(paper,attr) {
                var _imgSrc = $('#orangeImage').attr('src');
                var _img = paper.image(_imgSrc, attr.left, attr.top, attr.width, attr.height);
                return [_img];
              },
              globalAlterShape : function(paper,attr) {
                var _imgSrc = $('#airportImage').attr('src');
                var _img = paper.image(_imgSrc, attr.left, attr.top, attr.width, attr.height);
                return [_img];
              },
              hotspots:[
                {
                  identifier: 'A',
                  mainShape:  'globalMainShape',
                  alterShape: 'globalAlterShape',
                  preSelected: false
                },
                {
                  identifier: 'B',
                  mainShape:  'globalMainShape',
                  alterShape: 'globalAlterShape',
                  preSelected: false
                },
                {
                  identifier: 'C',
                  mainShape:  'globalMainShape',
                  alterShape: 'globalAlterShape',
                  preSelected: false
                },
                {
                  identifier: 'D',
                  mainShape:  'globalMainShape',
                  alterShape: 'globalAlterShape',
                  preSelected: false
                }
              ]
            }
          ]]></customOption>
        </customInteraction>
        
      </div>
    </div>	
  </itemBody>
  <responseProcessing
    template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct"/>
</assessmentItem>