Free Tutorial

Instructions and Samples

This document describes how to obtain and use the free tutorial template presented by the author at IEEE Southeastcon, 1999.

The template allows instructors to design Web pages to present interactive tutorials to students. Instructors may use the tutorial template without charge, so long as proper credit is given to the author. This is done simply by leaving my name in the copyright notice, and also by leaving the copyright comment in the code.

In order for you to determine if the tutorial is a good tool for use in your classes, click on the Sample Tutorial below.

Run the Sample Tutorial

If you found that the Sample Tutorial served as a good example of a pedagogic tool, you may wish to go on and learn how to develop your own tutorials. This is done by making your own custom modifications to the Tutorial Template. Click on the Tutorial Template below to get a general idea of what it looks like and what types of information you must enter.

View the Tutorial Template

To use the Template you need a minimal knowledge of HTML. Most of the entries you make will just be changes to text, but knowing a little about HTML syntax will be invaluable.

You will also need a text editor (not a word processor), or a Web-creation tool, such as Microsoft FrontPage. You will use this to modify the text of the Template to create your own tutorials.

How to Create a Tutorial

Here are the details of tutorial creation. These are step-by-step instructions on how to modify the template to make your own tutorial.

Print these instructions.

Capture Template.htm. You can do this by displaying (linking to) Template.htm, then clicking File/Save As on the upper left of your browser screen. This will save Template.htm on your computer.

Open the document Template.htm in a text editor or Web editor.

Find <title>Tutorial Template</title>. Change Tutorial Template to some short descriptive phrase that identifies the tutorial you are preparing.

Change [Your Course Name Here] to the name of your course.

Change [Your Tutorial Name Here] to the name of your lesson.

Change "CORRECT ANSWER HERE" to the text of the answer to the question you intend to ask. Enclose strings in quotes. Numerical answers should not be enclosed in quotes. Note that there is but one answer allowed per tutorial page.

Find the line that reads, var hmax=3. Change the 3 to the number of hints you wish to give. A hint will be given each time the user enters a wrong answer, until all hints are given. Then the user will be told the right answer.

Find these lines:
hints[0] = "Put first hint here."
hints[1] = "Put second hint here."
hints[2] = "Put third hint here."
Insert your own hints inside the quotes. Add or remove lines as necessary. Since hints are numbered starting at 0, the highest numbered hint will be one less than the number you entered for var hmax.

Replace [Text of your tutorial here] with whatever text you want. You may wish to include background material and graphics as well as the text of your question.

Replace [insert function name here] with the name of the variable that the user must calculate.

Replace [insert units here] with appropriate units for your variable, such as ohms, meters, or seconds. If your variable is unitless, delete [insert units here].

Find href="Page2.htm". This gives the name of the second page of the tutorial. Change Page2.htm to something appropriate. If, for example, you were writing a tutorial on AC power, you might call the initial page of the tutorial ACPow.htm, and Page2.htm would then be called ACPow2.htm.

Find href="YourHomePage.htm". Change this to the page you use to link to the tutorial.

In the copyright notice, find Your Name and Thomas G. Cleaver. Change Your Name to (what else?) your name. Please leave my name there too, to give me credit for creating the code.

You will now need to insert your e-mail address so that users can contact you directly from the Web page. Find your.name@your.school.edu in two places at the bottom of the template. Change both of them to your correct e-mail address.

Use Save as to save your newly created tutorial, do not use Save, as that will delete Template.htm. Give the tutorial an appropriate name, such as ACPow.htm.

Test the first page of your tutorial using any web browser that recognizes JavaScript; this includes all newer versions of Netscape Navigator and Internet Explorer. Edit your code as necessary.

Create additional pages for your tutorial using your first page as a template.

On the last page of your tutorial, you should replace the following code:

After you get the answer, please click on an option: 
<li>Go on to the <a href="Page2.htm"> next part</a> of the tutorial.</li>
<li>Go back to the <a href="YourHomePage.htm> home page</a>.</li>
</ul>

with

Congratulations, You have completed the tutorial. Please <a href="YourHomePage.htm"> click here</a> to go back to the home page. 

For your convenience, the replacement code is contained within a comment in Template.htm.

Test your complete tutorial.

Save all the files of your completed tutorial on your web server.

That's it. You've created a custom tutorial.