<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture</TITLE>
<META NAME="Author" CONTENT="Craig W. Johnson, Ph.D">
<!-- Copyright © 1997 -->
<!-- All Rights Reserved -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from older browsers
//Author: Craig W. Johnson, Ph.D. email: cjohnson@acad1.sahs.uth.tmc.edu
//Last Revision January 8, 1997
Answer = new Array("",
"limitations",
"expansion",
"commanding",
"environments",
"edge",
"", //-- Button -->
"", //-- Radio Buttons -->
"", //-- Radio Buttons -->
"", //-- Radio Buttons -->
"", //-- Radio Buttons -->
"", //-- Radio Buttons -->
"format", //-- Radio Buttons -->
"", //-- Button -->
"", //-- Radio Buttons -->
"Relative", //-- Radio Buttons -->
"", //-- Radio Buttons -->
"", //-- Button -->
"Provides organizing framework",
"", //-- Button -->
"Practice",
"", //-- Button -->
"Feedback",
"", //-- Button -->
"Learning Resources",
"", //-- Button -->
"Learner Control",
"", //-- Button -->
"Presentation",
"" //-- Button -->
);
function mailIt(form) {
var data = document.CH1;
var userInfo = "";
var formdata="";
var item=0;
var result="";
userInfo += "Page Title: " + document.title + "\n";
userInfo += "Mailed From: " + document.location + "\n\n";
formdata+="PE1.1 0 No response: "+data.PE1_1[0].checked + "\n";
formdata+="PE1.1 1 HTML Editor limitations: "+data.PE1_1[1].checked + "\n";
formdata+="PE1.1 2 Expanding HTML features: "+data.PE1_1[2].checked + "\n";
formdata+="PE1.1 3 Conceptual understanding: "+data.PE1_1[3].checked + "\n";
formdata+="PE1.1 4 Many development environments: "+data.PE1_1[4].checked + "\n";
formdata+="PE1.1 5 Provides a development edge: "+data.PE1_1[5].checked + "\n";
formdata+="PE1.2 0 No response: "+data.PE1_2[0].checked + "\n";
formdata+="PE1.2 1 Documents consist of elements: "+data.PE1_2[1].checked + "\n";
formdata+="PE1.2 2 Elements may have attributes: "+data.PE1_2[2].checked + "\n";
formdata+="PE1.2 3 Elements have a logical structure: "+data.PE1_2[3].checked + "\n";
formdata+="PE1.2 4 Spacing is generally irrelevant: "+data.PE1_2[4].checked + "\n";
formdata+="PE1.2 5 Display formats are not absolute: "+data.PE1_2[5].checked + "\n";
formdata+="PE1.3 0 No response: "+data.PE1_3[0].checked + "\n";
formdata+="PE1.3 1 Relative: "+data.PE1_3[1].checked + "\n";
formdata+="PE1.3 2 Absolute: "+data.PE1_3[2].checked + "\n";
item=data.PE1_4.selectedIndex;
result=data.PE1_4.options[item].text;
formdata+="PE1_4: "+result+ "\n";
item=data.PE1_5.selectedIndex;
result=data.PE1_5.options[item].text;
formdata+="PE1_5: "+result+ "\n";
item=data.PE1_6.selectedIndex;
result=data.PE1_6.options[item].text;
formdata+="PE1_6: "+result+ "\n";
item=data.PE1_7.selectedIndex;
result=data.PE1_7.options[item].text;
formdata+="PE1_7: "+result+ "\n";
item=data.PE1_8.selectedIndex;
result=data.PE1_8.options[item].text;
formdata+="PE1_8: "+result+ "\n";
item=data.PE1_9.selectedIndex;
result=data.PE1_9.options[item].text;
formdata+="PE1_9: "+result+ "\n";
formdata+="SCORE: "+computescore() + "\n";
form.maildata.value = userInfo + formdata;
alert("This is what is being submitted to the instructor. " + form.action + ' '+
form.maildata.value);
return true;
}
function computescore ()
{
var nItems = 13;
var score = 0;
var nCorrect=0;
for (i=18; i<=29; i++)
{
item=document.CH1.elements[i].selectedIndex;
if (document.CH1.elements[i].options[item].text == Answer[i])
nCorrect+=1;
}
for (i=0; i<=16; i++)
if ( (document.CH1.elements[i].value == Answer[i]) &&
(document.CH1.elements[i].checked == true) )
nCorrect+=1;
score = (Math.floor((nCorrect/nItems)*10000+0.5))/100;
return score;
}
function showscore (nItems)
{
alert("Your score is "+computescore()+"%.");
}
function itemfeedback (elementNo)
{
var item=document.CH1.elements[elementNo].selectedIndex;
var nChecked=0;
if ((elementNo > 17) && (elementNo < 30))
{
if (document.CH1.elements[elementNo].options[item].text==Answer[elementNo])
{
alert("Good work! "+"\""+document.CH1.elements[elementNo].options[item].text+
"\""+" is correct.");
}
else
{
alert("\""+document.CH1.elements[elementNo].options[item].text+"\""+
" is not correct. Try again.");
}
}
else if ( (elementNo > 6) && (elementNo < 18) )
{
if ((document.CH1.elements[elementNo].value == Answer[elementNo]) &&
(document.CH1.elements[elementNo].checked == true) )
{
alert("Good work! "+"\""+document.CH1.elements[elementNo].value+
"\""+" is correct.");
}
else
{
alert("Your response is not correct. Try again.");
}
}
else
if ( (elementNo > 0) && (elementNo < 7) )
{
for (i = 1; i<6; i++)
{
if ( (document.CH1.elements[i].checked) )
{ nChecked+=1; }
}
if (nChecked < 5)
{
alert("You need more checks. Try again.");
}
else
{
alert("Good work! Checking all five is correct.");
}
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#c0c0c0">
<!-- MULTICOL COLS=1 WIDTH=90% -->
<BLOCKQUOTE>
<A NAME="TOC">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<H2><CENTER>Chapter 1: Web-based Hypermedia Coursware:<BR>
The Big Picture</CENTER></H2>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=20>
<TR>
<TH><BR><H2>Table of Contents</H2>
<TR>
<TD><BR>
<P>
<UL>
<LI><A HREF="#WHAT">What You Will Learn</A>
<LI><A HREF="#INTRO">Instructional Hypermedia: Why Have a
Command of the HTML Language?</A>
<UL>
<LI><A HREF="#WHYHTML">HTML: Commanding versus Browsing the Web</A>
<UL>
<LI><A HREF="#EDGE">HTML: Professional Benefits</A>
</UL>
<LI><A HREF="#WORKING">HTML: Developing a Command</A>
</UL>
<LI><A HREF="#HTML">HTML: What is It?</A>
<UL>
<LI><A HREF="#CHARACTERISTICS">HTML Characteristics</A>
</UL>
<LI><A HREF="#ID">Web-Based Hypermedia Courseware and Instructional Design</A>
<LI><A HREF="#HYPERTUTOR">A Hypermedia Instructional Design Model: The Hypertutor Model</A>
<UL>
<LI><A HREF="#HYPERTUTOR">The Hypertutor Model</A>
<LI><A HREF="#HYPERTUTOR_EX">Hypertutor Model Practice Exercises</A>
</UL>
<LI><A HREF="#MODELS">Web-based Hypermedia Courseware - Working Models</A>
<LI><A HREF="#PROTOTYPE">Prototype Hypermedia Course Web-Page</A>
<LI><A HREF="#SUMMARY">Summary</A>
<LI><A HREF="#REFERENCES">References</A>
</UL>
</P>
</TABLE>
</CENTER>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture</I></H5>
<A NAME="WHAT">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<FORM NAME="CH1" onReset="return confirm('Erase all entries?\nAre you sure?')">
<H2><CENTER>Chapter 1: Web-based Hypermedia Courseware:<BR>
The Big Picture</CENTER></H2>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10>
<TR>
<TH>What You Will Learn
<TR>
<TD>
<STRONG>
<UL>
<LI>Why Have a Command of the HTML Language?
<UL>
<LI>HTML: Commanding versus Browsing the Web
<UL>
<LI>HTML: Professional Benefits
</UL>
<LI>HTML: Why and How to Develop a Command
</UL>
<LI>What is HTML? General Characteristics
<LI>Hypermedia Instructional Design
<LI>Hypermedia Courseware Applications
</UL>
</STRONG>
</TABLE>
</CENTER>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 1</I></H5>
<A NAME="INTRO">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<H3>Instructional Hypermedia: Why Have a Command of the HTML Language?</H3>
<A NAME="WHYHTML">
<H4>HTML: Commanding versus Browsing the Web</H4>
</A>
<P>
The <I>HyperText Markup Language</I>
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HTML">(HTML)</A>
is one of the most important
and influential languages in the world.
HTML is the primary language of the
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#WEB">World-Wide Web</A>.
It specifies the structure of
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#WEB">Web</A>
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#DOCUMENT">documents</A>.
Typically, when you connect to a Web site, one or more HTML documents
are automatically downloaded to your client computer.
The HTML
contained in these documents provides instructions the Web
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#BROWSER">browser</A>
uses to display the documents, and to guide, tutor or
provide consequences for the user.
Having a command of the HTML
language then takes you from just browsing the Web, or navigating the Web
to <EM>commanding the Web</EM>. You have
considerable power over the contingencies, and
consequently the behaviors, that occur with
potentially tens of millions of computers.
</P>
<P>
Assuming no prior knowledge of HTML,
this hypermedia tutorial
(<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HYPERTUTORIAL">hypertutorial</A>)
walks you through the most important and
frequently used
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HTML">HTML</A>
elements.
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#ELEMENT">Elements</A> or
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#TAG">tags</A>
are perhaps the most prominent
features of HTML.
Elements are marked by tags
(e.g., <B> and </B> mark the start and end of a boldface element)
and may contain text, graphics, sound, "movies", or hypertext
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#LINK">links</A> to other resources.
Literally thousands of HTML element examples take you, step by step,
from the simplest to the most sophisticated instructional
hypermedia courseware applications.
This hypertutorial shows you how to take command of the
HTML language to author powerful, flexible, highly
sophisticated, and highly interactive Web-based hypermedia courseware,
and how to use JavaScript for immediate feedback, scoring
and email submissions of performance summaries. This sort of
command of the language provides
professional benefits. Some of these are listed below.
</P>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10>
<A NAME="EDGE">
<TH>HTML: The Professional Edge
</A>
<TR>
<TD>
<UL>
<LI>Add to your repertoire of professional skills
<LI>Publish Web courseware
<LI>Publish Web-based instructional systems
<LI>Add Web capabilities to your presentations
<LI>Increase your income
<LI>Enhance your professional and personal power
<LI>Enhance your personal satisfaction
</UL>
</TABLE>
</CENTER>
<A NAME="WORKING">
<H4>HTML: Developing a Command</H4>
</A>
<P>
Having a command means being in charge. HTML editors, converters and
other HTML utilities have been
designed to help developers of Web materials ease the
transition into the HTML working environment. But, these tools
currently have limited utility for those who really want to take command
of the environment to efficiently produce truly high quality,
sophisticated, highly interactive and flexible Web hypermedia courseware.
Such editors
provide, perhaps, an easier entry into Web authoring, but are not
the way to take charge of the HTML environment.
</P>
<P>
HTML editors tend to
insulate you from real knowledge and understanding of HTML
while providing limited access to the full power of the HTML
environment. They handicap your authoring growth
while impairing and limiting the quality, sophistication and
effectiveness of your products.
</P>
<P>
They do so, for one thing, because HTML is evolving. The language is
expanding to include new features, with new elements being added on an
ongoing basis. Second,
different browsers support different features of the evolving
HTML standards and some add their own non-standard elements
(e.g., Netscape). Consequently,
a vast range of issues which must be dealt with by developers
of hypermedia instructional presentations are not effectively
handled by HTML editors at the present time.
So, depending upon the desired level of sophistication of the
product, HTML editors often (a) must be used in conjunction
with other HTML authoring aids (e.g., file converters) to make up for
their limitations, and (b) still require a layer of manual
editing of the HTML source to really get it right for the
final Web publication.
</P>
<P>
Finally,
most experienced Webmasters agree that the quickest way to create
new HTML documents is to modify and adapt tested, working documents,
using them as templates, cutting and pasting elements as needed.
It is often just faster, more efficient and more effective to simply
type the tags rather than to stop and put them in with an HTML
editor
<A HREF="#REFERENCES">(Morgan, Wandling & Casselberry, 1996)</A>.
Tags not supported by the editor have to be typed separately anyway.
So, although an HTML editor may help a beginner quickly develop simple
Web documents, it can also quickly get in the way and begin to
feel like a straight jacket for the more experienced Web author.
While HTML editors and converters can be useful tools,
you have an edge if you really have a command of the HTML itself.
</P>
<P>
Commanding a working knowledge of
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HTML">HTML</A>
can save you time, increase your productivity, and improve the
sophistication, interactivity and quality of your work. Developing
that command does not take much time. HTML is fairly simple.
On the other hand, those who ignore the Web
phenomenon may be swamped in the backwash!
</P>
<P>
Once you have real command of the language you can
edit your HTML files with almost any text editor or word processor,
including those on <A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#UNIX">Unix</A>
servers with non-graphics environments.
You are not limited to one or a few HTML editing tools.
You can take command of the development environments, as well as the
language, giving you increased control, power and flexibility.
</P>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>A Real Command of the HTML Language: Why?</CENTER>
<TR>
<TH>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.1:</B><BR>
Check all boxes below indicating why it is valuable for
courseware developers to command a working knowledge
of HTML.<BR><BR>
<INPUT NAME="PE1_1" TYPE="CHECKBOX" VALUE="none" onClick="0" CHECKED>
No response<BR>
<INPUT NAME="PE1_1" TYPE="CHECKBOX" VALUE="limitations" onClick="0">
HTML Editor limitations<BR>
<INPUT NAME="PE1_1" TYPE="CHECKBOX" VALUE="expansion" onClick="0">
Expanding HTML features<BR>
<INPUT NAME="PE1_1" TYPE="CHECKBOX" VALUE="commanding" onClick="0">
Commanding the Web<BR>
<INPUT NAME="PE1_1" TYPE="CHECKBOX" VALUE="environments" onClick="0">
Many development environments<BR>
<INPUT NAME="PE1_1" TYPE="CHECKBOX" VALUE="edge" onClick="0">
Provides a development edge<BR><BR>
<CENTER>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="WORKKNOW" onClick="itemfeedback(6)">
</CENTER>
</TABLE>
</CENTER>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 2</I></H5>
<A NAME="HTML">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<H3>HTML: What is It?</H3>
<P>
An HTML
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#DOCUMENT">document</A>
is simply a standard text document saved in
standard
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#ASCII">ASCII</A>
text file format which, along with the standard
text, includes HTML
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#TAG">tags</A> or
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#ELEMENT">elements</A>
that Web
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#BROWSER">browsers</A>
use as codes to determine how to display the document. Such
a file is often referred to as an HTML file.
</P>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=90%>
<A NAME="CHARACTERISTICS">
<TH>HTML Characteristics
</A>
<TR>
<TD>
<UL>
<LI><U>HTML documents consist of elements marked by start
and end tags like <I>...</I></U> where the "..." represents
any text. More generally elements have the format
<TAGNAME> [text] </TAGNAME>, where "TAGNAME" represents
the name of any HTML tag. Empty elements, like <HR>
which produces a horizontal rule or line require no
end tags.<BR><BR>
<LI><U>Elements may have attributes.</U> Attributes apply
certain characteristics to the element. For example,
the "BGCOLOR" attribute of the <BODY> tag specifies
the background color of the document. The tag or element
names or attribute names may be typed in upper or lower
case.<BR><BR>
<LI><U>Elements have a logical structure</U> and may be nested,
so one element may be placed or embedded within
another in many cases as in<BR>
<TAG1>... <TAG2>... </TAG2>... </TAG1>,<BR>
but elements may not be overlapped as in<BR>
<TAG1>... <TAG2>... </TAG1>... </TAG2>.
<BR><BR>
<LI><U>Spacing is irrelevant unless included within quotes.</U>
Blank lines, spaces and larger blank areas, etc.
will not affect the format of the document when viewed
in the browser.
<BR><BR>
<LI><U>Absolute browser display positioning
of text, graphics and other HTML elements
cannot ordinarily be specified by the HTML author.</U>
Element positioning within a display may be specified
only in a more relative sense. At this time, window size,
font face, display size and
resolution, absolute font size, font colors,
and other display characteristics are set by the
browser, not the author of the HTML document.
A good rule of thumb is to <I>view display
issues in a relative rather than an absolute sense</I>
The relative approach is typically more likely to
produce the intended results.
</UL>
</TABLE>
</CENTER>
<P>
Any word processor or text editor which can save files
in the standard
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#ASCII">ASCII</A>
file format can be used to create or edit
HTML files. On the other hand, as previously stated, many specialized
HTML editors, designed specifically to ease the development of HTML
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#DOCUMENT">documents</A>
as well as HTML converters, designed to translate various
file formats (e.g., <CITE>Word Perfect</CITE>,
<CITE>Microsoft Word</CITE>, etc.) into HTML can
also be used to create HTML files.
</P>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 3</I></H5>
<A NAME="ID">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<H3>Web-Based Hypermedia Courseware and Instructional Design</H3>
<P>
The last characteristic above points-up a special consideration
for instructional design related to
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#WEB">Web</A> courseware development
that has particularly important implications.
The point is that at this time, the Web author
has less control over the display format of
Web pages than might be desired. For example, if
you want to occupy a whole screen with a particular display,
part of the question concerns how this can be accomplished when screens
have display resolutions of 640 by 480, 800 by 600 and 1028 by
764 among others - and at the same time font size, font color,
and so forth are under the control of the client. Such issues create
special problems for the implementation of frame-based
computer-instructional sequences which typically are paged
rather than scrolled.
</P>
<P>
These considerations must be addressed in any
courseware application intended for a wide audience where
hardware configurations are not under the control of the
Web author. While there are various ways of
approaching the issue, some trivial in nature,
one of the better approaches is to design
Web pages attending to display elements in a relative
rather than absolute sense. You will see how the
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#TABLE">"Tables"</A>
feature of HTML 3 can help to accomplish this in a later
chapter.
</P>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>Instructional Design and HTML</CENTER>
<TR>
<TH ROWSPAN=2>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.2:</B><BR>
Which one of the following characteristics of
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HTML">HTML</A>
must be addressed as you design the format of your
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#WEB">Web</A> pages?
<BR><BR>
<INPUT NAME="PE1_2" TYPE="RADIO" VALUE="none" CHECKED>
No response<BR>
<INPUT NAME="PE1_2" TYPE="RADIO" VALUE="elements">
Documents consist of elements<BR>
<INPUT NAME="PE1_2" TYPE="RADIO" VALUE="attributes">
Elements may have attributes<BR>
<INPUT NAME="PE1_2" TYPE="RADIO" VALUE="structure">
Elements have a logical structure<BR>
<INPUT NAME="PE1_2" TYPE="RADIO" VALUE="spacing">
Spacing is generally irrelevant<BR>
<INPUT NAME="PE1_2" TYPE="RADIO" VALUE="format">
Display formats are not absolute<BR><BR>
<CENTER>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="ABSOLUTE" onClick="itemfeedback(12)">
</CENTER>
<TR>
<TD>
<B>Practice Exercise 1.3:</B><BR>
Is it typically better for the Web-based hypermedia courseware
author to view screen display design from the perspective of
a relative or an absolute orientation?
<BR><BR>
<INPUT NAME="PE1_3" TYPE="RADIO" VALUE="none" CHECKED>No response<BR>
<INPUT NAME="PE1_3" TYPE="RADIO" VALUE="Relative">Relative<BR>
<INPUT NAME="PE1_3" TYPE="RADIO" VALUE="absolute">Absolute<BR><BR>
<CENTER>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="RELATIVE" onClick="itemfeedback(15)">
</CENTER>
</TABLE>
</CENTER>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 4</I></H5>
<A NAME="HYPERTUTOR">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<H3>A Hypermedia Instructional Design Model: The Hypertutor Model</H3>
<P>
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#WEB">Web</A>
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#BROWSER">browsers</A>
introduce profound instructional hypermedia capabilities
because they combine multimedia capabilities with hypertext
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#LINK">linking</A>
to a broad range of
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#INTERNET">Internet</A>
based resources. In addition,
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#FORM">"forms"</A>
capabilities allow a higher order interactivity
along with automated scoring and email-based storage of results when
implemented with the
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#JAVASCRIPT">JavaScript</A>
or Java languages.
</P>
<P>
This unique and powerful combination of instructional tools
necessitates a comprehensive instructional design model.
Following review of the instructional and educational
psychology literature, the author and P.A. Grover have
developed such a model. That model
<A HREF="#REFERENCES">(Johnson & Grover, 1993)</A>
provides a general organizing framework for hypermedia courseware
design. It is called the
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HYPERTUTOR">Hypertutor Model</A>)
The present
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HYPERTUTORIAL">hypertutorial</A>
implements many features of the Hypertutor Model.
Click on the features of the Hypertutor Model Clickable Imagemap below
or see Chapter 4 for more information.
</P>
<CENTER>
<TABLE BORDER>
<TR COLSPAN=2>
<TH COLSPAN=2>Hypertutor Model Clickable Imagemap
<TR>
<TD COLSPAN=2>
<CENTER><IMG SRC="http://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/LEARNCON.GIF"
ALT="Diagram of Hypertutor Model" usemap="#learncon"></CENTER>
<TR>
<TH><CENTER>Hypertutor Model:<BR>
Five Factors
</CENTER>
<TD><BR>
<UL>
<LI>Learner Control
<LI>Presentation
<LI>Practice
<LI>Feedback
<LI>Elaborative Learning Resources
</UL>
</TABLE>
</CENTER>
<P>
The research literature shows
(see for a brief review
<A HREF="#REFERENCES">Johnson & Grover, 1993</A>) that superior
implementation of each factor in the model results in superior
instructional outcomes. According to the
Hypertutor model, Web-based
hypermedia instruction can be best implemented in an environment which
encourages the active learner with a high degree of learner control,
while at the same time providing a default pathway for the learner.
The model is particularly appropriate for Web-based instruction because
not only can the presentation, practice, feedback and learner control
features be executed in a superior fashion, but
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HYPERLINK">hyperlink</A> access
makes a broad range of learning resources almost instantly
accessible. Consequently, Web-based hypermedia courseware can be
expected to be more effective as it more effectively executes the five
features of the Hypertutor Model.
</P>
<A NAME="HYPERTUTOR_EX">
<HR WIDTH=50%>
</A>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>Hypertutor Model</CENTER>
<TR>
<TH>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.4:</B><BR>
Choose the option below that best summarizes
the value of the Hypertutor Model for hypermedia
instructional design?
<BR><BR>
<CENTER>
<SELECT NAME="PE1_4" SIZE=5>
<OPTION SELECTED> No Response
<OPTION> Includes five factors
<OPTION> Identifies important features
<OPTION> Provides default pathway
<OPTION> Provides organizing framework
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="HYPTERTUTOR" onClick="itemfeedback(18)">
</CENTER>
</TABLE>
</CENTER>
<HR WIDTH=50%>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>Hypertutor Model</CENTER>
<TR>
<TH>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.5:</B><BR>
Responding to questions embedded in an instructional
sequence is an instance of which feature of
the Hypertutor Model for hypermedia instructional design?
<BR><BR>
<CENTER>
<SELECT NAME="PE1_5" SIZE=6>
<OPTION SELECTED> No Response
<OPTION> Learner Control
<OPTION> Presentation
<OPTION> Practice
<OPTION> Feedback
<OPTION> Learning Resources
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="PRACTICE" onClick="itemfeedback(20)">
</CENTER>
</TABLE>
</CENTER>
<HR WIDTH=50%>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>Hypertutor Model</CENTER>
<TR>
<TH>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.6:</B><BR>
Hints after an incorrect response to a question during
instruction is an instance of which feature of
the Hypertutor Model for hypermedia instructional design?
<BR><BR>
<CENTER>
<SELECT NAME="PE1_6" SIZE=6>
<OPTION SELECTED> No Response
<OPTION> Learner Control
<OPTION> Presentation
<OPTION> Practice
<OPTION> Feedback
<OPTION> Learning Resources
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="FEEDBACK" onClick="itemfeedback(22)">
</CENTER>
</TABLE>
</CENTER>
<HR WIDTH=50%>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>Hypertutor Model</CENTER>
<TR>
<TH>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.7:</B><BR>
A hypertext glossary accessed by clicking on the
term in question is an instance of which feature of
the Hypertutor Model for hypermedia instructional design?
<BR><BR>
<CENTER>
<SELECT NAME="PE1_7" SIZE=6>
<OPTION SELECTED> No Response
<OPTION> Learner Control
<OPTION> Presentation
<OPTION> Practice
<OPTION> Feedback
<OPTION> Learning Resources
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="RESOURCES" onClick="itemfeedback(24)">
</CENTER>
</TABLE>
</CENTER>
<HR WIDTH=50%>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>Hypertutor Model</CENTER>
<TR>
<TH>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.8:</B><BR>
Ability to follow a default path through instruction
as well as choosing to pursue a chain of hypertext
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#LINK">links</A> for elaboration on an issue of
particular interest is an instance of which feature of the
Hypertutor Model for hypermedia instructional design?
<BR><BR>
<CENTER>
<SELECT NAME="PE1_8" SIZE=6>
<OPTION SELECTED> No Response
<OPTION> Learner Control
<OPTION> Presentation
<OPTION> Practice
<OPTION> Feedback
<OPTION> Learning Resources
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="CONTROL" onClick="itemfeedback(26)">
</CENTER>
</TABLE>
</CENTER>
<HR WIDTH=50%>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=10 WIDTH=80%>
<TR>
<TD COLSPAN=2>
<CENTER><B>Hypertutor Model</CENTER>
<TR>
<TH>
Practice<BR>
Exercise:
<TD>
<B>Practice Exercise 1.9:</B><BR>
Words and pictures presented during instruction
are typically an instance of which feature of the
Hypertutor Model for hypermedia instructional design?
<BR><BR>
<CENTER>
<SELECT NAME="PE1_9" SIZE=6>
<OPTION SELECTED> No Response
<OPTION> Learner Control
<OPTION> Presentation
<OPTION> Practice
<OPTION> Feedback
<OPTION> Learning Resources
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Get Feedback..." NAME="PRESENT" onClick="itemfeedback(28)">
</CENTER>
</TABLE>
</CENTER>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 5</I></H5>
<A NAME="MODELS">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<H3>Web-based Hypermedia Courseware - Working Models</H3>
<P>
The prototype, hypermedia, course
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#WEB">Web</A>
page below provides a good
overview of the broad range of courseware development skills you will have
when you are done with this
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HYPERTUTORIAL">hypertutorial</A>.
Among the features
of the Web page are
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#LINK">links</A>
to the University of Texas - Houston
Health Science Center home page and the School of Allied Health
Science, a course catalog description, links to a course
syllabus, lecture notes, course newsgroup, on line instruction;
a sample quiz, a sample practice exercise including feedback,
and a sample interactive frame-based computer-assisted instruction (CAI)
sequence with relative positioning. The quiz, practice exercise
and CAI all include automated scoring and emailing of results to
the instructor and make use of the
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#FORM">"forms"</A>
capabilities available
with
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HTML">HTML</A>
and
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#JAVASCRIPT">JavaScript</A>.
A course instructor biography page with sound
and graphics is featured as well as access to a variety of
instructionally relevant databases. Keep in mind that links to
external resources (e.g., databases) require an
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#INTERNET">Internet</A>
connection.
</P>
<P>
Try out now the features of the
prototype Web page. Keep in mind that unless you have an Internet
connection, links to outside resources (as in the database and library
list) cannot be accomplished. Especially be sure to
try the sample quiz, the practice exercises and CAI/CBT
instruction. Respond to the questions. Notice the immediate
feedback on practice exercises and the frame-based CAI/CBT example.
Where appropriate, press
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#BUTTON">buttons</A>
for feedback, to show your score,
and to emulate emailing results to the instructor. In other
words, try out everything.
</P>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 6</I></H5>
<A NAME="PROTOTYPE">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<TABLE BORDER ALIGN=CENTER>
<TH><BR>Prototype Hypermedia Course Web-Page<BR><BR>
<TR>
<TD>
<H2>
<CENTER>
The University of Texas Houston Health Science Center<BR>
<IMG ALIGN=MIDDLE SRC ="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/UTLOGO.GIF" ALT="UT LOGO">
School of Allied Health Sciences<BR>
AHS4312 - Introduction to Statistics in Allied Health
</CENTER>
</H2>
(2.5 hours/week lecture/discussion, 1.5 hours/week laboratory)<BR>
3 Semester Credits
<HR>
<H2>
Course Catalog Description
</H2>
<P>
An introductory course which provides the student the opportunity
to learn and apply the fundamentals of descriptive and inferential
statistical analysis. This course includes the study of frequency
distributions, measures of central tendency, variance, hypothesis
testing, correlation and experimental design issues. The student
will have the opportunity to learn to compute t-tests, analysis
of variance, chi-square tests of significance and other parametric
and nonparametric statistical tests. Grades are based on class
assignments and unit tests.
</P>
Prerequisites: College Algebra
<HR>
<H3>
Course Resources (Require network connection).
</H3>
<UL>
<LI><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/AHS4312S.HTM">Course Syllabus</A>
<LI><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/NOTES.HTM">Course Lecture Notes</A>
<LI><A href="news:uth.oedr">Course Newsgroup - uth.oedr</A>
<LI><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/L1_1WHCD.HTM">Course On-line Internet Instruction</A>
<LI><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/QUIZ.HTM">Sample Quiz</A>
<LI><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/PE1_S.HTM">Sample Practice Exercise</A>
<LI><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/HEART.HTM">Sample CAI/CBT (A brief respite from statistics)</A>
<LI><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/CWJ.HTM">Course Instructor Bio</A>
<LI><A href="mailto:cjohnson@acad1.sahs.uth.tmc.edu">Instructor Email:
cjohnson@acad1.sahs.uth.tmc.edu</A>
</UL>
<H3>
Course Relevant Databases/Libraries (Require network connection.)
</H3>
<UL>
<LI><A href="gopher://ericir.syr.edu">AskERIC - (Educational Resources Information Clearinghouse, Databases, etc.)</A>
<LI><A href="http://ericir.syr.edu/index.html">ERIC World Wide Web Database, (1989 - present)</A>
<LI><A href="http://www.cua.edu/www/eric_ae/">ERIC World Wide Web Clearinghouse on Assessment & Evaluation</A>
<LI><A href="tn3270://auducacd.duc.auburn.edu">ERIC Database: U. of Auburn, 1966 - present (tab to APPLICATION, enter LUIS, then ERIB or ERIC)</A>
<LI><A href="telnet://hollis.harvard.edu">ERIC Database: Harvard U, 1989 - present (login "HOLLIS", then "ER", VT100 emulation)</A>
<LI><A href="tn3270://library.usask.ca">ERIC Database: U. of Saskatchewan, 1983 - present (login "public", VT100 emulation)</A>
<LI><A href="telnet://db.lib.utsystem.edu">ERIC Database: UT Access Only, 1966 - present (VT100 emulation)</A>
<LI><A href="telnet://psycinfo.lib.utsystem.edu">PsycInfo Database: UT Access Only, 1967 - present (VT100 emulation)</A>
<LI><A href="gopher://gopher.ed.gov">ERIC Digests (short reports on current education topics)</A>
<LI><A href="gopher://vmsgopher.cua.edu:70/11gopher_root_eric_ae%3A%5B000000%5D">ERIC Gopher Clearinghouse on Assessment & Evaluation</A>
<LI><A href="http://www.loc.gov">Library of Congress (World Wide Web)</a>
<LI><A href="http://www.library.tmc.edu">Texas Medical Center Library</a>
</UL>
<EM><A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/CWJEMAIL.HTM">cwj</A> - 11/10/96.</EM>
</TABLE>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 7</I></H5>
<A NAME="SUMMARY">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<CENTER><H3>Summary</H3></CENTER>
<P>
This chapter illustrates how taking command of the HTML language can
take you from browsing the Web to <EM>commanding the Web</EM>.
The chapter provides a preview of what's to come. It shows
what you will be able to do, given attainment of
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HYPERTUTORIAL">hypertutorial</A>
goals and objectives. You now have actual experience with
the kinds of courseware you could produce
after diligent work with this hypertutorial.
You learned about the general characteristics of
<A HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#HTML">HTML</A>.
You learned about the professional and personal
<EM>benefits</EM> to be gained from having a command of HTML.
You learned about the Hypertutor Model for design of hypermedia
instructional systems.
The working examples of Web-based hypermedia applications
encouraged you to explore a wide range of courseware applications
that you could use as templates and adapt for your own repertoire
as you continue your work with this hypertutorial.
</P>
<CENTER>
<TABLE BORDER UNITS=EN CELLPADDING=5 WIDTH=100% HEIGHT=60%>
<TR>
<TH>
<H3>
End Chapter 1: Web-based Hypermedia Courseware Development:
The Big Picture<BR><BR>
</H3>
<CENTER><INPUT TYPE="reset" VALUE="Erase All Entries..."></CENTER>
</TABLE>
</CENTER>
</FORM>
<CENTER>
<FORM
NAME="mailForm"
ACTION="mailto:cjohnson@acad1.sahs.uth.tmc.edu"
METHOD="post"
ENCTYPE="multipart/form-data"
onSubmit="return mailIt(this)">
<INPUT TYPE="hidden" NAME="maildata" VALUE="">
<CENTER><INPUT TYPE="button" VALUE="Show Score..." onClick="showscore(13)">
<INPUT TYPE="submit" VALUE="Submit to Instructor..."></CENTER>
</FORM>
<BR>
<H6>Copyright © 1996 <AU>Craig Johnson</AU><BR>
Comments:
<ADDRESS>
<A HREF="mailto:cjohnson@acad1.sahs.uth.tmc.edu">cjohnson@acad1.sahs.uth.tmc.edu</A>
</ADDRESS></H6>
</CENTER>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 8</I></H5>
<A NAME="REFERENCES">
<HR>
</A>
<H5 ALIGN=RIGHT><I>Web-based Hypermedia Courseware Development</I></H5>
<CENTER>
<H3>References</H3>
</CENTER>
<OL>
<LI>Johnson, C. W., & Grover, P. A. Hypertutor Therapy for Interactive
Instruction. <CITE>Educational Technology</CITE>, 1993, 33(1), 5-16.
<LI>Morgan, M., Wandling, J. & Casselberry, R. <CITE>Webmster Expert
Solutions</CITE>. Indianapolis, IN: Que, 1996.
</OL>
<H5 ALIGN=RIGHT><I>Chapter 1: Web-Based Hypermedia Courseware: The Big Picture 1 - 9</I></H5>
<HR>
<BR>
</BLOCKQUOTE>
<MAP NAME="learncon">
<AREA SHAPE="RECT" ALT="Presentation" COORDS="152,73,237,128"
HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#PRESENTATION">
<AREA SHAPE="RECT" ALT="Practice" COORDS="314,72,398,100"
HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#PRACTICE">
<AREA SHAPE="RECT" ALT="Feedback" COORDS="314,101,398,127"
HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#FEEDBACK">
<AREA SHAPE="POLYGON" ALT="Multiple Examples" COORDS="80,129,38,130,
19,144,20,176,29,205,48,247,66,270,94,290,105,290,114,278,114,262,
109,251,106,230,109,218,115,210,114,202,134,166,132,155,120,143,102,
134,75,128" HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#MULTEX">
<AREA SHAPE="POLYGON" ALT="Multiple Questions" COORDS="479,126,441,133,
412,153,413,167,442,230,436,254,432,261,433,277,440,286,451,286,468,
278,485,262,502,239,509,215,523,185,524,139,501,126,476,126"
HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#MULTQUES">
<AREA SHAPE="POLYGON" ALT="Learning Resources" COORDS="229,170,228,217,
203,215,205,222,187,235,183,230,176,255,139,255,141,298,160,302,160,
322,187,322,190,337,206,337,208,348,238,348,239,363,309,363,310,348,
345,348,344,335,358,335,358,324,386,324,385,301,408,301,408,257,369,
254,360,230,357,235,340,223,344,215,318,215,318,170,228,169"
HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#RESOURCES">
<AREA SHAPE="RECT" HREF="HTTP://www.uth.tmc.edu/uth_orgs/educ_dev/whcd/GLOS1_0.HTM#CONTROL" COORDS="0,0,536,451">
</MAP>
</BODY>
</HTML>