TN8 Item Styleguide ::: Order Images

Order Interaction with Image draggables

It's easy to add images or objects to your Order Interaction draggables. Just add an <img> tag inside each of your <simpleChoice> tags where you want an image. Don't forget to add a non-empty alt attribute to your image tags or else your item will fail QTI validation.

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="order" title="Graphical Ordering" adaptive="false" timeDependent="false">
  <responseDeclaration identifier="RESPONSE" cardinality="ordered" baseType="identifier">
    <correctResponse>
      <value>horse</value>
      <value>cat</value>
      <value>brocolli</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="float" />
  <itemBody>
    <orderInteraction responseIdentifier="RESPONSE" >
      <prompt>Can you rearrange the following objects from fastest to slowest?</prompt>
      <simpleChoice identifier="cat">
        <img alt="cat" src="assets/images/cat1_632243754343906250.jpg"/>
      </simpleChoice>
      <simpleChoice identifier="horse">
        <img alt="horse" src="assets/images/horse_with_halter_trotting_md_wht_632197093313593750.gif" />
      </simpleChoice>
      <simpleChoice fixed="true" identifier="brocolli">
        <img alt="brocolli" src="assets/images/at_brocolli_thumb_632197102491875000.jpg" />
      </simpleChoice>
    </orderInteraction>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>