Scrambler Applet Instructions

Image Pack for Using Your Own Image(s)

Note: you must have also downloaded the "applet pack" from http://www.twmacinta.com/scrambler/download.php.

Basic Instructions

Copy and paste the following HTML into your web page where you want the Scrambler Applet to appear (if you don't know how to do this, it is explained below):

<!-- Begin Scrambler Applet -->

<applet code="com.twmacinta.scrambler.Scrambler" width="256" height="306" archive="scrmblr.zip">
<param name="base_image" value="YOUR_IMAGE_HERE.gif">
<param name="columns" value="4">
<param name="rows" value="4">
<table border="2" width="250"><tr><td>
It appears that you either do not have Java turned on or you are not
using a browser that supports Java.  There is a puzzle which normally
appears in this space which requires Java to work.  Please download
the latest version of a browser that supports Java (such as
<a href="http://home.netscape.com/computing/download/">Netscape Navigator</a>
or <a href="http://www.mozilla.org/">Mozilla</a>) in order to properly
view this page.
</td></tr></table>
</applet><br>
<a href="about-sc.htm">About the Scrambler Applet (Copyright 1997-2000 by Timothy W Macinta)</a>

<!--   End Scrambler Applet -->

You will need to replace the parts shown in bold with your own settings. In addition, you may also want to add the "control_image" and "image_copyright" parameters. Please see the section below on setting parameters for detailed information.

If you edit your web pages with a WYSIWYG editor such as Dreamweaver or Netscape Composer, you will need to edit the raw HTML of the web page that you wish to put the Scrambler Applet on. You can do this by editing the page using a simple text editor after you have made all of your other changes to the page using your preferred editor. Here's how:

From within your web page editor, determine where on your web page you want to place the Scrambler Applet. In the spot that you have chosen you should add, as a placeholder, a single word (no spaces) that doesn't appear anywhere else in your document. For the sake of providing a concrete example, you could add the made up word "timrulestheworld" as it is unlikely that it is already in your document.
Save the altered document from within your editor and exit the editor.
Open the document that you just saved using a plain-text editor such as Notepad, Wordpad, or Emacs.
Search for "timrulestheworld" (or the placeholder that you chose) and replace it with the HTML shown above.
Save the changes you have made with your plain-text editor.

Optional Changes

Allowable Changes

The wording of the "about" link and the linked page itself must stay the same and must be functional when you deploy your web page. You may, however, change the look to fit with your site as long as the link remains adjacent to the applet and as long as the link is not obscured.

The parameters listed below may also be changed.

Changing Applet Parameters

Within the HTML that you inserted into your web page, you wil see lines that look like this:

<param name="XXX" value="YYY">

These lines are used to set up the configuration for the Scrambler Applet. For instance, to change the number of rows that the puzzle has from 4 to 3, you can change the line that reads:

<param name="rows" value="4">

to:

<param name="rows" value="3">

Here is a list of all the parameters that you can change/add, what to use for the "name" attribute, and what to use for the corresponding "value" attribute.

Name Value

base_image This parameter is used to specify the image that is scrambled as part of the puzzle. You can use your own image here by specifying the path to the image's file.

control_image This parameter is used to specify an image that is shown immediately below the puzzle. It's purpose is to display a message that tells people using the puzzle that they can access the puzzle controls by holding down on the "SHIFT" key while clicking the puzzle. If you change the image which is scrambled to make the puzzle you should change the "control_image" as well to another instructional image which matches the style and width of your scrambled image. Alternatively, you can leave out the "control_image" parameter entirely (delete the HTML line where it is specified) - this will prevent an instructional image from being displayed below the puzzle.

image_copyright0
image_copyright1
image_copyright2 When you use your own image with the Scrambler Applet you should use the "image_copyright" parameters to identify the appropriate copyright information for the image. The information that you enter as the "image_copyright" parameter is displayed in the "About" tab in the control panel for the Scrambler Applet. "image_copyright0" is the first line of text, "image_copyright1" is the second, and "image_copyright2" is the third (you are limited to three lines in the "About" tab, but you can always put more detailed information on your own web page). You may use less than three lines if you wish, in which case you should just leave out the "image_copyright2" parameter (as well as the "image_copyright1" parameter if you only want one line).

columns When the Scrambler Applet splits the image into blocks to be scrambled, the image is split into the number of columns specified by the "columns" parameter.

rows When the Scrambler Applet splits the image into blocks to be scrambled, the image is split into the number of rows specified by the "rows" parameter.

blank This parameter specifies which block should be removed from the image in order to create the empty space. The value for the parameter should be in the form x,y where x is the column number of the block to be removed and y is the row number. Row and column numbers start at 0. As an example, to remove the tile in the upper left hand corner you would set the value of this parameter to "0,0". To remove the tile in the lower right hand corner of a 4x4 puzzle, you would set the value of this parameter to "3,3". If this parameter is not specified, a random tile will be selected for removal.

show_controls Setting this parameter to "true" will cause the Scrambler Applet control panel to be automatically displayed when the applet is started. Setting this parameter to "false" or leaving the parameter unspecified will keep the control panel from being displayed until it is opened by the user.

seed You may set the seed to an integer value using this parameter in order to make the puzzle non-random (it will be shuffled in the same way every time and this shuffling will depend upon the number you choose for the seed).

Changing the Applet Size

You will need to change the size of the space that the Scrambler Applet gets on your web page when you change the image that it uses. You can change the size of the space that the Scrambler Applet takes up by changing the "width" and "height" attributes on the line of HTML which looks like this:

<applet code="com.twmacinta.scrambler.Scrambler" width="256" height="306" archive="scrmblr.zip">

If you are not using the "control_image" option, then the width and the height of the applet may simply be set to the width and the height of the image that you used for the "base_image". If you are using the "control_image" option, the "control_image" will be shown immediately beneath the puzzle and its height should be added to the height of the "base_image" in order to determine the total height to use for the applet (the "width" will remain the same as the "base_image").

Name	Value
base_image	This parameter is used to specify the image that is scrambled as part of the puzzle. You can use your own image here by specifying the path to the image's file.
control_image	This parameter is used to specify an image that is shown immediately below the puzzle. It's purpose is to display a message that tells people using the puzzle that they can access the puzzle controls by holding down on the "SHIFT" key while clicking the puzzle. If you change the image which is scrambled to make the puzzle you should change the "control_image" as well to another instructional image which matches the style and width of your scrambled image. Alternatively, you can leave out the "control_image" parameter entirely (delete the HTML line where it is specified) - this will prevent an instructional image from being displayed below the puzzle.
image_copyright0 image_copyright1 image_copyright2	When you use your own image with the Scrambler Applet you should use the "image_copyright" parameters to identify the appropriate copyright information for the image. The information that you enter as the "image_copyright" parameter is displayed in the "About" tab in the control panel for the Scrambler Applet. "image_copyright0" is the first line of text, "image_copyright1" is the second, and "image_copyright2" is the third (you are limited to three lines in the "About" tab, but you can always put more detailed information on your own web page). You may use less than three lines if you wish, in which case you should just leave out the "image_copyright2" parameter (as well as the "image_copyright1" parameter if you only want one line).
columns	When the Scrambler Applet splits the image into blocks to be scrambled, the image is split into the number of columns specified by the "columns" parameter.
rows	When the Scrambler Applet splits the image into blocks to be scrambled, the image is split into the number of rows specified by the "rows" parameter.
blank	This parameter specifies which block should be removed from the image in order to create the empty space. The value for the parameter should be in the form x,y where x is the column number of the block to be removed and y is the row number. Row and column numbers start at 0. As an example, to remove the tile in the upper left hand corner you would set the value of this parameter to "0,0". To remove the tile in the lower right hand corner of a 4x4 puzzle, you would set the value of this parameter to "3,3". If this parameter is not specified, a random tile will be selected for removal.
show_controls	Setting this parameter to "true" will cause the Scrambler Applet control panel to be automatically displayed when the applet is started. Setting this parameter to "false" or leaving the parameter unspecified will keep the control panel from being displayed until it is opened by the user.
seed	You may set the seed to an integer value using this parameter in order to make the puzzle non-random (it will be shuffled in the same way every time and this shuffling will depend upon the number you choose for the seed).