A CTAT component that allows users to order a set of items. Typical uses include arranging words to make a valid sentence or ordering a set of numbers in ascending order. To rearrange items in the jumble, users click and hold on an item, move it over another item, and release. This will swap the position of the two items.

A CTATJumble can contain CTAT components, non-CTAT components, or both; when CTAT components are used, they should be untutored and configured so as to be non-interactive. Just about any non-interactive HTML entity can be used as a child of the CTATJumble. In the first example below, jumble1a, jumble1b, and jumble1c are the children that users can drag within the component to reorder them. For tutoring purposes, it is best to set the Jumble as untutored and use it with a CTATSubmitButton; otherwise, the order of items is evaluated each time the student moves any item.

Example using non-CTAT components.

<div id="jumble1" class="CTATJumble" data-ctat-tutor="false">
  <!-- insert non-interactive entities here, div's work best. -->
  <div id="jumble1b">B</div>
  <div id="jumble1a">A</div>
  <div id="jumble1c">C</div>
</div>
<div id="jumble1_submit" class="CTATSubmitButton"
     data-ctat-target="jumble1">Submit Jumble</div>

Example using CTATTextField components.

<div id="jumble2" class="CTATJumble" data-ctat-tutor="false">
  <div id="jumble2-word1" class="CTATTextField" data-ctat-tutor="false">is</div>
  <div id="jumble2-word2" class="CTATTextField" data-ctat-tutor="false">great</div>
  <div id="jumble2-word3" class="CTATTextField" data-ctat-tutor="false">CTAT</div>
</div>
<div id="jumble2_submit" class="CTATSubmitButton"
     data-ctat-target="jumble2">Submit Jumble</div>

CTATJumble Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATJumble and no other CTAT<component> classes.
• data-ctat-enabled: true or false. Default is true. Controls if the component will accept student interaction.
• data-ctat-tutor: true or false. Default is true. Controls if direct actions on the component trigger grading.
• data-ctat-show-feedback: true or false. Default is true unless data-ctat-tutor="false". Determines if grading feedback is shown on the component.
• data-ctat-show-hint-highlight: true or false. Default is true. Determines if hint highlighting is shown on the component.
• data-ctat-disable-on-correct: true or false. Default is true. Determines if the component becomes locked when it is graded as correct.

To add children to a CTATJumble, simply add them as child entities. Each item must have a unique id attribute.

In addition to the common Actions listed in Often Used TPAs this component supports the following action:

.CTATJumble { /* general jumble component styling, (eg) the bounding box */
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	display: flex;
}
.CTATJumble--item { /* for each individual item in the jumble */
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	padding: 0.5ch;
	cursor: default;
}
.CTATJumble--item[draggable="true"] { /* for items that are being dragged */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	cursor: move;
}
.CTATJumble--item--over { /* for items that are under the dragged item and
	would be moved by dropping the item */
	border: 1px dashed blue;
}

Example for mass producing CTATTextField items in a CTATJumble:

<div id="jumble1" class="CTATJumble" data-ctat-tutor="false">
  <div id="jumble1a" class="CTATTextField" data-ctat-tutor="false">%(jumble1-item1)%</div>
  <div id="jumble1b" class="CTATTextField" data-ctat-tutor="false">%(jumble1-item2)%</div>
  <div id="jumble1c" class="CTATTextField" data-ctat-tutor="false">%(jumble1-item3)%</div>
</div>