Weeks 9 - 11

New stuff for next week:

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

Remember that Assignment #5 is due Wednesday the 19th

something I'll talk about on Monday

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 Wednesay April 2nd. 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 6 columns in one row) with the six pieces, but with their order all scrambled up. Whenever someone first clicks on any picture, then remember where he or she clicked. The second time they click on a picture, then swap that picture with the one previously clicked.

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):

  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.

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