Anki-Chess-2.0

An interactive chess template for anki.

Grabacion.de.pantalla.2025-03-20.a.la.s.4.34.02.p.m.-1.mov

Features ✨

• 🏁 Supports PGN Format – Fully compatible with Portable Game Notation (PGN).
• ♟️ Piece Promotions – Handles all types of piece promotions.
• 🔄 Auto-Oriented Board – Adjusts board orientation based on the first move of the puzzle.
• 📴 Works Offline & on AnkiDroid – Fully functional without an internet connection, tested on AnkiDroid (verified) and iOS.
• 🛠️ No Add-ons Required – Works standalone! However, an optional add-on is available for bulk flashcard creation via PGN import.
• 📊 Analysis Board on Backside – Review your moves with an analysis board on the card’s reverse side.
• 🎨 Color-Coded Mistakes – The chess board has a border that changes color to indicate mistakes. Red and green, after playing the moves on it.
• 🔀 Multiple Correct Moves Supported – Choose from multiple valid moves, and the card will respond with a random variation (if multiple lines exist).
• ⚪⚫ Turn Indicator on Front – The front board border shows who is to move:
  • White border → White to move
  • Black border → Black to move
• 🏷️ Game Metadata Display – The back of the card automatically reads PGN fields and displays key game details:
  • Event
  • White Player
  • Black Player
• ⏳ Adjustable Timer on Front – A customizable timer bar at the top of the card:
  • Customizable color, size, and duration
  • Default: 60 seconds
  • Puzzle Disappears after the set time expires

---

🚀 Ready to level up your chess training? This tool makes studying more intuitive, efficient, and engaging!

Getting started

How to install:

👉 To stay informed of new releases, make sure to watch this repository's releases.

Customization

First Move Orientation

For both of the following lines changing flip=true to flip=false. should result in the first move of the PGN being the first move in the puzzle, as oppose to the default behaviour which is that the first moves plays automatically and you must then respond.

On BOTH front and back side:

    var flip = true;

Handicap

Changing the value of handicap in the following line will decide in the number of wrong moves you can make before the answer is shown. Note: Amount of wrong moves is equal to the value of handicap + 1.

	var handicap = 0;

Variation Randomization

Changing the value of randomLines will decide if variations in the PGN should be presented to you randomly or not. Note: If set to false, it will always show the first variation.

	var randomLines = true;

Accept Variations as Correct

Changing the value of acceptVariations will decide if side variations considered as correct or not. If those variations are accepted as correct, they will be played instead of the main variation. Note: Computer will still be able to play possible variations given in PGN file, randomLines should be changed to stop this.

	var acceptVariations = true;

Cross Compatability

I have verified compatability with Windows/Linux and Ankidroid, however cannot verify for IOS and MAC. This is a note template however, and does not rely on addons, so it should be compatable.

HELP!!! My weird screen can't display the entire board!!

There are values in the styling section that can modify the board size. If the board is too big for your screen, you can try reducing the following values. Start by redcucing the height value for both the body and iframe in the relevant section of your device: desktop, android, or iOS.

/* Styling for desktop devices */
body {
  height: 100vh;
  width: 100vw;
  /* removes wierd overflow issues on different devices */
  overflow: hidden
}

iframe {
  height: 100vh;
  width: 100vmin;
  border: 0
}

/* Styling for android devices */
.mobile iframe {
  height: 93vh;
  width: min(93vh ,97vmin)
}

.mobile body {
  height: 93vh;
}

/* Styling for iPad and iPhone devices */
.iphone .iframe, .ipad .iframe {
  height: 85vh;
  width: min(85vh ,97vmin)
}

.iphone .body, .ipad .body {
  height: 85vh;
}

Upgrading

The upgrade process is typically the same as the installation process explained in the previous section. However, when upgrading media files, it is important to fist delete them from your media folder and then sync. this will remove the old files from the anki servers and will allow each device to sync without issues.

resources used For this were:

ChessBoard js

https://chessboardjs.com/index.html

Chessground

https://github.com/ornicar/chessground

and the PGN viewer

https://github.com/mliebelt/PgnViewerJS

Auerswald Collection, 3500 tactics (PGN format)

http://gorgonian.weebly.com/pgn.html

chess.js

https://github.com/jhlywa/chess.js/blob/master/README.md

pgn-parser (much better than what I tried to write haha)

https://github.com/mliebelt/pgn-parser