Computer Science homework help.
IT-238, Assignment #2
Introduction:
This assignment has you applying some of the jQuery techniques you learned about in the current module. Now if I were to ask you to apply all of the techniques, the assignment would be long and onerous and I do not want to do that to you. However, please do recognize that while some topics from the lecture are not covered in this assignment, you must still know how to apply them. They may show up in subsequent assignments and they certainly will appear in exams.
Also, in programming it is very important to be able to figure out certain things on your own. To that end, I will at times (in this and in upcoming assignments) ask you to either look new things up, or to extrapolate from some code to make similar techniques work for you. This is a very common and useful way by which programmers improve their skills.
Lastly, a couple of important reminders:
Reminder #1: Never, ever, ever….. ever write out a bunch of code at once. Always write VERY small pieces and then check your page to make sure everything is working. For example, you might write some code to determine if the Einstein image was clicked, and then throw in an alert()statement that simply outputs “Einstein”. Only once you are confident that it works, should you move on to the next couple of images.
Reminder #2: You do not have to do everything in the order in which it is described below. You are welcome to, but sometimes it makes sense or just feels easier to work on certain items before others. Do whatever works best for you.
Reminder #3: Review reminder #1 above.
Using the images tn_einstein.jpg, tn_mozart.jpg, tn_socrates.jpg, you will create the following page. (You can right-click and save these images to your computer).
Create a CSS class called ‘general-page’. In this class, you will set some styles for the entire page. Your class should set a width of 375 pixels and a 4 pixel red border. Place this class inside an external stylesheet, or use an internal style (i.e. in the <head> section).
You will apply this class using a jQuery command as described below.
Note: Feel free to put a little more styling into it, but don’t spend any significant time styling until after you have properly completed the scripting requirements. (The scripting is by far the key component of this course!)
Your page should have 3 div sections. One should be called ‘einstein_bio’, another should be called ‘mozart_bio’ and the third should be called ‘sox_bio’. Note: It is very important that you call the last section sox_bio – that is, do not call it socrates_bio. I won’t go into why here, but please be sure to do this.
In each of those sections, have a very brief bio. Obviously don’t spend any real time here. For example, your entire “bio” for Mozart can simply say something like: “Mozart was born in 1756.”
All three of these bio sections should be hidden once the page first loads. (Note the image above). That is, you should do this inside your document.ready() function. You must hide these sections with only ONE jQuery command. That is, I do NOT want to see 3 separate commands, one for each bio section. Use just one jQuery command to hide all 3 div sections. To do so, use an attribute filter involving the “bio” identifier that is common to all three of those div sections.
Also inside your document.ready() function, apply the general-page class to the ‘body’ tag (selector). Using jQuery to apply a class to a selector is quite simple. However, I would like you to look it up. Do a little bit of research to figure out how to do this.
Also inside your ready() function, set all of the images to a width of 100 and a height of 100 when the page first loads. Here is the code to set the height.
$(‘img’).attr(‘height’,’100px’);
Onto the above command, chain a second function to set the width to 100 pixels as well. Given the above code, you should be able, with only a little bit of experimentation, to figure out how to do this!
When the user clicks on any one of the images, you should invoke a function. Note that the onclick attribute is not limited to buttons….
For example, if the user clicks the Mozart image, you should invoke a function called showMozartInfo(). Inside that function, write a jQuery command to show the relevant bio. So if the user clicks on the Mozart image, you should show the Mozart bio. In addition, inside that function, you should modify your page so that it only shows the image of the desired composer. For example, if the user clicks on Mozart, the other composers’ images should not be visible. The page should look like this:
Note that the other images have been hidden. Generous hint: Begin by hiding all images, and then only show the desired image, in this case, Mozart.
Also note that there is a button that says “Show All Images“. When the user clicks this button write a jQuery command to display all the images on the page. Write this jQuery command as the value to the onclick attribute of your button. That is, do not create an separate JavaScript function – just write the one jQuery command directly inside the button tag.
Here is the page after clicking the button:
Note that the bio for Mozart is still visible. Yet, we don’t want the bios to all be present and clutter things. Therefore, when the user clicks on any one composer, and you want to show their bio, be sure to hide any previously visible bios that were there from before.
In the following example, I click on Socrates. Note how the Mozart bio is no longer visible, while the Socrates bio is visible. Hint: Think what you did to hide the bios when the page first loaded. That is, use your jQuery filtering skills to hide all div sections that have the word “_bio” in them. Then show the bio you are interested in.
Submission Requirements:
Same requirements as last time (and as in the future):
- As always, be sure to use the assignment checklist which can be found at the top of the class web page (not D2L).
- Please zip (i.e. do not use 7ZIP, RAR, etc) all of your files together and name the file using the following format: lastname_firstname_238_assignmentNumber.zip
- Note: Throughout the course, any accessory files that may be required by the assignment such as images, external CSS files, external JS files, etc should be included in your zip file. So for this assignment, include the images, your HTML document, and if you used one, an external CSS file.
