Introduction
In this tutorial, you will create a student interface for solving fraction addition problems using the CTAT HTML Editor.
Please note: if you've never used the CTAT HTML Editor, please see the requirements and instructions. You will need a Google Drive or Dropbox account.
Creating a Package
Under File, select New Package. A package is a folder that will hold all of the HTML files, behavior graph files, and other assets (such as images) for this tutor and other tutors you create.
Text Input Fields
Text inputs can be used for different purposes. In this interface, these will be fields in which students can enter their answers.
Component IDs
Set a unique component ID for each component. Best practice is to give them mnemonic names to help you identify them, like "textInput1." The component ID's will come into play in the Behavior Graph, and it is important that they are distinctive.
Copy and Paste
Copy and paste an element using the circled icons, or by using Ctrl/Cmd + C and V. The copied element appears in the same place as the original. Don't forget to give the new elements unique ID's!
Add Static Text
Add a title with a Text Field component. The text you enter in text fields will be static. You can use these to lace titles or problem statements.
Styling Text (Optional)
Click and drag to adjust the Text Field boundaries. Under Font in the Properties panel, you can set your desired text size, font, and color (make sure the Text Field is selected).
Adding text
Any headings or other text in your problem will simply be more Text Fields. You might want to style them so that they have lower visual hierarchy than your main title.
Creating lines (1)
There is no component for making lines, so we're going to use Text Fields. Place a Text Field box and resize it so that its width is as long as your line will be.
Creating lines (2)
Scroll down in the Properties panel until you see the Border section. Uncheck Right, Left and Btm, leaving only a Top border. Adjust the width and color as desired.
Creating lines (3)
Add more lines where are needed in the interface.
Adding math symbols
Place Text Field boxes in the interface and type in the appropriate math symbol. Add as many as necessary.
The hint widget
The Hint Widget serves several purposes. It indicates to students when they have finished the problem, allows them to request hints, and gives feedback from the tutor when they make mistakes (more on this in the Example-Tracing tutorial).
Saving (1)
Under File, choose Save. This command will open the Save to Package prompt. You can also hit Ctrl+S (Windows) or Cmd+S (Mac).
Saving (2)
From Package Name, select the package you created earlier, in step 1. Your interface will be saved in this folder.
Saving (3)
Finally, assign a name to your interface. CTAT will save a .html and an .ed.html file in your package folder.
Congratulations, you did it!
You've finished the HTML Interface portion of the Fraction Addition problem. To learn how to add behavior to your tutor, find an Example-Tracing tutorial or a Cognitive-Tutor tutorial in our gallery.
