ChessDeck — Handleiding

1. Wat is ChessDeck?

ChessDeck is een lichtgewicht presentatie-tool voor schaaklessen. Je schrijft je les in een gewoon .md-bestand (Markdown) en de app rendert dat als een reeks slides met interactieve schaakborden. Je hebt geen account nodig, geen internetverbinding, en geen server — alles draait in je browser.

De app bestaat uit drie pagina's:

• Viewer (index.html) — een .md-bestand openen en presenteren.
• Editor (editor.html) — een les schrijven met live voorbeeld.
• Thema-studio (themes.html) — eigen thema's ontwerpen.

2. Snel aan de slag

1. Open index.html in je browser.
2. Klik op Kies .md bestand of sleep een .md-bestand op het venster.
3. Navigeer met de knoppen « Begin, ‹ Vorige, Volgende › en Einde », of met de pijltjestoetsen. Typ een getal in het slidenummer-veld om direct naar een bepaalde slide te springen.
4. Klik op Presentatie ▶ voor volledig scherm.

Wil je zelf een les schrijven? Ga naar de Editor via de link rechtsboven.

3. Markdown-basis

Markdown is een eenvoudige manier om tekst op te maken zonder een tekstverwerker te gebruiken. Een paar voorbeelden:

# Grote kop
## Kleinere kop
### Nog kleiner

**vette tekst** en *schuine tekst*

- Lijst-item
- Nog een item
- En nog een

1. Genummerde lijst
2. Tweede punt

Een [link naar lichess](https://lichess.org).

`inline code`

ChessDeck gebruikt standaard Markdown, uitgebreid met FEN-blokken voor schaakborden.

4. Slides scheiden

Een nieuwe slide begint bij een regel die alléén uit drie streepjes bestaat (---), met een lege regel ervoor:

Inhoud van slide 1.

---

Inhoud van slide 2.

---

Inhoud van slide 3.

5. Titel-slide (frontmatter)

Bovenaan je bestand kun je optioneel een blok met les-info zetten. Dit heet frontmatter en wordt automatisch omgezet in een mooie openings-slide:

---
title: Openingsprincipes
subtitle: Voor beginners
author: Trainer Piet
level: Niveau 1
date: 2026
theme: schaakmaarraak
---

# Slide 1 van je les
...

Alle velden zijn optioneel. Alleen als je title of author invult, wordt er een titel-slide vóór je eerste slide gezet.

6. Schaakborden, partijen en puzzels

Je zet een schaakstelling op een slide door een FEN-code in een codeblok te plakken met de taal fen:

```fen
rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1
```

Het bord wordt volledig interactief: je kunt de stukken slepen, en illegale zetten worden geweigerd (de app gebruikt de chess.js-bibliotheek om zetten te valideren).

FEN-codes vinden

Op deze sites kun je een stelling opzetten en de FEN kopiëren:

• lichess.org/editor
• chess.com/analysis

Bord vanuit zwart bekijken

Gebruik fen-black in plaats van fen om het bord vanuit zwart te tonen:

```fen-black
r1bqkbnr/pppp1ppp/2n5/4p3/2B1P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3
```

De taal fen-white is hetzelfde als gewoon fen.

Draaien tijdens de les. Onder elk bord staat een klein knopje ⟲ waarmee je het bord ter plekke omdraait — handig als een leerling vraagt hoe de stelling er vanaf de andere kant uitziet. Dat draaien is tijdelijk: ga je naar een andere slide en kom je terug, dan staat het bord weer zoals jij het geschreven hebt. Ook de PDF-export volgt altijd de geschreven oriëntatie.

Wil je dat een bord altijd vanuit zwart begint, gebruik dan fen-black (of bij puzzels orientation: black). Kort gezegd: fen-black bepaalt hoe het bord start, het knopje is voor een blik tussendoor.

Bord vergroten

Naast ⟲ en ✕ staat een derde knopje: ⤢. Die toont hetzelfde bord groot in een venster over de slide heen — handig op een projector, waar een bord anders klein oogt binnen het geheel van het scherm. Het is hetzelfde bord, geen kopie: alles wat erop staat (stukken, markeringen) blijft precies zoals het was, en bij een partij blijven de zettenlijst en de bedieningsknoppen gewoon werken. Sluiten kan met de ✕ rechtsboven, met Esc, of door ernaast te klikken. Zolang dit venster open staat, springt de presentatie niet naar de volgende slide als je toevallig een pijltjestoets of de spatiebalk raakt. Puzzelborden hebben dit knopje niet.

Partij doorbladeren (PGN)

Met de taal pgn zet je een complete partij op een slide waar je met knopjes doorheen bladert:

```pgn
title: Onsterfelijke partij
1. e4 e5 2. Bc4 Nc6 3. Qh5 Nf6 4. Qxf7#
```

Je mag een hele PGN plakken zoals je die van lichess.org of chess.com downloadt, inclusief de headers tussen blokhaken. Commentaar tussen { }, varianten tussen ( ), klok- en evaluatie-annotaties en het resultaat aan het eind worden overgeslagen — je hoeft niets op te schonen.

Begint de partij niet bij de beginstelling (bijvoorbeeld een studie), dan volstaat een FEN-header in de PGN; de zetnummering begint dan automatisch op het juiste nummer.

Twee optionele regels bovenaan het blok:

• title — eigen bijschrift boven het bord. Laat je die weg, dan worden de spelersnamen uit de PGN-header gebruikt.
• orientation — white (standaard) of black.

Bedienen. Onder het bord staan ⏮ ◀ ▶ ⏭ en het ⟲-knopje om te draaien. In de zettenlijst is elke zet aanklikbaar: zo spring je direct naar een stelling zonder heen en weer te bladeren. De zetten staan in Nederlandse notatie, ook al schrijf je de PGN in het Engels.

Klik je het bord aan, dan sturen de pijltjestoetsen de partij in plaats van de presentatie. Zolang dat zo is, staat er een randje om de viewer. Ben je bij de laatste zet, dan gaat nóg een keer → gewoon door naar de volgende slide — de presentatie loopt dus nooit vast op een partijslide.

In de PDF-export kun je uiteraard niet bladeren: daar komt de beginstelling met de volledige zettenlijst eronder, zodat de lezer de partij zelf kan naspelen.

Interactieve puzzel

Met de taal puzzle maak je een echte puzzel waar de student zetten mag doen. Correct = groene status en app speelt de antwoordzet; fout = snapback en rode status.

```puzzle
fen: r1bqkb1r/pppp1ppp/2n2n2/4p2Q/2B1P3/8/PPPP1PPP/RNB1K1NR w KQkq - 4 4
orientation: white
solution: Qxf7#
hint: Kijk naar het zwakste veld rond de zwarte koning.
```

Velden:

• fen — startpositie (verplicht).
• orientation — white of black; wie aan zet is.
• solution — SAN-zetten in Engelse notatie (Nf3, d8=Q), gescheiden door spaties. Weergave gaat automatisch naar Nederlands (Pf3, d8=D).
• hint — optionele tip, verschijnt wanneer de student op de Hint-knop klikt.

Meerzet-puzzels: student speelt de oneven-index zetten, de app speelt automatisch de even-index als tegenzet. Voorbeeld: solution: Bxf7+ Ke7 Qxe5+ — student slaat op f7 met check, app speelt Ke7, student slaat op e5.

Promotie. Sleept de student een pion naar de achterste rij, dan verschijnt een keuzevenster met Dame, Toren, Loper en Paard. Onderpromotie werkt dus gewoon: een puzzel met solution: d8=N+ is prima. Kiezen kan met de muis, met de pijltjestoetsen plus Enter, of direct met de Nederlandse stukletter (D, T, L, P). Met Esc of een klik ernaast draai je de zet terug. Let op: in solution schrijf je de Engelse letter (=N, niet =P).

Sprekersnotitie

Met de taal note zet je een aantekening bij een slide die alleen voor jezelf bedoeld is:

```note
Vraag eerst: waarom is Lxf7+ hier fout?
```

Deze tekst verschijnt nergens — niet in de editor-preview, niet tijdens het presenteren. Hij komt alleen tevoorschijn op de aparte notitiepagina's die je afdrukt, zie hoofdstuk 14, Afdrukken / PDF.

7. Kleuren, markeringen en pijlen

Je kunt velden inkleuren, er cirkels omheen zetten en pijlen tussen velden trekken. Dat kan op twee manieren, en die twee staan los van elkaar:

• Vooraf, door het in je .md-bestand te typen. Deze markeringen horen bij de les: ze komen terug als je terugbladert en ze gaan mee in de PDF.
• Tijdens de les, met de rechtermuisknop op het bord. Wat je zo tekent is een aanwijsgebaar: bij de volgende slide is het weg, en het komt niet in de PDF.

De vier kleuren en wat ze betekenen

De kleuren hebben een vaste betekenis, volgens de afspraak van de Stappenmethode. De winst zit erin dat groen overal hetzelfde betekent, dus ze zijn niet per thema aan te passen. Het DemoBord gebruikt precies dezelfde vier.

Vooraf: markeringen in je bestand

Onder de FEN zet je een of meer van deze drie regels. Alle drie zijn optioneel; een blok zonder deze regels werkt precies als altijd.

```fen
r1bqkb1r/pppp1ppp/2n2n2/4p2Q/2B1P3/8/PPPP1PPP/RNB1K1NR w KQkq - 4 4
squares: f7 red, e5 green
circles: c4 green
arrows: h5-f7 red, c4-f7 yellow
```

• squares — kleurt het veld helemaal in.
• circles — zet een ring om het veld.
• arrows — trekt een pijl van het ene veld naar het andere, geschreven als van-naar.

Meerdere items op één regel scheid je met een komma. De kleur zet je achter het veld, met een spatie ertussen. Laat je de kleur weg, dan wordt het groen — circles: e4 is dus een groene cirkel om e4.

Dit werkt in fen-, fen-black- en puzzle-blokken. Bij een puzzel zet je de regels tussen de andere velden, net als hint. Handig om bij de eerste puzzel van een reeks een zetje te geven en daarna niet meer — al verklap je er natuurlijk snel de oplossing mee.

Bij een pgn-blok kan het bewust niet: in een partij verandert de stelling bij elke zet, en een pijl die bij zet 1 klopt staat bij zet 20 onzin te wezen. Wil je in een partij iets aanwijzen, dan doe je dat live met de muis, of je zet er een los fen-blok naast met precies die stelling.

Typefouten worden overgeslagen. Schrijf je e9 of paars, dan vervalt alleen dat ene item — de rest van het diagram tekent gewoon. Zie je een markering niet verschijnen, controleer dan de veldnaam en de kleurnaam.

Tijdens de les: tekenen met de muis

Op elk bord — stelling, puzzel én partij — kun je met de rechtermuisknop tekenen:

• Rechtsklik op een veld — cirkel eromheen.
• Rechts slepen van veld naar veld — pijl. Tijdens het slepen zie je alvast een doorzichtige voorbeeldpijl.
• Dezelfde markering nog eens — hij verdwijnt weer.
• Dezelfde markering in een andere kleur — hij blijft staan en wisselt van kleur.

Houd een toets ingedrukt voor een andere kleur. Dat mag ook halverwege het slepen; de pijl verandert dan direct mee.

Stukken slepen doe je gewoon met de linkermuisknop; dat verandert niet. Laat je de rechterknop buiten het bord los, dan gebeurt er niets — je markeringen blijven staan.

Live tekenen geeft cirkels en pijlen, geen gekleurde vlakken. Een veld helemaal inkleuren (squares:) kan alleen vooraf, in je bestand. Dat is een bewuste keuze: de linkermuisknop is bezet voor het slepen van stukken, en elke andere manier om het erbij te proppen — een extra knopje, een extra toets — werkt tegen je tijdens het lesgeven. Wil je tijdens de uitleg een veld benadrukken, zet er dan een cirkel omheen.

Markeringen die je vooraf hebt ingetypt mag je tijdens de les gerust wegklikken: behandel ze als een beginstand waar je overheen werkt. Bij de volgende slide en bij terugbladeren staan ze er weer, want ChessDeck bouwt elke slide opnieuw op uit je bestand.

Alles in één keer wissen

Naast het ⟲-knopje onder het bord staat een ✕-knopje. Dat zet het bord in één klik terug naar de stand zoals hij in je bestand staat:

• Alles wat je tijdens de les zelf tekende gaat weg.
• Markeringen uit je bestand komen terug — ook die je onderweg had weggeklikt.

Op een bord zonder markeringen in het bestand betekent dat gewoon: schoon bord. Het knopje is grijs zolang er niets te wissen valt, en licht op zodra je iets getekend of weggeklikt hebt.

Wil je juist één losse markering kwijt, klik hem dan met de rechtermuisknop nog eens aan — dat blijft de manier voor precisiewerk. Het ✕-knopje is er voor het moment waarop je met een schone lei verder wilt zonder je uitleg te onderbreken.

Alleen met de muis of het trackpad, niet met een vinger op een aanraakscherm.

In de PDF

Markeringen uit je bestand gaan mee in de export en worden als vectortekening afgedrukt, dus ze blijven scherp op elk formaat. Wat je live hebt getekend gaat niet mee — de export leest je bestand, niet het scherm.

Print je vanuit de browser en zie je de kleurvlakken niet, zet dan achtergrondafbeeldingen of achtergrondkleuren aan in het printvenster.

8. Meerdere borden op één slide

Zet je twee of meer FEN-blokken op één slide, dan worden ze automatisch naast elkaar geplaatst. Handig om stellingen te vergelijken:

### Toreneindspel

```fen
4k3/8/8/8/8/8/8/R3K3 w Q - 0 1
```

### Loper en Paard mat

```fen
4k3/8/8/8/8/8/8/2B1KN2 w - - 0 1
```

De kop (###) direct vóór een bord blijft eraan gekoppeld en verschuift mee.

9. Layouts (split, title)

Je kunt per slide een andere indeling kiezen door een HTML-commentaar bovenaan de slide te zetten (direct na de ---):

split — tekst links, bord rechts

Het bord, de partij (pgn) of de puzzel gaat naar de rechterkolom; al je tekst blijft links.

<!-- layout: split -->

# Slide-titel

Uitleg-tekst komt hier links te staan.

```fen
r1bqkbnr/pppp1ppp/2n5/4p3/2B1P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3
```

split-reverse — bord links, tekst rechts

Zelfde als split maar dan gespiegeld:

<!-- layout: split-reverse -->

title — grote titel-slide midden op het scherm

<!-- layout: title -->

# Deel 2

## Nieuwe titel-slide tussen hoofdstukken

Uitlijning van kop, tekst of afbeelding

Naast de slide-brede layouts kun je binnen een slide één blok anders uitlijnen met <!-- align: ... -->. Wat op de eerstvolgende regel staat wordt uitgelijnd — een kop, een zin of een afbeelding.

<!-- align: center -->
# Openingsprincipes

Waardes: left, center, right.

Afbeelding-formaat

Standaard komt een afbeelding op zijn natuurlijke pixelgrootte binnen. Voor breedte-controle: <!-- image: width=... --> op de regel vóór de afbeelding.

<!-- image: width=300 -->
![diagram](pad-of-URL)

De waarde mag pixels zijn (300), een percentage van de slide-breedte (50%) of andere CSS-eenheden (10em).

Combineren met uitlijning: zet align als eerst, dan image, dan de afbeelding:

<!-- align: center -->
<!-- image: width=400 -->
![diagram](pad)

10. Thema's

De app heeft vijf ingebouwde thema's:

• Schaak maar raak — het huisstijl-thema (standaard).
• Klassiek — rustig serif-thema in warme tinten.
• Modern — strak en zakelijk, blauwe accenten.
• Kinderlijk — vrolijk en kleurrijk voor jeugdlessen.
• Zwart-wit — minimalistisch en print-vriendelijk.

Je kiest een thema via het uitklapmenu bovenin. De keuze wordt automatisch in de frontmatter van je les bewaard — kies je vandaag "Modern", opent morgen dezelfde les in "Modern".

11. Thema-studio

Via de link 🎨 Thema-studio rechtsboven kun je eigen thema's ontwerpen. Je stelt kleuren, lettertype en bord-kleuren in en klikt op Thema opslaan. Je thema verschijnt daarna in de dropdown onder "Eigen thema's" en je kunt het gebruiken via theme: naam in de les-info.

Bij Thema opslaan gebeuren twee dingen tegelijk: het thema wordt beschikbaar in deze browser, en er wordt automatisch een backup-bestand naar je Downloads gezet. Zo raak je nooit werk kwijt als je browser-opslag wordt gewist of je overstapt naar een ander apparaat.

Met Thema inladen kun je een eerder gedownload of ontvangen thema-bestand terugzetten in de studio. Het thema wordt meteen actief onder zijn naam, klaar om te gebruiken.

12. Editor

De ingebouwde editor (link rechtsboven: ✎ Editor) is de makkelijkste manier om een les te maken. Je krijgt:

• Een tekstveld links om je Markdown te typen.
• Een live voorbeeld rechts dat direct meerendert.
• Knoppen om je les te downloaden als .md-bestand of te openen in de viewer.

Terwijl je typt wordt je werk automatisch bewaard zolang je tabblad open blijft — ook na een tussentijdse pagina-refresh. Klap je de laptop dicht, plak je op een schoolcomputer, wandel je weg zonder af te sluiten: als het tabblad sluit is de content weg. Dit is opzettelijk: zo blijft er op een gedeeld apparaat (school, bibliotheek) geen les-content achter voor de volgende gebruiker.

13. Presenteren

Klik op Presentatie ▶ (of druk op P, of dubbelklik op de slide) om volledig scherm te gaan. Op iOS werkt volledig scherm via een pseudo-fullscreen (de browser-balken blijven, maar de app vult wel het scherm). Sluiten kan met de ✕ Sluiten-knop of Esc.

Op een tablet of telefoon kun je vegen: naar links = volgende slide, naar rechts = vorige.

14. Afdrukken / PDF

Met de knop 🖶 PDF kun je alle slides afdrukken of opslaan als PDF. Elke slide komt op een eigen A4-pagina (liggend formaat).

Voor het afdrukken worden de interactieve borden vervangen door statische borden (afbeeldingen), zodat de stukken op de juiste plek staan in de PDF. Dit gebeurt automatisch.

Bij een puzzel komt de startstelling op papier met de oplossing eronder. Bij een pgn-blok kun je niet bladeren, dus daar verschijnt de beginstelling met de volledige zettenlijst in Nederlandse notatie — genoeg om de partij zelf na te spelen.

Notitiepagina's

Naast de knop 🖶 PDF staat 🖶 Notities. Die drukt geen volledige slides af, maar een compact overzicht op staand papier: links een vaste 95×65mm-miniatuur van elke slide, rechts ernaast de tekst uit het bijbehorende note-blok (zie hoofdstuk 6). Er passen zo minstens vier rijen op één A4'tje. Handig als geheugensteuntje voor jezelf tijdens de les, zonder dat de klas — die naar hetzelfde scherm kijkt als jij — er iets van ziet.

Elke slide krijgt een rij — ook de titelslide en slides zonder note-blok (die laatste met een lege rechterkolom). Het rijnummer is hetzelfde nummer als je in de gewone viewer ziet, dus "slide 3" op je scherm is ook rij 3 op papier.

De miniatuur heeft een vaste grootte, zodat alle kaartjes er gelijk uitzien — past een slide met veel tekst én een bord daar niet helemaal in, dan wordt de miniatuur onderaan afgesneden. De notitie ernaast is niet aan die grootte gebonden en blijft altijd volledig leesbaar. Bij een lange notitie wordt alleen de rij hoger, niet de miniatuur.

Deze knop drukt altijd staand af — dat kun je hier niet wijzigen, in tegenstelling tot bij de gewone PDF-knop. De indeling is voor staand papier uitgerekend.

15. Sneltoetsen

16. Tips & beperkingen

• Zetten worden niet bewaard. Sleep je een stuk op het bord tijdens de les, dan verdwijnt die zet zodra je naar de volgende slide gaat en terug. De borden dienen als demonstratie, niet als partij-recorder.
• Annotatietekens verdwijnen uit de zettenlijst. Schrijf je in een PGN 3. Bb5! of 2... Nf6?, dan toont de zettenlijst 3. Lb5 zonder het uitroep- of vraagteken. De zetten zelf kloppen; alleen de waardering valt weg.
• Ongeldige FEN? Dan toont het bord de tekst "Ongeldige FEN: …" in plaats van een stelling. Controleer de FEN op lichess.org/analysis.
• HTML in slides wordt gefilterd om je veilig te houden. Ingebedde <script>, <iframe>, <style> en on…-attributen worden verwijderd.
• Alles blijft lokaal. Er wordt niets naar een server gestuurd. Je .md-bestanden, eigen thema's en drafts staan alleen in jouw browser.