TN8 Item Styleguide

Shape Transformation - Example 1

Presentation Options

The Shape Transformation interaction is an interaction which permits a user to drag and drop a collection of polygon shapes onto a coordinate plane.

Shape Transformation interactions make it easy for Item Authors to create collections of shapes with different orientations than the original polygon shape. First, define the cartesian coordinates of the points of a polygon, then define how many rotated shape options you want to provide to the user.

The customOption properties of a Shape Transformation configuration have the following potential values:
glowColor any valid HTML (RGB) color
shapeColor any valid HTML (RGB) color
poly any set of points -- X and Y coordinates in parenthesis
graphSize any positive whole number (maximum absolute value of X and Y on the graph)
height any positive whole number (sets graph size as measured in pixels)
alignment left, center, or right 


<!-- This is where we insert the transformation div -->
<div id="myShapeTransformation"></div>

<customInteraction class="tei-shapetransformation" responseIdentifier="RESPONSE">
  <customOption><![CDATA[
  {
    div:'myShapeTransformation',
    glowColor:'#1F1426',
    shapeColor: '#049CDB',
    poly: "(-3,5),(-1,3),(-4,1),(-5,4)",
    transformationChoice1: 5,
    transformationChoice2: 6,
    transformationChoice3: 7,
    transformationChoice4: 8,
    graphSize: 10,
    height: 500,
    alignment: 'center'
  }
  ]]></customOption>
</customInteraction>

To ensure the correct scoring of the shape transformation interaction, the response declaration cardinality must be specified as "ordered." As example:
  </responseDeclaration baseType="point" cardinality="ordered" identifier="RESPONSE">
    </correctResponse>
      </value>5 -3</value>
      </value>3 -1</value>
      </value>1 -4</value>
      </value>4 -5</value>
    </correctResponse>
  </responseDeclaration>
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" 
  xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd"
  adaptive="false" identifier="customInteraction-shapetransform-1" timeDependent="false" 
  title="Shape Transform - Example 1">
  <responseDeclaration baseType="point" cardinality="ordered" identifier="RESPONSE">
    <correctResponse>
      <value>5 -3</value>
      <value>3 -1</value>
      <value>1 -4</value>
      <value>4 -5</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration baseType="float" cardinality="single" identifier="SCORE"/>
  <itemBody>
    <p>
      Quadrilateral ABCD is reflected across the line <em>x</em> = <em>y</em>. Drag 
      one of the shapes on to the coordinate grid in the correct position to 
      represent the transformed quadrilateral.
    </p>

    <!-- This is where we insert the transformation div -->
    <div id="myShapeTransformation"></div>

    <customInteraction class="tei-shapetransformation" responseIdentifier="RESPONSE">
      <customOption><![CDATA[
        {
          div:'myShapeTransformation',
          glowColor:'#1F1426',
          shapeColor: '#049CDB',
          poly: "(-3,5),(-1,3),(-4,1),(-5,4)",
          transformationChoice1: 5,
          transformationChoice2: 6,
          transformationChoice3: 7,
          transformationChoice4: 8,
          graphSize: 10,
          height: 500,
          alignment: 'center'
        }
      ]]></customOption>
    </customInteraction>

    <br />
  </itemBody>
  <responseProcessing
    template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct"/>
</assessmentItem>

Quadrilateral ABCD is reflected across the line x = y. Drag one of the shapes on to the coordinate grid in the correct position to represent the transformed quadrilateral.