Building a student interface for fraction addition (Flash)
Last updated January 12, 2007
Table of Contents
1. Introduction
In this tutorial, you will create a student interface for solving fraction addition problems. You will use the Flash IDE to construct your interface.
The finished interface (as included with CTAT 2.0) is shown below. This is one interface design (of many possible designs) for solving fraction addition problems. Feel free to follow this one as a template, expand it, or create something completely different.
The finished fraction addition interface.
2. Getting Started
The first step in building a student interface is to open the Macromedia Flash IDE.
Note: Don't have the Flash IDE? Download a 30-day trial of Flash 8 from Adobe.com.
Once you've launched the Flash IDE, create a new Flash document if one does not already exist (File > New, and select Flash Document).
Figure 1: The components panel with CommComponents expanded.
You are now ready to add CTAT components to your interface. All CTAT components are available in the Components panel under the category CommComponents (see figure 1).
If you don't see the components panel, display it by selecting Window > Development Panels > Components. You should see a category called CommComponents. These are the components included with CTAT that allow the Flash interface to communicate with the CTAT Behavior Recorder. If you don't see CommComponents, verify that you've installed them by following the Flash configuration instructions.
To display components that were installed after Flash started up:
- Select Window > Development Panels > Components.
- Select Reload from the Components panel menu.
3. Adding CTAT Components
To construct your interface, you will drag CTAT components from the Components Panel onto the Stage, the empty area in the center of your screen.
All student interfaces require the CommShell component to provide tutoring. CommShell is the main CTAT component that communicates with the Behavior Recorder during tutor authoring and student problem solving.
To add a component to your tutor:
- Drag a component from the Components panel to the Stage; or
- Double-click a component in the Components panel.
3.1 Add the CommShell Component
Start by adding CommShell to your blank Flash document. The Stage should like the one depicted in Figure 2.
Figure 2: The Stage with CommShell.
You need to resize CommShell so that there is more vertical space in the student interface for the rest of the components.
To resize a component:
- Right-click the component and choose Free Transform (hotkey Q). (Alternatively, you can choose the Free Transform Tool from the tools panel.)
- Drag the bounding box corners until the component is the desired size.
- Exit Free Transform mode by clicking the Selection Tool from the tools panel (hotkey V).
The CommShell is designed to include room below the interface for the hints to appear. As you resize the CommShell, remember to leave extra space between the bottom edge of the CommShell component and the bottom edge of the Flash document. In Figure 3, you can see how CommShell's bounding box is larger to accomodate the hints panel that appears during problem solving.
Figure 3: The resized CommShell.
3.2 Add the CommTextInput Components
Next, you will add CommTextInput components to the stage to represent that various fractions.
Figure 4: Adding and configuring an instance of CommTextInput (see directions below).
To add a CommTextInput component:
- Double-click the CommTextInput component in the Components Panel.
- Resize the component instance using the Free Transform Tool.
- Set component instance parameters such as text alignment, font size, font face, and border visibility.
- Enter a descriptive, unique instance name for the component instance (see Figure 5 below).
Figure 5: Naming the instance of a CommTextArea component.
Important: Make sure you enter a unique instance name to each component in your interface. The instance name of the component is its identifier for tutoring; CTAT will address it by its name. So more than one component with the same name will have unintended effects.
Instead of doing this process for every component instance, you can do it for one and copy and paste the instance on the Stage. If you use this method, remember: every component instance must have a unique name. If there is a duplicate instance name, your tutor will not know which component instance your student is interacting with.
After adding a number of CommTextInput components and positioning them on the stage, your interface might look like the one depicted in Figure 6.
Figure 6: The student interface, after adding CommTextInput to the stage.
Next, we'll add instructional text, some lines, and a done button.
3.3 Add instructional text, lines, and a done button
Add text to your student interface using the Text Tool.
To add text using the Text Tool:
- Click the Text Tool icon in the Tools Panel (
). - Either click once on the stage, or draw a box for the text, and enter your desired text.
You can add text such as "Given Fractions", "Converted Fractions", and "Simplified Answer". You may also want to title your tutor, and provide some brief instructions for the student.
Similarly, add lines using the Line Tool ( 
). Set the line's stroke height and style in the shape properties panel.
Lastly, add the done button by dragging an instance of CommDoneButton from the Components Panel to the stage. The default parameters for CommDoneButton are fine for fraction addition.
4. Preview your tutor
Preview your tutor by selecting Control > Test Movie in the Flash IDE.
5. 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.