|
How to Make a Gap-Fill Exercise with JavaScript
When I started coding this little script for a cloze activity last night, I was planning to just give you the code to copy-and-paste. Once I'd done it, however, I noticed that it was a pretty simple script. I quickly changed my mind and decided that rather than give it to you on a plate, I could use it as a little lesson in JavaScripting for EFL. That's the teacher in me I suppose.
Before we get on with the JavaScript lesson, I think it's worth giving you a little history lesson. Back in the early days of the web, a new set of HTML tags were created that allowed an author to put a form on the page and have the information that the user typed in sent via email to his/her email address, or to a CGI program on the server. This was great for companies that wanted to allow visitors to their site to order goods online, for example. However, what if a user forgot to fill in the address part of the form, for example? No address, no goods! If the customer had included their email address, the company could contact them to ask for the address, of course, but this was time-consuming for both company and customer. The obvious solution was to have a computer program check that all necessary fields are complete before the form is submitted, thus JavaScript was born. Checking forms is JavaScript's raison d'etre, which luckily for us, also makes it the ideal technology for making interactive web activities for EFL. When you hit the "Check Score" button up there, JavaScript leaps into action and checks all the fields against a list of the correct answers. It awards one point for each match it finds and then spits the result at you. Beautiful. JavaScript and TESOL really are a match made in heaven.
OK, let's get on with the coding lesson. To start with, take a look at this HTML code:
<FORM NAME="myform">
Yesterday I (have) <INPUT TYPE="text" VALUE="" SIZE="8"> a really bad day. I (wake) <INPUT TYPE="text" VALUE="" SIZE="8"> up at 9 o'clock because I (forget) <INPUT TYPE="text" VALUE="" SIZE="8"> to set my alarm clock the night before. I (get) <INPUT TYPE="text" VALUE="" SIZE="8"> as fast as I (can) <INPUT TYPE="text" VALUE="" SIZE="8"> and...
<BR><BR>
<INPUT TYPE="button" VALUE="Check Score" onClick="check();">
<INPUT TYPE="button" VALUE="Show Solution" onClick="show();">
<INPUT TYPE="reset" VALUE="Clear Answers">
</FORM>
This sets up the interface for the student. If you copied this and loaded it into your browser, you'd see the exercise exactly as it is above, though it wouldn't work of course. First we declare a form and call it "myform". Then we type the text for the cloze exercise. Every time we want to put a blank we stick this line of HTML in:
<INPUT TYPE="text" VALUE="" SIZE="8">
This tells the browser to put a little white box on the screen that the user can type into, that at the beginning there shouldn't be any text in it, and that it should be eight characters wide. You can put as many of these boxes in as you like; I went for just five because I'm lazy. You can set the size however you like too, of course. If you're using a smaller font than I am on this page (I'm using 3), you may need to increase the size, because although the text inside the box is always set at 2, the size is determined by the font size you have set for the paragraph. Got it?
Right, let's take a look at the code for the three buttons that go under the exercise:
<INPUT TYPE="button" VALUE="Check Score" onClick="check();">
<INPUT TYPE="button" VALUE="Show Solution" onClick="show();">
<INPUT TYPE="reset" VALUE="Clear Answers">
The last one is just a reset button that empties all the boxes so the student can start again from scratch. The other two are more important. Notice the "onClick" attributes. The stuff inside the quotes is the JavaScript that the browser should put into action if the button is clicked. In both cases they are the names of what are known as functions. Functions are little subroutines that we put in the HEAD of the document within SCRIPT tags. So when you click "Check Score", the browser runs the function called "check()", and when you click "Show Solution", the browser runs the function called "show()". Notice the pair of round brackets after each function name. We need those, but you don't need to know why.
Now it's time to show you the script that goes in the HEAD of the document. The explanation of how it works is going to be way over your head if you've never studied JavaScript, so I'm going to give you a quick opt out option now. If you just want to take the script and run, copy the following and paste it inside the HEAD tags of your document. Also, copy the HTML I gave you earlier and use it in the BODY of your document. I've already told you how to adapt the HTML stuff, so here's how to adapt the JavaScript. It's pretty simple really. See the correct answers in brackets next to where it says "new Array"? Change these to the words that are the correct answers in the exercise you want to make. You can have as many as you like, just make sure they match the number of text boxes you've got in the HTML bit and that they are in the correct order. Notice that they are in double quotes and separated by commas. That's important. It's also important that you don't press ENTER in the middle of this line. It's one line of script but if you hit ENTER you're telling the browser that it's two. Don't worry, though, if your text editor's margins cause the line to wrap as it gets longer. As far as the text editor is concerned, it's still one line because you haven't hit the ENTER key.
<script language="javascript">
<!--
var score = 0;
var answer = new Array("had","woke","forgot","got","could");
//Check and display score
function check(){
for(i=0;i<answer.length;i++){
if(document.myform.elements[i].value.toLowerCase()==answer[i]){
score++;
}
}
alert(score + " out of " + answer.length + ".");
score = 0;
}
//Put the correct answers into all the fields
function show(){
for(i=0;i<answer.length;i++){
document.myform.elements[i].value = answer[i];
}
}
//-->
</script>
OK, let's start analysing the script. To follow the analysis you'll need to be familiar with the basic syntax of JavaScript and know how the following things work: alert boxes, variables, arrays, functions and loops. That stuff is JavaScript 101 and there are dozens of tutorials out there to teach you it. I don't see any point in duplicating what's already available, so the explanation that follows will do no more than show you how you can apply those basic features to creating a cloze exercise.
The first line of the script declares a variable called score and sets its value to zero. The second line creates a new array called answer and says that the first element in the array, answer[0], will be "had", answer[1] will be "woke", and so on. In this example, there are five items in the array so the length of the array is five. For a quick introduction to arrays, see "How to Show Random..."
Now let's take a look at the function we use to reveal all the correct answers, that's the second one, by the way:
//Put the correct answers into all the fields
function show(){
for(i=0;i<answer.length;i++){
document.myform.elements[i].value = answer[i];
}
}
The first thing you'll notice is that the function consists of nothing more than a "for" loop. The first time into the loop the variable i is set at 0, which means that the value of "document.myform.elements[0]" is set to answer[0]. This means that the first text box in our passage gets filled in with "had". "document.myform.elements[0].value" refers to the value of the first item, or element, in the form called "myform". In this case, it's our first blank. The second time into the loop i increments to 1, so the second text box in the form gets filled in with "woke". The loop will only continue as long as i is less than the length of the array called "answer". The length of our array is five, so the final value for i before the loop ends is 4. This fills the final blank in our cloze exercise to "could".
The function for showing the score is a little more complicated. Here it is again:
//Check and display score
function check(){
for(i=0;i<answer.length;i++){
if(document.myform.elements[i].value.toLowerCase()==answer[i]){
score++;
}
}
alert(score + " out of " + answer.length + ".");
score = 0;
}
We've got the same loop again here, right? Each time it goes through the loop, the browser does a few things. First it changes "document.myform.element[i].value" to lower case using the method "toLowerCase()". This is not really necessary, but ensures a student who's got CapsLock on will still get a point. Next, it checks the value, the student's answer, against the correct answer. If it matches, the student's score gets incremented by one. After checking all the answers, our browser will exit the loop and throw up an alert box with the score out of the length of the array, in this case, 5. Finally, it will reset the score to zero ready for the next click.
That about wraps it up, but if you have any questions, drop me an email.
28/5/02: I got an email the other day from someone wanting to know if there was an easy way of letting the student know which of their answers were wrong when they click "Check Score". The good news is, there is, and I recommend doing it as it it's a really helpful feature for the student. All you have to do is change the "check()" function to the following:
//Check and display score
function check(){
for(i=0;i<answer.length;i++){
if(document.myform.elements[i].value.toLowerCase()==answer[i]){
score++;
}else{
if(document.myform.elements[i].value!=""){
document.myform.elements[i].value="Wrong!";
}
}
}
alert(score + " out of " + answer.length + ".");
score = 0;
}
This adds an "else" clause to deal with an answer that is incorrect. As long as something was entered into the field, the program returns "Wrong!" to the field.
You might be wondering why I didn't include this feature in the first place. The truth is that after writing the basic script, I decided to use at as a JavaScripting lesson and so didn't add any more complexity in order not to scare you away.
|
Last Edited: 28 May 2002
© 2002 Matt Stanton
|
|
