To build HTML tutors manually, you need the installed authoring tools and a good text editor. We recommend a text editor that supports HTML, such as:

• Sublime
• Notepad++
• Emacs
• Eclipse has a good HTML editor

Important!

Be sure to use a text editor that does not add any hidden characters. For example, do not use WordPad on Windows or the TextEdit app on Mac OS.

In many of our example tutors we provide links to our JavaScript libraries and Cascading Style Sheet (CSS) file. These files must be listed on your .html page in the following order:

• CTAT.css (or its minimized equivalent CTAT.min.css): The CSS that defines the styles for the CTAT HTML components.
• jquery.min.js: JavaScript library required by CTAT.
• ctat.min.js: CTAT's main JavaScript library.
• ctatloader.js: CTAT JavaScript library that initializes the tutor.

Note

Alternatively, you can download the latest files from http://cdn.ctat.cs.cmu.edu/releases/latest/, add them to your tutor's package folder, and specify relative paths in your tutor's .html file. Be aware, though, that this will fix your tutor to the version of the files you downloaded; your tutors will not be able to take advantage of improvements and bug fixes available in more recent versions.

This page assumes you would like to create an intelligent tutor using only HTML, meaning an HTML page with some associated CSS styles and some JavaScript. Before we begin, let's take a look at the two main ways you might want to think about your tutor in HTML.

You might want to consider which tutor you would like to create beforehand. One is not better than the other but we've noticed that certain layouts are better for certain designs. For example, if you intend to deploy on mobile platforms then we would suggestion you use a tutor that scales with the page. These tend to be more basic tutors where it is quite obvious how the content will be scaled and positioned by something like Bootstrap (an HTML, CSS, and JS framework for web page layout). For more complicated tutors where you want more control over the visual layout and navigation flow we would suggest you use a fixed layout tutor as seen in option 2.

It is our experience from running many studies in classrooms that a good rule of thumb is to make a fixed tutor no bigger than 920 pixels wide by 720 pixels high.

After installing CTAT,

• Start CTAT for HTML and Flash.

• Create a new HTML package in your CTAT workspace. You can create your package folders by selecting File > New > New Package in CTAT for HTML and Flash. For example, given a package name "MyTutor", this is the package folder structure created:

  <CTAT workspace>\
     MyTutor\
        FinalBRDs\
        HTML\
           Assets\
  

• Create your .html file and save it in the HTML folder of your new package.

• Modify the interface by opening the HTML file directly in a text editor, adding the CTAT HTML5 components needed for your tutor.

• Connect the .html interface to CTAT by choosing File > Launch HTML Interface from the menu in the authoring tools. You can edit the HTML file while it is connected to the authoring tools, and reload the page in the browser to quickly see your changes.

• After your interface is complete, you can modify tutor behavior with the Demonstrate function of the Behavior Recorder in the authoring tools.

In general, a CTAT tutor is a <div> element with any number of child divs that you configure as CTAT components using our JavaScript library. To tell the CTAT library that a div is really a tutorable component, you would do something like this:

<div id="done" class="CTATDoneButton"></div>

The <div> element for any CTAT component must always have (at least) these two attributes:

1. The id attribute gives the component a unique name, which you will be using in the behavior recorder and which forms the selection part of the SAI (Selection-Action-Input).

   Note: It is important that you name your components with meaningful names before you create a behavior graph, 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. The class attribute identifies the div as a CTAT component and assigns default CSS styles to the div. At startup, our library scans the document and customizes any div that has one of our reserved CTAT class names assigned to it.

Let's look at a very basic fixed size tutor and see what is involved in writing such a tutor. Here is the most basic tutor you could build:

<html>
<head>

<link rel="stylesheet" type="text/css" href="https://cdn.ctat.cs.cmu.edu/releases/latest/CTAT.css">

<style>
html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
</style>

<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/jquery.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctat.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctatloader.js"></script>
</head>

<body>
    <div id="container" style="margin: 0px; padding: 0px; text-align:center; border: 1px solid black;">
	<div id="done" class="CTATDoneButton" 
             style="position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto;">
        </div>
    </div>

</body>
</html>

(Note: You can get the BRD file used for this example here: ctat-manual-tutor-creation-example-01.brd. Simply place it in the FinalBRDs directory of the package you created in your CTAT workspace.)

If you save the above HTML in a file and open that file in a browser using the CTAT Authoring Tools, you should see the following page with a single centered Done button. This is what could be thought of as the most minimal tutor that could be built. Please note that we use some CSS to have the Done button centered in the interface. You might want to use a different way of laying out your components.

Remember that so far we have been building a tutor using a fixed absolute layout. This might not be the best way to design your tutor, but it works well for tutors that were designed from a rigid layout as provided by paper and pencil test results. Below is a more complete example of a fixed position tutor with a Done button, Hint button and Hint window:

<html>
<head>

<link rel="stylesheet" type="text/css" href="https://cdn.ctat.cs.cmu.edu/releases/latest/CTAT.css">

<style>
html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
</style>

<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/jquery.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctat.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctatloader.js"></script>
</head>

<body>
    <div id="container" style="margin: 0px; padding: 0px; text-align:center; border: 1px solid black;">
	<div id="done" class="CTATDoneButton" style="position: absolute; top:300; left: 425;"></div>
	<div id="hint" class="CTATHintButton" style="position: absolute; top:380; left: 425;"></div>
	<div id="HintWindow" class="CTATHintWindow" 
             style="position: absolute; top:300; left: 5; width: 400px; height: 145px;">
        </div>	
    </div>

</body>
</html>

If you cut and paste the above tutor HTML into an .html file and open that file with the CTAT Authoring Tools, you should see the tutor shown below:

You can also mix and match fixed sized tutors with dynamic tutors, documented further down in a separate section. All of our components honor any CSS width and height parameters set in HTML. For example you can create a fixed sized tutor, but within the tutor area you can keep things scalable to fit the tutor size. Take a look at the code below, which demonstrates how you can define a control panel in the bottom of your tutor using am HTML table:

<html>
<head>

<link rel="stylesheet" type="text/css" href="https://cdn.ctat.cs.cmu.edu/releases/latest/CTAT.css">

<style>
html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
</style>

<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/jquery.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctat.min.js"></script>
<script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctatloader.js"></script>
</head>

<body>

    <div id="container" style="display: table; width:550; height:450px; border: 1px solid black; border-spacing: 2px;">
	<div style="display: table-row; height:100%;">
	Main Component Area
	</div>
	<div style="display: table-row; height: 125px;">
	  <div style="display: table-cell; border: 0px solid black; vertical-align: middle;">
		<div id="HintWindow" class="CTATHintWindow" style="width: 100%; height: 100%"></div>	
	  </div>
	  <div style="display: table-cell; width: 60px;">
		<div style="border: 0px solid black; margin-bottom: 2px;">
			<div id="hint-button" class="CTATHintButton"></div>
		</div>
		<div style="border: 0px solid black;">
			<div id="done" class="CTATDoneButton"></div>	
		</div>
	  </div>
	</div> 
    </div>

</body>
</html>

As you can see from the screenshot below you end up with an optimal layout giving you the maximum area in the top center to place any problem specific components.

This is how to create a basic CTAT tutor interface using HTML:

1. Start a new .html document in your package's HTML folder. If you are not sure how to create a new HTML file, check out this tutorial.

2. Include the following:

   • A link to our CSS file:

     <link rel="stylesheet" href="https://cdn.ctat.cs.cmu.edu/releases/latest/CTAT.css"/>

   • A link to our JS libraries:

     <script src="https://cdn.ctat.cs.cmu.edu/releases/latest/jquery.min.js"></script>
     <script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctat.min.js"></script>
     <script src="https://cdn.ctat.cs.cmu.edu/releases/latest/ctatloader.js"></script>

   • Somewhere in the <body>, there will need to be a container <div> like this:

     <div id="container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
     </div>

     The CTAT code will automatically add a canvas inside the container div for drawing purposes. If the author so desires this canvas can be specified manually and will be used by the tutor as long as the id is set to "main-canvas"

     <div id="container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
       <canvas id="main-canvas" width="800" height="700">Your browser does not support CTAT. Please
        update or use another browser.</canvas>
     </div>

3. Adding CTAT components:

   • Add a <div> component with a unique id and one CTAT component name in the class list. The value of the id attribute must be unique within the tutor interface; we recommend using a meaningful name, as it will identify the component to CTAT. For example:

     <div id="start_button" class="CTATButton">Start</div>

   • Component parameters can be changed with additional attributes on the div with a data-ctat- prefix. For example, to make start_button untutored:

     <div id="start_button" class="CTATButton" data-ctat-tutor="false">Start</div>

     Most CTAT components have parameters that are specific to that component, but all tutorable CTAT components support the following parameters:

     • data-ctat-tutor="true|false"
     • data-ctat-show-feedback="true|false"
     • data-ctat-disable-on-correct="true|false"
     • data-ctat-show-hint-highlight="true|false"

4. Changing look:

   • Positioning can be handled in the style parameter of the defining <div> :

     <div id="my_button" class="CTATButton" 
          style="margin:5px; display: inline-block;">My Button</div>

   • Look and feel parameters should be set using CSS. For example:

     <style type="text/css">
       .CTATRadioButton { width: auto; }
       #my_button { background-color: pink; } 
     </style>

   Tip: Rather than defining styles for CTAT components directly in the tutor interface .html, they can be defined in a .css file (typically saved in the HTML/Assets/ folder of your package), and included in your tutor using a relative path. This is especially useful if you have more than one tutor interface that should have a similar look.

   <link rel="stylesheet" href="Assets/myTutor.css"/>

5. Setting a tab-order

   • The order in which focus moves to the next component when the student presses the Tab key is controlled by the tabindex attribute:

     <div id="text_input1" class="CTATTextInput" style="width: 77px; height: 28px"
          tabindex="1"></div>
     <div id="text_input2" class="CTATTextInput" style="width: 77px; height: 28px"
          tabindex="2"></div>

     Important: You should always specify a tabindex for each of the CTAT components that have tutoring enabled. Doing so helps to ensure that student input is evaluated properly when a student pressed the Tab key.

6. Do not forget to add a hint button and a hint window. For example something like the following:

   <div id="hint-box" style="height: 157px; padding: 5px;">
       <div id="hint-button" class="CTATHintButton" 
            style="margin: 0 5px 5px 5px; display: inline-block"></div>
       <div id="HintWindow" class="CTATHintWindow"
            style="display: inline-block; width: 400px;"></div>
   </div>

7. A Done button should also be included in most tutors. It should have the highest tab index as it is always the final step of the problem.

   <div id="done" class="CTATDoneButton" tabindex="15"></div>

Note: You can also create your package folders with the HTML5 Package Wizard in CTAT for HTML and Flash. The wizard produces the package folders and a sample HTML interface and behavior graph. These generated folders and files provide a starting point that you can build on.