Search CTAT

Tutorials Home

Building a student interface for fraction addition (Java)

Last updated June 28, 2007

Table of Contents

1. Getting Started

In this tutorial, you will create a student interface for solving fraction addition problems. You will use the NetBeans IDE to construct your interface. While this tutorial is written for users of NetBeans 5.0, the concepts and instructions should be applicable to earlier versions of NetBeans.

The final fraction addition interface

1.1 Prerequisites:

You will need the following software to complete this tutorial:

1.2 Software configuration

Let's start by making sure that both CTAT and NetBeans are installed and configured properly to create tutors. If you've already installed CTAT and configured NetBeans and you're sure that they're both working, you can skip this section.

To build a tutorable interface, NetBeans must have the CTAT widgets installed in a palette.

To check if the CTAT widgets are installed:

  1. Launch NetBeans
  2. Select Tools > Palette Manager > Swing/AWT Components
  3. Expand the Beans category.
  4. You should see a number of widgets. If you dont see the CTAT widgets listed under beans, add them as described here.

Next, we'll try to compile a simple student interface. You'll need a properly configured NetBeans project first. If you don't have a NetBeans project, set one up as described here. Then attempt to compile a student interface:

  1. Right-click a CTAT Java file such as \Projects\AdditionTutorChaining\TutorInterface.java and select Run File. Your tutor should compile and run, displaying both the Java interface and the CTAT Behavior Recorder.

If the tutor interface won't compile, it may be because Java isn't configured properly on your system.

1.3. Create a new tutor

We're now ready to create a new tutor in NetBeans:

  1. In the NetBeans IDE, right-click the Projects folder and choose New > File/Folder
  2. Select the TutorTemplate you stored when configuring NetBeans. (It is likely under the category Java GUI Forms or Other.)
  3. In the New TutorTemplate.java dialog, enter both a file name for your tutor, and a location.

    Note: Your new tutor file must be created under the {CTAT installation folder}/Projects hierarchy. If it is not, your tutor will not compile.

    Assign a name and location to your new tutor

  4. Press Finish.

1.4 Compile and run your new tutor

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

    Note: Errors in the NetBeans console are usually harmless and can be ignored.

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 DorminTextField widgets that represent fractions, DorminLabel widgets for instructional text, and horizontal lines. But you can create an interface with any combination of widgets. For example, you might create a problem-solving space 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 widgets to the interface:

Click on a widget in the Beans Palette, then click on the tutor interface to place the widget. (In NetBeans 5, you can drag a widget from the palette while holding your mouse button.)

Adding a widget to the main panel of the student interface.

2.1 Constructing a fraction

In our interface, we used DorminTextField widgets to represent a the numerator and denominator of each fraction. We dragged two DorminTextField widgets on to the main panel, and resized them. 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 paste the widgets.
  4. Position the widgets by dragging and dropping the three highlighted widgets. If you lose the selection, you can re-select the three widgets by pressing and holding the left mouse button and dragging a selection rectangle over the three widgets.

Adding the second fraction.

We repeated this process for all fractions. We then added text to the interface using the DorminLabel widget. We also styled this text using the Properties window, shown below.

Styling the DorminLabel text.

2.2 Naming your widgets

NetBeans gives default names to widgets you add to the interface (a new DorminTable widget instance, for example, is automatically named dorminTable1). 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). Furthermore, if you intend on logging the interactions someone has with your tutor, 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 Inspector window, right-click the widget whose name you'd like to change. (If you don't see the Inspector window, select Window > Inspector).
  2. Select Change Variable Name.
  3. Enter a new name for your widget, and press OK.

Renaming a widget in NetBeans (steps 1 and 2)

Renaming a widget in NetBeans (step 3)

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 Inspector window, select CTAT_Options under the group Other Components. 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 DorminButton 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've 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 the Design View, or selecting it in the Inspector window.
  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 Inspector window.
  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: