Creating an example tracing tutor

jsewall edited this page Jun 17, 2018 · 10 revisions
Clone this wiki locally

Creating an example-tracing tutor for fraction addition

Table of Contents

  1. Introduction
  2. Run the student interface and CTAT
  3. Create a start state
  4. Demonstrate Solutions
  5. Annotate solution steps
    1. Incorrect steps
    2. Hint messages
    3. Skill labels
    4. Save your changes
  6. Test your tutor


  • CTAT 4.2+
  • A completed HTML interface for fraction addition:
    • If you have built your own Fraction Addition interface by following the steps in Building an HTML student interface for fraction addition, you can use your own interface,


    • If you have CTAT 4.3 or later installed, copy the contents of the HTML FractionAddition folder in the Cognitive Tutor Authoring Tools\Projects\ directory of your installation to CTAT\MyFractionAddition,


    • If you have installed CTAT 4.2.x, an example version of a Fraction Addition interface is available for download here. Click on the Raw button, then save the browser page to a package folder in your CTAT Workspace (e.g., <ctatworkspace>\MyFractionAddition\HTML\FractionAddition.html).


In this tutorial, you will use a completed student interface and CTAT's Behavior Recorder to author an Example-tracing Tutor for the fraction addition problem 1/4 + 1/6. You will author the tutor by demonstration, without programming.

An Example-tracing Tutor is primarily composed of a student interface and a Behavior Recorder graph (BRD file) that stores data on the current problem. Multiple BRDs (problems) are often used with a single student interface.

When authoring an Example-tracing Tutor, both the student interface and CTAT must be running, as they communicate with one another during the authoring process.

Run the student interface and CTAT

The first step in authoring an Example-tracing tutor is to open both the student interface and CTAT.

To open an HTML student interface for fraction addition:

  1. Launch CTAT for HTML and Flash.
  2. Select File > Launch HTML Interface. Locate and open the fraction addition interface HTML file; the interface will open in your browser.

    Tip: If you created your interface in the CTAT HTML Editor, open the .html file, not the .ed.html file.

  3. Position CTAT and the HTML fraction addition interface so that both windows are visible.

You must open the HTML student interface using the Launch HTML Interface menu option in the tools. This will enable the HTML student interface to communicate with CTAT.

Launching both the HTML student interface and CTAT

Figure: Positioning the HTML student interface for fraction addition and 'CTAT for HTML and Flash' side-by-side.

Create a start state

Once your interface is running and connected to CTAT, the next step is to create the initial problem state, or "start state". In your student interface, enter the two fractions 1/4 and 1/6 in the Given Fractions column.

To make this state the start state for the given problem, select Graph > Create Start State from the menu in CTAT. When prompted for a start state name, enter 1-4+1-6, and click OK. You should now see your start state in the Graph window as a new node titled "1-4+1-6".

Graph start state

Start state node in the Graph window.


When you create a start state node in the graph, any values you entered in the interface are saved in the graph. The start state node represents the state of the interface at the time the node was created (in this case, the initial problem state for solving 1/4 plus 1/6).

Demonstrate Solutions

After creating a start state, demonstrate correct and alternate answers, as well as common errors, that students might make for this problem. CTAT's behavior recorder will record the demonstrated behavior in the form of a "behavior graph".

The Author Mode in CTAT switches to Demonstrate after you create your start state (see below).

Figure: Author Mode is set to Demonstrate.

Now you can demonstrate a correct solution to the problem. The behavior recorder records each demonstrated step as a 'link'—the line connecting two nodes—in its graph. In the graph, actions are represented by links, while states are represented by nodes.

Figure: One solution path demonstrated.

You can demonstrate an alternative solution path—one which is correct but not preferred—by clicking on the start state node in the behavior graph, and demonstrating the solution steps for that path. For 1/4 +1/6, you might demonstrate a solution where the student multiplies the denominators to get a common denominator of 24. This solution is valid, but not preferred, as '24' is not the least common denominator. Preferred paths in the graph show thick lines for edges, while unpreferred paths show a thin line.

Figure: An alternate solution path demonstrated.

If you forget to include a solution step, click on the node that precedes that step (you'll see the student interface update to reflect the state of that node), then demonstrate your step.


It is good practice to include a "Done" action at the end of each path in your behavior graph for two reasons: first, it is part of a cognitive skill to know when a problem is solved; second, when you create a curriculum consisting of a series of problems, the "Done" action, when accepted by the tutor, is a signal to present the next problem.

To demonstrate a "Done" action, click on the last state of a solution path in the graph to make it the current state. Then click the "Done" button in the student interface.

Figure: "Done" step demonstrated at the end of a solution path.

Annotate solution steps

Incorrect steps

Now you will demonstrate an incorrect step in the problem, so that the tutor will be able to recognize this error when it is performed by students. In general, any student input that is not recognized by the tutor is marked as incorrect; but by defining incorrect steps in the graph, the tutor will be able to provide a customized error feedback message for the specified input.

For the current simple problem, we will focus on the error (presumed to be common by students who have not yet mastered fraction addition) of adding the two denominators of dissimilar fractions without converting them. For the current problem, they would enter 10 as either of the converted denominators, or the answer denominator, rather than a common denominator such as 12 or 24.

In the graph, first click on the start state; this will reset the interface to the start state. Next, type 10 in either of the fields for the denominator of the converted fraction. You should see a new link and state appear in the Behavior Graph.

By default, the behavior recorder assumes that any demonstrated solution step represents a correct step. When demonstrating incorrect actions, you therefore need to mark them explicitly as incorrect behavior. So right-click the label on the link that was created for an input of 10 and select Change Action Type > Incorrect Action (Bug).

Figure: Setting an incorrect action.

At the prompt to edit the error message, enter an error message that the student will see when they perform this action.

Figure: Setting a message for an incorrect action.

The label on the link changes from green to red to indicate that it is an incorrect step. Note that when a student performs an incorrect action, the student will not advance past the incorrect link; the parent state (in this case, the state "1-4+1-6") remains the current state, allowing the student to enter correct input.

Figure: Incorrect link.

You can repeat this process for any incorrect action.

Hint messages

You can attach hints to the links that represent correct actions. These hints will be displayed when the student requests a hint. Typically, multiple levels of hints are available for each action.

To define a hint message, click on a green action label displayed on an edge. From the pop-up context menu, select Edit Hint and Success Messages. Here you can define hints that will be shown to the student when they request a hint by clicking on the Hint button.

Figure: Editing hints for a link


You can not "demonstrate" a hint by clicking on the Hint button.

Skill labels

In this step you will add skill names (also known as production rule names or knowledge component labels) to the links in the behavior graph. The skill names correspond to the skills the student needs to perform in order to complete the problem. Later, if you create production rules for your tutor, you will create production rules that correspond to each skill name. When creating an Example-Tracing tutor, you do not need production rules, but the skill names will also be used for knowledge tracing. For more on skills, see Skill Attributes and Behavior.

To view and edit skills, you need to turn on the skill name display. This allows you to view the skill labels for each link. To do so, select View > Show Skill Labels from the CTAT menu. You should see some labels with "unnamed" appear on the graph. These labels are the skill names.

To edit a skill name for a step, right-click the skill name label for that link and select Edit Skill Name. A dialog box titled "Edit skill name 'unnamed'" will appear.

Figure: The skill context menu

In the Edit Skill Name dialog, enter a name for your skill and skill set. The "Skill set" field refers to the category of the skill, such as "fraction-addition". If your interface includes a CTAT Skill Window, you can also enter a label that will be displayed to the student; otherwise the skill name will be displayed.

Figure: Setting a skill name, set name, and label for the skill window.

Subsequent skill name dialogs will allow you to choose from a list of existing skills that you have defined.

Save your changes

Select File > Save Graph (or use the keyboard shortcut Ctrl-S or Cmd-S) to save the behavior graph to a directory in your CTAT Workspace (e.g., <ctatworkspace>\MyFractionAddition\FinalBRDs\).

Test your tutor

You can now test the tutor you have created. Set CTAT's Author Mode to Test Tutor.

Figure: Setting Author Mode to Test Tutor.

To test your tutor from the beginning, click the start state in the behavior graph; then interact with the student interface.

To test from any other step in the problem, click the desired state in the behavior graph—the student interface will update to reflect the problem-solving state—and then interact with the student interface.

You can switch between Demonstrate and Test Tutor modes while authoring to iteratively test and refine your tutor.