Lab 6
If statements and a Slide Show
In this lab, you will create two web pages, lab6a.html, lab6b.html and lab6c.html. You
will need to include a link to these pages on your assignments.html page.
lab6a.html – If statements

Include your name, section number and favorite sport or hobby at the top of the
page using heading tags. Below that, include the name of your favorite actor or
actress also in a heading tag.

Include an image tag that starts out displaying a picture of your favorite sport or
hobby, then when clicked on, switches to a picture of your favorite actor or
actress. When you click on this image again, it should switch back to the original
image of a sport or hobby.

Include a paragraph about why you like your favorite sport or hobby and a
paragraph about why you like your favorite actor or actress.

Include a button that when clicked on, changes the background of the page from
its original color to a color of your choice. When the button is clicked again, it
changes the color back to the original color.
lab6b.html ― Slide Show code

Include your name, section number and email address using heading tags.

Create a slide show using at least four images. The four images can be any
animal you want, as long as each of the four animals is larger than the previous
one.

Look at the code on Orren Mckay’s Web site:
http://www.cse.sc.edu/~mckayj/CSCE102_Examples/CSCE102_Example_Slideshow.html
and also the code on page 383. This code contains an error. Delete the line of
code that reads: if (document.Images==true){
Also delete the line with the closing curly bracket; it has an identifying comment.
You can do it like either one.
Calculating your possible CSCE 102 Grade with
JavaScript
lab6c.html ― Grade Calculator

Include your name, date and your email address using heading tags.

Create six text boxes, each with a description of its purpose. Your six text boxes
will be used to input the following values: Test 1 Grade, Test 2 Grade, Final
Exam Grade, Quiz Grade, Project Grade and Lab Grade.

Create a button and one more text box. This text box will be labeled Final Grade.
When the button is clicked, it will use the values in the first six text boxes to
calculate your potential final grade for this class, and display that value in the
Final Grade text box. It will also display the letter grade in an alert box. You do
not have to calculate B+, C+, etc., just A, B, C, D, F.

Create an internal style sheet that will cause your text boxes and button to be
displayed differently (define styles and classes for the input tag).
Calculating the Final Grade – There are a number of different ways to implement this
feature. For the final calculation use the following formula. Your actual grade may be
weighted differently.
(Test 1 * 0.15) + (Test 2 * 0.15) + (Final Exam * 0.20) + (Quizzes * 0.15) + (Lab Grade * 0.30) + (Project * 0.05) = Final
Grade
Determining the Final Letter Grade – The final letter grade is determined as follows:
A
100-90
B
89-80
C
79-70
D
69-60
F
Less than 60
Implementing the Final Grade Calculator – You will probably want to declare a variable
to store the values for Test 1 , Test 2 , Final Exam , Quiz Grade, Project Grade and Lab
Grade, and manipulate the values in these variables instead of directly calculating the
grade using the values in the text boxes.
Displaying the Final Letter Grade – You will need to use an if/else statement to
accomplish this.
Remember to make sure you specify a name and id attribute for your <form> tag
containing the <input> tags which create the buttons. Also remember to specify a name
attribute for each input tag, and make sure all your <input> tags have different names.
Also, remember that you will need to use parseFloat( ) to convert the values in the text
boxes (strings) into floating point numbers.
Example textbox/button layout: