Weeks 10 - 12


2nd Quiz :  Monday, April 24.

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, April 24   (Note: this is worth 20 pts instead of the usual 10 pts for assignments).  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 with the six pieces, and with one extra cell filled with a "blank" image (of size 100 x 100 pixels). Scramble the seven images so that the order appears to be random. (True randomness is not required, and it can have the same ordering each time the page is loaded.). Whenever a picture is clicked, its position is swapped with the current position of the blank image. 

Make  it so that your script determines when the puzzle has been solved. That is: whenever the picture is reassembled  by the user (that is, all seven pieces are adjacent to one another in the "proper" order (the order they were occupied in your original picture) then:

  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 are some of the things I'll talk about in class:

Issues:

  1. How to let a function know which image was clicked? 
    <img src="pic7.jpg" onclick="f(7)">
  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 (see for example here)
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