1. Ensure that Java 8 is installed on your machine
2. Download and install the CTAT Behavior Recorder application
3. Installation and Start up
4. Loading the CTAT HTML editor
5. Creating your First Tutor
6. Adding Files, Features, and More Tutors to your Package
7. Exporting your Package for Deployment
8. Requirements

This page provides instructions for setting up and using the Cognitive Tutor Authoring Tools (CTAT) and the CTAT HTML Editor to create a kind of intelligent tutoring system called an example-tracing tutor. A example-tracing tutor built with CTAT has at least 2 parts:

• a student user interface (a .html file), which can be created using drag-and-drop actions on the CTAT HTML Editor web site;
• a behavior graph (.brd) file, which can be built by demonstrating tutor behavior once you've installed the CTAT Behavior Recorder application and created the user interface.

At a command prompt, enter "java -version". If you see something similar to the following, then Java 8 is installed.

    java version "1.8.0_241"
    Java(TM) SE Runtime Environment (build 1.8.0_241-b07)
    Java HotSpot(TM) 64-Bit Server VM (build 25.241-b07, mixed mode)

If you see a different version, go to Java Downloads for All Operating Systems - Recommended Version 8 and install the proper version for your machine and operating system. If you have trouble due to an earlier Java installation on a Mac, see also How do I uninstall Java on my Mac?.

Download the CTAT 4.4.0 installation package appropriate for your machine:

• Windows 7 and above: CTAT_windows_4_4_0.exe
• Mac OS X: CTAT_macos_4_4_0.dmg
• Linux: CTAT_unix_4_4_0.sh.gz

These are steps you only need to do once.

1. Install the Google Drive Backup & Sync app; create an account on the cloud site if you do not have one already.
2. Set up the app:
   • In the Google Drive app, create a folder named CTAT in the root folder "My Drive" of your Google Drive.
3. Tell the app to sync the CTAT folder to the CTAT folder on your local drive. Note: It is possible to sync only certain cloud folders to your local machine. See "Choose what to sync from Google Drive" on Back up & sync files with Google Drive for Google Drive.

1. Install CTAT by running the installer appropriate for your machine.
   • Macintosh OSX: To run the installer, locate it in the Finder, press the Control key and click the app icon, then choose Open from the popup menu. (Note: If you try to run the installer by double-clicking the app icon, a message is displayed saying that it is from an "unidentified developer" because the installer is signed with a certificate not provided by Apple.)
   • Windows: To run the installer, locate it in Windows Explorer, and double-click the executable. If you are using Windows 10, when you double-click the installer, a warning message appears. To install, click More info and chose Run anyway.
2. Launch CTAT for HTML and Flash.* When prompted to select a CTAT Workspace, choose the synced CTAT folder you created for your cloud app. Or, if you've already installed CTAT, you can change the CTAT Workspace by selecting Tools > CTAT Preferences from the Authoring Tools menu. (Note that it is not required that you set your workspace to the synced CTAT folder, but most users find it helpful.)
   *Do not launch CTAT for Java unless you have a student interface implemented with CTAT's older Java-based components.

Note

When you first open the CTAT HTML Editor you will have to ensure that popups are not blocked since the tools rely on cloud storage for loading and saving of tutor projects. After you have logged in to your cloud storage account, you may need to refresh the browser page for the HTML editor to connect. Once you see "Successfully connected" in the editor's status bar (lower left corner), you should be able to save files.

1. In your browser, open the CTAT HTML editor in a new browser tab or window.
2. In the editor web page, choose Google Drive and login if prompted. (N.B.: Dropbox is no longer supported).
3. Create a package for your tutor by choosing File > New Package from the menu. At the prompt, enter a meaningful name for your package, e.g. "MyFractionAddition". 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 package folder will be created as a sub-folder of your CTAT folder.

Generally, a tutor requires creating a tutor interface and creating a behavior graph that captures problem-solving behavior. The following are minimal steps for each.

1. In the HTML editor, create your student interface with at least a CTAT Hint Widget and one other CTAT component. Use the Properties panel on the right to set the component ID to a name ("problemStatement", "givenAddend1", etc.) meaningful for your tutor. Note: 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 those names 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.
2. In the editor, choose File > Save to save it to the package you created earlier.
   1. Select your package name from the drop-down list in the Save to Package dialog.
   2. Enter a name for your interface in the Interface Name field, and click OK.
      • The interface file is saved to the HTML subfolder of the package folder.

        Note that there are two .html files saved: one with extension interfaceName.ed.html and one with extension interfaceName.html. The first one contains extra information required by the editor; the second has the extra information removed and is suitable for use outside the editor.

      • A CSS (Cascading Style Sheet) file named interfaceName-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.
3. While CTAT for HTML and Flash is running with a blank graph tab in focus, choose View > Launch in the editor. (Alternatively, you can click the Launch Interface icon at the top right of the editor's too bar.) The student interface will appear in its own "Student Interface" window, and an indicator in the CTAT tab should change from black to green as the interface connects.
4. On the interface in the Student Interface window, enter your problem's given values (fields that should be filled in before the student begins) in the proper CTAT components. For example, if you were creating an interface for fraction addition, you would enter the numerator and denominator of the two fractions to be added for this problem.
5. In CTAT, choose Graph > Create Start State and name the problem. You should see a start state created in the graph pane and CTAT's Author Mode change to Demonstrate. The "start state" contains the given values for this problem.
6. Demonstrate a solution by entering steps in the interface. You should see your steps recorded in the CTAT graph tab.
7. In CTAT, save your graph to the same package's FinalBRDs subfolder. Note: Keep in mind that, in CTAT you should always save .brd files to the FinalBRDs folder, but in the HTML editor you simply specify the package name rather than the HTML folder.
8. You can close the interface, relaunch it, and demonstrate more steps. Before adding more steps, within CTAT, click on the state in the graph where the new steps should be linked. (Note that when you click on a state, the tutor interface jumps to that state.)
9. The last step you demonstrate should be the Done step (i.e., click on the Done button in your interface).
10. To see minimal tutoring behavior, within CTAT, set the Author Mode to Test Tutor (at the top of the CTAT window). Click on the Start State (the first node in your graph). Go to the tutor interface and enter correct and incorrect solution steps, click on the Hint Button, and click Done when done.
11. To create more interesting hints, right-click (Windows) or ctrl-click (Mac) on one of the green labels on the links in the graph, and select "Edit Hint and Success Messages..." from the pop up menu. Each step can have multiple hint levels.

Using the editor, you can edit a student interface file as often as you wish. You'll find your student interfaces with the extension .ed.html in your package's HTML subfolder; choose these to edit an existing interface. The editor's .ed.html files include extra information the editor needs to enable you to resume editing. Whenever you save, the editor creates an equivalent .html suitable for use on the web (or for launching your interface from the CTAT authoring tools).

Outside the editor, you can edit this .html output itself. But once you change the output .html, you cannot then make those changes visible to the editor. It may be wise to think of the editor as a means to quickly assemble and refine a student interface. If you then want more sophisticated HTML features, such as flexible layouts that resize to different screen formats, then you may want to switch to hand-editing the output .html files.

You can have any number of .html and .brd files in a package and pair them as you wish to create problems. An interface typically has a set of .brd files that accompany it; each .brd defines a different problem to solve using that interface.

If your tutors need other files, such as images, CSS stylesheets, or other JavaScript files, use the editor's Insert menu to specify where they are.

• If you've created new images or other files for your tutor, we recommend that you first save them in your package's HTML/Assets subfolder and insert them from there.
• If you load files from another location in cloud storage, then they will be copied to the package's HTML/Assets subfolder.
• If you specify a URL, a reference (such as an <img> tag) will be added to your HTML file. The file referenced by the URL will not be copied to the package's HTML/Assets subfolder.
• If you modify a file (such as a CSS stylesheet), you will need to insert it again in the editor file in order to see the changes you've made in the editor.

Export your package to a .zip file by choosing Download Package from the File menu. You can then deploy the package to a Learner Management System (LMS), such as TutorShop. See Deploying your Tutor for more information.

The Cognitive Tutor Authoring Tools is an application you download and install on your computer. You will need privileges to install software on your computer.

• Windows 7 and above or Mac OS X 10.7.3 (Lion) and above.

• The CTAT installer and Authoring Tools require the Java Runtime Environment (JRE) version 1.7 or 1.8 (also known as Java 7 or Java 8). Do not use Java 10 or higher. Not sure if you have Java? This page explains how to check.

  If you do not have Java, open java.com, click on the Java Download button, then click the Agree and Start Free Download button. Be sure you are getting Java 8. After the download completes, find the downloaded file and double click it to install Java.

• CTAT 4.2.0 or later.

• CTAT cognitive tutors require a program for editing Jess production rules. CTAT provides a Jess editor plug-in for the Eclipse IDE. Eclipse is recommended, though not required.

  If you do not already have Eclipse installed, we recommend using the Kepler (4.3) release of the Eclipse IDE (select "Eclipse IDE for Java Developers"). Eclipse should be configured according to the configuration instructions. If you are unsure whether you need the 32-bit installer or the 64-bit installer for Eclipse, we suggest using the 32-bit version.

  On Mac OS X, the Kepler release of the Eclipse IDE requires an older version of Java (Java 6). You can either install Java 6 and the Keplar release, or install a newer version of Eclipse and install the extra plugin as described in the configuration instructions. Instructions for downloading and installing Java 6 are available here on the Apple web site.

The HTML editor, which runs in a browser, requires cloud storage for saving the tutor interfaces you build. The editor currently supports Google Drive. (N.B.: Dropbox was supported but has changed its validation status).

• Either the Chrome browser or Firefox. The editor uses site cookies, so you need to allow them in your browser. For example, to allow cookies in Chrome, go to Settings > Privacy > Content Settings... and uncheck "Block third-party cookies and site data". (On Macs, the Settings are under File > Preferences; click on "Show advanced settings..." to see the Privacy settings.) Note: Internet Explorer is not supported.
• An account for Google Drive access.
• A folder named CTAT at the top level "My Drive" of your Google drive.
• (Recommended, but not strictly required) the Google Drive app for syncing a cloud folder to a local one: Backup and Sync. See, in particular, the instructions "Choose what to sync from Google Drive" on this page: choose your CTAT folder to sync it to your local Google Drive folder.

A cloud folder is needed because the CTAT HTML Editor cannot read or write to the local disk, as is typically true of programs that run in a browser. The editor saves your interface files to the cloud, which you can then access locally after the app syncs your files. Reasons for syncing the cloud folder to a local one (instead of using a cloud folder without syncing) are:

• It helps to keep all of the files for given tutor together in a single place. This simplifies later deployment of the tutor.
• You might like having your files locally, not just in the cloud. After you have completed editing your interface, you can open it from CTAT to work on graphs for your tutor.
• You will be able to run (though not edit and save) your local copy of the interface while offline. Within CTAT, use command File > Launch HTML Interface.

Note

Offline interface editing using the CTAT HTML Editor is not recommended. While offline, you will not be able to save changes to your tutor interface until you are back online. The CTAT HTML Editor requires an internet connection to access cloud storage and other files hosted on the web site.

Next Topic >>