
Home	News	Sales	Updates	Worksheets	Interactives	Support	Contact

Modifying interactives for your own use

General

You will need some basic IT skills to get the files, create images of the right size and modify text files. Some ability with MS Paint or another image program will be needed to cut portions of an image or check positions and sizes of defined areas. You won't do any harm to your PC if you make a mistake although the interactive may not work correctly. There is an outline of things to look out for at the bottom of the page.

Saving interactives to your PC

The interactives first need to be saved to your PC's hard disc. Open in your browser and use the menu options. In Internet Explorer this is Page, Save As, Webpage complete. Other browsers are similar; in the File option or under a menu button you will find Save As or Save Page As and options for a Complete webpage, All files or similar wording.

You should now see an htm or html file in your chosen location and if you click it the exercise should run normally although any additional data sets available from the scroll button will not be available.

In the same folder you should see a new subfolder holding the images and other files used, the name will be based on the htm name, for example if you saved keys.html the directory is keys_files. This is referred to below as the files directory.

Modifying the Keys Interactive

In any image program create 6 image files of type gif or jpg and save to the files directory. For preference they should be 100 pixels by 100 pixels. Other sizes with equal width and height will do although speed and quality may be affected.

In the files directory you will find keys.js. Open the file in notepad and turn off wordwrap. The contents are fairly self explanatory and there are brief comments to explain what may be changed. On your first attempt you will find it best to leave the first Land Invertebrates database as it is as a test of basic operation and only change the second Water Invertebrates database.

Save keys.js, open keys.htm and select the required database with the scroll button to check your new key.

Modifying the Food Web Interactive

This is fairly complex, check what is needed by way of text modifications before spending time on an image.

Create an image, either jpg or gif, of 1152 pixels wide by 747 pixels high depicting some predators and their prey and save it over web_back.jpg in the files directory. Do not alter any other web image files which are purely for technical use.

Open web.htm in notepad and turn off wordwrap. Find the section marked by comments with #####. Alter only what is in that section in line with the instruction within comments there. Save web.html and left click to test your food web.

Modifying the Tiles Interactive

In the files directory you will find tilenames.js. (NOT tiles.js) Open the file in notepad and change the names between the quotes. Save tilenames.js. That's it for the text changes!

Creating the image slices for the tiles is the hardest bit on this one. Create a complete image that is 832 pixels wide x 690 pixels high. It then needs to be sliced into 9 pieces that leave a 2 pixel border all round and a 2 pixel gap between each piece so that each is 276x228 in size. This will be clearer if you download this sample image which has the grid and file names superimposed on it. See also the images for the first exercise which will be in the files directory. It will still work if you get the image sizes wrong and minor size errors should not be too bvious.

Some paint programs like Paint Shop Pro will do this "slicing" for you but here is a method using MS Paint:

Open 3 copies of MS Paint
In the first one open your 832x690 complete image.
In the second open the grid image which you can download here.
Select all on the grid image, copy and then paste onto your tile image using the paste transparent option (the lowest symbol in the left hand toolbar). You should now have your image with a magenta grid superimposed on it.
Now zoom and use the rectangular select tool to cut out each rectangle inside the grid in turn. Select and paste into the 3rd copy of paint.
Save these segments as tileN_RxC.jpg where N is the number of your tile image name starting at 0, R is row number and C is column.

Eg if your names list was "Heron","Robin","Hawk" etc the tile images for the Robin would be named, left to right and top to bottom, tile1_1x1.jpg,tile1_1x2.jpg,tile1_1x3.jpg,tile1_2x1.jpg, etc. See the sample image if in doubt.

If a modified interactive does not work

If your changes don't work, check there are no format errors in the text files. Quotes and commas must all be used in exactly the same way as in existing lines. You should use only alphanumeric characters, spaces and underscores in any text (apart from the . in image names).

The names of images are case sensitive and must be exactly as the names in the files directory. In most cases either gif or jpg/jpeg format images may be used (or png which is an updated jpg) but others like bmp cannot. gifs should be saved with at least 16 colours as some browsers do not display black and white images. If text appears to be overflowing a box you may need to shorten it.