Assignment 6 Introduction to jQuery
AS.430.619 Advanced Web Development
This assignment will help you practice using the jQuery library. Like before, we'll be using JS Bin;
remember that when you save code in JS Bin (File > Save snapshot), it will create a unique URL called a
“bin” that others can visit, copy (or “clone”) and then modify. See the Getting Started page for more
information.
To turn in the assignment, please include both your answer to question 1 and the URL to your bin as a
text submission. Because all of your code will be in a single bin, you'll need to use comments to describe
what each chunk of code is doing.
1. Clone the following bin: [Link] Pay careful attention to
the comments, so you know where to modify the HTML file. Add a script tag within the HTML section to
load the latest version of jQuery (3.3.1) from a CDN. What are the benefits of placing the script file just
before the closing body tag? Include your answer as part of the text submission for this assignment.
2. Add jQuery code within the JavaScript section of your bin that toggles between hiding or showing the
text with the id slidingText whenever the button with the id slider is clicked.
3. Add another button to the HTML section of your bin, then add jQuery code within the JavaScript
section of your bin that fades in the image with the id worldMap when that button is clicked. Add a
delay of 800ms before triggering the fade in.
4. The audio() function provided within the JavaScript section reads any string that is passed as an
argument. Add jQuery code so that whenever the audio button is clicked, it retrieves the value of the
text input with the id place and passes a string to the audio() function telling you where you are located.
For example, if I type “Michigan” into the text box, the browser should say “You are in Michigan” when I
click the button.
5. Believe it or not, William Shatner has narrated a documentary about GIS. Add jQuery code that
changes the source of the image with the id shatner to the source specified by the variable grass when a
user mouses over the original image.
6. Add jQuery code that inserts the HTML element specified by the variable grassVideo after the shatner
image element whenever the image itself is clicked.
