Extra Credit: DOM Play, Act II - Enter jQuery (Due Wednesday, June 13th)

Now that we are learning jQuery, we can revisit a previous assignment (DOM Play) with a new twist!

View a different Shakespeare play snippet, a part of Act II of "A Midsummer Night's Dream"

The HTML from the play above has more built in "hooks" (classes,ids), placed to make your job of wiring via jQuery easier.

However, there are some different requirements from the aforementioned assignment. Not only must you highlight the text of each actor upon click (of a button this time) but you must use the jQuery animate() method to make the highlighted actor's text move, etc.

As a model, please view the following: animate demo

Don't forget to examine all of the other demos in the two jQuery lessons! There is also the 4th version of the JS Template, which has three jQuery examples! Find the zip file and demo for this in the examples.

This extra credit project is worth 50 points!

Assignment 6 Form Validation (Due Wednesday, May 30th)

For this assignment you will create JavaScript that will validate a form to certain requirements before it is submitted.

If the "required" elements are not properly inserted by the user, the page must not submit.

This form will be a "user profile" form. The following elements must be on the form. Following the element is the TYPE of element required, any VALIDATION rules that must apply for that element:

Element Info Element/Type Validation Rules
First Name text optional
Last Name text required*
Address text required*
City text optional
State select required*
Zip Code text required* (must match US zip code pattern)
Email text optional, check for valid email*
Password password required* (alphanumeric only, minimum 8 chars, maximum 16. Must include at least one letter and at least one number.)
Confirm Password password required* (must match Password field)
Can we spam you? radio required*
(Your choice) checkbox required*

* Required elements must be clearly noted as such by the design on the form. I will take at least 10 POINTS OFF for each error, even in mandatory design elements, such as this! (no regrade on this item!)

Once your form is working, link it to your assignment page, as target="_blank". The form must perform as described above and when the form has been properly validated, the form must submit data properly to:


Help? View the examples page for sample code that will help you. Start with the JS Template, version 3, which details a validation strategy: JS Template Version 3 Zip File

Then view examples on the Forms page to meet the additional requirements.

This assignment is worth 100 points!

EXTRA CREDIT: Add a "required" checkbox (subject of your choice) that requires, (for example) 2 choices, minimum, of 3 possible selections for an additional 20 points!

Assignment 5 DOM Play (Due Wednesday May 16th)

For this assignment you will be creating a small, single page application using the DOM. This time you will not be given specific code samples.

The idea is that you are given a task as a developer to build a single page DOM application that will help members of an acting troop memorize their lines in a play. The page must:

  1. With a single click, highlight (bold or otherwise) all lines for a specific actor in a play
  2. Un-highlight (normal or otherwise) all lines from all other actors in the play
  3. The function(s) created to do the work must accomodate any number of actors, and any number of additional lines added to the page
  4. The page must do the work without page re-loads (i.e. it must be done via JavaScript and the DOM)
  5. HTML "hooks" may be added to the page, meaning you can edit the HTML to enable your scripts to perform properly

Your resources for this project are the DOM Intro and Advanced Dom pages on the class website, the brainjar DOM tutorial, and other resource material you can find on the web.

If you would like an example html file with a snippet from a play, use this: Hamlet Act III Snippet

Where To Start? I would start with our new JS Template Version 2, which includes the view rendered source capability. Then view all the DOM examples on the examples page and in the DOM Intro and DOM Advanced pages. Does any example standout as a potential starting place?

Group Project Demonstration: Since this assignment is more involved, I'll give the option to work together in groups for the initial design phase. Each of you will be responsible to produce the assignment individually as well. To be involved in a group, you must attend class in person.

Group Assignment: If you agree to work in a group, I will assign groups Monday, May 7th in class. Your group will need to exchange email, etc. We'll have time in class Wednesday the 9th for your group to meet. You may need to work outside of the class, however.

Group Presentation: Each group will be required to do a quick 5 minute presentation to the class on your group's strategies to perform this task. Each group member who presents can gain up to 30 extra credit points. Students must be (physically) in class and be part of the presentation, (must contribute verbally) on Monday, May 14th. to be considered for the extra points.

Print of Presentation: Each group who presents must hand me a printed copy of their presentation, including the names of all group members.

This assignment is worth 100 points!

Assignment 4 Image Funhouse (Due Wednesday, May 2nd)

For this assignment, you will implement several image rollover 'tricks', all on a single HTML page. There are three main image features your page must have. All are detailed below:

1) rollovers: implement at least 4 image rollovers on an HTML page, using one of the image rollover examples as a model. Whether they are navigational buttons, or display an image when rolled over for another purpose, will be your choice.

EXTRA CREDIT: For a possible 20 extra points, you may implement a multi-roll, where rolling over one image simultaneously rolls more than one other image. Check out this example: Leonard's Machines *

2) wraparound slideshow: implement a one page 'slide show' of other images, similar to this example: Welcome Robot Overlords! *

3) random image: implement a 'random image' that generates a different (randomized) picture on the HTML page upon reload, similar to this example: Lions, Tigers & Bears, Oh My! *

EXTRA CREDIT: For a possible 20 extra points, you may implement an image that rotates through a sequence of pictures without reloading the page. Example: Reading Ads *

All of this must happen on a single HTML page (no other pages, no AJAX) That means you'll likely be using the DOM to perform these tricks.

Where To Start? I would start with the JS template so your errors will pop up as alerts. Then view all the rollover examples on the examples page. Make one of the image requirements work first, then backup your homework and add the next bit of functionality. You may even want to consider building each piece separately before integrating to one page.

This assignment is worth 100 points!

Assignment 3: Browser Obeisance (Due Wednesday, April 25th)

Occasionally on the web you will see evidence that developers are "sniffing" (determining) the browsers of their users, and either making adjustments to their pages, or providing editorial comments like "get a real browser", etc.

In this assignment you will be asked to build a single page that will "sniff" (determine) between at least 2 browsers of your choice, (for example, Internet Explorer or Netscape) and displays custom text and graphics based on the browser in question. Each "view" of your page must accomodate the following items:

  • You must "reference" the name of the browser sniffed at least 3 times in the course of your page, mixed into your page text.
  • A unique custom graphic for each browser (of your choice) must appear on the page.
  • Each browser must feature a unique color, whether in the body, or the text.
  • Each browser must be built to have a professional 'look & feel'. (No 'white' pages. No misspellings. A single flaw here will cost 10% of the grade.)
  • You will do this all with a single page, and not use alerts, popups, etc. This needs to be a seamless, professional page.
  • Your page must also include a dynamic JS copyright (see assignment 2)


As you can see by the example, humor is encouraged!

Error Handling Include File: Starting with this assignment, and to be included in every assignment going forward will be the requirement to turn in assignments in which all errors pop up in an alert() as an aid to troubleshooting. View the Troubleshooting page for details on how to build and apply an error handling .js include file for each assignment!

Once your browser sniff page is built, link the browser sniff page to your google doc. Name the link Assignment 3.

Need help? View ASSIGNMENT HELP!

This assignment is worth 100 points!

An extra 5 points can be achieved for EACH browser above 2 (Max 20 points) that your 'browsersniff' page can successfully accomodate!

Assignment 2: Time Of Day (Due Thursday, April 19th)

Create a web page that uses JavaScript to determine the hour, and presents a different image, custom message, and color based on the following times of day:

  • Morning (5am to 12 noon)
  • Afternoon (12 noon to 6pm)
  • Evening (6pm to 11pm)
  • Night (11pm to 5am)

Use the "sungoddess" example from the examples page as a model for your pages.  Also include a custom "copyright" message at the bottom of your page (see copyright example).

Once this page is done, upload it to your server space, and link the page on your google doc as Assignment 2.

This assignment is worth 100 points!

Assignment 1: Homework Google Doc (Due Sunday, April 8th)

For this assignment we'll be building an online document from which you can link your assignments and weekly exercises.

A) Assignment Document: This is a public (or other) google doc on which you'll place links to all further assignments (not A1). Once this doc is created, make sure the doc is public (save as web page) and update your class profile so I can see your work.

B) Weekly Exercise Documents: At least once a week we'll do exercises in class. These exercises will chiefly consist of typing out code snippets that help us learn the fundamentals of JavaScript programming. You will be storing these snippets in weekly google (or other) docs that must be complete and linked from your main Assignment Document no later than Saturday at 11:59pm (as I'll be grading these on Sunday).

This assignment is worth 100 points!

Weekly Class Exercises

Most weeks (especially at the beginning of the quarter) we'll be doing hands on exercises and linking code snippets to a weekly class exercise google doc.

Class exercises must be:

1) Linked properly from your google doc
2) Be complete
3) Be done by Saturday midnight of the current week

Failing to do ANY of the above is to incur zero points, and no re-grade.

Class Exercises are worth 20 points per week!

Print this Page Back To Top

2000- 2013 newMANIC INC, All rights reserved