Tutorial 3: Feedback Using Alert Boxes

Tutorial 3: Feedback Using Alert Boxes

The following tutorial presupposes that you have some familiarity with HTML authoring.
This an example of an exercise that provides immediate feedback by means of alert boxes to the user's answer in an input text field ("blank").
This exercise presents a dialogue, but it can be adapted for other grammatical or communicational goals.
Click here to see the finished product: template3.html

Some points to remember:

JavaScript is case sensitive, so you will have to be consistent using lower case or capital letter when naming your functions or calling values from forms. That applies also to accented words.

The JavaScript in this tutorial is optimized for Netscape Navigator 2 and higher. Performance using other browsers may vary.
Do not repeat names for functions or forms; if you do, you will get JavaScript alerts or just plain confusion in your feedback.
Although we haven't covered it here, it's always good practice to comment your scripts by inserting two slashes // next to your lines of coding.
Test often, as you create your functions, rather that waiting until you have written all of them. That way you can control better the debugging process.
If you are nesting JavaScript into HTML, you have to alternate between single quotes and double quotes. For instance, in Tutorial 3 there is this line of code inside the HTML. Like in step 10 of Tutorial 1: onClick = "getExplanation('Explanation')"

Remember that all the functions of the JavaScript code must be placed between the <HEAD></HEAD> tags of your HTML document.
Like any other JavaScript coding, start by inserting these two lines right after the <HEAD> tag:

<SCRIPT LANGUAGE = "JavaScript">
<!--
This script has only one type of function which generates the feedback for the answers entered by the user in the text field ("blank").
The naming of the functions is pretty much arbitrary: checkIt() takes care of the first question, and checkIt2() implements the feedback for the second question.
Let's examine the first one, checkIt():
- First, we create a variable var answer to save us some typing. This variable identifies the value or data entered in the first text field.
  
  function checkIt() {
  var answer = document.forms[0].one.value
- Then we proceed to define the conditions of the feedback for the right answer given by the user:
  
  if (answer == "White" || answer == "White." || answer == "white" || answer == "white.") {
  document.forms[0].one.value = "It wasn't that difficult, was it?"
  document.forms[0].two.focus()
  document.forms[0].two.select()
  }
  
  -Inside the condition if we have foreseen four different ways the user can type the right answer, white: with or without a capital W, and with and without ending the answer with a period (.). The double equal sign == means "or".
  
  -After that we instruct the script to write in the text field the feedback corresponding to this right answer:
  
  document.forms[0].one.value = "It wasn't that difficult, was it?"
  
  -The last two lines makes the cursor jump (focus) to the second text field, named two, and highlight it (select).
- Now we have to establish the feedback for the wrong answer:
  
  else {
  alert("Think, think...")
  document.forms[0].one.focus()
  document.forms[0].one.select()
  }
  
  -The alert("your_message") event opens up the JavaScript alert window with its message inside: in this case, "Think, think...". After that, the cursor returns to the field and highlights it, so the user can try again.
Finally, let's see how this type of function is called from the button and image of the HTML. This template uses two clickable objects: a button labeled "1." and an image .
See how the event onClick is incorporated inside the tags of the button to call the first function of the script:

<INPUT TYPE = "button" NAME = "click1" VALUE = "1." onClick = "checkIt()">

For the image we have the following tag:

<A HREF = "Javascript:checkIt2()"><IMG SRC = "../Colby/images/checkmrk1.gif" ALIGN = "top" BORDER = "0" HSPACE = "3" WIDTH = "18" HEIGHT = "17"></A>

In this case we make the image clickable by placing it within the <A HREF></A> tags. The "link" for the image is now the JavaScript coding "javascript"checkIt2()", that is, the calling of the second function of the script. So, when the user clicks on the image, the second function gets implemented.
Now you can close your script with the customary lines:

// -->
</SCRIPT>
</HEAD>