CS 101   Web Site Construction,  Winter 2011,  Instructor:  Jeffrey Horn    ASSIGNMENT 7

Assignment 7  "Mixup Puzzle with JavaScript"
• Handed out:   Wednesday, April 6, 2010
• Due:     Tuesday, April 19, 2010 (end of day!)
• Goals: 
• Learn basic use of Javascript
• Details:
  • Create a 2D puzzle that requires the player to put a series of images into the correct 2D configuration.   For example:

    Unsolved	Solved

  • GAME PLAY:
    1. The user should be presented with the set of images to be re-arranged.  The images initially should be out of order.   (The initial order can be the same each time the game is played.  For extra points (see grading guidelines below) the order of the images should be randomized each time the game is played.)   The easiest arrangement to program would be to have rectangular (or square) images arranged in a rectangular (or square) grid, such as the 2 by 2 grid in the example above.,
    2. The user is able to move images around the grid by clicking on them.   It is up to you exactly how the player interface works, but you should write a brief text instruction on the page so that we can all play!   For example, you might have the player click on an image to move, causing that image to be highlighted somehow (e.g., make it bigger, smaller, or put a border around it), and then the next image that is clicked gets swapped with the highlighted (selected) image.   Or (probably easier to program), create a "temp" slot for an image next to the grid.   Then each time the player selects an image in the grid, the game swaps that image for the one in the temp slot.    There are probably many other possible types of player interaction.
    3. Track and display the number of MOVES (image swaps) so far.
  • BACKGROUND:
    • Chapter 14 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. Cropping or cutting images into small pieces for your puzzle: 
         • Using Microsoft Office Picture Manager (my preference!), click here. (10 minutes)
         • Using Microsoft Paint, click here. (10 minutes)
      2. 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.
  • WHAT TO TURN-IN
    • Get your game working and on the web.  This means uploading all of your files (images too!) and making sure it all works from a web browser.   Send me the URL in an email with "CS 101:  A7" in the SUBJECT LINE, and mail to jhorn@nmu.edu, as usual!
    • Grading guideline:

      • GRADE	Requirements
        D	A web page on the web with clear instructions for the game Images that actually change when clicked on. Images for which a unique ordering "makes sense".   See above video lectures on cropping or cutting images, above.
        C	All of the above , plus... The ability for the player to actually swap images in the puzzle. Use of a table to organize the images (or rather the slots for the images). A way to notify the player of the number of clicks or swaps so far (e.g., an alert box).   See JS Intro I and II video lectures above.
        B	All of the above, plus.... The game actually works.  In other words, you can swap images until the game is won. The "score" (e.g., number of clicks or swaps so far) is accurately maintained and posted to the player.  See JS Intro II video lecture above. The "score" is posted to the web page itself (i.e., NOT to a pop-up like an alert box or prompt box).  You can do this with a form element like a text box.   See JS Intro III video lecture above.
        A	All of the above, plus... Web page has a "solution" button that allows the player to see a small image of the completed puzzle.  They should also be able to turn this off!  For example, you could use <button value="peek" onclick=" (some Javascript code)"> <input type="button" onclick="(some Javascript code)"> to bring up the solution image, and another button to hide it.
        A+	All of the above plus... One or more of the following advanced functions: A reset button that resets the game to the original state (in terms of "score" and the positions of images in the table). A "progress" field (e.g., text box) that displays how close the puzzle is to being solved (i.e., how many images are in their correct positions). A "scramble" button that randomizes the puzzle.  This is not easy to do, as you need more than random numbers; you need a random "permutation" (ordering) of the numbers 1...N, where N is the number of images.  Only for advanced students!

      • NOTE:  If your puzzle has more than 4 pieces, you can substitute THAT quality for any one of the functions in any of the lists above that have a number greater than "1"!