CS 101   Web Construction,  Winter 2018,  Instructor:  Jeffrey Horn ASSIGNMENTS

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

• Handed out:   Tuesday, April 17, 2018
  
• Due:    (last week of class)
• Goals: 
• Learn to use image maps
• Intro to Javascript programming
• Use of "onclick" and <script> for incorporating javascript
• Use of state variables
• Details:   
  • Implement a "Find-Waldo" or "What is Wrong with this Picture?" or "Find the Hidden Objects" type of game.
  • The game should:
    1. Show the user an image.  (Get a big, complicated one!)
    2. Ask the user/player to find at least four distinct "somethings" (e.g., Waldos) in the image and click on them.
    3. If the user's click is correct, the user's score should increase.  If incorrect, the score should decrease.
    4. The user can only gain points from one of the Waldos once.   If they click on it again then they should either lose points off their score or at least not gain any more points.   You should also display a message (NOT using an "alert()" popup!) to tell the user to stop clicking on the same item!
    5. Score must be cumulative and displayed.
• HELP:   Chapter 10 of our text has almost everything you need to know, and of course I will cover every topic and skill needed in our lectures and labs in class.  You can also find all the information you need on the web by searching.  Finally, I will also be creating and posting some short videos:
  1. Introduction to Javascript
     • JS Intro I:  Alert boxes and how to put Javascript code into "on-click" attributes, click here.
     • JS Intro II:  Global variables (to keep score) and how to put Javascript code into <script> element, click here.
     • JS Intro III:  Output straight to webpage (no popups!) using <form> elements and "getElementById", click here.
  2. 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.
     • Example Code
 
• • 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.