Tutorial - showing tactic trainer on a web page

In this tutorial, I am going to show you how you can use DHTML Chess to show a tactic trainer on your web page.

Template

Inside the demos folder there is a file called tactic-training-on-a-web-page.html.

From that file, copy the sections:

  • DHTML Chess part 1 into the <head> section of your web page
  • DHTML Chess part 2 to the place on your <body> where you want the tactic trainer to appear.

The demo will by default show tactics from the pgn file "tactic-checkmates.pgn".

You can use your own PGN files by:

  • Copy your pgn into dhtml-chess/pgn
  • Update the pgn property to the name of your pgn file(without the pgn extension), example:
    pgn:'my-tactics'
    for "dhtml-chess/pgn/my-tactics.pgn"