Weeks 10 - 12


Form elements review

Conditionals:

guess the magic word:  if (q=="xxx") happy() else unhappy()
Here's a place to try things out.

Loops:

how many copies?:    i=0;s=""; while (i++<q) {s=s+"copy "}
simpler version?


Assignment #6 -- due Monday November 16. Make a one-dimensional jigsaw puzzle-- specifically take a 600x100 pixel picture that you've created and slice it into 6 rectangles (each 100 by 100 pixels). Populate a table (having 7 columns in one row) with the six pieces, but with their order all scrambled up, and one extra piece (a "blank" picture). Whenever someone clicks on any picture, then its position should be swapped with the current position of the blank image.

Make your script determine when the puzzle has been solved. That is: whenever the picture is reassembled  by the user (that is, all six pieces are adjacent to one another in the order they were originally in your picture -- you may assume that the "blank" is at the extreme right of the picture):

  1. first congratulate the user with an alert box, telling them how many clicks it took them to solve the puzzle,
  2. then let the pictures revert to the original "scrambled" order.

Here's a little something which might help with swapping. something I'll talk about one day

Here are some of the things I demonstrated in class:

Issues:

  1. How to let a function know which image was clicked? 
    <span onclick="f(7)"><img src="pic7.jpg"></span>
  2. How to put a new image at that location? 
    function f(x){document.images[x].src="new.jpg"}
  3. How to know if an image is where you want it to be?

    See strategies, below.

     

  4. How to do something to all the images? 
    while (i++<numberofimages){document.images[i].src="new.jpg"}
  5. How to restore the scrambled order?
    a. 
    document.images[1].src="pic5.jpg"; 
    document.images[2].src="pic3.jpg";
    document.images[3].src="pic6.jpg";
    etc.

    or

    b. 
    A=new Array(5,3,6,2,1,7,4);
    while (i++<numberofimages){document.images[i].src="pic"+A[i]+"jpg"}

Strategies for knowing if document.images[x] has the "right" source:
1. Load images in "solved" order first then determine resolved file addresses
2. Use string manipulation to pull off only the relevant characters
3. Remember which image is where through an array

New stuff for coming weeks:

random numbers, (teleology, mechanism and pragmatism) and evaluating a random number generator