Assignment $4$ Part $1$: Create a FAQs Rollover application

In this assignment, you$$ll write the jQuery code for an application that displays the answer to a question in a list of questions when the user hovers the mouse over that question.

$1.$ Open the starter folder attached $($zipped$)$ to this Assignment folder:

Evaluations$\backslash$Assignments$\backslash$Assignment $4\backslash$Assignment$-$Files.zip $->$ faqs$\_$rollover

$2.$ Review the HTML to see that it includes an unordered list with list items that consist of an h$2$ element and a element. The h$2$ element contains a question, and the element, which is hidden, contains the answer to the question.

$3.$ Add jQuery code that runs when the user moves the mouse pointer into or out of a question in the list. When the mouse pointer moves into the question, the answer should be displayed. When the mouse pointer moves out of the question, the answer should be hidden.

$4.$ In index.html$,$ change the text in the tag to your name and student number.$$

Assignment $4$ Part $2$: Develop an Image Gallery application with animation

In this assignment, you$$ll develop an Image Gallery application that displays different images when the user clicks on the links at the top of the page. This works like the Image Swap application of figure $8-14.$ You$$ll then use effects to change the way the images are displayed and hidden.

$1.$ Open the starter folder attached $($zipped$)$ to this Assignment folder:

Evaluations$\backslash$Assignments$\backslash$Assignment $4\backslash$Assignment$-$Files.zip $->$ image$\_$gallery

This folder contains an empty JavaScript file named image$\_$gallery.js$.$ You can add your code to this file.

$2.$ In the JavaScript file, add an event handler for the ready$()$ event method.

$3.$ Use the each$()$ method to run a function for each element in the unordered list of items. Then, add jQuery code that gets the URL and caption for each image and preloads the image. You can get the URL from the href attribute of the element, and you can get the caption from the title attribute.

$4.$ Add an event handler for the click$()$ event method of each link. The function for this event handler should accept a parameter named evt. The jQuery code for this event handler should display the image and caption for the link that was clicked. In addition, it should use the evt parameter to cancel the default action of the link.

$5.$ Add a jQuery statement that moves the focus to the first link on the page when the page is loaded.

$6.$ Modify the jQuery so that when a link is clicked, the current caption and image are hidden using a sliding motion that takes two seconds.

$7.$ Modify the jQuery so that after the caption and URL are set for the new image, that caption and image are displayed using a sliding motion that takes two seconds.

$8.$ In index.html$,$ change the text in the tag to your name and student number.