Step 1: specify the parameters of your variant below:

Board dimensions
files:	ranks:
holdings type:		(where captured pieces go)
Piece graphics	(to constuct image filenames)
directory with piece images:		(Must end with '/' !!!)
graphics format:		(image filename extension)
white prefix:		put on image filename to dis-
black prefix:		tinguish white and black pieces
square size:		(at least 3 larger than images!)
Board colors	for checkering	(make equal for non-checkered)
light / dark squares:		(white & greyish)
Promotion	(not very important)
promotion zone depth:		(in ranks)
nr of promoting piece types:		(usually just the first: the Pawn)
promotion choice:		(prefix with * if taken from holdings)
promotion offset (Shogi):		(added to piece type on promotion)

Step 2: When satisfied with the settings above, press the button below.

This should make a diagram of an empty board appear.

Diagram design page

Make your own interactive diagram!

This page can assist you in creating the HTML code that in collaboration with the betza.js JavaScript will create an interactive Chess diagram. If you follow the 5 easy steps, in the end it will display a piece of text that you can copy-paste into the body of your own HTML page. In order to work, however, the header of that page will have to link to the betza.js file (and, less importantly, the betza.css style file). This requires the two lines

<link rel=StyleSheet href="../betza.css" type="text/css">
<script type="text/javascript" src="../betza.js"></script>

to be incorporated in the header. And of course the two betza.* files to be present in the mentioned location relative to the HTML page.

To view this page your web browser had to download those files, but it did not save them on the disk, and discards them after you are done with this page. To download them for saving, you can use these two links: JavaScript and style file. Of course you will also need to set up a directory for the pieces.

Some hints - There is unfortunately no way to go back to an earlier design stage; the only way is to refresh the page and restart from scratch. When during design of a very large variant you discover that you made a mistake in an earlier piece (e.g. user a wrong ID, or messed up the Betza move specifier), it might be faster to just complete the design process, and then edit the HTML code that comes out afterwards to correct the error. Everything you entered will be quite easy to recognize from the HTML code, and with a regular text editor like NotePad you should have no problem to locate the line for the erroneously specified piece, and correct the name, ID or move for it.

Step 4: Drag the pieces from the table to the board

Set up the desired position that way. You can also use click-click moving, and once you selected a piece from the table on the right, you can place it multiple times by clicking on the board. If you mis-place pieces you can still move them around to correct that.

Symmetric set-up modes can speed up piece placement:

When done:

Step 3. Define the pieces one by one:

Step 3a: Provide information on the next piece type to add.

Image name must be the 'root name', to which the script will add the white/black prefixes and graphics-type extension as needed. Fields that you leave empty will be derived from the name. (Beware that filenames are case sensitive, and write the name accordingly!) Names of orthodox pieces are recognized, and the standard move will be used if you don't supply one. Press 'Add piece' after you supplied all info (or type <Enter>). Less... More...

Piece name:
Piece ID (one letter):
Image filename:
Betza move description:
Rank to fill:
Start in hand:

5. This is the HTML code describing the diagram:

You can copy-paste this code in any HTML page that has the betza.js script enabled in its header. The script will then transform the text between the div tag pair into the HTML code for the interactive diagram. In fact that is what it has just done here, when you pressed 'Create HTML code': it inserted the code both in the area above for you to see (by using escape sequences for the '<' sign, so HTML would no longer recognize the tags and display everything), and to the left of here, to have the script act on it. And you can see (and try out!) the result of that on the left!