Example: chess puzzler
Try solving the chess puzzler!
The right button underneath the chessboard steps through the puzzler's solution for you to check your findings. The left button steps back.
The chess puzzler is featured on the pgn4web homepage, please note how size and colors can be customized. The pgn4web blog also shows how the chess puzzler can be integrated in a blog.
Example: http://pgn4web.casaschi.net/puzzler.php
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.
You can add the chess puzzler google gadget by adding a gadget by URL to your blogger blog, 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.
Service availability disclaimer
Before using this online service, please read the service availability disclaimer note.