CTAT HTML Editor - CMUCTAT/CTAT GitHub Wiki

1. Introduction
2. Overview of the editor tools
   1. Background
   2. Menus
   3. Tool bar
   4. Component palette
   5. Properties panel
   6. Status bar

The CTAT HTML Editor is a web-based tool that supports drag-and-drop interface building without coding HTML directly. The editor allows users to quickly build tutor interfaces using CTAT components.

The editor places all components at fixed locations on the tutor interface. Depending on the complexity of your interface, using the editor output as-is might be sufficient for your needs. If you want more sophisticated HTML features, such as flexible layouts that resize to different screen formats, you might start with a prototype created in the editor, then switch to hand-editing the output .html files.

The editor is hosted on the CTAT CDN web site: https://cdn.ctat.cs.cmu.edu/html-editor/editor.html

Important

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 main window contains a blank background area in the center (1), a menu bar (2), a tool bar (3), a component palette (4), a properties panel (5), and a status bar (6).

CTAT HTML Editor tools

The background area (sometimes called the stage) is a simple container that defines your tutor interface. This is where you should place all of the CTAT and non-CTAT components that make up your tutor.

You can change the width and height by dragging a side or corner of the background container, or you can set Width and Height values in the Position / Size section of the Properties panel. As with all components that you add to your interface in the editor, the tutor is always displayed using the width and height you specify. You should consider the size and orientation of the devices that you expect your tutor to be used on when setting the width and height.

Tip

Some properties of a container are inherited by items in the container. For example, if you want all of the text displayed in you tutors' interface to be the same, you can set the font size, color, and so on, for the Background before adding other components. When you add other components, they will automatically inherit the same font size, color, etc., but you can override the inherited settings for any component as needed.

The menu bar includes the typical menu options you would expect to find on an editor.

• File
  • New Package: Creates a new set of empty folders with the recommended structure for a new CTAT tutor. Prompts for a name to give to the new package folder.
  • New File: Opens a new blank interface file. If another file is already open and has unsaved changes, you are prompted to save or discard the changes.
  • Open File: Opens an existing interface file. Note: only files with the .ed.html extension can be opened in the editor.
  • Save: Saves the current interface file, replacing the existing file (if previously saved).
  • Save As...: Saves the current interface file using a new file name.
  • Download Package: Downloads an existing package folder and all of its contents as a .zip file.
• Edit
  • For Copy, Paste, Undo, Redo, Delete selection, Enable/Disable Snap to grid, Bring to front, Bring forward, Send backwards, and Send to back menu items see Tool bar.
  • Arrange: Align two or more selected components or distribute three or more selected components.
    • Align left
    • Align center (horizontal)
    • Align right
    • Align top
    • Align center (vertical)
    • Align bottom
    • Distribute horizontal
    • Distribute vertical
• View
  • Launch interface: Opens the interface in a new window for connecting to the authoring tools.
  • Show/Hide Tab Order: Temporarily show the tab-order number next to all components on the stage.
  • Groups: Shows any component groups created with Grouping List. If any such group is defined in the interface, the group name is listed in a sub menu; mousing over the listed name highlights the components in that group, and clicking the listed name opens the group editor.
  • Stylesheets: Shows any external CSS files that have been inserted (with the Insert > Stylesheet menu, for example). If any CSS files have been inserted, the file name is listed in a sub-menu, and clicking the file name removes the .css file from the interface.
  • Scripts: Shows any external JavaScript files that have been inserted (with the Insert > JS Script menu, for example). If any JavaScript files have been inserted, the file name is listed in a sub-menu, and clicking the file name removes the .js file from the interface.
  • Custom CSS: Opens the Edit CSS Rules dialog. The dialog allows you to add or edit styles saved directly in the .html file.
• Insert
  • Image: Opens the Choose Image dialog, allowing you to insert an image in your interface. This is a generic HTML component that is not tutor-able.
  • Container: Inserts a container (that is, a <div> element) that can be useful for setting the layout or look of the interface. This is a generic HTML component that is not tutor-able.
  • CTAT Component: Inserts a standard CTAT components in your interface when you click on one of the sub-menu items.
  • Grouping List: Opens the New Group dialog, allowing you to specify a list of CTAT components for inclusion in a group. Any CTAT components that are selected before opening the New Group dialog are automatically add to the list. (See CTATGroupingComponent for more information.)
  • Multiple Choice: Opens the New Question dialog, which allows you to create a group of CTAT radio buttons or a group of CTAT check boxes.
  • Stylesheet: Inserts a reference to an external CSS stylesheet file.
  • JS Script: Inserts a reference to an external JavaScript file.
• Help
  • CTAT HTML Documentation: Opens the CTAT documentation in a separate browser tab.
  • Report a bug or ask a question: Opens the CTAT users' forum in Google Groups.

The tool bar contains icons that you can click as short-cuts for often used functionality.

Save: Save the interface. Prompts for a package and file name if the interface is new.

Undo: Undo the most recent change to the interface.

Redo: Redo the last change that was undone with Undo.

Delete: Delete the selected component(s) from the interface.

Copy: Copy the selected component(s) to the clipboard.

Paste: Paste the last copied component(s) from the clipboard to the interface.

Bring to front: If one or more components are on top of the selected component, the selected component is moved above of the other components.

Bring forward: If one or more components are on top of the selected component, the selected component is moved above the component immediately on top of it.

Send backward: If one or more components are below of the selected component, the selected component is moved beneath the component immediately below it.

Send to back: If one or more components are below the selected component, the selected component is moved beneath the other components.

Import JavaScript file: Import a JavaScript file in the interface.

Import CSS file: Import a CSS (Cascading Style Sheet) file in the interface.

Enable/Disable snap to grid: If enabled, components will automatically be moved to the closest grid juncture when added to or moved in the interface.

Lasso tool: When enabled, the mouse pointer changes to allow you to hold down a mouse button and drag to select several components at once. When the mouse button is released, the items are selected, and the lasso tool is disabled until the icon is selected again.

Launch interface: Opens the interface in a new window for connecting to the authoring tools.

Help: Opens the CTAT documentation in a new tab or browser window.

The Component palette contains a list of all of the components that can be added to your interface in the editor. The palette has three sections:

1. CTAT Composite: These are components made up of more than one CTAT standard components. For example, the Hint Widget is a single component made up of a CTATHintWindow, CTATHintButton, and CTATDoneButton and is provided for convenience.
2. CTAT Standard: These are the standard CTAT components that support tutoring.
3. HTML: These are generic HTML components that provide no support for tutoring. They can be useful for setting the layout or look of the interface. For example, you might use an HTML Image component to display a logo on your tutor interfaces.

Clicking on a component in the palette causes a new component to be dragged. Move the mouse pointer to the stage and click again to drop the component. For two of the composite components (Grouping List and Multiple Choice), clicking on the name in the palette opens a dialog window, allowing you to set initial parameters required for the component before it is added to the stage.

Note

Other HTML components can be added to your interface outside the editor, for example, by editing the generated interfaceName.html file in a text editor. Keep in mind that, if you modify your HTML interface outside the editor, you will not be able to see those changes in the editor, and that changes to the interface made in the editor will overwrite any changes made outside the editor.

The Properties panel allows you to set various properties to define and style your components. The available settings depend on the component that is currently selected. Not all settings are appropriate for every component.

The properties are grouped together in sections:

• Attributes: This section is where you specify the name (the id attribute) of the component and—for CTAT components—any settings that initialize the component and control tutoring.
• Colors / Background: This section is where you specify the foreground and background color (or image) of the component. For text-based components, the foreground refers to the color of the text.
• Border: This section is where you specify the border of the component.
• Font: This section is where you specify the font of the component's text.
• Margins / Padding: This section is where you specify the margins and padding to control the space around the component.
• Position / Size: This section is where you specify the position and the width and height of the component.

Note the minus sign in the top-right corner of each section. Clicking the minus sign collapses that section. If a section is collapsed, a plus sign is shown instead. Clicking the plus sign expands the section.

The status bar beneath the stage area provides useful information as you work on your interface. It is divided into the following four sections from left to right:

1. System messages, such as notifications when a package is created or files are loaded.
2. The package, folder, and file name of the current interface, e.g., "MyFractionAddition/HTML/fractionAddition".
3. The type of the component currently under the mouse pointer, such as, "CTAT Text Input" or "Background".
4. The x,y coordinates of the mouse pointer on the stage, relative to the background.

Back to top