A French Vocabulary Tutor for the Web - Software @ SFU Library

Volume 17 Number 3 475

Gilles Labrie

A French Vocabulary Tutor for the Web

Gilles LabrieCentral Michigan University

ABSTRACT

This article discusses a project to design and implement a small Frenchvocabulary tutor for the World Wide Web. The tutor includes words, pic-tures, and sounds to help students learn new words and their pronuncia-tion. The article highlights salient features and design of the tutor andthen focuses on two variants of a module on technology-related vocabu-lary that were created using very straightforward html code and JavaScript.It also demonstrates the increased complexity and control made possiblewith Java applets. Finally, it explores strategies for including various fea-tures, for example, hot spots that can be used on the Web. Preliminaryassessment reveals that Web-based multimedia programs have some ad-vantages over more traditional methods of vocabulary learning.

KEYWORDS

Computer-Assisted Language Learning, World Wide Web, French Vocabu-lary Tutor, JavaScript, Java Applets

INTRODUCTION

Vocabulary acquisition is important in language learning as both for-eign language students and teachers will attest. It is important to begin-ning speakers of a language who substantially increase their power to com-municate by increasing the number of words they know. It is also impor-tant to intermediate and advanced speakers who often feel they have diffi-culty communicating effectively because of their inadequate vocabulary.

Vocabulary can be learned by trying to understand spoken or writtenlanguage. Researchers like Krashen argue that comprehensible input isthe only effective means of vocabulary and language learning. Others (Na-tion, 1990; Oxford & Crookall, 1990) maintain that less contextualizedlanguage can also be useful in vocabulary learning and that both directand indirect strategies ought to be used.© 2000 CALICO Journal

476 CALICO Journal


Some of the strategies for vocabulary learning reviewed by Oxford andCrookall include: (a) decontextualized techniques (e.g., word lists, flash-cards, and dictionary use), (b) semicontextualized techniques (e.g., wordgrouping, word or concept association, visual imagery, aural imagery, key-words, physical response, physical sensation, and semantic mapping), and(c) fully contextualized techniques (practice in reading, listening, speak-ing, and writing).

THE GOALS OF THE PROJECT

This project is being developed as an attempt to use semicontextualizedtechniques to provide an effective and enjoyable means of learning Frenchvocabulary. The project has two major goals. The first is to design andimplement a few modules of a small French vocabulary tutor for the WorldWide Web. The Tutor includes words, pictures, and sounds. The secondgoal is to assess the effectiveness of the Tutor. Using one of the modules,a preliminary study asked the following questions:

1. Do students spend more time learning vocabulary with a com-puter-based tutor than they do with a textbook?

2. Do they learn more with computer-based tutors than with tra-ditional means of vocabulary study?

3. Do they find vocabulary learning more helpful and enjoyablewith computers than with the tools they regularly use?

THE TUTOR

The Tutor has two modes: a learning mode and a game mode. The learn-ing mode, which allows students to learn words and their pronunciation,is modeled on visual dictionaries that have pictures and words linked tothe pictures. The Tutor, as does the CD-ROM version of the dictionary LeVisuel multilingue (1996), associates sounds with pictures and text.

The words in the Tutor are divided into associated word groups. Mod-ules for two word groups were first developed: one teaching the parts ofthe body and the other a collection of technology-related words. Sincethen, a module on fruit and vegetables has been developed and others arecurrently being designed. The dictionaries for the individual modules dif-fer; the vocabulary items for the parts of the body module all refer to asingle picture, whereas the technology vocabulary is presented sequen-tially as a collection of pictures, each picture representing one word. Ifstudents pass the cursor over the picture or an area of the picture, thecorresponding word appears alongside and a translation in English ap-


Gilles Labrie

pears in the status window below. If students click on the picture (or areaof the picture) the word is pronounced in French.

The game mode includes two basic games: one in which students dragwords to the picture or area of the picture they represent and another onein which the program pronounces the word and students must click onthe relevant picture or area of the picture. The program provides a scorefor the number of correct answers and indicates the elapsed time since thestart of the game.

Students use the Tutor in the learning mode to study, review, and learnwords. Using the dictionary, they can practice and get immediate feed-back on the meaning of words and how they are pronounced. In the gamemode, students can use either game, the one focusing on the written wordand the other on the spoken word to test their knowledge of the vocabu-lary. Because students get points for correctly identifying spoken or writ-ten words, their score provides them with a target that they can try tobetter. Moreover, because the timer in the program indicates elapsed time,students can try to improve both their accuracy and response speed.

SALIENT FEATURES

First, the learning mode consists of a text dictionary divided into wordgroups. Each group provides a network of associated words, pictures andsounds that enhances learning. As Carter and McCarthy (1988) have noted,“the more words are analyzed or enriched by imagistic and other associa-tions, the more likely it is that they will be retained.”

Second, the Tutor allows for systematic vocabulary learning. Often, af-ter the first two years of study, vocabulary is not stressed. More advancedstudents can use the program to learn groups of words which are notfamiliar to them but which they might want to know.

Third, because the program is web based, it is widely available (acces-sible at http://www.chsbs.cmich.edu/fllc/glabrie/dict/tindex.html). TheTutor replaces the note cards students often make to help them learn wordsand has more elements: not just words, but also pictures and sounds.

Fourth, the game mode provides a sense of learning by doing. Increas-ingly greater associations are created among text, sounds, and pictures asstudents try to connect written and spoken words with a picture or anarea of a picture.

Finally, learners have complete control. It is clear that learners best learnthe words they want to learn. The Tutor is a hypertext document withmany links between the various exercises and gives learners maximummobility from one part of the program to another. Learners do not need toproceed in a linear fashion through exercises.

In short, the Tutor is distinctive because it incorporates picture, words,

478 CALICO Journal


and sounds, includes games (play is an important element in sustainedlearning), and, especially, is Web based, making it widely available.

JAVASCRIPT VERSION

The module on technology vocabulary exists in three versions; one inJavaScript, one in html code only, and a third, more flexible version cre-ated as a Java applet. In the JavaScript version, shown in Figure 1, twopictures appear centered on the screen aligned next to two white spaces ofsimilar size on either side.

Figure 1Technology Vocabulary: JavaScript version

When students pass the cursor over the picture, the corresponding wordappears in French in the white space next to the picture. If students clickon the picture or the white space, the word is spoken in French. Thismodule requires three different pictures: a picture of the item (e.g., a com-puter), a picture of the word typed on a white background (computer3.gif),


Gilles Labrie

and a blank white background (blank1.gif). Below is the html code for thefirst two of the 27 pictures in the group:

<HTML><HEAD><SCRIPT LANGUAGE=“JavaScript”>function doit(word, num, trans) {

document.images[num].src= word + “3.gif”;window.status=“a ” + trans;

}function undo(word, num, trans) {

document.images[num].src= word + “1.gif”;window.status=“ ”;

}</SCRIPT></HEAD><BODY><A HREF=“comput.wav” //This is # 0onMouseOver=“doit(‘comput’, 0,’computer’);return true”onMouseOut=“undo(‘blank’, 0,’ ‘)”><IMG SRC=“blank1.gif” BORDER=“0” WIDTH=“100” HEIGHT=“100”></A><A HREF=“comput.wav” //This is # 1onMouseOver=“doit(‘comput’,0,’computer’);return true”onMouseOut=“undo(‘blank’, 0,’ ‘)”><IMG SRC=“comput.gif” BORDER=“0” WIDTH=“147” HEIGHT=“100”></A><A HREF=“monitr.wav” //This is # 2onMouseOver=“doit(‘monitr’, 3, ‘monitor’);return true”onMouseOut=“undo(‘blank’, 3, ‘ ‘)”><IMG SRC=“monitr.gif” BORDER=“0” WIDTH=“114” HEIGHT=“100”></A><A HREF=“monitr.wav” //This is # 3onMouseOver=“doit(‘monitr’, 3, ‘monitor’);return true”onMouseOut=“undo(‘blank’, 3, ‘ ‘)”><IMG SRC=“blank1.gif” BORDER=“0” WIDTH=“100” HEIGHT=“100”></A>….</BODY></HTML>

When the cursor is moved over the picture, OnMouseOver calls the func-tion “doit,” which paints the word in French on a white background(computer3.gif). The function also puts the translation in the status win-dow. When the cursor leaves the area, the function OnMouseOut calls theblank picture with the white background, and the word disappears. Be-cause the audio file is anchored to the picture, if students click on thepicture, the audio file “computer.wav” is played, and the words for a com-puter are spoken in French.

Pictures and Sounds

Because pictures on the Web will be widely disseminated, permission isrequired to use the pictures of others; a better solution is to use one’s ownpictures. Pictures can be taken using a digital camera, or color prints canbe digitized using a scanner. Scanning pictures is relatively simple since itis easy to learn how to use Adobe Photoshop or other image software to

480 CALICO Journal


crop images or reduce the size of files. Most institutions have staff incomputer labs who are eager to help faculty developers. Once pictureshave been cropped, they should be used on the Web in their actual size;otherwise the pictures may be distorted. Pictures should be digitized in.jpeg or .gif format, if they are to be used in Java applets. The files shouldalso be small enough in size so that browsers can load them in a reason-able amount of time.

The Sound Recorder program on the PC can be used to record soundfiles. Recording is straightforward and is easily learned using the helpfiles, but the quality is often mediocre and does not approach that whichcan be obtained with professional quality equipment. The sound files inthe initial module of the Tutor are in .wav format. In the applets discussedbelow, the sound files are in the .au format required by Java. Sharewareprograms such as Goldwave are also available on the Web for easy con-version to and from most audio formats.

HTML VERSION

An HTML variant of the module on technology vocabulary is in factpossible with the use of the <ALT> tag (see Figure 2).

Figure 2Technology Vocabulary: HTML Version


Gilles Labrie

This tag was originally designed to provide an alternative text for brows-ers unable to view images in a Web document. However, many currentbrowsers also display the alternative text when the mouse pointer is overan image. Thus, the code below, showing the first four of the 27 images,provides a variant of the JavaScript version above. The anchor first en-closes the audio file. Within the anchor, the audio file is followed by theimage file and the <ALT> tag that encloses the information to appear onthe screen when the cursor moves over that image.

<HTML><BODY><CENTER><A HREF=“comput.wav”> <IMG SRC=“comput.gif” ALT=“un ordinateur” BOR-DER=“0” WIDTH=“147” HEIGHT=“100”></A><A HREF=“monitr.wav”><IMG SRC=“monitr.gif” ALT=“un écran” BORDER=“0”WIDTH=“114” HEIGHT=“100”></A><A HREF=“mouse.wav”><IMG SRC=“mouse.gif” ALT=“une souris” BORDER=“0”WIDTH=“57” HEIGHT=“100”></A><A HREF=“keybd.wav”> <IMG SRC=“keybd.gif” ALT=“un clavier” BORDER=“0”WIDTH=“231” HEIGHT=“100”></A></CENTER>….</BODY></HTML>

This version is the easiest to construct and can be easily implemented bymeans of a Web page editor such as Netscape Page Composer. With theeditor, developers first import the images onto the new page and then linkeach image to its sound file so that clicking on the image causes the corre-sponding word to be pronounced. To have the word appear on the screenwhen the cursor moves over the image, developers must add the word inthe alternative text box in the lower portion of the dialog box that appearswhen importing the image file. The page created with the editor is quitesimilar to the actual page as it appears on the Web; what you see in theWeb page editor is what you get when the page appears on the Web. Thecreator of the page need not deal directly with the html tags, although thehtml document with tags is being created in the background by the Webpage editor.

JAVA VERSION

The Java version of the module is composed of a Java applet embeddedin the html code read by the Web browser (see Figure 3).

482 CALICO Journal


Figure 3Technology Vocabulary: Java Version

In this version, the pictures scroll across the screen, three at a time. Whenthe cursor passes over one of the pictures, the corresponding word ap-pears in French below; if students click on the picture, the correspondingword is spoken in French. When the html code appears in the browser, theembedded applet is automatically called. The html code with the call tothe applet follows.

<HTML><HEAD><TITLE> technology vocabulary </TITLE></HEAD><BODY BGCOLOR=“#0000FF” TEXT=“#FF0000” LINK=“#FF0000”LINK=“#FF0000”><CENTER><TABLE><TR><TD></TD><TD ALIGN=CENTER><APPLET CODE=“picture.class” ALIGN=“center” WIDTH=575 HEIGHT=150 ><PARAM NAME=“number_of_images” VALUE=“28”><PARAM NAME=“showing” VALUE=“3”><PARAM NAME=“image1” VALUE=“comput”><PARAM NAME=“translation1” VALUE=“a computer”><PARAM NAME=“french1” VALUE=“un ordinateur”>...</APPLET></TD><TD></TD></TR></TABLE></CENTER></BODY></HTML>


Gilles Labrie

Code, the first tag within the applet, lists the name of the file the browserwill run. The first parameter indicates the number of pictures, and thesecond the number showing on the screen at any one time. The next threeparameters provide a name for the first picture, a translation of the word,and the French word for the pictured item. This information is repeatedfor all the words on the list. Other words and pictures are substituted forthe ones used here to create other modules such as the one on fruit andvegetables, all using this same applet.

The items passed to the applet vary in number depending on what theapplet needs. Here is some of the code that calls the applet on parts of thebody.

<APPLET CODE=“body.class” ALIGN=“center” WIDTH=398 HEIGHT=424 ><PARAM NAME=“number_of_images” VALUE=“1”><PARAM NAME=“image1” VALUE=“parts_of_body”><PARAM NAME=“number_of_words” VALUE=“25”><PARAM NAME=“audio1” VALUE=“cheveux”><PARAM NAME=“audio2” VALUE=“tete”><PARAM NAME=“audio3” VALUE=“sourcils”>….</APPLET>

The “number_of_images” parameter specifies the number of pictures theapplet calls, in this case only one. The next parameter specifies the nameof the image, “parts_of_body,” the parameter “number_of_words” speci-fies how many the applet uses, and the next three parameters specify thenames of the audio files.

A JAVA APPLET

Traditional linear computer programs follow a prescribed sequence. Forexample, the program for an ATM waits for a card to be inserted in themachine. Once a card has been inserted, the program asks for a password.After entering the password, the user is given a number of choices, but thechoices are fixed. In short, the program starts in a fixed place with theinsertion of a card and proceeds in a linear fashion through a series ofchoices that end when the card is returned to the user. Everything is fairlypredictable, except the amount of cash the user wants and other minorvariations.

However, Windows programs in general, and Java applets in particular,do not behave in this manner; they do not follow a predictable linear script.In the beginning, as with the ATM, the applet is running and waiting forsomething to occur. However, the applet does not follow a prescribed se-quence of events but, instead, responds to what the user does with thecursor. This approach requires a different kind of program. First, an applet

484 CALICO Journal


has an “init” method which, as the name indicates, performs initial taskssuch as loading pictures and sound files into memory. It also has a paintmethod which literally paints onto the screen the picture loaded in the“init” method. The paint method is regularly called to repaint the screen.Finally, handlers exist for the so-called events, that is, the movement ofthe cursor as it enters and exits the applet area as well as the movement ofthe cursor within the applet area. These handlers also determine whathappens when the mouse button is pressed. Whenever any of these eventsoccurs, the program captures the event and the coordinates of the cursorat the time of the event.

Loading the Images

Loading the images is one of the first tasks performed by the applet.This task is accomplished in the “init” method with the code below:

numimgs = Integer.parseInt( getParameter(“numimgs”));resize(width, height);imgnames = new String[numimgs];img = new Image[numimgs];for (int k=0; k < numimgs; k++) {

imgnames[k] = getParameter(“img” + (k+1));img[k]=getImage(getDocumentBase(),imgnames[k]+”.jpg”);

}

First, the value in the html code of the parameter “number_of_images” isread. Then two new array variables are declared; “imgnames” will be usedto store the names of the pictures, and “img” to store the pictures them-selves. The loop that follows fills the first array with the names of theimages from the html parameter list, then loads the images in the array“img.”

Loading the Sound Files

The sound files are then loaded with similar code.

audionum = Integer.parseInt( getParameter(“audionum”));audionames = new String[audionum];audio = new AudioClip[audionum];for (int k = 0; k < audionum; k++) {

audionames[k] = getParameter(“aud” + (k+1));audio[k]=getAudioClip(getDocumentBase(),audionames[k]+ .au”);

}


Gilles Labrie

The number of audio files is determined by reading the parameter list inthe html code. Arrays are declared for the names of the audio files and forthe files themselves, and a loop is used to read the file names from theparameter list in the html code; the audio files are then read into the array.Once the files are loaded, the paint method literally paints the images onthe screen.

Creating the Hot Spots

In the module on parts of the body, shown in Figure 4, a picture of ayoung man is painted on the screen. (See the Java code for this applet inAppendix A.)

Figure 4Vocabulary for Parts of the Body

486 CALICO Journal


When students move the cursor over a part of the image, the word for thepart of the body appears in French on the screen. Causing the word toappear on the screen is done with so-called “hot spots.” Hot spots caneasily be defined in Java using the point, rectangle, and polygon classes.Because rectangles are fixed in shape, the polygon class was used to de-limit the irregular shapes of parts of the body. Any number of coordinatescan be included to create a “hot spot” on the picture of the body. First, thex and y coordinates for the polygon are defined in pixels.

Int[] xcheveux = {158,166,184,221,236,241 };Int[] ycheveux = { 0,21,8,13,27,0};

These points are easily found because, as the applet is being developed, apreliminary version runs with the picture and a function prints the x and ycoordinates of the cursor movements in the status window. Once the pointsare defined, the new polygon can be specified.

Polygon cheveux = new Polygon(xcheveux,ycheveux, 6);

The parameter list includes “xcheveux” and “ycheveux” (i.e., the array ofpoints previously defined followed by the number of points in the poly-gon). The MouseMoved handler automatically tracks the movement ofthe cursor on the screen and the coordinates are saved in the variable“point.” The paint method then writes the appropriate French word to thescreen if “point” is inside the area defined as the polygon “cheveux.” Itdoes so by calling the DrawString method to print the word at the speci-fied location on the screen.

if (cheveux.contains(point.x,point.y)){g.drawString(“les cheveux”, 10, 18);

}

Playing the Audio Files

Whenever the mouse is clicked in an area of the picture representing apart of the body listed in the vocabulary, the word is spoken. This proce-dure is performed by the MousePressed handler.

public void mousePressed (MouseEvent evt) {if (point == null) { point = new Point (evt.getX( ), evt.getY( ));}point.x = evt.getX( ); point.y=evt.getY( );if (cheveux.contains(point.x,point.y)){

audio[0].play( );}else if (tete.contains(point.x,point.y)){

audio[1].play( );}


Gilles Labrie

The MousePressed handler is constantly tracking the position of the cur-sor. If the mouse is clicked, the MousePressed block is entered, and the xand y coordinates of the cursor on the screen are assigned to point.x andpoint.y. If the coordinates, point.x and point.y, are inside the polygon pre-viously defined as “cheveux,” the corresponding audio file is played.

GAME MODE

The game mode of the Tutor was described earlier. One of the gamesdirects students to click on a button to hear a word and then on the pic-ture that corresponds to that word (see Figure 5).

Figure 5Game

A second button, when pressed, repeats the last word spoken. The layouttherefore requires the addition of two buttons, play and repeat, as well astext boxes to indicate the score and the time elapsed. Instructions to stu-dents also need to be displayed, which are best added by creating a new

488 CALICO Journal


layout, imbedding the previous layout within the new layout, and addingthe new features in turn at the bottom.

In the game, a run method is added to determine the elapsed time. Thispart of the code follows.

Public void run ( ) {While (initial Time == 0);While (mythread != null) {

Try { Thread.sleep(1000);If (!stop) {

Time = System.currentTimeMillis();Interval = Time – initialTime;minutes = (int) Interval/60000;secondes = (int) (Interval % 60000)/1000;tf3.setText(String.valueOf(minutes));tf4.setText(String.valueOf(seconds));

}} catch (Exception e) { }

}}

The initial time is set to zero; then an infinite loop constantly updates thenumber of minutes and seconds elapsed, and the SetText method printsthe results in the appropriate text box. Finally, a method is needed to re-spond when a button is pressed. The buttons are defined as follows:

Button b[ ] = new Button[number];String button_name[] = {“Entendre”, “Répéter”}

Button clicks are processed by the actionPerformed handler. If the playbutton is selected, the handler randomly selects a word not already usedand causes the word to be spoken. If the repeat button is pressed, theprevious word is played again.

Public void actionPerformed (ActionEvent e) {If ( e.getSource( ) == “Entendre” && !stop) {

If (initialTime == 0) initialTime = System.currentTimeMillis();Voicenum = (int) (java.lang.Math.random () * 4);Do { if yes[voicenum]);

Else { voicenum++;If (voicenum > 4) voicenum = 0;

}} while (!yes[voicenum}));audio[voicenum].play(); essais++; tf2.setText(String.valueOf(essais));

} else if (e.getSource( ) == “Répéter” && !stop) {audio[voicenum].play(); essais++; tf2.setText(String.valueOf(essais));

}}


Gilles Labrie

PRELIMINARY ASSESSMENT

A preliminary assessment of the tutor was completed with students fromElementary Spanish classes who were paid a minimal fee for participatingin the study. Spanish students were used in the study because they repre-sented a large relatively homogeneous group with experience learning for-eign language vocabulary. Consequently, it was felt that the vocabularylearning they were asked to do in the study was a task they were morelikely to know how to undertake and complete than students who hadnever studied a foreign language. The students were paid a fee becauselocal experts advised that the recruitment of volunteers could be greatlyfacilitated if a modest stipend were offered. Of the 66 students who par-ticipated, the scores of 50 were retained. In a questionnaire administeredat the end of the project, the participants were asked which languagesthey had studied and, to eliminate bias in the results, the scores of the 16students who had previously studied French were eliminated (See the stu-dent questionnaire in Appendix B).

Protocol

The students were asked to study 23 French vocabulary words, all re-lated to parts of the body. (See the list of words in Appendix C.) All stu-dents studied the same words, but they were divided into three groupsthat were directed to study the vocabulary items in different ways. Thestudents in group 1 (n = 17) studied the words on a computer. When theypassed the cursor over an area of the image on the screen, the word ap-peared in French next to it. If they clicked the left mouse button on thesame area, the word was spoken in French. The students in group 2 (n =17) also studied the words on a computer, but they were unable to hearthe words spoken; they could only see the word appear in French on thescreen when they moved the cursor over an area of the body. The studentsin group 3 (n = 16) worked with a more traditional printed version ofwhat the other students had studied on the computer. In fact, they workedwith three modified copies of the picture in Figure 4 above. Printed on thefirst copy were all the words related to the head. The second copy con-tained the words that are part of the arms and upper body. The third copyincluded the words related to the legs and feet. The words printed onthese pages, however, had to be connected with lines to specific areas ofthe body. To make the pictures less confusing, dots were added so that itwould be clear which areas of the body the printed words represented. Toassure that all the participants worked under the same conditions, thepicture with the dots was also used in the computer versions for the twoother groups of students.

490 CALICO Journal


No limit on the amount of time students were permitted to study wasimposed. They simply recorded the time they started studying the wordsand the time they finished. After the students indicated they had studiedto their satisfaction, they completed three tests covering all the vocabu-lary items. In the first test, they were given English words and asked towrite the French equivalents (English to French); in the second, they weregiven French words and asked to write the English equivalents (French toEnglish); in the third, they listened to a list of words spoken in French andwere asked to write the English equivalents (listening/French to English).The tests were each scored on the basis of 23 points. For tests where thestudents answered in English, correct or mostly correct responses wereawarded one point. On the test where responses were in French, one pointwas awarded for correct or mostly correct answers and one-half point foranswers where the word was recognizable.

Study Time

Students in Group 1, those who used the computer and who could hearthe words pronounced, spent an average of 14.5 minutes studying thevocabulary items. Students in Group 2, those who used the computer butwho could not hear the words pronounced, studied an average of 13.0minutes. Students in Group 3, those who used the traditional method,studied for 17.6 minutes on average. Analysis of variance showed thatthere was a significant difference between the Groups 2 and 3, those whoused the computer without sound versus those who used traditional meth-ods (p < .05).

Correlation Between Test Scores

The students completed three tests after they had finished studying thevocabulary. The analysis of students’ test scores showed a significantlyhigh correlation between the English to French and the French to Englishtest scores (p < .01) and a moderate correlation between the English toFrench scores and the listening scores and also between the French toEnglish scores and the listening scores (p < .01). In other words, studentswho did well on one test also did well on the others, and students’ scoreson one test were good predictors of their scores on the other tests.

Comparison of Test Scores Between Groups

The mean scores and standard deviations on the three tests for eachgroup of students are shown in Table 1.


Gilles Labrie

Table 1Mean Test Scores

English to French to Listening/FrenchFrench English to English

M (SD) M (SD) M (SD)Group 1 15.5 (5.49) 20.3 (3.82) 15.2 (5.75)Group 2 19.4 (3.31) 22.0 (2.09) 14.9 (3.92)Group 3 16.7 (5.19) 19.9 (3.69) 11.8 (5.04)

There were no significant differences among the groups on the three testscores, which suggests that the three methods are equally effective. Thetest scores are also pertinent because the students in Group 3, using tradi-tional methods, studied longer but scored no better on the tests. Theseresults suggest that working with a computer is a more efficient way ofstudying than using traditional methods.

As noted earlier, all the students had studied Spanish. When we ad-justed for the years of study of Spanish (using years of study of Spanish asthe covariate in analysis of covariance), significant differences emergedamong the groups on the listening test. The students in Groups 1 and 2had significantly higher scores than those in Group 3. Post hoc analysisalso showed a significant difference between Groups 1 and 3 and betweenGroups 2 and 3 on the listening test. In other words, when the test scoreswere adjusted for years of Spanish, students who studied the vocabularywith a computer scored significantly higher on the listening test than stu-dents using traditional methods. The difference on the listening test scoresbetween the two groups using computers was not significant, but the testonly assessed the students’ ability to recognize new words, not to pro-nounce them.

Helpfulness and Enjoyableness

A part of the assessment was based on student self-evaluation. We wantedto find out whether students thought that computer-based lessons wereeffective and found them enjoyable. In the questionnaire that the studentscompleted at the end of the session, we asked the following two ques-tions:

1) How helpful was this method in learning vocabulary?2) How enjoyable was this method of learning vocabulary?

Students’ responses to these questions are shown in Table 2 and Table 3,and the means for the responses to the first question are shown in Table 4.

492 CALICO Journal


Table 2Helpfulness of Each Method of Learning

very helpful somewhat not very oror helpful helpful not helpful

Group 1 15Group 2 13 3 1Group 3 9 6 1

Table 3Enjoyableness of Each Method of Learning

very enjoyable somewhat not very oror enjoyable enjoyable not enjoyable

Group 1 10 6 1Group 2 9 8Group 3 7 4 5

Table 4Mean Response Scores on Helpfulness of the Method

MGroup 1 3.23Group 2 2.76Group 3 2.62

Note: 5-point scale (0 = not helpful, 4 = very helpful)

Analysis revealed a moderate correlation between helpfulness and en-joyment. Students who found the way they learned the French words helpfulalso found it enjoyable to a similar degree. There were no significant dif-ferences among the ratings of the groups for the question of how enjoy-able they found the specific method they used to learn the words. How-ever, on the question of how helpful the method was, Group 1, the groupof students who used computers and could hear the words pronounced,had a significantly higher mean than the other two groups. This findingindicates that the students found computer-based learning with sound morehelpful than those who used the computer without sound and those whoused traditional methods. However, one large caveat should be noted.Because students were given a listening test, one would expect those whoheard the words to find the materials more helpful than those who didnot.

The questionnaire also asked students what was helpful and what wasnot, and what suggestions they would like to offer. The answers to thesequestions supported the conclusion in the self-evaluation on helpfulness.Students in Group 1 reacted very positively to the program. 29% com-


Gilles Labrie

mented favorably saying, for example, that “this method of learning is agood one,” that they “would like to be taught like that,” that this methodof learning should “be used in all language classes,” and that the “programshould be available in all language labs.” Another student praised the ef-fectiveness of the program:” I never thought I could speak French, buthere I knew how to say body part terms in a matter of minutes.”

A few students in Group 2, who used the computer without having thewords pronounced, pointed out that they liked using the computer pro-gram because a word only appeared when the cursor was moved over anarea of the body. Therefore, they could test their knowledge and verify itimmediately by moving the cursor and making the word they wanted tocheck appear on the screen.

Suggestions for Improvements

Students also suggested a number of improvements. Some pointed outthe poor placement and ambiguity of some of the dots painted on parts ofthe body. Even when the dots are well placed, however, the question ofhow learners distinguish among the words for thigh, leg, or calf remains.For that reason, a number of students, including 29% of those in Group 1who responded favorably to the program, suggested that the English equiva-lents of all words be shown somewhere. In addition, of the students whodid not hear the words pronounced, 52% of those in Group 2 and 29% ofthose in Group 3 would have liked to hear the words. The latter request,however, is not surprising given that students had just taken a listeningtest.

CONCLUSION

A few conclusions can be gleaned from the preliminary assessment ofthe program in this study.

• Students using paper copies spent more time on average study-ing vocabulary than both groups of students using a computer,though the only significant difference was between Groups 2and 3. It is noteworthy that the students using traditional meth-ods studied longer but scored no better on the achievementtests.

• Students who did well on one test tended to do well on theothers and vice versa. Students’ scores on one test were goodpredictors for scores on the other two tests.

• In general, the three methods of vocabulary learning were

494 CALICO Journal


equally effective. Only when we adjusted for the years of studyof Spanish was there a significant difference in listening testresults between the two groups using a computer versus thenoncomputer group.

• Students did not find one learning method more enjoyable thananother.

• The analysis showed that Group 1 students using pictures,words, and sounds found the method they used more helpfulthan students in the two other groups who used pictures andwords, with or without a computer. This result does not neces-sarily mean that students find computer-based learning morehelpful than other means of study. Students in Group 1 seemedto find their method of learning inherently more useful becausethey practiced listening to the words and were better preparedfor the listening test that followed. The only support for thishypothesis is the strong testimony from some of the students inGroup 1.

As for the Tutor, the design described above is merely the first step;many more words need to be added to the lexicon. Indeed, this develop-ment should proceed more quickly now that a few basic applets have beencreated. In addition, other types of exercises and games could be includedin the future. One of the games already developed in which students dragthe vocabulary word to the area of the picture it represents has been ex-tended so that it can be played by two students on the Web. The presentspeed of the Internet, however, is too slow, without turn taking, to permitthe game to proceed in the usual fashion. The program will need to bemodified.


Gilles Labrie

Appendix A

Java Code Applet

/***/import java.awt.*;import java.applet.*;import java.lang.Object;import java.awt.event.*;

/* This applet shows 1 image on the screen. If the user moves the mouse over parts of* the image, the word corresponding to that part of the image appears in French. If the* user clicks on the image, the word is pronounced in French.*/

public class body extends Applet implements MouseListener, MouseMotionListener {int width = 600;int height = 424;Image[ ] img;int numimgs;String[ ] imgnames;AudioClip[ ] audio;int audionum;String[ ] audionames;String[ ] translate;String[ ] word;String mes1 = “ “;Font font = new Font(“TimesRoman”, Font.BOLD,24);Font font2 = new Font(“TimesRoman”, Font.BOLD,14);int[ ] xcheveux = {158,166,184,221,236,241 };int[ ] xtete = {200,200,207,207 };int[ ] ycheveux = { 0,21,8,13,27,0};int[ ] ytete = {9,18,18,9};Polygon cheveux = new Polygon ( xcheveux, ycheveux, 6);Polygon tete = new Polygon ( xtete, ytete, 4);….Graphics dbuffer;Image offscreen;

public void init ( ) {

setBackground(Color.white);setFont(font);numimgs = Integer.parseInt( getParameter(“numimgs”));resize(width, height);imgnames = new String[numimgs];img = new Image[numimgs];for (int k=0; k < numimgs; k++) {

imgnames[k] = getParameter(“img” + (k+1));img[k]=getImage(getDocumentBase(),imgnames[k]+”.jpg”);

}

496 CALICO Journal


audionum = Integer.parseInt( getParameter(“audionum”));audionames = new String[audionum];audio = new AudioClip[audionum];for (int k = 0; k < audionum; k++) {

audionames[k] = getParameter(“aud” + (k+1));audio[k]=getAudioClip(getDocumentBase(),audionames[k]+ .au”);

}ofscreen = createImage(width,height);dbuffer = offscreen.getGraphics();dbuffer.setColor(Color.white);dbuffer.fillRect(0,0,width,height);addMouseListener(this);addMouseMotionListener(this);

}

public void paint (Graphics g) {

g.setColor(Color.blue);g.setFont(font2);for (int k=0, j =0; k < numimgs ; k++) {dbuffer.drawImage(img[k], j, ystart, img[k].getWidth(this), img[k].getHeight(this),this);}g.drawImage(offscreen, 0, 0, this);

if (cheveux.contains(point.x,point.y)){g.drawString(“les cheveux”, 10, 18);

}else if (tete.contains(point.x,point.y)){

g.drawString(“la tête”, 10, 18);}….

}

public void update (Graphics g) {paint(g);

}

public void mousePressed(MouseEvent evt) {if (point == null) { point = new Point (evt.getX(),evt.getY());}point.x = evt.getX(); point.y=evt.getY();if (cheveux.contains(point.x,point.y)){

audio[0].play( );}else if (tete.contains(point.x,point.y)){

audio[1].play( );}…

}public void mouseEntered (MouseEvent evt) {

repaint( );}public void mouseExited (MouseEvent evt) {

repaint( );}


Gilles Labrie

public void mouseClicked (MouseEvent evt) { }public void mouseReleased (MouseEvent evt) { }public void mouseMoved(MouseEvent evt) {

if (point == null) { point = new Point (evt.getX(),evt.getY());}point.x = evt.getX(); point.y=evt.getY();repaint();showStatus(point.x +”,” + point.y);

}public void mouseDragged(MouseEvent evt) { }}

Appendix B

Student Questionnaire

I. Please circle one of the choices for each question.

1. How helpful was this method of learning vocabulary?very somewhat not very not

helpful helpful helpful helpful helpful

2. How enjoyable was this method of learning vocabulary?very somewhat not very not

helpful helpful helpful helpful helpful

II. What was helpful?

What was not helpful?

What suggestions do you have?

What languages have you studied and how long?

498 CALICO Journal


Appendix C

Vocabulary List

les cheveux hairles sourcils the eyebrowsl’oeil the eyele nez the nosela bouche the mouthle menton the chinl’oreille the earle cou the neckl’épaule the shoulderle bras the arml’estomac the stomachles doigts the fingersla main the handle coude the elbowla poitrine the chestle dos the backle poignet the wristle genou the kneela cuisse the thighla jambe the legle pied the footle doigt de pied the toela cheville the ankle


Gilles Labrie

REFERENCES

Carter, R., & McCarthy, M. (1988). Vocabulary and language learning. New York:Longman.

Corbeil, J.-C. (1994). Le Visuel multilingue: dictionnaire thématique. Montréal:Editions Québec/Amérique.

Farrell, J. (1999). Java Programming. Cambridge, MA: ITP.

Geary, D. (1998). Graphic Java 2: Mastering the JFC: AWT. Mountain View, CA:Sun Microsystems.

Le Visuel: dictionnaire multimédia [CD-ROM]. (1996). Montréal: Editions Québec/Amérique.

Nation, I. (1990). Teaching and learning vocabulary. New York: Newbury House.

Oxford, R., & Crookall, D. (1990). Vocabulary learning: A critical analysis of tech-niques. TESOL Canada Journal, 7 (2), 9-30.

Reynolds, M. C. (1996). Using JavaScript. Indianapolis, IN: Que.

Stanek, W. R. (1996). Web publishing unleashed. Indianapolis, IN: Sams.net.

Tyma, P., Torok, G., & Downing, T. (1996). Java primer plus. Corte Modera, CA:Waite Group Press.

Van der Linden, P. (1999). Just Java 1.2. Mountain View, CA: Sun Microsystems.

AUTHOR’S BIOSTATEMENT

Gilles Labrie is Professor of French at Central Michigan University. He isinterested in the use of technology to enhance language learning.

AUTHOR’S ADDRESS

Gilles LabrieDepartment of Foreign Languages, Literatures, and CulturesCentral Michigan UniversityMt. Pleasant, MI 48859Phone: 517/774-3786Fax: 517/774-2323E-mail: [email protected]

500 CALICO Journal


www.agoralang.comfor comprehensive listings of language publishers,

schools, study abroad, learning center services,

AGORALANGUAGE

Documents

A French Vocabulary Tutor for the Web - Software @ SFU Library