CTATJumble

CTATJumble

A CTAT component that has users order a set of items. Typical uses include arranging words to make a valid sentence or ordering a set of number 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.

Code Example

<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>

Running Example

CTATJumble Example

Attributes and Settings

• 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. Determines if grading feedback is shown on the component. This attribute is ignored if data-ctat-tutor="false".
• 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 in the html code. Each item must have a unique id attribute.

Action-Input

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

Action	Input	Notes
SetOrder	list;of;ids (String)	Set the order of the listed items in the listed order

Style

.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;
}

Mass Production

Example for mass producing CTATTextField items in a CTATJumble:

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