Lab 12 ─ Image Maps



CSCE 102 Lab 12 — Grade Calculator

General information

• Read the entire assignment before you start.

• Always maintain backup copies of your work, and work on the X- drive during lab.

• Never share your password or memory stick with anyone.

• Never email your code to anyone.

• Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work not copied from anywhere.

• You should use Firefox or Chrome for the browser for testing your code, NOT Internet Explorer.

Part I — lab12axx.html – Due at the end of class

1. Insert an h2 that includes your first and last name and your section.

2. Insert an h1 that says CSCE 102 Grade Calculator.

3. Give the h1 an id.

4. Create a table similar to the one in the diagram below. The first column contains headings for the rows. (You can use th for these.)The second column uses tds that contain input elements (for the slider controls and the number boxes) as shown in the diagram.

Note: To create the box to enter the grades you will use a box that looks like a textbox but you will use type = “number” instead of type = “text”. If numbers are not entered in these boxes some browsers will inform you and some will not let you enter a value that is not a number. (Although, with type="number" the data type is just the same as if it were in a textbox or from a prompt. They are strings and if you try to add it will concatenate instead. But since there is no string operation of multiplication (*) you will actually not need to use parseFloat or parseInit since you will be multiplying by the weights before you add. You can of course use parseFloat or parseInit.

Go to W3Schools: and look at how this works. You can set the max and min values that can be entered in the box.

We are setting the min grades to be zero and the max to be 100 on the slider (although you may have extra credit and have a grade greater than 100.)

5. Use a slider for providing numbered input. Read Page:340 in the textbook for more details about creating a slider.

6. Use the label element to insert the min and max on either side of the slider a shown in the diagram below. You can put the input element inside of the label element So there is an opening label tag, then zero for the min, the image element followed by 100 for the max (you can put a space in in front of 100 using  ) and then the closing label tag. See page 326 #1 in your textbook.

7. When the user changes the value on a slider by sliding, update the text in the third column of the table with the value from the slider. (Hint: Use the onclick or onchange event handler, and update the text in the td in the third column of the table. You will use an assignment statement to set the value in the td. As you do with textboxes and the number boxes use getElementById(‘the id goes here’).value for the slider value.

8. The tds at the bottom, that are to hold the final grade and the letter grade, are to be left empty, but need to have ids so that you can fill them later.

Test your code in Firefox and Chrome (not Explorer)

Screenshot for Lab12A

[pic]

Part II— lab12bxx.html Text & button input elements

Save lab12axx.html as lab12bxx.html and continue working.

When the button is clicked call a function that:

1. Calculates the weighted average of the grades entered: Test 1, Test 2, Exam,

Lab avg., Project, and Quiz/Homework avg.

• Use the weights given on your lecture webpage.

2. Test1, Test2, Final Exam Scores inserted by using the slider, and are available in the third column of the table (which was populated by the onclick or onchange event handler for the slider). To use in the calculation get the value from the td (using getElementById) not from the slider.

3. Writes the average in the td at the bottom of the table in the row for the Score,

4. And write the associated letter grade in the td near the bottom of the table by Letter Grade using if statements and the following grading scale:

A 100-90

B+ 89-87

B 86-80

C+ 79-77

C 76-70

D+ 69-67

D 66-60

F < 60

5. If the grade is passing the background color of the letter grade cell changes to Yellow. If the grade is failing the background color of the letter grade cell should turn lime.

6. If the grade is an A, replace the text in the h1 to read: You got the A! in red and in italic. And if you would like (optional) set the background of the page to smiley faces.

7. Use the debugger in Firefox, to find errors in your JavaScript function.

8. Open Lab-12 in Mozilla Firefox, press the ALT button on the keyboard. This makes the menu bar visible at the top of the page. Click on

TOOLS -> WEB DEVELOPER -> DEBUGGER

You can see the debugger at the bottom of the page; it shows you the errors in the element. After debugging your code, make sure you turn off the debugger by accessing TOOLS -> WEB DEVELOPER -> DEBUGGER

Keyboard Shortcut to turn on/off the debugger Ctrl+Shift+S

9. When you have finished and tested your code in Chrome and Firefox, try it in Internet Explorer and inset a comment saying if it worked correctly or not, and explain what didn’t work.

10. Be certain that your file is saved in your All_102Submissions folder.

Screenshot for Lab12B

[pic]

Part III — Test case

1. Carefully test your code carefully in Firefox and Chrome and make sure it is correct.

Part IV — Update All_Index.html

1. Include a link to lab12axx.html and lab12bxx.html in the list of links in All_Index.html file

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download