Building a student interface for fraction addition (Flash)

Last updated July 09, 2016

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) is shown below. You cand find this interface in your CTAT installation directory: {CTAT}\Projects\FlashFractionAddition\fractionAddition.swf

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 Flash IDE (Adobe Flash CC, or whichever version you have installed).

Note: Don't have the Flash IDE? Download a 30-day trial of Flash from Adobe.

Once you've launched the Flash IDE, create a new Flash document:

  1. File > New
  2. Select ActionScript 3.0.

You are now ready to add CTAT components to your interface. All CTAT components are available in the Components panel under the category CTAT AS3 Components.

If you don't see the components panel, display it by selecting Window > 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 CTAT Components, verify that you've installed them by following the Flash configuration instructions.

To display components that were installed after you started Flash:

  1. Select Window > Components.
  2. Select Reload from the Components panel menu.

3. Adding CTAT Components

To construct your interface, 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.

Add the CommShell Component

Start by adding CommShell to your blank Flash document. The stage should like the one depicted below.

The CommShell has no visual elements and will not display in your running tutor. As the CommShell can get in the way of adding and arranging new components, you could place the CommShell outside the area of the stage or place it on its own layer of the timeline in Flash and both hide and lock that layer.

Resize the Stage

You can change the dimensions of your tutor to be anything you'd like. To change the tutor dimensions, click on empty space in the stage, then click on the Properties panel, and click Edit next to the document dimensions.

Add the CommTextInput Components

Next, you can add CommTextInput components to the stage to represent that various fractions.

Adding and configuring an instance of CommTextInput

To add a CommTextInput component:

  1. Double-click the CommTextInput component in the Components Panel.
  2. Resize the component instance using the Free Transform Tool.
  3. Set component instance parameters such as text alignment, font size, font face, and border visibility.
  4. Enter a descriptive, unique instance name for the component instance (see below).
Naming the instance of the component

Naming the instance of a CommTextInput 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. So more than one component with the same name will cause the tutor to not work properly.

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.

To resize a component:

  1. Right-click the component and choose Free Transform (hotkey Q). (Alternatively, you can choose the Free Transform Tool from the tools panel.)
  2. Drag the bounding box corners until the component is the desired size.
  3. Exit Free Transform mode by clicking the Selection Tool from the tools panel (hotkey V).

After adding a number of CommTextInput components and positioning them on the stage, your interface might look like the one depicted below.

The student interface, after adding CommTextInput to the stage.

Next, we'll add instructional text, some lines, and hint and done buttons.

Add instructional text and lines

Add text to your student interface using the Text Tool.

To add text using the Text Tool:

  1. Click the Text Tool icon in the Tools Panel.
  2. 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", as well as the + and = symbols. You may also want to title your tutor, and provide some brief instructions for the student.

Similarly, add lines to divide fractions using the Line Tool. Set the line's stroke height and style in the shape properties panel.

The text and line tools

The interface after adding text and lines

Add hint and done buttons

Add the CommHintButton and CommDoneButton components by dragging an instance of each from the Components Panel to the stage.

The interface after adding hint and done buttons

Add a hint window

Add the CommHintWindow component by dragging an instance from the Components Panel to the stage.

The interface after adding a hint window

4. Preview your tutor

To connect your tutor to CTAT, you will need to first preview it. Preview your tutor by selecting Control > Test Movie. The image below shows the tutor after previewing it.

Previewing the student interface

5. Save your tutor

Save your tutor (.fla and .swf) to a directory in your CTAT Workspace (e.g., <user>/ctatworkspace/FractionAddition/).

6. 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: