First off, make sure you have puzzle_full.zip downloaded. Now, to include the applet in your web page, you need to include some special tags. A lot of them are optional, and a lot are difficult for me to explain, but are really simple once understood.

<applet code="puzzle.class" width=___ height=___>
  <param name=num value=___>
  <param name=numx value=___>
  <param name=numy value=___>
  <param name=src value="___">
  <param name=soundsrc value="___">
  <param name=type value=___>
  <param name=url value="___">
  <param name=prefixurl value="___">
  <param name=postfixurl value="___">
  <param name=xstyle value="___">
  <param name=bar value="___">
  <param name=resize value="__">
  <param name=website value="__">
  Sorry, your browser doesn't support Java, or has disabled it.
</applet>

code

This is the relative URL where the puzzle.class file is placed.

* The file puzzle.class must not be renamed. It's a weird Java thing.

num, numx, numy

These refer to the number of pieces in the puzzle. num is the total number of pieces, numx is the amount across (horizontally), numy is the amount up and down (vertically).

* Only two of these can specified. I'd suggest numx and numy

* If all three are specified, and numx times numy doesn't equal num, an error will be generated and the puzzle won't work.

* If two are specified, and num is one of them, and if num isn't evenly divisible by numx or numy (whichever one was specified), an error will be generate and the puzzle won't work.

width, height

The width and height of the applet, respectively.

* It is recommended, for less image distortion, to multiply the image's width and height by some number to make the applet's width and height.

* If you have the bar on the applet (enabled by default), add 20 to the height to avoid distortion of the image.

src

Relative URL of the image to load. This must be on the same site as the puzzle.class file. It's a weird Java thing.

soundsrc

Relative URL of a sound file (in .au format) to play when the puzzle has been completed. If not specified, no sound will be played. Must be on the same site as puzzle.class.

type

Type of puzzle. If not specified, it defaults to 0.

0 = Swap type.

1 = Slide type, with the 'empty' square starting in a random position

2 = Slide type, with the 'empty' square in the lower right-hand corner.

url, prefixurl, postfixurl

Relative URL of the web page to display when the puzzle has been completed. Convenient if you want to allow the user to be able to download the whole picture or if you want to do something special with the number of moves it took.

If url is specified, the page will be shown (and some extra information will be appended to the URL). If not, no page will be shown.

The URL that is generated looks like this: url?prefixurlMOVESpostfixurl. You can safely omit prefixurl and postfixurl if you so desire. MOVES will be replaced with an integer, being the number of moves it took to solve the puzzle.

For simple entry to a CGI script, an example would have url set to "my_results.cgi", prefixurl set to "moves=", and postfixurl left unset. If I solved the puzzle in 12 moves, the resulting URL generated would be "my_results.cgi?moves=12"

The sample CGI script in puzzle_full.zip should give a bit more detail. Also, there's scripts in there that will deter cheating, or at least make it a bit more difficult to do.

xstyle

When someone presses the Reveal button, this will determine how the incorrect pieces get marked. If not specified, the default is 0.

0 = Thin blue lines making an X over the incorrect pieces

1 = Big, bold, red X over the incorrect pieces

bar

This tells the applet where to draw select portions of the bar. By default, it is set to 1357. If you set it to 0, you will not have a bar displayed on top of the puzzle. Whether or not you have this bar affects the height setting.

The first number is the position of the "Moves" field, then comes the number correct, the Reveal button and lastly the Mix button. Each field uses the following numbers for placement. They can easily overlap or cover each other, so be careful when deciding where things go.

0 = Not displayed

1 = Left aligned

2 = Centered 1/4 from left side

3 = Centered 1/3 from left side

4 = Centered in middle

5 = Centered 1/3 from right side

6 = Centered 1/4 from right side

7 = Right aligned

resize

If the image specified doesn't fit into the applet's displayable area (the width and height - the size of the status bar [if any]), then the image is resized to fit. This will mess up the proportions of the image, so make sure that you specify the width and height of the applet properly! If not specified, this defaults to 0.

Since resizing is based on the implementation of Java (I have no control over it), and all I get are these silly names for how resizing is done, that's all I can provide to you. If you use this option, test out the different resize methods until you find one that you like.

0 = Do not resize (whew!).

1 = Use the 'default' resize method.

2 = Use the 'fast' resize method.

3 = Use the 'smooth' resize method.

4 = Use the 'area averaging' resize method.

website

Due to the number of messages I have received over the years pertaining to a messed up puzzle installation on a web site, I have realized that adding a contact at the web site to my puzzle display would be a good idea. If you set this, the entire value will be displayed on the puzzle screen while it is loading and if there is an error.

Since this message comes after a line saying "Direct comments about this website to:", I would suggest you put "Your Name <your email address>" as the value of this applet parameter.

If you mess up, or if there is some sort of problem, the applet will generate an error code. All error codes are shown on the Java Console, along with some debugging information. The Java Console can be viewed in Netscape by looking under the "Options" menu. Mozilla can do that too. Internet Explorer, at the time of this writing, can not do that.