Scribd
Upload
7 views

Final Exam-Computer Base Web Dev

The document outlines 6 exercises for a computer-based final exam. It provides instructions for students to write code for each exercise in the specified HTML files. The exercises involve tasks like adding CSS styling, manipulating DOM elements with jQuery, and animating element properties.

Uploaded by

xetiyo5696
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Final Exam-Computer Base Web Dev

The document outlines 6 exercises for a computer-based final exam. It provides instructions for students to write code for each exercise in the specified HTML files. The exercises involve tasks like adding CSS styling, manipulating DOM elements with jQuery, and animating element properties.

Uploaded by

xetiyo5696
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Final Exam - Computer Based Part

Student Name: _____________________


Student Id: ________________________

Except in “Ex2” where you can make any changes, you are only allowed to
insert your code where stated. You are not allowed to delete/change any
content in the file.

In all exercises open the file as stated in the exercise and write your code
where you find: “Insert your code here”

Ex 2: (20 pts)

Write your code in “ex2.html”

Write the necessary CSS and HTML code to "Ex1.html" document to create the following
layout on-screen. References to the image, text, page background color, and container’s
width are already defined inside the html document and you have to proceed from
there.

Please take the following into consideration:

 The text throughout the document is verdana


 Text size is 14px
 The text is 10px away from the right side of the image.
Ex 3: (10 pts)

Write your code in “ex3.html”

You are given an HTML document that contains only one div and where a class called
“highlight” is defined in the style tag.

You have to write a script inside the document ready event that performs the following:
Each time the mouse cursor enters the div, your code should change the div style by
swapping between 2 states (check images below):
 if the div has not the class “highlight”, this class should be added to this div
(check fig 1)
 if the div already has the class “highlight, this class should be removed from this
div (check fig 2)

Fig 1 Fig 2

Ex 4: (15 pts)

Write your code in “ex4.html”

You are given a div and a button. The div is given an absolute position (check the css
written under the style tag).

You should write a code, inside the document ready block, that is initiated by a double
click on the button. The written code should:

 Move the div to left at 200px position.


 When the div reaches its final position, the font size of the div should be set to
50px.

In order to accomplish both steps, you have to use the “animate” function provided by
jQuery.

Below figures are before and after animation:


Ex 5: (15 pts)

Write your code in “ex5.html”.

You are given an HTML file that contains a list of paragraphs and spans. These elements
are included within 2 divs: div 1 and div 2. You should write a code within the document
ready block that performs the following. For all steps you need to use the “css” function
from the jquery:

 Give a background color blue for all p elements that are descendants (at any
level) of div1
 Give a border (3px solid red) for all p elements that are direct children of div1
 You should set the font color of all span that have a parent paragraph to pink

Your final output should be like the following:


Ex 6: (10 pts)

Write your code in “ex6.html”

On document ready, using the “append” function of jQuery, write a function that adds a
new list item (“Java”) to the unordered list.

After adding your code. On


loading page:

You might also like