CS 101   Web Construction,  Fall 2010,  Instructor:  Jeffrey Horn ASSIGNMENTS

Assignment 6  "FIND WALDO!   JavaScript (with Image Maps)"

• Handed out:   Wednesday, November 17, 2010
• Due:    (last week of class)
• Goals: 
  • Learn to use image maps
  • Intro to Javascript programming
• Details:   
  • Implement a "Find-Waldo" or "What is Wrong with this Picture?" type of game.
  • The game should:
    1. Show the user an image.
    2. Ask the user/player to find something in the image and click on it.
    3. If the user's click is correct, then increase the score.  If incorrect, do not increase score.
    4. You must have at least FOUR somethings ("Waldos") that the user can click on.
    5. Score must be cumulative and displayed.
  • Help: 
    • Example Code
    • ISMAP  Attribute:  To help you find out the coordinates of items in your image, use the ismap attribute in your img element.   This allows you to see the coordinates of your mouse!  Try it here.
• Grading Guidelines:    (Find Waldo)
  • For approx. "D":  make an effort!
  • For approx. "C":  a game that actually WORKS!  (as specified in "Details" above).
  • For approx. "B":  everything for a "C" AND ALSO:
  1. Use of the "poly" shape.   (See here for info on shapes like poly, circle, and rect..  Look under the "optional attributes", in particular the attributes "coords" and "shape".)
  2. A "hint button" which, when clicked, gives the user some kind of hint, verbal or visual clue as to where to find one or more of the "waldos".
  • For approx. "A":  everything for a "B" PLUS:
  1. A "solution button" which, when clicked, replaces the puzzle image with a copy of the image showing the "waldos" clearly isolated (e.g., circled, highlighted, etc.)
  • For a definite. "A+":  everything for a "A" PLUS:
  1. A mechanism that increases the score ONLY for the first click on a "waldo".   Subsequent clicks do nothing or decrease the score.
  • I will grade this one solely on the basis of functionality (i.e., does it work?)

• Turn-in Procedure:   Upload to web.  Send me URL via the hand-in form here.