Order interaction

3.2.10 Order Interaction — the candidate’s task is to reorder the choices; the order they’re displayed in initially is significant.

Also see the attributes shared by every interaction on the overview page.

Example

The following F1 drivers finished on the podium in the first ever Grand Prix of Bahrain. Rearrange them into the correct finishing order.

Rubens Barrichello

Jenson Button

Michael Schumacher

<qti-order-interaction response-identifier="RESPONSE" orientation="horizontal">
  <qti-prompt>Rearrange them into the correct finishing order.</qti-prompt>
  <qti-simple-choice identifier="DriverA">Rubens Barrichello</qti-simple-choice>
  <qti-simple-choice identifier="DriverB">Jenson Button</qti-simple-choice>
  <qti-simple-choice identifier="DriverC">Michael Schumacher</qti-simple-choice>
</qti-order-interaction>

`qti-order-interaction`

Attribute	Type	Notes
`orientation`	`'horizontal' \| 'vertical'`	Controls the drop-list layout direction.
`min-associations`	`number`	Default `1` (from the shared drag/drop mixin — also used by match).
`max-associations`	`number`	Default `0` (unlimited).
`disable-animations`	`boolean`	Disables the FLIP reorder animation.
`auto-size-dropzones`	`boolean`	Auto-sizes drop zones to content.
`allowReorder`	`boolean` (JS property, no attribute mapping)	Default `true`. Set as a property (`el.allowReorder = false`) to disable in-place drag reordering.
`class`	`string`	`qti-choices-top` / `-bottom` / `-left` / `-right` layout variants.

The child element is the same qti-simple-choice used by Choice. shuffle="true" is honored, but not as a reactive property on this component — it’s applied once at XML-transform time by @qti-components/transformers, not at runtime.