Skip to content

Creating an HTML Tutor Manually

Jump to bottom
Sandy Demi edited this page May 16, 2017 · 5 revisions

Creating an HTML Tutor Manually

Requirements

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:

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. Alternatively, you can download the latest files from http://cdn.ctat.cs.cmu.edu/releases/latest/ and include them manually in your tutor's package folder. 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.

Overview

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. This page will help you create such a tutor and show you how you can deploy the tutor on a variety of Learner Management Systems (LMSs). Before we begin, let's take a look at the two main ways you might want to think about your tutor in HTML.

Full Page vs. Fixed-Size Tutors

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. 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.

Manual Tutor Building Workflow

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. 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 tutor is a <div> element with any number of child divs configured as CTAT components by our JavaScript library. To tell the library that a div is really a tutorable component you would do something like this:

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

The 'id' gives the component a unique name, which you will be using in the behavior recorder and which forms what we call the selection part of the SAI (Selection-Action-Input). All you need besides a unique id is a class, which does two things. It assigns appropriate CSS styles to the div and it identifies the div as a CTAT component. At startup our library will scan the document and customize 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>

<script>
 var myVars = 
 {
    question_file: "ctat-manual-tutor-creation-example-01.brd",
    tutoring_service_communication: "javascript"
 };	

 function ctatOnload ()
 {
   initTutor(myVars);
 }
</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>

(You can get the BRD file used in this example here: ctat-manual-tutor-creation-example-01.brd. Simply place it in the same directory as the html file you've created.)

If you save the above HTML in a file and open that file in a browser, 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.

Image of Interface with Done Button

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>

<script>
 var myVars = 
 {
    question_file: "ctat-manual-tutor-creation-example-01.brd",
    tutoring_service_communication: "javascript"
 };	

 function ctatOnload ()
 {
   initTutor(myVars);
 }
</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>

(You can get the BRD file used in this example here: ctat-manual-tutor-creation-example-01.brd. Simply place it in the same directory as the html file you've created.)

If you cut and paste the above tutor HTML into an .html file and open that file with your favorite browser you should see the tutor shown below:

Image of an interface with a Hint Window and Done Button

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 setup a control panel in the bottom of your tutor using a 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>

<script>
 var myVars = 
 {
    question_file: "ctat-manual-tutor-creation-example-01.brd",
    tutoring_service_communication: "javascript"
 };	

 function ctatOnload ()
 {
   initTutor(myVars);
 }
</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>

(You can get the BRD file used in this example here: ctat-manual-tutor-creation-example-01.brd. Simply place it in the same directory as the html file you've created.)

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.

Image of an interface with a Hint Window and Done Button

Manually Creating a Tutor Interface Step by Step

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>

    • For a stand-alone html tutor, follow the JavaScript example below. This is the minimum you need to get a tutor started. You can either use the JQuery usage shown here or place the initTutor call in an onLoad.

      <script>
 var myVars = 
 {
    question_file: "ctat-manual-tutor-creation-example-01.brd",
    tutoring_service_communication: "javascript"
 };	

 function ctatOnload ()
 {
   initTutor(myVars);
 }
</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%; z-index: 400;">
</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%; z-index: 400;">
  <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>

    Supported 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>

  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>

  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.

CTAT: Cognitive Tutor Authoring Tools, Software for authoring intelligent tutor behavior

CTAT Documentation

Getting Started
Using CTAT
HTML Components
TutorShop
Additional Documentation
In Development

Clone this wiki locally