Project #84327 - jquery



This is a ‘regroup’ assignment. For a few of you, there was a fair amount of catching-up or at least, overdue review that was needed for the first week. Then, I realize that the second week was a bit of a challenging assignment since all of this jQuery stuff is new to you and you’re trying to put it together with your JS skills, which, I realize, are still somewhat new. 


So for this week, the assignment will have you playing a little bit with the new functions that we discussed in this module’s lectures, and then include a review of some of the materials that was covered in the first couple of assignments and modules. You will, however, be asked to look up a couple of techniques that may be new to you. They are not difficult, but one objective of this course is to get you increasingly comfortable going to a reference to figure out new techniques on your own. 


This assignment does not officially require positional formatting (e.g. right and left justification of form elements, etc) and other aspects of user-interface design principles. However, if you apply positional formatting (e.g. floating elements, relative or absolute positioning, etc) and demonstration of good user-interface design, you can receive up to an extra 10 bonus points. HOWEVER: You can not get the bonus points unless the scripting is done properly. It doesn’t have to be absolutely perfect, but most of the scripting has to be working in order to qualify for bonus points. 

The assignment

1.      Begin by looking at the “Before” and “After” screen shots below. The first image is the form before any information has been entered. The second shows the form after the little ‘i’ icon next to both the social security number and the education level options have been clicked, and the user has typed ‘103’ in the math problem field and clicked the submit button.

2.      You’ll need to download the image  info.png to use in the assignment. This is the image for the icon you can see next to the phone and social security fields.  It is large and will need to be resized. 

3.      In your page, have a form with fields for name (text), phone number (text), the position you want to apply for (radio button), and answer to a math problem (text).

4.      Above and to the right of the text fields for phone number and social security number, you should have the ‘info.png’ icon appear. The image must be 15px by 15px. This instruction should be placed in your document.ready()  function using a jQuery command. There are a few different ways you can do this, however, I would simply use the height() and width() functions. (Just be sure to chain them if you do!)

5.      The image should appear as a superscript (i.e. slightly above and to the right) of the textfields. There is an HTML superscript tag you can use. Look it up in your preferred reference – should be pretty easy to find.

6.      When the user clicks on the image, an instruction should appear. This instruction should appear just below the related text field and be placed inside a div section. For example, you’d have a div section with an id of ‘instructions_ssn’ for the social security number. These div sections should be initially hidden when the page first loads. Because both of your sections that have instructions (the education level and the social security) have an ID that begins with the string ‘instructions’, use an attribute filter in your document.ready() function to do hide both of these two sections with a single command. When the instructions do appear, they should have a class applied with an ID of ‘highlight’. You can put whatever you want in your highlight class. Feel free to simply put a background-color of yelllow – or do something a little more elaborate. 

7.      The instructions should state the following:

·         For the education field they should say:        Please choose the highest level of education you have obtained.

·         For the SSN field they should say:                 Please type your 9-digit social security number. Please do not include any characters other than a dash to separate digits.

8.      Look up or figure out (it’s not terribly complicated!) the ‘toggle()’ function.  Basically, this function makes the selection hide and appear each time it is clicked. It is analagous to the ‘toggleClass()’ function demonstrated in lecture. a filter to make sure they are 1)all hidden when the page initially loads, and 2) easily toggle them as needed.  You will need to use the onclick attribute inside your image. 

9.      Look up the ‘onfocus’ attribute for a text field and apply it to the math problem text field. The idea is that the moment the user clicks the mouse inside that box to enter a value, you should have a (previously invisible) div section appear just below. This section should say: “Don’t cheat!”  Apply a CSS class to this section (e.g. a class called ‘emphasize’ that makes the text bold and in italics). 

10.  When the user submits the form, the information on their qualifications for the various jobs should be written as described below. Output the information to a div section called ‘response’ that should be below the button. It should also be initially invisible. This section should be in an Arial font, centered, and with a silver (or other colored) background. You must use an object literal to apply these styles. 

·         If they get the math answer right (i.e. 10), output:  “Congrats! You qualify for any of the requested jobs!”

·         If they ‘almost’ get it right, and answer 6, output: “Sorry, not chief flipper, but perhaps senior flipper.  PS: Perhaps you should review order of operations.”

·         If they get anything else, output: “Close enough for burger flipper in training.”

·         NOTE: Your response here doesn't have to factor in which radio button was clicked. You only have to react to the number that the user entered.

·         Be sure to use your parse() function!

11.  Using the API, look up 3 functions that have not been discussed in any lecture and apply each one somewhere on your page. Using Javascript comments, note which function you applied so that the grader will give you credit for it.


Subject Computer
Due By (Pacific Time) 10/05/2015 09:00 am
Report DMCA

Chat Now!

out of 1971 reviews

Chat Now!

out of 766 reviews

Chat Now!

out of 1164 reviews

Chat Now!

out of 721 reviews

Chat Now!

out of 1600 reviews

Chat Now!

out of 770 reviews

Chat Now!

out of 766 reviews

Chat Now!

out of 680 reviews
All Rights Reserved. Copyright by - Copyright Policy