<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>JavaScript Practice Exercises</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from older browsers
// Below defines the answers. Only correct buttons have correct answers.
Answer = new Array("",
"","","","","None","", //Answers for 1 thru 6 buttons
"","","","EM","","", //Answers for 7 thru 12 buttons
"","","","","None","", //Answers for 13 thru 18 buttons
"TR","", //Answers for 19 & 20 elements
"TD","", //Answers for 21 & 22 elements
"relative","", //Answer for 23 & 24 elements
"width"); //Answer for 25 element
// Below defines the computescore function.
function computescore () // Name the function to be defined
{ // Start the function definition
var nCorrect=0; // Set the variables to their starting values
var nItems = 7; // Now = 7
var nRadios = 18; // New to separate the radio button items
var score = 0;
for (i=1; i<=nRadios; i++) // For the 1st to the 18th button repeat
{ // the following series of commands
if ( (document.PE1.elements[i].value == Answer[i]) && // If button correct
(document.PE1.elements[i].checked == true) ) // & checked
nCorrect+=1; // Add 1 to nCorrect
}
// Below added for items 4 & 5
for (i=nRadios+1; i<=nRadios+3; i++)
{
item=document.PE1.elements[i].selectedIndex;
if (document.PE1.elements[i].options[item].text == Answer[i])
nCorrect+=1;
}
// Below added for items 6 & 7
for (i=nRadios+5; i<=nRadios+7; i++)
{
if (document.PE1.elements[i].value == Answer[i])
nCorrect+=1;
}
score = (Math.floor((nCorrect/nItems)*10000+0.5))/100; //Compute % & Round
return score; //Return score when
//function executes
}
function emailResults(form) {
var header = "";
var emailData="";
header += "\nTitle: " + document.title + "\n"; //Header Info
header += "From: " + document.location + "\n\n";
emailData+="NAME: "+document.PE1.ID.value + "\n";
//Below is for radio button items 1, 2 & 3
emailData+="PE 1 Button 5: "+document.PE1.Q1[4].checked + "\n"; //Correct
emailData+="PE 2 Button 10:"+document.PE1.Q2[3].checked + "\n"; //Button
emailData+="PE 3 Button 17: "+document.PE1.Q3[4].checked + "\n";//Responses
//Below is for items 4 & 5
index=document.PE1.Q4.selectedIndex;
emailData+="PE 4 Element 19: "+document.PE1.Q4.options[index].text + "\n";
index=document.PE1.Q5.selectedIndex;
emailData+="PE 5 Element 21: "+document.PE1.Q5.options[index].text + "\n";
//Below is for items 6, 7 & 8
emailData+="PE 6 Element 23: "+document.PE1.Q6.value +"\n";
emailData+="PE 7 Element 25: "+document.PE1.Q7.value +"\n";
emailData+="PE 8 Element 27:\n"+document.PE1.Q8.value +"\n";
emailData+="SCORE: "+computescore() + "\n";
form.maildata.value = header + emailData;
alert("This is what is being submitted to the instructor. " + form.action + ' '+
form.maildata.value);
return true;
}
function itemfeedback (elementNo)
{
//First condition below is for radio buttons
if ((elementNo > 0) && (elementNo < 18))
{
if ( (document.PE1.elements[elementNo].value == Answer[elementNo]) &&
(document.PE1.elements[elementNo].checked == true) )
{
alert("Good work! "+"\""+document.PE1.elements[elementNo].value+
"\""+" is correct.");
}
else
{
alert("Your response is not correct. Try again.");
}
}
else
//Next condition is for items 4 & 5 - select elements
if ((elementNo > 18) && (elementNo < 23))
{
var item=document.PE1.elements[elementNo].selectedIndex;
if (document.PE1.elements[elementNo].options[item].text==Answer[elementNo])
{
alert("Good work! "+"\""+document.PE1.elements[elementNo].options[item].text+
"\""+" is correct.");
}
else
{
alert("\""+document.PE1.elements[elementNo].options[item].text+"\""+
" is not correct. Try again.");
}
}
else
//Final condition below is for items 6 - 8 text & textarea elements
{
if (document.PE1.elements[elementNo].value == Answer[elementNo])
{
alert("Good work! "+"\""+document.PE1.elements[elementNo].value+
"\""+" is correct.");
}
else
{
alert("\""+document.PE1.elements[elementNo].value+"\""+
" is not correct. Try again.");
}
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<HR>
<FORM NAME="PE1" onReset="return confirm('Clear entries? Are you sure?')">
<STRONG>
<H1><CENTER>JavaScript Practice Exercises</CENTER></H1>
<PRE>NAME: <INPUT TYPE="text" NAME="ID" SIZE=25></PRE>
<H3>
Enter the single best answer to each question below.
</H3>
<HR>
Item 1:<BR>
What HTML logical element typically produces underlined text?<BR><BR>
<INPUT NAME="Q1" TYPE="RADIO" VALUE=1 CHECKED>No Response<BR>
<INPUT NAME="Q1" TYPE="RADIO" VALUE=2>STRONG <BR>
<INPUT NAME="Q1" TYPE="RADIO" VALUE=3>CITE<BR>
<INPUT NAME="Q1" TYPE="RADIO" VALUE=4>U<BR>
<INPUT NAME="Q1" TYPE="RADIO" VALUE="None">None of the above<BR>
<BR>
<INPUT TYPE="button" VALUE="Evaluate..." NAME="B1" onClick="itemfeedback(5)">
<HR>
Item 2:<BR>
What HTML logical element typically produces italic text?<BR><BR>
<INPUT NAME="Q2" TYPE="RADIO" VALUE=1 CHECKED>No Response<BR>
<INPUT NAME="Q2" TYPE="RADIO" VALUE=2>ITALIC <BR>
<INPUT NAME="Q2" TYPE="RADIO" VALUE=3>I<BR>
<INPUT NAME="Q2" TYPE="RADIO" VALUE="EM">EM<BR>
<INPUT NAME="Q2" TYPE="RADIO" VALUE=5>H1<BR>
<BR>
<INPUT TYPE="button" VALUE="Evaluate..." NAME="B2" onClick="itemfeedback(10)">
<HR>
Item 3:<BR>
What HTML logical element typically produces superscript text?<BR><BR>
<INPUT NAME="Q3" TYPE="RADIO" VALUE=1 CHECKED>No Response<BR>
<INPUT NAME="Q3" TYPE="RADIO" VALUE=2>SUP<BR>
<INPUT NAME="Q3" TYPE="RADIO" VALUE=3>SUB<BR>
<INPUT NAME="Q3" TYPE="RADIO" VALUE=4>S<BR>
<INPUT NAME="Q3" TYPE="RADIO" VALUE="None">None of the above<BR>
<BR>
<INPUT TYPE="button" VALUE="Evaluate..." NAME="B3" onClick="itemfeedback(17)">
<HR>
<P>
Item 4:<BR>
What HTML table element starts a table row?<BR>
</P>
<CENTER>
<SELECT NAME="Q4" SIZE=5>
<OPTION SELECTED> None
<OPTION> TABLE
<OPTION> TR
<OPTION> TH
<OPTION> TD
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Evaluate..." NAME="B4" onClick="itemfeedback(19)">
</CENTER>
<BR>
<HR>
<P>
Item 5:<BR>
What HTML table element starts a table cell?<BR>
</P>
<CENTER>
<SELECT NAME="Q5" SIZE=5>
<OPTION SELECTED> None
<OPTION> TABLE
<OPTION> TR
<OPTION> TH
<OPTION> TD
</SELECT>
<BR><BR>
<INPUT TYPE="button" VALUE="Evaluate..." NAME="B5" onClick="itemfeedback(21)">
</CENTER>
<BR>
<HR>
<P>
Item 6:<BR>
What kind of table will retain its window proportions
given a diverse range of window dimensions?
</P>
<CENTER>
Answer: A <INPUT TYPE="TEXT" NAME="Q6" SIZE=8 MAXLENGTH=8> table.<BR><BR>
<INPUT TYPE="button" VALUE="Evaluate..." NAME="B6" onClick="itemfeedback(23)">
</CENTER>
<HR>
<P>
Item 7:<BR>
What table attribute determines the width of a table?
</P>
<CENTER>
Answer: The <INPUT TYPE="TEXT" NAME="Q7" SIZE=5 MAXLENGTH=5> attribute.<BR><BR>
<INPUT TYPE="button" VALUE="Evaluate..." NAME="B7" onClick="itemfeedback(25)">
</CENTER>
<HR>
<P>
Item 8:<BR>
Comment upon the practice exercises above in the text window below.
</P>
<CENTER>
<TEXTAREA NAME="Q8" WRAP=VIRTUAL ROWS=5 COLS=40>
</TEXTAREA>
</CENTER>
<BR>
<HR>
<CENTER>
<INPUT TYPE="RESET" VALUE="Clear Entries"><BR><BR>
<INPUT TYPE="BUTTON" VALUE="Show Score" onClick="alert('Your score is '+computescore()+'%.')"><BR>
</CENTER>
</STRONG>
</FORM>
<FORM NAME="EMAIL"
ACTION="mailto:cjohnson@acad1.sahs.uth.tmc.edu"
METHOD="post"
ENCTYPE="multipart/form-data"
onSubmit="return emailResults(this)">
<INPUT TYPE="HIDDEN" NAME="maildata" VALUE="">
<CENTER>
<INPUT TYPE="submit" VALUE="Submit to Instructor...">
</CENTER>
</FORM>
</BODY>
</HTML>