Building an HTML student interface

Sandy Demi edited this page Aug 25, 2017 · 7 revisions
Clone this wiki locally

Building an HTML student interface for fraction addition

Table of Contents

  1. Introduction
  2. Create a Package
  3. Adding CTAT Components
  4. Preview your Tutor
  5. Save your Tutor Interface
  6. Next Steps


In this tutorial, you will create a student interface for solving fraction addition problems. You will use the CTAT HTML Editor to construct your interface.


If you have never used the CTAT HTML Editor, please see the requirements and instructions in Quick Start. A Google Drive or Dropbox account is required to use the editor.

The finished interface 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.

Create a Package

The first step in building a student interface is to open the CTAT HTML Editor in a separate tab or browser window. Log in to either Google Drive or Dropbox.

Once you've launched the editor, create a new package for your interface:

  1. Select File > New Package from the menu.
  2. Enter MyFractionAddition as the package name and click OK.

A package folder named MyFractionAddition is created in the CTAT folder in Google Drive or Dropbox. A package is a folder with a specific layout that will hold all of the HTML files, behavior graph files, and other assets (such as images) for one or more tutors.

The empty white area in the middle of the editor is the background of your new interface. You are now ready to add CTAT components to your interface. All CTAT components are available in the Components panel at the top-left of the editor window.

The Components panel in the CTAT HTML Editor

If you don't see the list of components in the panel, click on the plus-sign ("+") to expand it. In the panel, there are two categories of CTAT components: CTAT Composite and CTAT Standard. These are the components included with CTAT that allow the HTML interface to communicate with the CTAT behavior recorder. The components in the last category, HTML, are not CTAT components; they are standard HTML components that are not tutorable but are sometimes useful in interfaces.

Adding CTAT Components

To construct an interface, you select a component and drop it onto the background of your interface (this is the Background component).

To add components to your tutor interface, you can:

  • Select a component in the Components panel, then move the mouse to the background area, and drop the component; or
  • Select a component from the menu Insert > CTAT Components.

Resize the interface

You can change the dimensions of your tutor to be anything you'd like. (Our experience suggests that a good rule of thumb is to make a tutor interface no bigger than 920 pixels wide by 720 pixels high.) To change the tutor dimensions, click on the background to select it; you should see "Background" at the top of the Properties panel on the right. Then use the mouse to resize the background or scroll to the bottom of the Properties panel to the Position/Size box and change the values for the width and height.

By default, the editor positions and sizes components using a 20px by 20px grid. You can disable Snap to Grid by clicking the grid icon on the tool bar or by selecting Disable Snap to Grid from the Edit menu.

Snap to Grid icon in tool bar

Add the CTAT Text Input components

Next, you can add Text Input components to the background to represent the various fractions. (See CTATTextInput for detailed documentation.)

To add a Text Input component:

  1. Click the Text Input item in the Components panel and drop it on the background.
  2. Resize the component using the mouse.
  3. Set component parameters such as text alignment, font size, font face, and border visibility using the Properties panel on the right.
  4. Enter a descriptive, unique ID name for the component (see below).

Adding and configuring a Text Input component


Make sure you enter a unique ID value for each component in your interface. The ID of the component is its identifier for tutoring. If there is a duplicate ID, your tutor will not know which component your student is interacting with and cause the tutor to not work properly.

Instead of doing this process for every Text Input component, you can do it for one and copy and paste the component on the background. If you use this method, remember that every component must have a unique ID value. Also, it is important that you name your components with meaningful names before you create a behavior graph (rather than accepting the default names the editor assigns), as the ID values will be used in the graph. If you change the names later in the interface, you will have to change them in your behavior graphs, too.

The table below shows the names we've given to the text components in our example interface. For consistency with other tutorials, we recommend using the same names in your interface:

Fraction group Numerator ID Denominator ID
First given fraction firstNumGiven firstDenGiven
Second given fraction secNumGiven secDenGiven
First converted fraction firstNumConv firstDenConv
Second converted fraction secNumConv secDenConv
First answer fraction ansNum1 ansDen1
Second answer fraction ansNumFinal1 ansDenFinal1

After adding the Text Input components and positioning them on the stage, your interface might look like the one depicted below.

The student interface, after adding Text Input components to the stage.

The student interface, after adding Text Input components 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 CTAT Text Field component.

To add text using a Text Field:

  1. Click the Text Field item in the Components panel and drop it on the background.
  2. Double-click the Text Field, and enter your desired text.
  3. Set component parameters such as text alignment, font size, and font face using the Properties panel.

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. As with the Text Input components, you can create and set properties for one Text Field, then copy and paste to create the others.

Similarly, you can add lines to divide fractions using the Container component.

To add a line using a Container:

  1. Click the Container item in the Components panel and drop it on the background.
  2. In the Border box in the Properties panel, set the Width to 2, and uncheck the Btm, Left, and Right boxes. This creates a container with one border that you can use as a line.
  3. Resize the container to the appropriate width and a height of 5. (Disable snap-to-grid if necessary.)
  4. Drag the line to position it between two of the boxes that represent a fraction.
  5. With the line selected, click on the "Send to back" down arrow in the tool bar to ensure that the line is not on top of the text boxes with which students will need to interact.

The interface after adding text and lines.

Add a done button, a hint button and hint window

Now that you've completed adding components that are specific to a fraction-addition interface, you need to add components that allow the student to 1) indicate when they have finished the problem, 2) request hints when they need help, and 3) receive feedback from the tutor when they make mistakes. The editor provides a "composite" component, called a Hint Widget, that includes a Hint Window, Hint Button, and Done Button.

  1. Click the Hint Widget item in the Components panel (under the CTAT Composite category) and drop it on the background.
  2. Set component parameters such as borders, font size, and font face using the Properties panel as desired. (Note: the text in the hint window is always left-aligned.)


A tutor interface can have only one Hint Window, Hint button, and Done button. By default, the Hint button is assigned the ID "hint" and the Done button is assigned the ID "done". When you set an ID for the Hint Widget, the ID is assigned to the hint window.

The interface after adding a Hint Widget.

Tip: CTAT provides individual components for the hint window, hint button, and done button under the CTAT Standard category. You can use these instead of the Hint Widget if you prefer a different layout.

Set a tab order

A tab order is the order in which "focus" is given to each component in the tutor when the user presses tab or enter. You set a tab order by specifying a numerical index for each component. Focus occurs in numerical order, starting with the lowest index number. After focus reaches the highest tab index, it returns to the lowest index number.


The tab order for components in your tutor interface not only guides the student through the problem―it is critical to ensuring that their input is submitted when they enter input and press the Tab key. CTAT components have a tab-order value of "1" by default when created in the editor.

Set the tab order for each component that the student will interact with in order to complete the problem. For the fraction addition tutor, that includes all of the Text Input components and the Done button; you do not need to set a tab order for Text Field components, as they are only used to display text.

Setting a tab order.

For example, you could set the tab index for the four Text Input components under "Given Fractions" to be "1" through "4". Then you might set the tab index for the two denominator Text Input components under "Converted Fractions" to be "5" and "6" if you want the student to enter the least common denominators first, and so on.


Be sure to set the tab index number for the Done button. Clicking the Done button is the final step of any problem and, therefore, should have the highest index number.

Preview your Tutor

In order to preview your interface from the editor, CTAT for HTML and Flash needs to be running.

  1. Start the CTAT for HTML and Flash desktop application.
  2. While CTAT is running with a blank Graph tab open, choose View > Launch in the editor.

The student interface will appear in its own Student Interface window in your browser, and an indicator in the CTAT Graph tab should change from black to green as the interface connects.

The image below shows the tutor interface when it is launched from the editor.

Previewing the student interface

Save your Tutor Interface

  1. In the editor, choose File > Save to save it to the MyFractionAddition package you created earlier.
  2. Select your package name from the drop-down list in the Save to Package dialog.
  3. Enter the name fractionAddition in the Interface Name field, and save click OK.
    • The interface file is saved to the HTML folder of the MyFractionAddition package folder.
    • A CSS (Cascading Style Sheet) file named fractionAddition-styles.css is saved to the HTML/Assets folder of your package. This style sheet file contains information about the fonts, borders, and other visual attributes set for the components in your interface.

Saving the student interface to the MyFractionAddition package.


When you save your interface there are two .html files saved: one named fractionAddition.ed.html and one named fractionAddition.html. The first one contains extra information that the editor needs to enable you to resume editing later; the second has this extra information removed and is suitable for use outside the editor.

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: