The Code for Twenty-Four Simple Useful Javascripts plus some Explanatory Notes.
 

Here is the HTML code for twenty-four simple javascripts. Remember that, before you add any of these, you have to have added the <form> command, and after you have put all of them in, you need to have the </form> command. ,  only one each per web page. 

I have put the variables that govern the names buttons display , responses that alerts and other fields give, and the numbers that determine the length of fields (for example SIZE="20")   in RED. 
Where there is answer that an IF-statement must use, the variables that define that answer or answers are in BLUE. 
(for example  if( form.ansOne1.value == 'answer one')

Where there is a name of a field (something in which you type an answer, or which displays a text, for example NAME="ansOne1"), or the variable for the information that is put within the field ( for example form.ansOne1.value)  I have put that name in Green.

It is very important that every field and button on the page for each exercise have a different name. If not, the javascript will not work, because it will become confused about what to do with which field and what button. 


There are a few other bits of code that have nothing to do with the javascript itself, but rather govern how it is displayed. 

I have put in violet code that really has nothing to do with the javascript proper, such as text or formatting 
commands such as: 

<br> which simply causes a line break, or  &nbsp;  which simply inserts a space. 

I use these two HTML commands so that fields, buttons, etc. will not be too bunched up. 

All the other code in black should be left as it is. One misplaced apostrophe or colon or quotation mark will cause the script not to work. 


It is really quite easy to create a web page that uses these scripts. For all the scripts that do not have buttons or fields that store data (scripts 1, 2, 3, 4, 5, 6)  all you need to do is to copy and paste the script, each time simply changing the variables in red.  If you click here, you will see the HTML code for scriptfivedrill.html that generates a short drill using over and over again the code in script FIVE. Look over these pages carefully. You will be able to use the same procedure of copying and pasting for all the first six scripts. 


The rest of these scripts must be copied with more care, for each question must have  fields and variables that are associated with the imput or output of the field that must be unique to it; otherwise the javascript will not be able to properly match inputs to outputs. The trick is to, when you copy a script, to make a minor substitution for the name of the field. It is useful to make the substitution in agreement with the number of the question. For example, question 1 might have a variable/field name  Answer1.  It is not hard to see how a simple substitution could turn these into question 2  and  Answer2  and then question 3  and  Answer3  and then question 4  and  Answer4  and etc. After you do this you can go back and change the simplier variables in blue (which define the preprogrammed answers), and in red, which are the reponses, plus the text that lies outside the javascript proper.

If you click here, you will see the HTML code for scriptsevendrill.html that generates a short drill using over and over again the code in script Seven, with various substitutions made. 

If you click here, you will see the HTML code for scripttwentytwodrill.html that generates a short drill using over and over again the code in script Twenty-Two, which has three fields and variables (ansOneHHH1, ansTwoHHH1 and DoneHHH1) associated with it, not just one, as in script Seven,. Nevertheless, the same principle applies -- copy and paste, and make the various substitutions.. Look over these pages carefully. You will be able to use the same procedure of copying and pasting (although some will be more involved) for Scripts seven onward


A few notes that may make things clearer. 

All the fields that you type data in or which display data are called forms. Thus a bit of code like this

if  form.ansOneccc.value== 'your answer' 

means 

if the value of the form   ansOneccc equals your answer.........


When you define a form, you specify what kind of information it holds, its name and what size it is. Thus this bit
of code 

<input TYPE="TEXT" NAME="Doneazzz" SIZE="2"> means
 

A Field containing TEXT called Doneazzz two letters wide....


Now thus 

if form.ansOneccc.value== 'your answer' 

{form.Doneazzz.value = '1'}    means

if the value of the form ansOneccc equals your answer.....the value  of the form   Doneazzz equals 1
 

This the field Doneazzz will display a 1, when the if condition is fulfilled.


I have tried to make sure that all the code below reproduces faithfully the codes that generate the buttons on your example page. If something does not work, check the source code for the example exercise that does work. Remember, all the punctuation in the javascript is necessary!
 


 

   One <input TYPE="button" VALUE="Andromache"  onClick='alert("Yesss! ")'>
Two <input TYPE="button" VALUE="Athene"  onClick='alert("Yesss! ")'>

Three

 <input TYPE="button" VALUE="Clytemnestra"  onClick='alert("No. Try again! ")'>
<input TYPE="button" VALUE="Helen"  onClick='alert("Yessssssssss! ")'>
<input TYPE="button" VALUE="Cassandra"  onClick='alert("No. Try again! ")'>
<input TYPE="button" VALUE="Iphigenia"  onClick='alert("No. Try again! ")'>
<input TYPE="button" VALUE="Hecube"  onClick='alert("No. Try again! ")'>

Four		 <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?')">

Five
<input type="button" value="Click to answer question. " 
 onClick="var hh = prompt(' Write the answer and click OK.','');
 if( hh == 'Poseidon'        )
{
alert('Yesssss!!!');}
       else 
alert('No.  The answer is: Poseidon');">

Six

 <input type="button" value="Click to answer question. " 
 onClick="var hh = prompt(' Write the answer and click OK.','');

 if( hh == 'your answer' || hh == 'your second answer'  )
{
alert('Yesssss!!!');}
       else 
alert('No.  The answer is: your answer or your second answer');">

 

Seven

 <input TYPE="TEXT" NAME="ansOnezzz" SIZE="20">

<input type="button" value="Check" onClick="

if( form.ansOnezzz.value == 'your answer') 

{
alert('Yesssss!!!');}
       else 

alert('No.  The answer is: your answer');">

 
 

Eight

 <input TYPE="TEXT" NAME="ansOneqqq" SIZE="20">
<input type="button" value="Check" onClick="

if( form.ansOneqqq.value == 'your answer' || form.ansOneqqq.value == 'your second answer' ) 

{
alert('Yesssss!!!');}
       else 

alert('No.  The answer is: your answer or your second answer');">

 
 

Nine

 <input TYPE="TEXT" NAME="ansOneyyy" SIZE="25">
<input type="button" value="Check" onClick="

if( form.ansOneyyy.value == 'your answer'|| form.ansOneyyy == 'your second answer' || form.ansOneyyy.value == 'your third answer') 

{
alert('Yesssss!!!');}
       else 

alert('No.  The answer is: your answer or your second answer or your third answer');">

Ten

 <input TYPE="TEXT" NAME="ansOneaayyy" SIZE="25"  onBlur = "

if( form.ansOneaayyy.value == 'your answer'|| form.ansOneaayyy.value == 'your second answer' || form.ansOneaayyy.value == 'your third answer') 

{
alert('Yesssss!!!');}
       else 

alert('No.  The answer is: your answer or your second answer or your third answer');">

Eleven

 <input TYPE="TEXT" NAME="ansOneazzz" SIZE="20">
<input type="button" value="Check" onClick="

if( form.ansOneazzz.value == 'your answer') 

{form.Doneazzz.value = '1'}
else
form.Doneazzz.value = '0';">
<input TYPE="TEXT" NAME="Doneazzz" SIZE="2">

Twelve

 <input TYPE="TEXT" NAME="ansOneaqqq" SIZE="20">
<input type="button" value="Check" onClick="

if( form.ansOneaqqq.value == 'your answer'|| form.ansOneaqqq.value == 'your second answer' ) 
{form.Doneaqqq.value = '1'}
else
form.Doneaqqq.value = '0';">
<input TYPE="TEXT" NAME="Doneaqqq" SIZE="2">

 

Thirteen

 <input TYPE="TEXT" NAME="ansOneazqqq" SIZE="25" onBlur="

if( form.ansOneazqqq.value == 'your answer'|| form.ansOneazqqq.value == 'your second answer' ) 

{form.Doneazqqq.value = '1'}
else
form.Doneazqqq.value = '0';">
<input TYPE="TEXT" NAME="Doneazqqq" SIZE="2">

 

Fourteen

 <input type="button" value="Check" onClick="

if( form.ansOneccc.value == 'your answer') 
{
form.Doneccc.value = '1';
alert('Yessss!')
}
else
{
alert('No.  The answer is: your answer');
form.Doneccc.value = '0';} ">
<input TYPE="TEXT" NAME="Doneccc" SIZE="2">

 
 

Fifteen

 <input TYPE="TEXT" NAME="ansOneeee" SIZE="20">
<input type="button" value="Check" onClick="

if( form.ansOneeee.value == 'your answer'|| form.ansOneeee.value == 'your second answer' ) 
{
form.Doneeee.value = '1';
alert('Yessss!')
}
else
{
alert('No.  The answer is: your answer or your second answer');
form.Doneeee.value = '0';} ">
<input TYPE="TEXT" NAME="Doneeee" SIZE="2">

 
 
 

Sixteen

 <input TYPE="TEXT" NAME="ansonefff" SIZE="25" onBlur="

if( form.ansonefff.value == 'your answer'|| form.ansonefff.value == 'your second answer' ) 
{
form.Donefff.value = '1';
alert('Yessss!')
}
else
{
alert('No.  The answer is: your answer or your second answer');
form.Donefff.value = '0';} ">
<input TYPE="TEXT" NAME="Donefff" SIZE="2">

 
 
 

Seventeen
This script requires a bit of explanation. In order for only one radio button to be able to be checked at a time, the script that creates radio buttons has  to be laid out this way. The first radio button of this series has the number 0 and would be defined as myRBX[0] , not myRBX[1] in the line of script where the answer is assigned. Thus the third button (which defines the correct answer) is called myRBX[2]. 

<input NAME="myRBX" TYPE="radio" VALUE="0">Athene
<input NAME="myRBX" TYPE="radio" VALUE="1">Posidon
<input NAME="myRBX" TYPE="radio" VALUE="2">Hera
<input NAME="myRBX" TYPE="radio" VALUE="3">Zeus

<input TYPE="button" VALUE="Check Answer" 

onClick="if (form.myRBX[2].checked)

alert('Yessss!')
else
{  alert('No.  The answer was: Hera.');} ">

 
 

Eighteen

 <input NAME="myRBXX" TYPE="radio" VALUE="0">Athene
<input NAME="myRBXX" TYPE="radio" VALUE="1">Posidon
<input NAME="myRBXX" TYPE="radio" VALUE="2">Hera
<input NAME="myRBXX" TYPE="radio" VALUE="3">Zeus

<input TYPE="button" VALUE="Check Answer" 
onClick="if (form.myRBXX[2].checked)

{
form.DoneRBXX.value = '1';
alert('Yessss!')
}
else
{
alert('No.  The answer is: Hera.');
form.DoneRBXX.value = '0';} ">
<input TYPE="TEXT" NAME="DoneRBXX" SIZE="2">

 
 

Nineteen

 <input NAME="myRBXXZ" TYPE="radio" VALUE="0">Athene
<input NAME="myRBXXZ" TYPE="radio" VALUE="1">Posidon
<input NAME="myRBXXZ" TYPE="radio" VALUE="2">Hera
<input NAME="myRBXXZ" TYPE="radio" VALUE="3">Zeus

<input TYPE="button" VALUE="Check Answer" 

onClick="if (form.mymyRBXXZ[2].checked)
{
form.DoneRBXXZ.value = '1';
}
else
{ form.DoneRBXXZ.value = '0';} ">
<input TYPE="TEXT" NAME="DoneRBXXZ" SIZE="2">

 
 
 

Twenty

 <input TYPE="TEXT" NAME="ansOne1" SIZE="15">
<input TYPE="TEXT" NAME="ansTwo1" SIZE="15">
<input type="button" value="Click to answer" onClick="

if( form.ansOne1.value == 'answer one' &amp;&amp; form.ansTwo1.value == 'answer two') 
{
alert('Yesssss!!!');
}
       else 
alert('No. The answer was answer one answer two.');

 
 

Twenty-one

 <input TYPE="TEXT" NAME="ansOneGGG" SIZE="15">
<input TYPE="TEXT" NAME="ansTwoGGG" SIZE="15">
<input type="button" value="Click to answer" onClick="

if( form.ansOneGGG.value == 'answer one' &amp;&amp; form.ansTwoGGG.value == 'answer two') 
 

{form.DoneGGG.value = '1'}
else
form.DoneGGG.value = '0';">
<input TYPE="TEXT" NAME="DoneGGG" SIZE="2">

 

Twenty-two

 <input TYPE="TEXT" NAME="ansOneHHH" SIZE="15">
<input TYPE="TEXT" NAME="ansTwoHHH" SIZE="15">

<input type="button" value="Click to answer" onClick="

if( form.ansOneHHH.value == 'answer one' &amp;&amp; form.ansTwoHHH.value == 'answer two') 
 

{form.DoneHHH.value = 'Correct. You get 2 points.'}
else
form.DoneHHH.value = 'No. The answer was: answer one answer two. You get 0 points. ';">

<input TYPE="TEXT" NAME="DoneHHH" SIZE="60">

 

Twenty
Three

 Your Translation: &nbsp;&nbsp;&nbsp;

<input TYPE="TEXT" NAME="ansOneLLL" SIZE="15">&nbsp;&nbsp;&nbsp;

<input NAME="myLLL" TYPE="radio" VALUE="0">Nom.
<input NAME="myLLL" TYPE="radio" VALUE="1">Gen.
<input NAME="myLLL" TYPE="radio" VALUE="2"> Dat.
<input NAME="myLLL" TYPE="radio" VALUE="3"> Acc.
<input NAME="myLLL" TYPE="radio" VALUE="4"> Abl.
<br><br>

<input type="button" value="Check Answer" onClick="

if( form.ansOneLLL.value == 'of the men' &amp;&amp; form.myLLL[1].checked)

{form.DoneLLL.value = 'Correct. You get 2 points.'}
else
form.DoneLLL.value = 'No. Answer was: of the men, genitive case. You get 0 points. ';">

<input TYPE="TEXT" NAME="DoneLLL" SIZE="65">

Twenty
Four		 <input type="reset" value="Click here to clear form" name="STARTOVER">
   Go To Page Containing Active Examples of These Twenty-Four Buttons 

Hit Counter hits since 23 August 1999

Copyright 1999 Jean Alvares

Return to Jean Alvares' Javascript Guide and Links