Building a student interface for fraction addition (Java)

Last updated June 24, 2015

Watch a video of this tutorial

(Video opens in new window)

Table of Contents

1. Getting Started

In this tutorial, you will create a student interface for solving fraction addition problems using Eclipse's WindowBuilder.

The final fraction addition interface

1.1 Prerequisites:

You will need the following software to complete this tutorial:

1.2 Create a new tutor

If you've installed CTAT, the JDK, Eclipse, and configured Eclipse Windowbuilder, you're ready to create a new tutor in Eclipse:

  1. In Eclipse, right-click the Projects folder of your CTAT project and choose New > Other ...
  2. Select WindowBuilder > Swing Designer > JPanel in the dialog, and click the Next button.
  3. In the "New JPanel" dialog enter a folder name for your tutor in the Package field, e.g., NewFractionAddition.
  4. In the "New JPanel" dialog enter a file name for your tutor in the Name field, e.g., FractionAddition.
  5. Click the "Finish" button. should open with a "Source" and "Design" tab at the bottom.
  6. In Source view, add the following line of Java code to the top of the file, directly beneath the existing line that begins with "import":
    import edu.cmu.pact.BehaviorRecorder.Controller.CTAT_Launcher;
  7. While still in Source view, add a main method directly before the final closing brace, substituting the class name for <filename>, e.g., FractionAddition:
    public static void main(String args[]) { 
      new CTAT_Launcher(args).launch(new <filename>());
  8. Select the "Design" tab.
  9. Look in the "Palette" panel to confirm that the CTAT widgets are listed (e.g., JCommTable, etc). If they are not, following the configuration instructions to add the widgets.
  10. Add the following two required components to your interface:
    1. Click on "AbsoluteLayout", then click on the JPanel to drop it.
    2. Click on "CTAT_Options", then click on the JPanel to drop it.

1.3 Compile and run your new tutor

  1. Right-click your new Java file and select Run As > Java Application. If both the student interface and CTAT appear, you're ready to add widgets to your interface.

2. Build your interface for fraction addition

You are now ready to create a student interface for fraction addition.

The interface for fraction addition that we created is composed of a number of JCommTextField widgets that represent fractions, JCommLabel widgets for labels, plus, and equals signs, and horizontal lines. You can create an interface with any combination of widgets. For example, you might create an interface based on a single table, resembling graph paper; or you might use a table to represent a single fraction. Also, you may want to change the layout of the tutor more generally, creating a horizontal representation of fraction addition.

To add a widget to the interface:

  1. Click on a widget in the Palette, then click on the tutor interface to place the widget. Some widgets can be sized as you place them, so try clicking and dragging to size your widget when you place it.

    Note: You must use JComm.. widgets for any interactive widget that you would like to be tutorable.

2.1 Constructing a fraction

In our interface, we used JCommTextField widgets to represent a numerator and denominator of each fraction. After adding each JCommTextField, we resized it by manipulating the bounding box for the text field. We also dragged in a horizontal line and positioned it between the two text fields.

Constructing the first fraction.

We then copied and pasted this group of three widgets to create representations of other fractions.

To copy and paste multiple widgets:

  1. Hold the SHIFT key while clicking each of the three widgets that represent the fraction.
  2. Press CTRL+C (Windows) or COMMAND+C (Mac) to copy the three widgets.
  3. Select the the main JPanel by clicking anywhere in the beige background, then press CTRL+V or COMMAND+V to load the widgets onto the mouse cursor for pasting.
  4. Click to paste the three widgets.

Adding the second fraction.

We repeated this process for all fractions. We then added text to the interface using the JLabel widget. We also styled this text using the Properties window, shown below. To do this, you need to first click the widget, then click the Show advanced properties button (highlighted below) in the Properties panel to show properties such as font.

Styling a JCommTextField widget.

2.2 Naming your widgets

Eclipse gives default names to widgets you add to the interface (a new JCommTextField widget instance, for example, is automatically named commTextField_1). This is fine in some cases, but there is an important reason to rename your widgets after you add them: CTAT will use the names of your widgets throughout tutoring, and you will refer to these names often. The widget names are encoded in the graph (in the case of an example-tracing tutor) or in your production rules file (in the case of a cognitive tutor). Also, if you intend on logging the interactions a student has with your tutor, note that the names of the widgets in the tutor will appear in the logs.

Best Practice: Take the time to rename your widgets after you add them; it may make things easier and more comprehensible in the future.

To rename a widget:

  1. In the Components (beneath Structure panel, right-click the widget whose name you'd like to change.
  2. Select Rename.
  3. Enter a new name for your widget, and press OK.

Renaming a widget in Eclipse (steps 1 and 2)

Renaming a widget in Eclipse (step 3)

Note: You also need to set the commName property (in the Properties pane) for each widget in the interface to the respective widget's variable name. So, for the widget named "givenNum1", set its commName property to "givenNum1".

3. Customizing the student interface

3.1 Using a separate hint window

By default, the tutor interface is attached to a hint window that contains both Done and Help buttons, and pane to display messages to the student (see below).

A student interface with integrated hint window

You might want to use a pop-up hint window for tutor messages instead of the attached pane for a variety of reasons: your student interface might take up most of a user's screen, or you may prefer the interaction style of the pop-up hint window.

A student interface with pop-up hint window

To implement a separate hint window:

  1. In the Components panel, select t_Options under the group (non-visual beans). This is an object specific to CTAT tutors that allows you to specify options for your tutor.
  2. In the Properties window, check the box next to the property separateHintWindow

    Setting CTAT_Options so that the student interface will use a pop-up hint window instead of an integrated one

  3. Add hint and done buttons.

    Note: If you don't complete this step, there will be no way for the student to signal that they're done working on the problem, or that they would like a hint!

    To add hint and done buttons:

    1. Add two JCommButton widgets to your main JPanel.
    2. Using the rename method described above, rename one button to Hint and the other to Done.
    3. Run your tutor, verifying that 1) the integrated hint window is gone, and 2) that clicking these buttons in Example-Tracing Mode has the desired effect. (You'll learn more about this mode in the next tutorial.)

3.2 Customizing the interface size and color

In our student interface for fraction addition, we opted to go with a white JPanel background, and a different interface size.

To set a background color for the main JPanel:

  1. Select the main JPanel either by clicking it in Design View, or selecting it in the Components panel.
  2. Click the [...] button on the Background row of the properties window.
  3. Select a background color from one of the palettes and press OK.

JPanel's Background property

To set a default interface size for the student interface:

  1. Resize the main JPanel by dragging it's corners in the GUI builder.
  2. Select the CTAT_Options object by clicking it in the Components panel.
  3. Enter pixel values for the interface height and width in the rows interfaceHeight and interfaceWidth, respectively.
  4. Run your interface to test it with the new dimensions.

interfaceWidth and interfaceHeight properties

4. Next steps

Building an interface is the first step of making a tutor. The next step is to either create an example-tracing tutor or a cognitive tutor. An example-tracing tutor can be created in a relatively short amount of time without programming; it can also serve as a prototype for a cognitive tutor.

Continue to: