TN8 Item Styleguide ::: Order Vertical

Order Interaction - Vertical Draggables

By default, we display the orderInteraction as horizontal draggables. Vertical draggables can be specified with dnd-vertical.

Also, you can also set the QTI orientation attribute equal to vertical. This has the same effect as setting the class attribute to dnd-vertical.

By default, the draggables' width will expand to 100% of the item width. However, you can use the "up" classes (one-up, two-up, three-up, four-up) to fine-tune the width and height of the draggables.

For example, the interaction below is presented using the following descriptor:
<orderInteraction class="dnd-vertical four-up" responseIdentifier="RESPONSE">

This has the effect of "squeezing" the width of each draggable down to roughly 25% of the item/column width.

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-vertical-1" title="Order - vertical" adaptive="false" timeDependent="false">
  <responseDeclaration identifier="RESPONSE" cardinality="ordered" baseType="identifier">
    <correctResponse>
      <value>DriverC</value>
      <value>DriverA</value>
      <value>DriverB</value>
    </correctResponse>
  </responseDeclaration>
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="float" />
  <itemBody>
    <orderInteraction responseIdentifier="RESPONSE" class="dnd-vertical four-up">
      <prompt>The following F1 drivers finished on the podium in
      the first ever Grand Prix of Bahrain. Can you rearrange them
      into the correct finishing order?</prompt>
      <simpleChoice identifier="DriverA">Rubens Barrichello</simpleChoice>
      <simpleChoice identifier="DriverB">Jenson Button</simpleChoice>
      <simpleChoice identifier="DriverC">Michael Schumacher</simpleChoice>
    </orderInteraction>
  </itemBody>
  <responseProcessing template="http://www.imsglobal.org/question/qti_v2p1/rptemplates/match_correct" />
</assessmentItem>