On-Line Guide to creating Two buttons for your web pages using Javascripts.  
 

To create these exercises, one must have the ability to create a web page or edit an existing one.  If you can do that, then the rest is easy. The best way is simply to use a web page editor like Netscape Composer to create a web page you and to edit the javascripts. I shall first tell you how to use Netscape Composer to to create and manipulate these buttons, and then I'll demonstrate the harder process of using raw HTML code.       When you use Composer, all javascripts appear as little yellow icons (see right). These icons, when clicked on, open up windows that reveal the javascripts inside (see below). If you click  HERE  you will be taken to a small web page called JBUTTON.HTML, which will contain the two buttons we shall learn how to manipulate and a example of how each can be used in an exercise. Once this page is open, you can go to the View menu in your browser and choose Page Source. This will produce a text file containing the HTML code of the page.   CLICK HERE  if you wish to see the simple code for a page containing just the two buttons without the examples. Save this file as a text only file with a name like MYFILE.HTML, and open it in Netscape Composer, and you will see the four icons to the right.           The first and the last of these icons contain the FORM and /FORM javascript commands. All the other buttons you create must be put between these two icons. You only need one FORM icon the beginning, and one /FORM icon at the end.  You can select all four of these icons in Composer and then create  another web page in Composer (using the New and Blank Page command in the File menu) ,and paste them into your new document. Then in your new page you can duplicate the various icons to your heart's content by the same process.

JavaScript Icons        in Composer                    The four icons       in Jbutton.html

 
The second icon contains the simple javascript for the button (see left) that creates a message when clicked on, as shown below, such as: 

In Composer, when you click on these icons, an HTML Tag window opens that contains the texts of these javascripts, as seen to the right. Here is the javascript for a button named "Helen" which gives the message Yessss! when clicked on. Let us call this Javascript #1  Once you have opened this HTML Tag window, you can put your cursor in the box and change the Javascript like any other text. When you are finished making the changes, click on the OK button.

                By replacing  Yessss! with a desired word or phrase, you can change the response the button produces.  Only make substitutions for the words Helen and Yessss!  Make sure you do not change any other components of this Javascript.  The title of the button can be one word long, or several.  However, do not make the buttons too wide, or they will not fit into the browser window.  Also, do not use any apostrophes or quotation marks in your substitution since these punctuation marks are used by Javascript. And do not remove any of the quotation marks or apostrophes from the Javascript I have given.  Only the words and punctuation in boldface can be replaced. Leave out anything else, and the button will not work! The Javascript will not contain boldfaced words, nor should you, when you are writing the script, use boldfacing, underlining or italics. I have used the boldfaced text above simply to show what can (and cannot) be changed in this script. It is also probably a good idea to turn off any ‘Smart Quotes.’
 

The second button is used in connection with a question, as is seen on the  left.You create the question like you would any line of text on a web page. You will page this button next to the question. When the student clicks the button to answer the Javascript Application window seen below pops up. Let us say the student types  ‘Athena’ in the space provided, and clicks ‘OK’. Then the message window seen below  right appears. See how this window shows the student his or her answer and also the correct answer?

The third icon above contains the javascript for this second button. Let us call it javascript #2. When you click on that icon, this sort of HTML Tag window opens up.  There are three sections of javascript #2 that can be modified. Remember also that only the boldfaced words can be changed:          The phrase in the first line Click to answer question. is the button's name. You can change this name to something like Question one, Myth Question 1, etc.

          The phrase in the second line Write the answer and click OK. can also be changed, to, let us say, Give the required verb form.
           The phrase in line 3 The answer was Artemis.  Were you right? can also be changed, but do not make the phrase  much longer than this, since the ‘box’ that displays the answers is only so big.
     Also do not put any quotation marks or apostrophes in your substitutions, and do not omit any of the quotation marks or apostrophes contained in example Javascript. The question itself (The goddess associated with hunting and

wild animals was..) must be typed in as text before you insert the Javascript for the answer button. To the right is an example of what a web page would look like with a few of these questions built in.           Below it is what this same page would look like in Netscape Composer with all the javascript icons.          Note the questions are typed in as text, and next to them are the various JavaScript icons that, when clicked on, open the HTML tag boxes discussed above.       The very first and last of these icons, of course, contain the FORM and /FORM commands and you will not change them.  Remember the scripts for all the buttons have to be enclosed in these commands.

CREATING THESE JAVASCRIPT EXERCISES USING HTML CODE

          In this section I  explain how to create these exercises using raw HTML code.  To begin with, you must create a text only file (a save option in all word-processing programs) with a name like MYFILE.HTML,  into which you put the HTML code which an internet browser uses to generate a web page. Below I provide the complete HTML code to generate a web page and illustrate what the page would look like with its buttons on the web. You  should consult the complete code to see how the information I provide works in the context of a complete web page.  When you have finished working on the *.HTML file, make sure its final version is saved as a text only file with a name like MYWEB.HTML. This *.HTML file then must be transferred to the computer that is acting as a server.
Now here is the complete raw HTML code for a web page. 
 

<HTML>  <HEAD>     <TitLE>Basic Javascript for Interactive Buttons</TitLE>  </HEAD>  <BODY>  <BODY BGCOLOR="#FFFFFF">  <FORM>  1. Whose face launched a thousand ships and burned the topless towers of Ilium?  <BR><BR>  <INPUT TYPE="button" VALUE="Andromache"  onClick='alert("No. Try again! ")'>  <INPUT TYPE="button" VALUE="Cassandra" onClick='alert("No. Try again! ")'>  <INPUT TYPE="button" VALUE="Athena" onClick='alert("No. Try again! ")'>  <INPUT TYPE="button" VALUE="Helen" onClick='alert("Yessss! ")'>  <BR><BR>  2. Who killed Medusa?  <BR><BR>  <INPUT TYPE="button" VALUE="Heracles"  onClick='alert("No. Try again! ")'>  <INPUT TYPE="button" VALUE="Perseus" onClick='alert("Yesssss! ")'>  <INPUT TYPE="button" VALUE="Bellerophon" onClick='alert("No. Try again! ")'>  <INPUT TYPE="button" VALUE="Meleager" onClick='alert("No. Try again! ")'>  <BR><BR>  3. The main Greek god of the sea was:  <INPUT type="button" value="Click to answer question. "  onClick="var hh = prompt(' Write the answer and click OK.','');  alert('You wrote ' +hh+ '. The answer was Poseidon. Were you right?.')">  <BR><BR>  4. The goddess _________ is  associated with hunting and wild animals:  <INPUT type="button" value="Click to answer question. "  onClick="var hh = prompt(' Write the answer and click OK.','');  alert('You wrote ' +hh+ '. The answer was Artemis. Were you right?.')">  <BR><BR>  </FORM>  </BODY>  </HTML>

Now here is what the page generated by this code looks like:

 
The Javascripts are put in the body of the *.HTML file, that is, between the command <BODY> located near the top f the file and </BODY> located near the bottom. To create these exercises, you must first add the Javascript command <FORM> , which tells your browser you are going to create FORMS, which is what Javascript calls a button. After you have added all the Javascripts that generate these buttons, you must insert as your final Javascript command </FORM>, which should be located right above the </BODY> command. Again, all the Javascripts I shall give you must be inserted between the Javascript commands <FORM> and </FORM>. Note how this works in  example page code above.
 
Javascripts #1  This is a button bearing a name that makes a response when clicked on ( CLICK HERE  to go to the example of the function of this button above. Use Back command in your browser to return to this section of the page). Before adding the Javascript that creates this button, type the question (Whose face launched....) just like you type other text into the web page. The Javascript for the button with the title ‘Helen’ that responds ‘Yessss’ when clicked upon consists of one  simple line. Here it is.
 

You can create any number of buttons by simply duplicating Javascript #1 for each button, and replacing the word Helen with whatever title you wish to give the button, and replacing Yesss! with the response you  wish the button to give. Make sure you do not change any other components of this Javascript.  The title of the button can be one word long, or several.  However, do not make the buttons too wide, or they will not fit into the browser window.  Also, do not use any apostrophes or quotation marks in your substitution since these punctuation marks are used by Javascript. And do not remove any of the quotation marks or apostrophes from the Javascript I have given.  Only the words in boldface can be replaced. Leave out anything else, and the button will not work! The Javascript will not contain boldfaced words, nor should you, when you are writing the script, use  boldfacing, underlining or italics. I have used the boldfaced text above simply to show what can (and cannot) be changed in this script. It is also probably a good idea to turn off any ‘Smart Quotes.’

 Here is one more example, illustrating how you can use these buttons for language drills.  Let us say you wish to create the question "Choose the correct verb form to complete the sentence.  Paulus et Marcia  suam patriam  _______. " Here is the Javascript for  button entitled amaverunt which indicates a correct answer with the response Bene factum! See how the substitutions have been made for the values given in  Javascript #1
 

As noted above, a number of these buttons can be used together can create multiple choice questions. You can vary the responses, not only indicating correct or incorrect answers, but also near misses.

Javascript #2 The javascript for this button  is more sophisticated. When clicked upon it asks the student to type the answer  and then displays the student's  response and the correct answer ( CLICK HERE to go to the example of this button's operation above. Then use the Back command to return to this part of the page). Below is simple, three-line Javascript that generates this button. You can use this Javascript within the same <FORM> and </FORM> commands that also enclose Javascripts for the first type of button, as  seen in the example page.

 There are three sections of this Javascript that can be modified. Remember also that only the boldfaced words can be changed:
    The phrase in the first line Click to answer question is the button’s name. You can change this name to something like Question one, Myth Question 1, etc.
    The phrase in the second line Write the answer and click OK can also be changed, to, let us say, Give the required verb form.
    The phrase in line 3 The answer was Artemis.  Were you right? can also be changed, but do not make the phrase  much longer than this, since the ‘box’ that displays the answers is only so big.
    Also do not put any quotation marks or apostrophes in your substitutions, and do not omit any of the quotation marks or apostrophes contained in example Javascript. The question itself (The goddess associated with hunting and wild animals was..) must be typed in as text before you insert the Javascript for the answer button.

Another  example. Let us say your question was “Give the correct verb form for the word in parentheses.  Marcia patriam (loves).” Below is the  3-line Javascript for a button entitled Latin Ques. 1. that, when clicked on, asks the student for the correct verb form, and then displays the student's answer and indicates that amat was the correct answer. Notice how the substitutions were made from the earlier example?\

Above I gave you an example  of a page containing these kinds of questions and buttons, including the HTML code for this page ( CLICK HERE  to go to HTML code above), which has the title  "Basic Javascript for Interactive Buttons" and a white background (generated by the line <BODY BGCOLOR="#FFFFFF">), which looks better than the default gray. Note how all the Javascripts go between <BODY> and </BODY> and how the first and last Javascript commands are <FORM> and </FORM>. The commands <BR> simply put vertical breaks between lines, like a carriage return — otherwise lines of text run together unbroken. And remember, the whole web page must be saved as a text-only file with a name like MYFILE.HTML, and then uploaded to a server in order to become available to the entire internet. However, you can preview the page first while working on the file on your own computer using a browser’s Open Page command which in Netscape is part of the File Menu.

The hard part is producing your first web page. If you can do that, the rest is easy. Here at  Montclair State University I have created an exercise page so that my students can drill themselves on myth questions as a way of learning or reviewing. It uses some more advanced applications, but the core of it is still the scripts I have given you. You can see the most recent version of it at  http://chss2.montclair.edu/classics/metalink.html. If you have any suggestions, corrections (especially if you really understand javascript programming, don't hestitate to e-mail me at alvares@mail. montclair.edu.

visits since April 10, 1999.

Copyright April 1999 Jean Alvares

CLICK HERE TO RETURN TO JAVASCRIPTS PAGE