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