Building a DragNDrop tutor interface - CMUCTAT/CTAT GitHub Wiki

Table of Contents

  1. Introduction
  2. Add the DragNDrop components
  3. Add a submit button
  4. Create the items to be dragged
  5. Finish and test the interface

Introduction

In this tutorial, you will learn how to create a student interface for sorting items using the CTATDragNDrop component. A drag-and-drop component can be either tutored or untutored. If the component is set to be tutored, items dropped into it by the student are evaluated as correct or incorrect immediately. This might be desirable if the correct step requires that only one item be moved to the destination component, but if the correct step requires moving more than one item, you most likely want to use untutored drag-and-drop components with a Submit button to evaluate the items it contains all together.

This tutor requires moving more than one item, so you will create an interface that uses untutored drag-and-drop components with a Submit button similar to the one shown below. The tutored part of the interface will contain two drag-and-drop components, one submit button, and three text fields. These text fields will be the draggable items. The interface will also contain a hint widget and text fields for labels and instructions for the student.

DragNDrop

Figure: DragNDrop tutor interface for sorting odd numbers

Add the DragNDrop components

In a new interface in the editor, add the first drag-and-drop component. This drag-and-drop will be the starting container for items to be sorted. In the the Properties panel:

  1. Set the ID attribute to "source",

  2. Uncheck the Tutored check box, and

  3. Set the Group Name to "group1".

    DragNDrop attributes

    Figure: DragNDrop attributes for source drag-and-drop

Add a second drag-and-drop component. This will be the destination container for items to be moved. In the Properties panel:

  1. Set the ID attribute to "destination",
  2. Uncheck the Tutored check box, and
  3. Set the Group Name to "group1".

Note

Drag-and-drop components must have the same group name in order for items to be dragged from one to the other.

Add a submit button

Add a Submit button to the interface below the second drag-and-drop. This button will be associated with the second drag-and-drop so that evaluating the contents of the second drag-and-drop only occurs when the student clicks the submit button. In the Properties panel:

  1. Set the ID attribute to "submit",
  2. Set the Label to "Check".
  3. Set the Target ID to "destination".

The Target ID must be set to the drag-and-drop component into which items will be dropped. There can be more than two components controlled by the same Submit button. For example, if you added a third drag-and-drop to be the destination for even numbers, you would set the Target ID to a comma-separated list of target IDs, e.g., "destEven, destOdd".

Create the items to be dragged

Add three Text Field components to the interface. In the Properties panel for each Text Field:

  1. Set the ID attribute to "item1", "item2", and "item3" respectively, and
  2. Uncheck the Tutored check box.

    Note: CTAT components contained in a drag-and-drop should always be untutored.

Add the three text fields to the first drag-and-drop:

  1. Double-click on each text field to set its text to "one", "two", and "three" respectively, and size each to fit the text.
  2. Drag each text field into the first drag-and-drop.

The text fields are now draggable items contained in the "source" component.

Finish and test the interface

Finish the interface by adding a Hint Widget and Text Fields to be used as the problem statement and the label above the destination drag-and-drop as shown in the example interface above. Now you can launch your tutor interface to connect to the authoring tools and create a behavior graph.

Back to top