Another new version of the Chess Game Viewer has been published with improved code generation for the rook moves.
The next version (probably 1.1.8) will also have improved code generation for knight moves, but still needs more testing.

As an example the following game, without coded moves, between George Atwood and Francois Philidor, played in 1794.

To become really independent from other sites you may also want to use images of chess pieces that you have uploaded by Blogspot/Blogger and are stored in Picasa.

This can also be done.

1. Just create a new post. Add all the images that you need to this post and when you are finished save it without publishing. You may publish this post, but there is no need to bother the visitors of your site with a post of these images.
2. Now you have to edit the JavaScript code and edit the array urlpcs in such a way that it contains the urls to the pieces you have uploaded in the previous step.
3. In addition you'll have change the JavaScript code in such a way that the variable pcsdir gets the empty string value

There are some disadvantages:

One of the initial requirements for our Chess Game Viewer was that it shouldn't depend on another site. Of course it is possible to host the JavaScript on your own site and a site like Google sites will be sufficient. However the intention of the original requirement was also that it should be possible to host the needed JavaScript on Blogspot.
It is rather easy to accomplish this.
I assume that you already have configured your site to use the FEN viewer and the Chess Game viewer. Then look for the line in your template that refers to the external JavaScript file.

Let's start by downloading the JavaScript file from this site. After downloading open the downloaded file with Wordpad and copy the following lines at the top of this file.

<script type='text/javascript'>
//<![CDATA[

Next we are going to add the following lines at the end of this file.

//]]>
</script>

And by now we only have to replace the following line in your blogspot theme by the content in our Wordpad editor.

<script src='http://sites.google.com/site/viewchessgame/js/gv.js'
type='text/javascript'/>

Before actually changing your template it will be a good idea to backup your full template.

So now you know what to do to include the necessary code within your template. I only advice you to wait a little longer or to replace the code with the new code in the future, because the Chess Game Viewer is still under development and improving all the time.

It is rather easy to use another set of chess pieces with this JavaScript Chess Game Viewer. In the next diagram I have used the Linares set, but you can use each of the Palview Chess sets, by just directing the pdir variable to the right location.
The easiest way to do this for the linares set is by adding the following line

pdir=vdir+'linares/';

but instead of linares you can also use: kingdom, alpha, boldlinares, leipzig, tilburg or merida.

If you want to use the same chess set all the time just add this line to your template. If you want to use it for a single board in a post then add it to the post.
Currently it isn't possible to use different chess sets for re-playable games on a single page, but it will be rather easy to implement this functionality if there is a real need for this. For static boards (by means of the FEN Viewer) each board already can use it's own chess set.

Linares on a blue chess board

Some other combinations can be found on the ViewChessGame site.

It is possible to use another board image, by just assigning the location of this image to the brdimg variable.

This is demonstrated in the following example game between Alexander Mc Donnell and Louis Charles Mahe de la Bourdonnais, that has been played in 1834.

In the example above I have used brdimg=pcsdir+'wood29.jpg';
instead of wood29.jpg you may prefer to use another board image like:

• blue29.jpg
• borderline29.gif
• cowderoy29.jpg
• gray29.jpg
• graystone29.jpg
• green29.jpg
• ivorygreen29.jpg
• lightestgray29.jpg
• lightgray29.jpg
• marblebrown29.jpg
• rob29.jpg
• sepia29.jpg
• slatebrown29.jpg
• wood29.jpg

Two more attention points:

At first sight the next game is just another example of a game published with the Blogspot Chess game Viewer, but this time I left the coded moves out. This became possible, because I have added a coded moves generator to the JavaScript code. However there are still some known issues.





The code used above is:
<SCRIPT language='JavaScript' type='text/javascript'>Game('','','1.e4 c5 2.f4 e6 3.Nf3 d5 4.Bb5+ Nc6 5.e5 a6 6.Bxc6+ bxc6 7.d3 Be7 8.c3 Nh6 9.O-O a5 10.d4 a4 11.Be3 Nf5 12.Qe2 c4 13.Qf2 Rb8 14.Bc1 Rb5 15.Nbd2 c5 16.Re1 h6 17.Nf1 cxd4 18.cxd4 g6 19.Ne3 Rg8 20.Nxf5 gxf5 21.Qc2 Bd7 22.Bd2 Bb4 23.Bc3 Rg4 24.Qd2 Qe7 25.h3 Rg7 26.Qf2 a3 27.Bxb4 Qxb4 28.bxa3 Qxa3 29.Rab1 Qc3 30.Rxb5 Bxb5 31.Rb1 Kd7 32.Rxb5 Qc1+ 33.Ne1 c3 34.Kh2 h5 35.Nd3 Qd1 36.Nb4 Qd2 37.Qf1 Qxd4 38.Rb7+ Kc8 39.Rb8+ Kc7 40.Na6+ Kd7 41.Qb5+ Ke7 42.Qb7# 1-0',1,5);</SCRIPT>

As promised the used code in the Mate in two post.

<SCRIPT language='JavaScript' type='text/javascript'>
Game('8/p7/1N3K2/Qn3N2/2P1kp2/p3p3/2P1B2b/4n3 1',
'W_@@GP@DXRQ@_QAAXbQ@\\RAAXiQ@_CAA{qQ@_qAA{lQ@sjAA{jQ@qjAE{uQ@aXAE_?@A',
'{A mate in two problem. It is White\'s turn to move.
<br /><br />}1.Qa4
 axb6 {<br /><br /> &nbsp;  &nbsp;  &nbsp;}( 1...Nd6 2.Qc6# )
 {<br /> &nbsp;  &nbsp;  &nbsp;}( 1...Nd4 2.Nd6# ) {<br />
 &nbsp;  &nbsp;  &nbsp;}( 1...Nc3 2.Qe8# ) {<br /> &nbsp;
  &nbsp;  &nbsp;}( 1...Nxc2 2.Qxc2# ) {<br /> &nbsp;  &nbsp; 
 &nbsp;}( 1...Nf3 2.Bd3# ) {<br /> &nbsp;  &nbsp;  &nbsp;}( 
1...Nd3 2.cxd3# ) {<br /> &nbsp;  &nbsp;  &nbsp;}( 1...Ng2 2.cxb5#
 ){<br /><br />}2.Qa8# 1-0',1,1,5,"Mate in two");</SCRIPT>

Most of the arguments of the Game function have been explained before. The last two arguments indicate the number of attempts (5) and the initial text below the chess board (Mate in two).

The previous posts showed that it is possible to publish chess games on a blogspot/blogger site. Last week I received a request to help in creating some gadgets with the same purpose. These can be used to publish chess games on a site that is hosted on Google sites (and some other web sites).
The combined efforts (of me and the admin of lessons.chessteacherlessons.com) have resulted in two gadgets that are demonstrated on this Chess Gadgets page.

I still prefer the publishing method for the Blogspot sites, partly because of the limitations, but it's a nice alternative.

This post demonstrates the use of two chess boards in an article about chess which may be useful when you want to publish a game with a lot of comments and/or variations.

This post is intended as a demonstration of the Chess Game Viewer that we have configured in the previous posts. I have used some different styles to show that you can change the lay-out and the colour of the fonts.

Smothered mate!

Below you can find the code that is used in the post of the Smothered Mate. I have added some line breaks to make it more readable, but it is supposed to be one line.
You can also see that an empty string can be used to indicate the initial position of the board if this corresponds to the normal starting position.

<SCRIPT language='JavaScript' type='text/javascript'>
Game('','sc@@K[@@}l@@@Q@@|a@@DY@@qi@@JR@@ETA@rbA@[bADibADY`AB{}@prbA@[bADibADY`ABET@@rb@@[b@Dib@DYP@@vn@@Tc@@|{@@RZ@@aZ@@BZ@@xi@@ZB@@{c@BQK@@zs@@AS@@A\\A@y]@@BR@@]K@@CK@@bZ@@FB@Dl]@@IQ@@]S@@LS@DcS@BRS@@sS@BKD@@ZR@@BC@@S\\@BDE@@ic@@CD@@\\S@BEF@@c]@@Pt@BDtA@}v@@?C@D]L@BFE@@LV@BEF@@SE@BDE@@VL@A',
'1.e4 e5 2.Nf3 Nc6 3.Bc4 Bc5 {<p>The Giuoco Piano Variation of the 
Italian Opening. This often results in rather boring games, but this 
game has an interesting ending.</p>} 4.c3 d6 {<p><i>}( 4...Nf6 
5.d4 exd4 6.cxd4 Bb4+ {is played more frequently}){</i></p>} 5.O-O 
( {<i>Just like} 5.d4 exd4 6.cxd4 Bb4+ {</i>}){<br /><br />} 
5...Nf6 6.d4 exd4 7.cxd4 Bb6 8.h3 Nxe4 9.Re1 d5 10.Bxd5 Qxd5 11.Nc3 
Qd8 +/- 12.Rxe4+ Ne7 13.Qe2 Be6 ( 13...Bf5! ) 14.Bg5 Qd6?! +- 
15.Bxe7!! {<font color="red">and now Black is in trouble!</font>
<br /><br />} 15...Kxe7 16.d5 Rhd8 17.Ng5 c6 18.Nxe6 fxe6 
19.Rxe6+ Qxe6 20.Qxe6+ Kf8 21.d6 Re8 22.Qf5+ Kg8 23.Ne4 Rf8 
24.Qe6+ Kh8 25.Ng5 Bxf2+ ( 25...Rxf2 {would have been better, 
but not enough to share the point} ) 26.Kh2 Rae8? {<br /><br />
and now it\'s a Mate in four.} 27.Nf7+! Kg8 28.Nh6+ Kh8 29.Qg8+ 
Rxg8 30.Nf7# 1-0',1,6);</SCRIPT><NOSCRIPT>An example 
game of the Blogspot Chess Game Viewer</NOSCRIPT>Smothered mate!

This post explains how you can adapt your template in order to use the Chess Game Viewer, but first configure and try the FEN-viewer.

If the FEN-viewer is working fine we start to configure the chess game viewer.
Go to Layout » Edit html
and make a backup of your template

Then find something like

]]></b:skin>
</head>
<body>

We are going to add some lines above and below this, but also adding an onLoad statement to the body tag.

#pc1 {position:absolute; visibility:hidden; cursor:hand;}
.qzs {position:relative; visibility:hidden;}

]]></b:skin>
</head>
<body onLoad='InitSys();'>
 <div id='pc1' onClick='DropPc(cg)'>
 <img name='dpc'
  src='http://sites.google.com/site/viewchessgame/pcs/i.gif'/>
</div>

And (after saving your template) the configuration part is finished.

---

Let's try it by adding the following code to a post.

<SCRIPT language='JavaScript' 
type='text/javascript'>
Game('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR 1',
'sc@@K[@@z^@@@Q@@|a@@ET@@^L@A',
'1.e4 e5 2.Qh5 Nc6 3.Bc4 Nf6 4.Qxf7# 1-0',
1,6);</SCRIPT>

This is the Scholar's Mate.

The arguments for the Game function are similar to the Fen2Page function. At the moment we still have to add the coded moves (that can be copied from the file generated by Palview). The last optional argument indicates the initial position that has to be shown, because the starting position of the chess board isn't very informative.

I'm going to explain how you can publish re-playable chess games on your blogspot blog without the need to use another external site. This will be done in some different steps, which will enable you to detect possible problems as early as possible (without having done a lot of work).

This first step will enable you to use the FEN viewer.

First, Go to Layout » Edit html
and make a backup of your template

Now we look for the line with the title tag. This is probably something like <title><data:blog.pageTitle/></title> and copy the following lines just before this line.

<script src='http://sites.google.com/site/viewchessgame/js/gv.js'
type='text/javascript'/>

Next you have to add the following lines to the css part

.board img{margin:0;padding:0;border:0;background:none transparent}
.board table,tr{margin:0;line-height:9px}

If you don't know where to add it an appropriate place is probably just before the line

]]></b:skin>

And now the configuration part is finished (after you have saved your template) and you are able to use the FEN-viewer in your posts, just like in the post about displaying a diagram and about the improved blogspot FEN viewer.
Use the edit html to insert this kind of code in a post. The used code (in your post) for this last mentioned diagram with the letters, figures and Black to move indication is

<script language="JavaScript">
Fen2Page('rnbqk2r/ppp2pp1/5n1p/3p2B1/1b1P4/2N5/PPQ1PPPP/R3KBNR',2,1);
</script>

• The first argument is the FEN code of the diagram that has to be displayed
• The second optional argument (0, 1 or 2) indicates if the White/Black-to-move indication has to be shown. No move indication: 0, White to move: 1 and Black to move:2
• The third optional argument indicates if the figures and letters have to be shown.
  

The code mentioned above results in:

The moves above will be shown as soon as you make the correct move or after three wrong attempts. You can make a move by clicking at a piece followed by clicking the target square.

This mate in three diagram is only used as an experiment of this new chess publishing method.

It seems to work rather well, but let me know in the comments if you experience some difficulties.

I have added a White circle at the upper right corner to indicate that it's White's turn to move. The circle will be black if it's Black's turn to move. I also added some figures and letters at the sides of the board. Both indications are optional.

All the needed JavaScript is still incorporated within the blogger/blogspot template.

This is still a static diagram, but I am going to extend it to a complete game viewer.

Looking back at all the Chess Publishing possibilities that we have evaluated in the past they all have one major disadvantage in common: they depend on files on other sites. With some of the discussed methods these files could be our own, which assures that they probably don't disappear without our knowledge.

Therefore the requirement that the method to publish chess games has to be incorporated within the template is a raher important one.

The initial position. At first sight this may look like a picture, but it is in fact a function that creates the diagram based on a FEN-string.

The used code in the post itself is:

<script language="JavaScript" type="text/javascript">Fen2Page ('rnbqkbnr/pppppppp/8/8/8/8/ PPPPPPPP/RNBQKBNR');< /script>

In addition I have added some alternative content in case JavaScript was disabled.

I am going to use this as a starting point to develop something that makes it possible to publish chess games on blogspot without the need for other hosts.

Some people have asked me how to use the LT-PGN-viewer on their blog site as I have done in the post about the LT-PGN viewer and editor. It turned out that showing the code that was used in this post made it clear. The code I have used in that post is:

<iframe src='http://www.lutanho.net/pgn/ltpgnboard.html?Init=&ApplyPgnMoveText=1.e4 g6 {The modern defense}<|br> 2.Nf3 (2.d4 {is played more often.})<|br><|br> 2...Bg7 3.Bc4 d6 4.O-O Nf6 5.Nc3 O-O 6.d4 c5 7.dxc5 dxc5 8.Be3 Nc6 9.Bxc5 Qxd1 10.Raxd1 Nd7 11.Ba3 Bxc3 12.bxc3 Nf6 13.Rfe1 Rd8 14.Rxd8+ Nxd8 15.Bxe7 Be6 16.Bxe6 fxe6 17.Bxf6 Nc6 18.Nd4 Rf8 19.Nxc6 Rxf6 20.Nxa7 e5 21.Nb5 Rc6 22.h3 Rc5 23.Nd6 Rxc3 24.h4 1-0 &SetBGColor=FFFFFF&SetImagePath=cases27|&eval=AddText(%22<|td><td><B>Modern defense example<|B><BR><BR>%22+GetHTMLMoveText(0,0,1))' width='550' height='355' frameborder='0'></iframe>

Please note that the moves were not visible when viewing the page in FireFox as mentioned in the problem with FireFox post. This has been solved in the posts that I have published this year by creating an addtional html page. An example of this method can be found in the post Some traps in the Sicilian game.


Update:
The problem with FireFox has been solved by the programmer as you can see in the original post.