Interaktive Schach-Elemente für HTML-Seiten: Taktik-Aufgaben

Übersicht über interaktive Elemente, um auf HTML-Seiten Schach-Aufgaben darzustellen. Für die besprochenen Elemente werden Einbau-Anleitungen und Probeseiten gezeigt.

walter

06 Feb. 2019

Taktik-Aufgabe ChessBase Schach Shredder HTML Taktik Chess Tempo pgn4web

Inhaltsverzeichnis

Einordnung des Artikels

Interaktive Schach-Elemente für HTML-Seiten: Übersicht
- Interaktive Schach-Elemente für HTML-Seiten: Taktik-Aufgaben
- Interaktive Schach-Elemente für HTML-Seiten: pgn-Viewer
- Interaktive Schach-Elemente für HTML-Seiten: Schach-Programm und Live-Übertragung von Schach-Turnieren

Übersicht über die besprochenen Widgets

Widget	Funktionalität
Shredder Chess Widget	3 tägliche Taktik-Aufgaben mit unterschiedlichem Schwierigkeitsgrad
pgn4web Widget	1 tägliche Taktik-Aufgabe mit hohem Schwierigkeitsgrad
Chess Tempo Widget	3 tägliche Taktik-Aufgaben mit unterschiedlichem Schwierigkeitsgrad
ChessBase Widget	Viele, einfache Taktik-Aufgaben

Shredder Chess: Widget für Taktik-Aufgaben

Das Widget von Shredder Chess liefert täglich drei neue Taktik-Aufgaben mit unterschiedlichem Schwierigkeitsgrad; bei einigen Aufgaben sind längere Zugfolgen einzugeben. Der Nutzer kann seine Züge direkt am Schachbrett ausführen und erhält eine Rückmeldung, ob

weitere Züge auszuführen sind,
die Lösung richtig oder falsch ist.

Weiter kann man sich einen Tip beziehungsweise die Lösung anzeigen lassen.

Eine Beschreibung und Anleitung findet man unter dem Link:

https://www.shredderchess.de/schach-news/shredder-news/schachaufgaben-webmaster.html

Der Einbau der Taktik-Aufgaben in eine HTML-Seite ist denkbar einfach: Es wird ein <iframe> -Element eingefügt, das sämtlichen Code enthält:

<iframe width="310" scrolling="no" height="341" frameborder="0" 
src="https://www.shredderchess.com/online/playshredder/
gdailytactics.php?mylang=de&mysize=32"></iframe>

Das <iframe> -Element wird an derjenigen Stelle im Quelltext plaziert, an der es sich befinden soll. Weitere Veränderungen an der HTML-Seite sind nicht nötig. Wie man am Quelltext erkennt (Zeile 2 und 3), wird der Inhalt von shredderchess.com geladen.

Es gibt 5 Größen für das <iframe> -Element von "winzig" (14 Pixel Figurengröße) bis "sehr groß" (32 Pixel), die sich in den Abmessungen width und height und der zugehörigen mysize unterscheiden. Alle 5 Code-Snippets können unter dem angegebenen Link kopiert werden. Beim Versuch eine eigene Größe festzulegen, wird eine default-Größe erzeugt.

Der Quelltext einer kompletten HTML-Seite könnte dann wie folgt aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Taktik-Aufgaben von Shredder Chess</title>
    </head>
    <body>
        <h1>Taktik-Aufgaben von Shredder Chess</h1>
        
        <iframe width="310" scrolling="no" height="341" frameborder="0" 
        src="https://www.shredderchess.com/online/playshredder/
        gdailytactics.php?mylang=de&mysize=32"></iframe>
        
</body>
</html>

pgn4web: Widget für Taktik-Aufgabe

Das Widget von pgn4web liefert täglich eine neue Taktik-Aufgabe, deren Schwierigkeitsgrad im Vergleich zu den anderen besprochenen Aufgaben eher hoch einzuschätzen ist. Es gibt keine Möglichkeit, selber Lösungen einzugeben, man kann lediglich die Hauptvariante abspielen. Aber so sollte man auch mit Taktik-Aufgaben umgehen: Erst die Lösung ansehen, wenn man sicher ist, dass man sie gefunden hat!

Eine ausführliche Erklärung findet man unter dem Link:

https://sourceforge.net/p/pgn4web/wiki/Example_Puzzler/

Intergation in eine HTML-Seite

Auf oben genannter Seite wird das iframe-Element angegeben, das man benötigt, um die Taktik-Aufgabe in eine HTML-Seite einzubinden – weitere Dateien müssen nicht geladen werden:

<iframe height='272' width='242' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' 
	src='http://pgn4web.casaschi.net/puzzler.php? pgnData=tactics.pgn&amp;gameNum=&amp;squareSize=30&amp;lightColorHex=EFF4EC&amp;darkColorHex=C6CEC3&amp;controlBackgroundColorHex=EFF4EC&amp;controlTextColorHex=888888&amp;frameBorderColorHex=A4A4A4'>
	iframe support required to display the chesss puzzler
</iframe>

Wie man erkennt, wird

die Größe des Rahmens festgelegt (height und width) und
eine .php-Datei von pgn4web.casaschi.net angefordert, an die weitere Parameter übergeben werden.

Insbesondere

kann die Größe der Figuren (Variable pieceFont) verändert werden; dann muss aber auch die Größe des Rahmens angepasst werden;
können die Farben der Felder, die in obiger Einstellung wenig Kontrast besitzen, verändert werden (Variable lightColorHex und darkColorHex).

Eine komplette HTML-Seite (mit vergrößertem Rahmen, frameborder='1' und veränderter darkColorHex) könnte dann wie folgt aussehen:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Taktik-Aufgabe von pgn4web</title>
	</head>
	<body>
		<h1>Taktik-Aufgabe von pgn4web</h1>

		<iframe height='358' width='322' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' 
			src='http://pgn4web.casaschi.net/puzzler.php?
			pgnData=tactics.pgn&gameNum=&squareSize=40&lightColorHex=EFF4EC&
			darkColorHex=f5c694&controlBackgroundColorHex=EFF4EC&controlTextColorHex=888888&
			frameBorderColorHex=A4A4A4'>
			iframe support required to display the chesss puzzler
		</iframe>

</body>
</html>

Chess Tempo: Widget für Taktik-Aufgaben

Das Widget von Chess Tempo liefert täglich drei neue Taktik-Aufgaben mit unterschiedlichem Schwierigkeitsgrad. Die Funktionalität ist wie beim Widget von Shredder Chess; zusätzlich können die Hauptvariante und einige Nebenvarianten angezeigt werden, durch die sich navigieren lässt. Der Schwierigkeitsgrad ist etwas höher als bei Shredder Chess.

Eine ausführliche Erklärung findet man unter dem Link:

https://de.chesstempo.com/widgets.html

Intergation in eine HTML-Seite

Das folgende Code-Snippet muss an der gewünschten Stelle im HTML-Quelltext plaziert werden:

<div id="puzzle">
    <div id="puzzle-container">
        <link id="puzzleCss" type="text/css" rel="stylesheet" href="https://chesstempo.com/css/dailypuzzle.css"/>
        <script type="text/javascript" src="https://chesstempo.com/js/dailypuzzle.js"></script>
        <script>
            new Puzzle({ pieceSize: 40});
        </script>
    </div>
    <a id="ct-link" href="https://chesstempo.com/play-chess-online.html">Schach online spielen</a>
</div>

Das Code-Snippet kann auf der genannten Website kopiert werden, wo sich auch weitere Erklärungen finden.

Zur Erklärung des Code-Snippets:

Zeile 3 und 4:

Damit ein Schachbrett mit den Taktik-Aufgaben dargestellt werden kann und man auf dem Schachbrett Züge ausführen kann, muss eine javascript-Datei geladen werden, die all diese Funktionalitäten bereitstellt. Dies geschieht in Zeile 3. Die Farben der Figuren, der Felder, der Beschriftung und so weiter sind im .css-File definiert, das in Zeile 4 geladen wird.

Diese beiden Zeilen schreibt man üblicherweise in den Kopf der HTML-Datei, sie können aber auch so wie oben verwendet werden.

Zeile 1 und 2:

Die beiden <div> -Elemente werden dort in die HTML-Seite eingebaut, wo später das Schachbrett zu sehen sein soll. In den <div> -Elementen wird jeweils eine id gesetzt. Ihr Name ist nicht frei wählbar, sondern muss puzzle und puzzle-container lauten; über die id wird die Verbindung zur javascript-Datei hergestellt.

Zeile 6:

Der Konstruktoraufruf new Puzzle({ pieceSize: 40}) erzeugt das Widget. Dabei wird der Wert der Variable pieceSize gesetzt; sie bestimmt die Figurengröße in Pixel.

Der default-Wert von pieceSize ist 20 und wurde hier auf 40 gesetzt. Möglich sind folgende Figurengrößen: 20, 24, 29, 35, 40, 46, 55, 65, 75, 85, 95, 105, 115, 125, 135, 145, 155, 165, 180, 200, 220, 240.

Zeile 9:

Erzeugt einen Link zu Chesstempo, der laut Lizenz verpflichtend ist (siehe unten).

Eine komplette HTML-Seite könnte dann aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Taktik-Aufgaben von Chess Tempo</title>
    </head>
    <body>
        <h1>Taktik-Aufgaben von Chess Tempo</h1>
        
        <div id="puzzle">
            <div id="puzzle-container">
                <link id="puzzleCss" type="text/css" rel="stylesheet" href="https://chesstempo.com/css/dailypuzzle.css"/>
                <script type="text/javascript" src="https://chesstempo.com/js/dailypuzzle.js"></script>
                <script>
                    new Puzzle({ pieceSize: 40});
                </script>
            </div>
            <a id="ct-link" href="https://chesstempo.com/play-chess-online.html">Schach online spielen</a>
        </div>
        
</body>
</html>

Lizenz

Zitat von Chess Tempo:

"Das Widget von Chess Tempo ermöglicht die Integration der Chess Tempo Funktionalität auf Deiner Webseite. Es ist kostenfrei für Sie. Deine Webseite gewinnt damit an Attraktivität für Deinen Nutzer, weil tägl. wechselnde Aufgaben angezeigt werden.

Chess Tempo Widgets are licensed under a Creative Commons License. You are able to use the widget for free on your non-commercial web site on the condition that you place a visible link to https://chesstempo.com on the page(s) where you are using the widget. In most cases, this link is included in the sample widget HTML provided."

ChessBase: Widget für Taktik-Aufgaben

Das Widget lädt einfache Taktik-Aufgaben, deren Lösung man direkt am Schachbrett eingibt. Man erhält eine Rückmeldung, ob der Zug richtig ist, ob eine Fortsetzung einzugeben ist oder ob die Aufgabe gelöst ist.

Eine Erklärung, wie man das Widget in eine HTML-Seite einbaut, findet sich unter

https://www.schach.de/HowTo/EmbedTactics

Das Widget kann an der gewünschten Stelle mit einer Zeile Quelltext als <iframe> -Element in eine HTML-Seite eingebunden werden:

<iframe src="https://livetactics.chessbase.com" width="400" height="440"></iframe>

Die Größe kann man selber festlegen, das Widget wird dann entsprechend skaliert; man sollte dabei aber das Verhältnis von Höhe zu Breite nicht verändern.

Die Aufgaben werden vom Server von ChessBase geladen. Versucht man schwierigere Aufgaben zu laden, wird man aufgefordert einen ChessBase Account anzulegen.

Eine komplette HTML-Seite könnte dann aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Taktik-Aufgaben von ChessBase</title>
    </head>
    <body>
        <h1>Taktik-Aufgaben von ChessBase</h1>
        
        <iframe src="https://livetactics.chessbase.com" width="400" height="440"></iframe>
        
</body>
</html>