JavaScript: Convenient Interactivity for the Class Web Page
http://gray.music.rhodes.edu/mtsu99/mtsu99.html
Patricia
Gray, Ph.D
Assistant Professor of Music
Rhodes College
Abstract
Introduction
What Is Java Script?
Method
Application
Examples
Conclusion
Web Resources
Suggested Reading
Appendix A
Appendix B
Appendix C
Contact
Abstract
This presentation will show how JavaScript can be used within HTML pages
to add interactive review sessions and quizzes incorporating graphics and
sound files. JavaScript has the advantage of providing basic interactive
functions without the use of separate software applications and players.
Because it can be part of a standard HTML page, it is cross-platform as well.
Templates will be provided to participants to enable them to customize their
own pages without having to learn JavaScript in any detail.
[Top]
Introduction
Interactive exercises are a valuable addition to class web pages. They allow
students to review material and to get immediate feedback as they answer
questions. A wide variety of software products allow teachers to customize
quizzes and exercises for their students. Frequently these are platform specific
or they require applications or players to be loaded on to the machine. By
contrast, JavaScript can be placed directly into HTML text files and thus
can provide an easy and economical alternative to the use of separate
applications.
What is Javascript?
JavaScript should not be confused with Java. Java is a compiled programming
language, similar to C. It has the ability to write major applications and
insert them in a web page as a special object called an "applet." Java is
also unique in its ability to run the same program on IBM, Mac, and Unix
computers. Java is not considered an easy-to-use language for non-programmers.
JavaScript, on the other hand, is a scripting language that can be used by
average Web designers. It is particularly attractive to non-programmers because
it requires no separate applications or compilers. It is simply scripted
text that is incorporated into a HTML page to add enhanced interaction with
the user. For this reason, it is attractive to educators who would like to
take a step beyond putting class materials on the Web. JavaScript can provide
a variety of opportunities interaction with students.
Method
It would be misleading to say that JavaScript is as easy to learn as basic
HTML. However, as with learning HTML, the best way to get started is to study
the code for existing projects on the Web and adapt it. To see the text of
the code it is only necessary to View Page Source code, save it as a text
file, customize it, and load it on a server. In the
Web Resources section below are a number of
JavaScript resource sites available on the Web. The list contains archives
of scripts as well as tutorials for those interested in learning to program
in Javascript. The tutorial in JavaScript for the Non-Programmer published
by Webteacher.com is particularly helpful.
When adapting scripts it is important to be aware of copyright issues. Frequently, the text of the code includes instructions to keep the copyright notice in the code even after making changes. This notice may be "commented out" so it is only visible in the source code, not on the actual web page. Requests to include code should be scrupulously observed.
Application
JavaScript is particularly helpful in creating objective interactive reviews
for courses that require the memorization of terms, translations, and other
types of short answers. These quizzes can be used as part of class home pages
that provide a wide variety instructional information. Currently at Rhodes,
they are used only for review and not for on-the-record grades. Small class
size minimizes the need for a distance learning approach to testing. However,
online reviews that are available in the labs and wired dormitories are valuable
in that they adapt to students' variable study schedules.
Student reaction to online reviews in Rhodes music courses has been overwhelmingly positive. Student evaluations credit the exercises with "actively engaging" them with the material. Some of the exercises were created by the students themselves who were intrigued by the idea of producing study materials that will be available on the Web long after the class is finished. Students seem to be more critical of materials they create for distribution over the Web than they are for work that is only seen by the professor. JavaScript quizzes can be created as a collaborative effort between students and professor. They also have the advantage of being very easy to edit and update.
The following Rhodes College music course sites use JavaScript in a variety
of ways:
Music 227-228: European Musical Heritage
http://gray.music.rhodes.edu/musichtmls/mh.html
Music 121: History of Opera (The Butterfly Project)
http://gray.music.rhodes.edu/musichtmls/bfproj.html
Music 116: Music and Society
http://gray.music.rhodes.edu/musichtmls/music116.html
A technical advantage of JavaScript is the ability to save the code as a
plain text file, store it on a CD-ROM and view it with any browser. This
allows students to have portable review files that can be viewed locally
without a live connection to the Internet. CD-ROMs of this type can now be
produced easily and economically and can be sold along with the traditional
text book.
Examples
The following are examples of simple scripts that provide difference functions
for objective online tests. Following the link to the test will demonstrate
how its format. The abbreviated script in the appendix cuts away all be the
essential code. The only sections that need to be customizes are indicated
in red bold type.
True-False with Hints Given After Incorrect
Answers
http://gray.music.rhodes.edu/MTSU99/tfquiz.html
Abbreviated Script--See Appendix A
Multiple Choice with Immediate Response to Each
Question
http://gray.music.rhodes.edu/MTSU99/heroine.html
Abbreviated Script--See Appendix B
Multiple Choice with Correct and Incorrect Answers
Given after Submission
http://gray.music.rhodes.edu/MTSU99/
Abbreviated Script--See Appendix C
Multiple Choice with Penalty for Incorrect
Answers
http://gray.music.rhodes.edu/MTSU99/proktest.html
[Script is too long to include in appendix. Download from source
code at the URL on the preceding line.]
Conclusion
JavaScript provides a streamlined, efficient, and economical way of providing
interaction to web pages. Currently, adapting pre-existing code is best way
for educators to begin to take advantage of it. This must be done in plain
text documents because the most popular entry level web page editors do not
support it. However, more professional products, such as
Adobe's GoLive
4.0, now provide some JavaScript editing capabilities and point the way
to easier use in the future.
Tutorials:
Javascript for the Non-Programmer:
http://www.webteacher.com/javatour/
Thau's JavaScript Tutorial:
http://www.hotwired.com/webmonkey/javascript/tutorials/tutorial1.html
Developer.com Tutorial:
http://www.developer.com/classroom/tutorials/cl_javascript.html
Script Archives:
The JavaScript Source:
http://javascript.internet.com/
JavaScript.com:
http://www.javascripts.com
The Last Wave JavaScript Source:
http://www.thelastdomain.com/alan/thelastwaved.html
Java Goodies: A Repository of Scripts:
http://www.javagoodies.com
Cut and Paste JavaScripts:
http://www.infohiway.com/javascript/indexf.htm
Flanagan, David. JavaScript: The Definitive Guide, 3rd ed. O'Reilly
and Associates, 1998.
ISBN: 1565923928
Frentzen, Jeff, Henry Sobotka, and Dewayne McNair. Javascript Annotated
Archives.
Osborne McGraw-Hill, 1998. ISBN: 0078823641
Goodman, Danny. JavaScript Bible, 3rd ed. IDG Books Worldwide, March 1998. ISBN: 0764531883
Heinle, Nick. Designing With JavaScript : Creating Dynamic Web Pages (Web Review Studio Series). O'Reilly and Associates, 1997. ISBN: 1565923006
Lund, William B. and Brian Holman. Instant JavaScript. Prentice-Hall, 1996. ISBN: 0132684349
Negrino, Tom and Dori Smith. JavaScript for the World Wide Web: Visual QuickStart Guide, 2nd ed. Peachpit Press. ISBN: 0201696487
Neou, Vivian and Curt Aubley. HTML 4.0 CD with Javascript . Prentice
Hall, 1999. ISBN: 0130957836
Purcell, Lee, and Mary Jane Mara (Contributor). The ABCs of Javascript.
Sybex, January 1997.
ISBN: 0782119379
Instructions for Use of Appendices
Copy and paste the code into a plain text document such as one created by
SimpleText or NotePad. Do not copy the text into an HTML editor unless
you are sure that it supports JavaScript. Only the sections in red bold
type should be customized.
<HTML>
<HEAD>
<TITLE>Opera Quiz</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from old browsers
function userAlert()
{
alert("Very
good!");
}
function userAlert2()
{
alert("No, but a Pushkin poem was
used for Boris Godunov.");
}
function userAlert3()
{
alert("It was a bass. Feodor Chaliapin
was a famous Boris.");
}
<!-- done hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<H3 ALIGN=CENTER>Opera
Quiz</H3>
<B>1. The title role in
Moussorgsky's <I>Boris Godunov</I> is sung by a bass.
</B>
<FORM> <INPUT TYPE="button" VALUE=" True "
onClick="userAlert()">
<INPUT TYPE="button" VALUE=" False "onClick="userAlert3()"
></FORM></P>
<P>
<B>2. Glinka's <I>A Life
for the Tsar</I> was based on poem by
Pushkin.</B>
<FORM><INPUT TYPE="button" VALUE=" True " onClick="userAlert2()"
>
<INPUT TYPE="button" VALUE=" False "
onClick="userAlert()"></FORM></P>
</BODY>
</HTML>
<html>
<head>
<title>Puccini Heroine
Quiz</title>
<script>
<!-- hide
/* GameQuiz v1.0 by Monichar.
Copyright (c) of Monichar, 1997.
Permission to use, edit, etc. granted as long as the head section is
intact!
*/
var ans = new Array;
var done = new Array;
var text = new Array;
var score = 0;
ans[1]=
"d";
ans[2] =
"c";
text[1] = "Puccini's operas usually
revolve around the heroine.";
text[2] = "No, it was
Musetta.";
function Engine(question, answer) {
if (answer != ans[question]) {
if (!done[question]) {
done[question] = -1;
alert(" Wrong!\n\nYour score is now: " + score + "\n\n" +text[question]);
}
else {
alert("You have already answered that!");
}
}
else {
if (!done[question]) {
done[question] = -1;
score++;
alert("Correct!\n\nYour score is now: " + score);
}
else {
alert("You have already answered that!");
}
}
}
//-->
</script>
<BODY BGCOLOR="#ffffff">
<center><H2>Puccini Heroine
Quiz</H2></center>
This script will automatically check your answers for you.<p>
<b>JavaScript required!</b><p>
<noscript>JavaScript is
<b><i>disabled</b></i>. Get Netscape 3.0 or turn
it on!</noscript>
<form>
<b>1. The action in most of
Puccini's operas seems to pivot
around:</b><p>
<input type=radio value="a" onClick="Engine(1,
this.value)">the
enemy<br>
<input type=radio value="b" onClick="Engine(1,
this.value)">the
hero<br>
<input type=radio value="c" onClick="Engine(1,
this.value)">the
chorus<br>
<input type=radio value="d" onClick="Engine(1,
this.value)">the
heroine<p>
<b>2. The New Grove Dictionary
of Music and Musicians describes the Puccini Heroine as "frail
creatures who live and die for love". This is true of all of the following
except:</b><p>
<input type=radio value="a" onClick="Engine(2,
this.value)">Violette<br>
<input type=radio value="b" onClick="Engine(2,
this.value)">Manon
Lescaut<br>
<input type=radio value="c" onClick="Engine(2,
this.value)">Musetta<br>
<input type=radio value="d" onClick="Engine(2,
this.value)">Mimi<p>
</form>
<H4>Reload the page to take the test again.</H4>
</BODY>
</HTML>
<html>
<title>Prokofiev
Test</title>
<body bgcolor=#ffffff text=#111188 link=#CC6600 vlink=#006633
alink=#FF0033>
<script language="JavaScript">
//function to display the answers
function display_answers(){
if (document.quiz.answer1[0].checked == true) document.quiz.a1.value=" A";
if (document.quiz.answer1[1].checked == true) document.quiz.a1.value=" B";
if (document.quiz.answer1[2].checked == true) document.quiz.a1.value=" C";
if (document.quiz.answer1[3].checked == true) document.quiz.a1.value=" D";
if (document.quiz.answer2[0].checked == true) document.quiz.a2.value=" A";
if (document.quiz.answer2[1].checked == true) document.quiz.a2.value=" B";
if (document.quiz.answer2[2].checked == true) document.quiz.a2.value=" C";
if (document.quiz.answer2[3].checked == true) document.quiz.a2.value=" D";
}
//function total the quiz answers
// assigns correct answers in array.
function total() {
var tot = 0;
//answer#[0-3] 0=A, 1=B, 2=C, 3=D
if
(document.quiz.answer1[0].checked == true) tot = 1;
document.quiz.q1.value="A";
if
(document.quiz.answer2[3].checked == true) tot += 1;
document.quiz.q2.value="D";
if (tot==2) document.quiz.totalscore.value ="2 out of 2, Very Good!";
else document.quiz.totalscore.value = "You answered " + tot + " out of 2
correctly.";
}
</script><br>
<CENTER><h3>Prokofiev
Test</h3></CENTER>
<form name="quiz">
<table border="0" cellpadding="7" width="600"><tr>
<td valign="top" width="300">
<B>1. Prokofiev received his
early conservatory training
in:</B><br>
A <input type="radio"
name="answer1">St.
Petersburg<br>
B <input type="radio"
name="answer1">Moscow<br>
C <input type="radio"
name="answer1">Stalingrad<br>
D <input type="radio"
name="answer1">Novgorod</td>
<td valign="top" width="300">
<B>2. All of the following are
characteristic of Prokofiev's early piano music
except:</B><br>
A <input type="radio"
name="answer2">striking use of
dissonance<br>
B <input type="radio"
name="answer2">machine like rhythmic
passages<br>
C <input type="radio"
name="answer2">strong sense of
percussion<br>
D <input type="radio"
name="answer2">left hand lines
modeled after those of
Chopin</td>
</tr>
<tr>
</tr></table>
<table border="0"><tr>
<td width="300"><input type="button" value="Submit" onclick="total();
display_answers();"> <input type="reset"
value="Reset"></td>
<td width="400"><input type="text" size="50"
name="totalscore"><br></td>
</tr></table>
<P>
<CENTER><table border="0"><tr>
<td valign="top" width="125"><b>Your
Answers</b><br>
Q 1: <input type="text" size="2" name="a1"><br>
Q 2: <input type="text" size="2" name="a2"><br>
</td>
<td valign="top" width="125"><b>Correct
Answers</b><br>
Q 1: <input type="text" size="2" name="q1"><br>
Q 2: <input type="text" size="2" name="q2"><br>
</td>
</tr></table></CENTER>
</body>
</html>
Contact:
Patricia
Gray, Ph.D
Assistant Professor of Music
Rhodes College
Memphis, TN
gray@rhodes.edu