Example: chess puzzler

adding the chess puzzler to your site as an iframe

This applet can be easily added to your website or your blog using this HTML code:

<iframe height='272' width='242' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://pgn4web.casaschi.net/puzzler.php?pgnData=tactics.pgn&gameNum=&squareSize=30&lightColorHex=EFF4EC&darkColorHex=C6CEC3&controlBackgroundColorHex=EFF4EC&controlTextColorHex=888888&frameBorderColorHex=A4A4A4'>
iframe support required to display the chesss puzzler
</iframe>

The following URL parameters for puzzler.php allow customization of the chess puzzler:

• pgnData=... selects the PGN file containing the puzzler, default: tactics.pgn
• gameNum=... sets the game number for the puzzler to be shown, default: blank, showing the puzzler of the day updated at 00:00 GMT
• squareSize=... sets the chessboard square size, default 30
• lightColorHex=... sets the light squares color, in hexadecimal format, default: EFF4EC
• darkColorHex=... sets the dark squares color, in hexadecimal format, default: C6CEC3
• pieceFont=... sets the piece font type, either alpha, merida, uscf, random, hash or default, default: default
• controlBackgroundColorHex=... sets the buttons background color, in hexadecimal format, default: EFF4EC
• controlTextColorHex=... sets the buttons text color, in hexadecimal format, default: 888888
• frameBorderColorHex=... sets the frame border color, in hexadecimal format, or none, default: A4A4A4

As an iframe, the chess puzzler can be easily added as a content and/or as a sidebar applet to major web platforms (the iframe code above can be customized to match the site color scheme and the available space), such as:

• wordpress.org: add the chess puzzler as a text widget for instance into the site sidebar; use the iframe code as widget content
• joomla: add the chess puzzler as a wrapper module for instance into the site sidebar; use the iframe src property as the wrapper module URL, select no scrollbar and copy the height/width properties
• drupal: add the chess puzzler as a block for instance into the site sidebar; use the iframe code as block body; select full HTML as the text body in order to allow for the iframe tag
• mediawiki: install a mediawiki extension to allow including iframes, such as website in iframe extension and use it to add the chess puzzler to your site; alternatively, add the iframe code directly to the mediawiki article after setting $wgRawHtml = true in your config file (possibly after securing the option with something like this extension)
• blogger: add the chess puzzler as an iframe inside a post or anywhere within the blog template; alternatively use the google gadget option as described below

the chess puzzler as a google gadget

The chess puzzler is available as google gadget for inclusion in your blogger blog, your iGoogle homepage or to your website based on google sites.

click this button to automatically add the chess puzzler to your iGoogle page.

Alternatively, you can add the chess puzzler google gadget by adding a gadget by URL to your google sites or to your igoogle homepage, using this gadget URL:

http://pgn4web.casaschi.net/puzzler.xml

The chess puzzler google gadget allows for some basic color selection and for size/border configuration. The advanced parameter should normally be left blank and allows passing the URL parameters as defined in the previous section directly to the puzzler script; this is intended mainly for debug reasons or for low level color customizations. Use of the advanced parameter might break the auto resize option.

You can see here an example on a google site page and below a screenshot of the google gadget on an iGoogle page:

Since this is just a screenshot, here is the puzzle solution:

[FEN "8/4kpp1/4p1p1/Q2pP1P1/2pR1P2/PrP3Pq/1P6/2K5 w - - 0 1"]
[SetUp "1"]

1. Qc7+ Ke8 2. Qc8+ Ke7 3. Rxd5 1-0

Service availability disclaimer

Before using this online service, please read the service availability disclaimer note.