During the spring of 1998 I was approached by Professor Jan Krzywicki, a faculty member in the Music Theory Department of Temple University’s Esther Boyer College of Music, to create an online version of his series of aural training diagnostic tests. We discussed the possibility of producing a series of tests that would be available on the web, give immediate feedback to the student, and send the results to the teacher via email. We began the collaboration by examining each of his three tests that were designed to be administered via cassette tape with student responses submitted on a handwritten answer sheet. Our long-term goal in this collaboration is to develop interactive drills to allow students to practice specific skills in interval recognition, chord recognition, harmonic dictation, and melodic dictation. All the applications we have created run equally well on Macintosh or Wintel PCs using Netscape Navigator and QuickTime as the delivery platform. Students who lack an appropriate multimedia computer may use our Power Macintosh lab to complete the tests.

The three Aural Training Diagnostic Tests are given in the first, seventh, and thirteenth weeks of the semester. Professor Krzywicki uses the results of these diagnostic tests to improve instruction and to arrange for appropriate tutoring when needed for individual students. The student’s grade is not affected by their performance on any of the diagnostic tests so there is no motivation to cheat. Each test is divided into four sections: Interval Recognition, Chord Recognition, Harmonic Dictation, and Melodic Dictation.

The interval recognition section of each test contains a number of intervals presented melodically or harmonically. The student responds to each item by choosing an answer from a popup menu. After answering all questions, the student types in his/her name in the name field and then clicks the "submit" button. The JavaScript program embedded in the HTML document checks to make sure a name was entered, checks each item, and places feedback on student accuracy into text fields next to each item. The student’s responses and total score are then transmitted to Professor Krzywicki via email. This same procedure is also used for the chord recognition section of the test.

The interface and procedures for completing the harmonic and melodic dictation sections are necessarily more complex. A practice item for harmonic dictation is provided to allow the student to become familiar with the interface without having a score transmitted to the professor. I have never encountered a computer interface for music dictation that comes close to the ease of use associated with staff paper and pencil. Furthermore, the interface can distract the student and lead to lower scores on the test. To avoid this problem, the dictation exercises are preceded by instructions to the student to use the embedded QuickTime movies to listen to the example and use traditional staff paper to notate the exercise by hand. Once the answers are on paper, the student uses the onscreen interface to enter responses onto the web page for evaluation and transmission to the professor. Or, if the student prefers, s/he may click a link to view the answer, print it, mark his/her incorrect answers by hand, and send the printed copy to the professor.

The harmonic dictation interface (Figure 2) uses popup menus containing written bass notes (C4, Bb3, etc…), chord symbols (I, vi, ii, V, etc…), and chord figures (6/4, 4/2, etc…). For each measure of the harmonic dictation exercise, the student chooses a bass note, chord symbol, and figures using a section of the page called "Bass Note and Chord Symbol Chooser". When the student chooses a bass note, the notated pitch graphic in the "Bass Note and Chord Symbol Chooser" changes to reflect the chosen pitch. The student then chooses a chord symbol and any figures from the popup menus. When all three elements are chosen, the student clicks the "set" button under a blank measure in the answer sheet to notate the answer for that measure. The graphic in the measure changes to reflect the chosen bass note and a text field below each measure displays the chosen chord symbol and figures. Once all the answers are entered, the student types his/her name in the name field and clicks the "submit" button. The JavaScript form validation function checks to be sure the student’s name has been entered and then compares the bass notes and chord symbols to the correct answers. The responses and total score are sent to the professor via email and the student is given immediate feedback with errors marked with an X. Students receive one score for bass note accuracy, one score for chord information accuracy, and a combined score.

The interface for the melodic dictation section (Figure 3) is very similar to that of the harmonic dictation section. Professor Krzywicki and I decided to test only the tonal aspects of melodic dictation to avoid confounding the results with errors that may be due to poor rhythm syntax. The durations, therefore, are indicated on the page. After the student chooses all necessary pitches and clicks the "submit" button, the JavaScript form validation function marks each incorrect pitch with a red line under the pitch rather than using an X in a text field because space was at a premium on the melodic dictation pages.

The interval and chord recognition sections are constructed in similar ways. An HTML form is created with a "mailto:" action included to send the student responses to the professor after being graded by a form validation function. Each item is placed in a row of a standard HTML table. The first cell in each row contains an embedded QuickTime movie that was created from a small MIDI file. The next cell contains a popup menu students use to select their answers. The final cell in each row contains an empty text field that is filled with feedback text by the form validation function after the student clicks the "submit" button on the bottom of the form.

The form validation function performs several tasks related to the information the student enters into the HTML form using popup menus and text fields. First the form validation function checks to be sure the student entered a name in the name field. If not, the submission process is halted and the student is directed to enter his/her name before clicking the "submit" button again. Once the validation function determines that a student name is present, it compares the selected values in the popup menus to a list of correct answers found in the HTML source code. A local variable called "score" is created to hold the student’s grade and is incremented for each correct answer. The form validation function also places corrective feedback text into the response field for each incorrect item (Figure 1). The student’s responses are sent to the professor via email and a variable called "evaluated" is set to a value of "true" to prevent the student from sending the test responses a second time.

Figure 1 - Incorrect Response from Aural Training Diagnostic I: Interval Identification

The harmonic and melodic dictation sections rely heavily on the JavaScript image-swapping feature to allow students to select pitches and have them displayed as standard notation on the web page. The image- swapping feature is familiar to most web users in the form of "rollovers" where an image changes when the user moves the mouse over a graphic. In the dictation exercises the image-swap is triggered by an "onChange" event generated by the note-chooser popup menus when the student chooses a pitch.

One issue I encountered very early was the question of web browser compatibility. The highly interactive nature of this project went beyond the accepted cosmetic and animation functions normally associated with cross-browser scripting. As a result of substantial differences in the Document Object Models used by Netscape and Microsoft, it became necessary to specify that students use Netscape Communicator/Navigator 4.0 or later. Fortunately Netscape Communicator is available as a free download and comes with the QuickTime plugin. All Macintosh computers come with QuickTime preinstalled and QuickTime is a free download for PC users. Netscape with QuickTime, therefore, is a free, cross-platform delivery system for interactive music theory experiences.

Figure 2. Answer sheet from a chord dictation section of an aural training diagnostic test

Student reaction has been mostly positive because this method of delivery solved a long-standing problem of delivering these tests using a set of cassette tapes in a listening library with limited hours of operation. Students also enjoyed receiving immediate feedback. Some students using PCs complained initially at having to download Netscape and QuickTime. These complaints were addressed by distributing a list of links to enjoyable web sites that use QuickTime for multimedia content.

Web pages with JavaScript should be created with a good plain text editor like BBEdit. Consumer-level WYSIWYG web page editors like Pagemill and FrontPage are inappropriate tools because they create inelegant code that is difficult to edit. Also, if you use these programs to open pages containing JavaScript functions your pages may be altered by the software and made unusable. If you wish to use assistive software to create your code, use Macromedia Dreamweaver (Mac/PC) or GoLive Cyberstudio (Mac only). These two professional-level tools have easy-to-use interfaces for creating HTML pages by placing elements on the screen. The code they produce, however, is elegant, easy to edit, and any JavaScript code you add will be left untouched when the program opens your pages. These programs can also assist you in creating simple JavaScript behaviors as well as helping to deal with all the complexities of Dynamic HTML.

Instructors can learn JavaScript and QuickTime by downloading scripts and other instructional materials from the web sites listed below. Finally, feel free to visit any of my web sites and view the source code to learn how the interactivity is created.

Figure 3. Answer sheet from a melodic dictation section of an aural training diagnostic test