<?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" 
  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd"
  adaptive="false" identifier="complex-hotspot-3" timeDependent="false" 
  title="UK Airports - Complex Hotspot with Images - Single Cardinality">
  <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>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 for your hotspot shapes.
        </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>
          Which one of the circles is London?
        </p>
      </div>
      <div class="span6">

        <!-- we will use these images as a hotspot shapes.  note how they are hidden -->
        <object class="hidden" data="images/airport.png" id="airportImage" type="image/png" height="24" width="24" alt="airport"/>
        <object class="hidden" data="images/orange.png" id="orangeImage" type="image/png" height="24" width="24" alt="orange"/>
        <object class="hidden" data="images/pear.png" id="pearImage" type="image/png" height="24" width="24" alt="pear"/>

        <customInteraction class="tei-complexhotspot" responseIdentifier="RESPONSE">
          <object data="images/uk.png" height="280" type="image/png" width="206">UK Map</object>
          <hotspotChoice coords="77,115,12" identifier="A" shape="circle"/>
          <hotspotChoice coords="118,184,12" identifier="B" shape="circle"/>
          <hotspotChoice coords="150,235,12" identifier="C" shape="circle"/>
          <hotspotChoice coords="96,114,12" identifier="D" shape="circle"/>
          <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 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 _imgSrc = $("#orangeImage").attr('src');
                    var _img = paper.image(_imgSrc, l, t, w, h);
                    return [_img];
                  },
                  alterShape: function(paper,attr) {
                    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 _imgSrc = $("#pearImage").attr('src');
                    var _img = paper.image(_imgSrc, l, t, w, h);
                    return [_img];
                  },
                  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 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 _imgSrc = $("#airportImage").attr('src');
                    var _img = paper.image(_imgSrc, l, t, w, h);
                    return [_img];
                  },
                  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>