Dr. John A.
Steffa, DMA
Associate Professor of Music
Department of Music
Murray
State University
Murray, Kentucky
Significant numbers of incoming music students at this regional public
university are determined to have less than adequate preparation in fundamental
music theory concepts. In the Fall of 1998, a web course called Introduction to
Music Theory and Aural Skills was published as an interactive and self-contained
learning environment to provide a partial solution to this problem.
This
presentation will provide an overview of the course design, highlighting aspects
of HTML and JavaScript which provide interactivity. Recent course revisions have
involved rewriting the material using Macromedia's Director. Some initial
comparisons and contrasts between the two authoring environments will be
made.
BACKGROUND
By means of diagnostic examinations, significant numbers of incoming college
freshman music students at this regional public university are determined to
have less than adequate preparatory music theory knowledge. To enroll in and
successfully pass the first semester of four sequenced levels of music theory
courses, a vast majority of students first need remedial help in such
fundamental concepts as constructing scales, labeling intervals, counting simple
rhythms, naming key signatures, broadly defining the most basic terminology and
recognizing common notation symbols. A course called Introduction to Music
Theory and Aural Skills was designed and implemented on campus to meet that need
in the Fall of 1991.
Although the creation of the course "fixed" the
problem of remedial skills at the college level, students with a weak
theoretical background continue to enroll as music majors in increasing numbers.
In seeking further resolution to the problem, two options became the focus of
attention when the decision was made to develop an internet version of the
fundamental music theory course. Create an interactive web course that could be
taken by: 1) anyone with a computer
1
with no help from an instructor, or 2) anyone who has paid the fees to be
officially enrolled allowing for minimal help from an instructor. Establishing
that audience base meant that the course could be completed by: 1) college
freshmen music majors who are diagnosed as being "border line" in music theory
preparation; 2) high school students (in a music class that is supervised by a
music instructor); 3) high school students on their own initiative (to prepare
for college level diagnostic exams); or 4) anyone with an interest in the
fundamentals of music theory.
INITIAL DESIGN
CONSIDERATIONS
Practical design considerations for an internet music theory fundamentals
course involved recognizing the need to create musical examples as images,
musical examples as sound files and an interactive environment as an enhanced
learning tool. To create an interesting learning interface, certain programming
objectives and considerations were established as high priority.
First,
reading from the computer screen can be naturally interactive. A user can be
asked to react to written text by pointing and clicking the mouse. Instructions
can be highlighted, essential points can be clarified and questions can be
answered by passing the mouse over text or images. Second, hearing the examples
is of paramount importance. If the sound bytes are small enough to be downloaded
quickly, the computer is an adequate tool for providing audio examples. Many
software titles, such as "SoundEdit" and "Deck," are designed to expedite the
creation of audio examples. When discussing scales, students are able to
experience the difference between major and minor by listening to examples of
each. When determining the characteristic sound of a particular interval, no
verbal explanation can replicate the actual sound of that interval. Third, the
course had to be cross-platform and current (but not "cutting-edge"). Most
public school systems in our region do not have the funding to maintain
technological currency, so remaining behind the "state-of-the-art" by one
generation seemed a practical consideration. Fourth, internet students must have
the same ability to put pencil to paper as the students who take the parent
in-class course. For that reason, Adobe Acrobat files were created and made
available for download. Such files include manuscript paper for drawing symbols,
practice tests which include musical examples and glossary files which can be
downloaded, printed and studied.
CREATING
INTERACTIVITY
Interactivity was deemed at the outset of development as being very
important. The course author and developer is not a programmer and was initially
confined to learning to writing in HTML code. To create the interactive element,
some public domain JavaScript was adapted to suit the needs of the
course.
2
The following basic HTML code is all that is needed to create a web
document that prints CHAPTER INDEX in the middle of a white page and places four
clickable images below that.
<HTML>
<HEAD>
<TITLE>Chapter
Index</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff"
ALINK="#000000" VLINK="#595c5e">
<P
ALIGN=CENTER><B><BR>
<FONT SIZE="+2">CHAPTER
INDEX<BR>
</FONT></B></P>
<P
ALIGN=CENTER><A HREF="../chapter1/ch1page1.htm,"window.status='Chapter
One: Musical Symbols';return true" ><IMG SRC="pix/ch1off.gif"
BORDER="0"
NAME="toc1" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22"
NATURALSIZEFLAG="0"
ALT=""></A> <BR>
<A
HREF="../chapter2/ch2page1.htm,"window.status='Chapter Two: Note and Rest
Values';return true"><IMG SRC="pix/ch2off.gif"
BORDER="0"
NAME="toc2" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22"
NATURALSIZEFLAG="0"
ALT=""></A> <BR>
<A
HREF="../chapter3/ch3page1.htm,"window.status='Chapter Three: Rhythm'; return
true"><IMG SRC="pix/ch3off.gif" BORDER="0"
NAME="toc3"
ALIGN="MIDDLE" WIDTH="151" HEIGHT="22"
NATURALSIZEFLAG="0"
ALT=""></A><BR>
<A
HREF="../chapter4/ch4page1.htm,"window.status='Chapter Four: Meter
Signatures';return true"><IMG SRC="pix/ch4off.gif"
BORDER="0"
NAME="toc4" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22"
NATURALSIZEFLAG="0"
ALT=""></A><BR>
</P></BODY>
3
To add interactivity to the images, such as "rollovers," JavaScript is necessary. The following added code (in bold) allows each of the above images to change as the mouse passes over any one of them.
<HTML>
<HEAD>
<TITLE>Chapter
Index</TITLE>
<SCRIPT LANGUAGE="JavaScript">
{ toc1on = new
Image();
toc1on.src = "pix/ch1on.gif";
toc2on = new Image();
toc2on.src
= "pix/ch2on.gif";
toc3on = new Image();
toc3on.src =
"pix/ch3on.gif";
toc4on = new Image();
toc4on.src =
"pix/ch4on.gif";
toc1off = new Image();
toc1off.src =
"pix/ch1off.gif";
toc2off = new Image();
toc2off.src =
"pix/ch2off.gif";
toc3off = new Image();
toc3off.src =
"pix/ch3off.gif";
toc4off = new Image();
toc4off.src =
"pix/ch4off.gif";
}
function img_act(imgName) {
{ imgOn =
eval(imgName + "on.src");
document [imgName].src =
imgOn;
}
}
4
function img_inact(imgName) {
{ imgOff = eval(imgName +
"off.src");
document [imgName].src =
imgOff;
}
}
</SCRIPT>
</HEAD>
<BODY
BGCOLOR="#ffffff" ALINK="#000000" VLINK="#595c5e">
<P
ALIGN=CENTER><B><BR>
<FONT SIZE="+2">CHAPTER
INDEX<BR>
</FONT></B></P>
<P
ALIGN=CENTER><A HREF="../chapter1/ch1page1.htm"
onMouseover="img_act('toc1'),window.status='Chapter One: Musical
Symbols';return true" onMouseout="img_inact('toc1')"><IMG
SRC="pix/ch1off.gif" BORDER="0" NAME="toc1" ALIGN="MIDDLE" WIDTH="151"
HEIGHT="22" NATURALSIZEFLAG="0" ALT=""></A> <BR>
<A
HREF="../chapter2/ch2page1.htm"
onMouseover="img_act('toc2'),window.status='Chapter Two: Note and Rest
Values';return true" onMouseout="img_inact('toc2')"><IMG
SRC="pix/ch2off.gif" BORDER="0" NAME="toc2" ALIGN="MIDDLE" WIDTH="151"
HEIGHT="22"
NATURALSIZEFLAG="0" ALT=""></A> <BR>
<A
HREF="../chapter3/ch3page1.htm"
onMouseover="img_act('toc3'),window.status='Chapter Three: Rhythm';return
true" onMouseout="img_inact('toc3')"><IMG SRC="pix/ch3off.gif"
BORDER="0" NAME="toc3" ALIGN="MIDDLE" WIDTH="151" HEIGHT="22"
NATURALSIZEFLAG="0" ALT=""></A><BR>
<A
HREF="../chapter4/ch4page1.htm"
onMouseover="img_act('toc4'),window.status='Chapter Four: Meter
Signatures';return true" onMouseout="img_inact('toc4')"><IMG
SRC="pix/ch4off.gif" BORDER="0" NAME="toc4" ALIGN="MIDDLE" WIDTH="151"
HEIGHT="22" NATURALSIZEFLAG="0"
ALT=""></A><BR>
</P>
</BODY>
Part of the
code (window.status='Chapter Three: Rhythm';return true) also allows for an
additional message in the STATUS BAR at the bottom of the window. This is a
device particularly useful in revealing answers to questions which may be posed
in the main body of the document.
The code which creates the JavaScript
rollover was the primary source code for creating most of the interactivity
required for this course. Rollover images may be used for revealing answers,
animating examples and manipulating images as the user passes the mouse over a
picture or clicks on a designated spot within an image map. The code was copied
and pasted into documents, and edited, as the instructional needs arose during
the design stages of course development.
COURSE
CONTENT
Course content is very similar to the on-campus version of the course. It
also follows the same content outline as many programmed textbooks and could be
used to supplement most of them. The chapters include:
5
Chapter One: Musical Symbols
Chapter Two: Note and Rest Values
Chapter
Three: Rhythm
Chapter Four: Meter Signatures
Chapter Five:
Intervals
Chapter Six: Modes
Chapter Seven: Major Scales
Chapter Eight:
Minor Scales
Chapter Nine: Key Signatures
Chapter Ten: Triads
Near
the end of most chapters there are several introductory eartraining exercises.
Some of the exercises include intervallic, melodic and rhythmic identification.
Most melodic and rhythmic exercises are very brief excerpts, allowing for
relatively fast downloads. For those enrolled in the course, cues to request
tests are provided periodically throughout the course. At appropriate times,
four major exams are emailed to students. Instructions are given to download the
Adobe Acrobat file (in PDF format), print it out, fill it out and FAX it back to
the instructor within 24 hours. A final exam may be taken anytime during the
university's final examination week.
ADMINISTRATION ISSUES
Users may access the course without any restrictions or they may formally
enroll to take the course for college credit through this university. Only
enrolled students are able to email requests for tests at appropriate times and
to ask for help from the instructor.
The involvement of the instructor in
the course administration is quite minimal. The university registrar completes
the enrollment process and handles all fees and records, the Office of
Continuing Education promotes the course and disperses information regarding
enrollment procedures and course requirements, and the Department of Music
handles referrals and answers departmental questions. The maximum enrollment for
the course is officially set at one student so that all students above that
number must seek special approval to register for the course. An unofficial
enrollment cap has been set at 10 students. The initial contact with the
instructor is usually nothing more than an email request to get started on the
course.
Since the implementation of Introduction to Music Theory and
Aural Skills (the web version) in the Fall semester of 1998, approximately 35
students have received credit by taking the course. One student received a
failing grade while all others received a letter grade of "C" or
better.
6
SOME FINAL PROGRAMMING OBSERVATIONS
A new edition of the course is currently underway and involves reprogramming
the content using Macromedia's Director. The principal objective in the revision
is cosmetic: to make the material more appealing and presentable. The first two
chapters have been completed and some initial observations can be made,
comparing and contrasting the two developmental methods.
1. Using
software, such as Director, to create an interactive learning environment seems
to save no time when comparing that development method to writing in
JavaScript-enhanced HTML code. For the inexperienced programmer, both writing
methods will require a research period, whether to learn how to use the software
being employed or to learn the language of HTML (and how to adapt JavaScript).
The two examples shown below represent a means of navigating from page to page.
The first is programmed in HTML and the second in Director. While the objective
of each is the same, the manner by which each is programmed is very
different.
HTML Page Links
DIRECTOR Page Links
2. Java is a programming language that is nearly universally understood
by newer browsers. Downloaded documents created with Director will not be
understood by a browser unless the appropriate helper software (available for
free) has been installed.
3. Each chapter has between 15 and 25 pages of
content. Each page written in HTML is a separate document and is loaded
individually to the local computer for use and each takes only a few seconds to
load. Using Director, the entire chapter is written as a user-controllable
document and each chapter requires a substantially longer loading time. However,
after the entire chapter has been downloaded to the computer, each page is
nearly immediately accessible.
4. Using HTML, certain special effects
require more extensive programming skills than this author has acquired. Many of
those same effects are readily available using Director. Some of those effects
include animating images and dissolving and wiping between pages and graphics.
Of particular note, clicking on an image to activate an audio file was a
programming problem with JavaScript. Using Director, the image was imported as a
cast member, given a behavior (on mouseDown) and the task was no
problem.
5. Since graphics are treated as sprites in Director, images,
unusual fonts, backgrounds and banners are not a
7
problem to incorporate onto a page. Controlling such elements, using motion,
color changes and fades is quite easy. Using HTML to program content, control
over those individual elements is difficult to impossible without the aid of
Java.
6. Finally, an observation about security can be issued. An HTML
document contains code that, without encryption, can be viewed by anyone. If a
student wants to find an answer to a question that is posed (on a practice test,
for example), s/he can, with most browsers, view the document source. Documents
created with Director may be saved as Director files which, in turn, may be
referenced by HTML documents. The student (or user) is not immediately accessing
the Director document - only a reference to it. That means the code is not
immediately accessible and a greater degree of security is achieved.
CONTACT
The course
Introduction to Music Theory and Aural Skills (the complete HTML
course)
http://www.murraystate.edu/qacd/cfac/music/MUS109entry.htm
Introduction
to Music Theory and Aural Skills (Chapter One: Musical Symbols, the Director
version)
http://www.murraystate.edu/qacd/cfac/music/mus109e/chapter1/chapter1.html
The
author
Dr. John Steffa, Associate Professor
Department of Music
304 Fine Arts
Center
Murray State University
Murray, Kentucky 42071
Office:
502.762.3142
FAX: 502.762.6335
Email: john.steffa@murraystate.edu
http://www.murraystate.edu/qacd/cfac/music/jsteffa.htm
8