Scripts For Your Blog/Website
You can use the Puzzle and games Scripts free of charge for your own Website. This page explains how to do this.
Attention!
Because of very low interest – almost no one but me uses the scripts – this page will not be updated anymore. If you are interested, please contact me via email.
You have two options: You can copy the scripts to your Website or Blog or you can use the scripts from www.janko.at.
In either case you need two files or links to these files:
The first file is the same for all puzzles and games; the second file is specific to the puzzle or game; e.g.
Which puzzle/game specific file you need is documented in the list of puzzle and game scripts.
However, you must create a HTML file which looks like this:
<!DOCTYPE HTML>
<html>
<head> <script src="https://www.janko.at/Scripts/js/Puzzle.js"</script> <script src="https://www.janko.at/Scripts/js/Fillomino.js"</script> </head>
<body>
<script id="data" type="application/x-janko">
begin unit 30 size 10 problem 3 6 1 7 3 - - 3 1 - - - - - - - - - 2 - - 1 - - - - - 4 1 - - 6 - - - - - - - - - 7 - - 4 6 - 1 2 - - 1 4 - 7 6 - - 3 - - - - - - - - - 2 - - 3 2 - - - - - 3 - - 1 - - - - - - - - - 6 4 - - 2 1 3 4 4 solution 3 6 1 7 3 2 3 3 1 - 3 6 6 7 3 2 3 2 2 3 3 1 6 7 3 4 6 4 1 3 2 6 6 7 4 4 6 4 4 4 2 7 7 7 4 6 6 1 2 2 6 1 4 4 7 6 3 3 3 1 6 3 3 4 7 6 7 2 2 3 6 3 2 4 7 7 7 7 3 3 6 1 2 1 4 2 3 3 4 4 6 6 4 4 4 2 1 3 4 4 end
</script>
<script>new Fillomino().run("data");</script>
</body>
</html>
The puzzle data are embedded within the HTML as a custom script (this is a standard conform method according to the W3C).
You can use any ID for the puzzle data (red). You can embed several puzzles in one page using different IDs. You must change the path specifications (blue) if you copy the files to your own website.
The format of the puzzle definition is similar for all scripts but differs in detail. A formal description of the puzzle data is t .b. d.
You can specify several puzzles at once:
<script id="data" type="application/x-janko">
begin ... end
begin ... end
...
</script>
<script>new Fillomino().run("data");</script>
In this case some additional buttons are displayed to navigate between the puzzles (»previous puzzle«, »next puzzle« and »select puzzle by number«).
Click on a column header to sort the table.
1) Sudoku includes several variants: Standard-Sudoku of any size with none, regular or irregular regions, diagonals, Kropki, Greater-Than, Odd-Even, Consecutive. There are several predefined layouts: Single, Gattai-2, Gattai-3, Samurai, Sumo, Flower, Butterfly. Other layouts can be customized.
There are five areas for customization:
In general, configuration of a script may look like this:
<script id="data" type="application/x-janko"> begin ... end </script>
<script>
var p = new Fillomino();
p.enable.solution = false;
p.run("data");
</script>
The blue line is an example for one of the many settings; in particular this setting disables the »show solution« function. For a description see the List of all configuration params.
If you need the same configuration many times, e.g. to translate all strings to a language not supported from stock, you should provide the configuration in a separate script file:
<!DOCTYPE HTML>
<html>
<head> <script src="Customize.js" type="text/javascript"></script> <script src="https://www.janko.at/Scripts/js/Puzzle.js" type="text/javascript"></script> <script src="https://www.janko.at/Scripts/js/Fillomino.js" type="text/javascript"></script> </head>
<body>
<script id="data" type="application/x-janko"> begin ... end </script>
<script>
var p = new Fillomino();
customize(p);
p.run("data");
</script>
</body>
</html>
The script file Customize.js may look like this:
function customize (p)
{
if (!p) return;
p.enable.solution = false;
p.uic.canvas = "#bbbbbb"; p.uic.text = "#aaaa33";
p.ius.author = "?втор"; p.ius.source = "И?точник"; p.ius.title = "?азвание"; p.ius.size = "Размер"; }
The format of a function switch is:
var p = new(puzzle);
p.enable.function = true | false;
...
p.run();
puzzle is the specific puzzle program (e.g. Fillomino, Akari); function is one of the values in the following tables:
| Function | Default | Description |
|---|---|---|
| loadsave | false | the user can load and save a game state from/on the server (must be supported by the server) |
| undoredo | true | the user can undo/redo moves |
| zoom | true | the user can zoom the diagram |
| check | true | the user can check the current game state and mark all errors |
| solution | true | the user can display the solution |
| hint | true | the user can request a hint |
The colors used by the script can be customized to meet the design of the Web page in which the puzzle/game is embedded. The format of a color specification is as follows:
var p = new(puzzle);
p.uic.color = "#rrggbb";
...
p.run();
puzzle is the the name if the puzzle/game (e.g. Fillomino, Akari)
rr is the red value (00~FF),
gg is the green value (00~FF) and
bb
is the blue value (00~FF).
color is one of the values specified in the following table:
| Global Use | ||
|---|---|---|
| Color | Standard | Description |
| toolbarPanel | #cccccc |
background of the toolbar |
| toolbarText | #000000 |
text in the toolbar |
| messagePanel | #cccccc |
background of the message line |
| messageText | #000000 |
text of the message line |
| infoPanel | #eeeeee |
background of the info line below the toolbar |
| infoText | #000000 |
text of the info line below the toolbar |
| canvas | #eeeeee |
background of the unsolved diagram |
| solved | #33cc33 |
background of the solved diagram |
| label | #eeeeee |
text of label cells around the diagram |
| edge | #000000 |
border of the diagram |
| wall | #000000 |
border of regions inside of the diagrams |
| grid | #aaaaaa |
grid lines |
| text | #000000 |
values entered by the user in white cells |
| text2 | #ffffff |
values entered by the user in black cells |
| clue | #3333ff |
given values in white cells |
| clue2 | #ccccff |
given values in dark cells |
| cursor | #ff0000 |
cursor frame |
| error | #ff0000 |
error markers |
| smarkers | #776655 |
symbol markers |
| vmarkers | #660000 |
value markers |
| ... | ... | ... |
| Specific Use | ||
| Color | Standard | Description |
| white | #ffffff |
background of white cells |
| gray | #dddddd |
background of gray cells |
| black | #333333 |
background of black cells |
| cross | #666666 |
crosses in cells |
| line | #aaaaaa |
lines through cells |
Note: The color #414243 must not be used!
Each script comes with built-in icons. If you want to provide your own icons you must specify these as follows:
var p = new(puzzle);
p.icons.id = "url";
...
p.run();
url is the URL of the icon file or a data-URL, e.g.
p.icons.save = "save.gif";
p.icons.save = "https://domain/icons/save.png";
p.icons.save = "data:image/png;base64,iVBORw0KGgoAAAANSUh...";
Data-URLs are preferable because of better performance (no additional http round trips).
id is one of the following id-values:
| id | Icon | Description |
|---|---|---|
| prev |  |
previous puzzle |
| next | |
next puzzle |
| reset | |
reset puzzle |
| load | |
load game state |
| save | |
save game state |
| undoall | |
undo all moves |
| undo | |
undo one move |
| redo | |
redo one move |
| redoall | |
redo all moves |
| cmarker | |
color markers |
| smarker | |
symbol markers |
| vmarker | |
value markers |
| hint | |
show a hint |
| solution | |
show the solution |
| check | |
check solution |
| zoom | |
zoom diagram |
| tilt | |
tilt on/off |
| info | |
info and feedback |
The scripts contain user interface strings in English, German, French and Italian. The language actually used depends on the preferred content language defined in the browser used. If the preferred language if not supported, English is used.
You may define the user interface strings for a language not supported from stock as follows:
var p = new(puzzle);
p.cc[n] = "cc";
p.id[n] = "string";
...
p.run();
n is a number >= 10 (0~9 is reserved for languages supported from stock).
cc is the ISO Language Code of the language to be defined. For example, to define a Russian translation:
var p = new(puzzle);
var n = 10;
p.cc[n] = "ru";
p.author[n] = "?втор";
...
p.run();
User interface strings in English, German, French and Italian:
| id | Englisch | Deutsch | Französisch | Italienisch |
|---|---|---|---|---|
| cc | en | de | fr | it |
| puzzle | Puzzle | Rätsel | Enigme | Enigma |
| author | Author | Autor | Createur | Autore |
| source | Source | Quelle | Origine | Origine |
| title | Title | Titel | Titre | Titulo |
| size | Size | Größe | Dimension | Dimensioni |
| score | Score | Punkte | Score | Punteggio |
| moves | Moves | Züge | Coups | Mosse |
| level | Level | Level | Niveau | Livello |
| error | Error | Fehler | Erreur | Errori |
| numbers | Numbers | Zahlen | Nombres | Numeri |
| letters | Letters | Buchstaben | Lettres | Lettre |
| yes | Yes | Ja | Oui | Si |
| no | No | Nein | Non | No |
| accept | Accept | Annehmen | Accepter | Accetta |
| reject | Reject | Ablehnen | Rejeter | Rifiuta |
| remove | Remove | Entfernen | Enlever | Eliminare |
| cancel | Cancel | Abbrechen | Annuler | Cancella |
| close | Close | Schließen | Fermer | Chiudi |
| start | Start | Start | Commencer | Apri |
| auto | Auto | Auto | ||
| server | Server | Server | Serveur | Server |
| local | Local | Lokal | Local | Locale |
| load | Save | Speichern | ||
| save | Load | Laden | ||
| zoom | Zoom | Zoom | ||
| color0 | Default | Standard | Standard | Predefinito |
| color1 | Red | Rot | Rouge | Rosso |
| color2 | Green | Grün | Vert | Verde |
| color3 | Blue | Blau | Bleu | Blu |
| color4 | Yellow | Gelb | Jaune | Giallo |
| color5 | Magenta | Magenta | Magenta | Magenta |
| color6 | Cyan | Cyan | Cyan | Azurro |
| color7 | Orange | Orange | Orange | Arancione |
| color8 | Violet | Violett | Violet | Viola |
| color9 | Lemon | Lemon | Lemon | Limone |
| id | cc | Text |
|---|---|---|
| nocanvas | en | HTML5 Canvas is not supported. Please use a more modern browser. |
| de | HTML5 Canvas ist nicht unterstützt. Bitte verwenden sie einen moderneren Browser. | |
| fr | ||
| it | ||
| nodata | en | No puzzle data. Please contact the Webmaster. |
| de | Keine Rätseldaten. Bitte wenden Sie sich an den Webmaster. | |
| fr | ||
| it | ||
| solved | en | Congratulations: You solved the puzzle |
| de | Gratulation: Sie haben das Rätsel gelöst | |
| fr | Félicitations: Vous avez résolu le Enigme | |
| it | Congratulazioni: Hai risolto il puzzle | |
| saving | en | Saving the game status... |
| de | Spielstand speichern... | |
| fr | Sauver le situation du jeu... | |
| it | Salvare la situazione di puzzle... | |
| saved | en | Game status saved for 10 days |
| de | Spielstand für 10 Tage gespeichert | |
| fr | Situation du jeu est sauvée dans 10 jours | |
| it | Ubicazione del puzzle è salvato per 10 giorni | |
| notsaved | en | Error: Game status not saved |
| de | Fehler: Spielstand nicht gespeichert | |
| fr | Erreur: Situation du jeu ne peut pas être écrit correctement | |
| it | Errori: Il ubicazione del puzzle non potrebbe essere scritta | |
| loading | en | Loading the game status... |
| de | Spielstand laden... | |
| fr | Chargement le situation du jeu... | |
| it | Caricamento del ubicazione del puzzle... | |
| loaded | en | Game status loaded |
| de | Spielstand geladen | |
| fr | Situation du jeu chargée correctement | |
| it | Ubicazione del puzzle è stato caricato correttamente | |
| notloaded | en | Error: Game status not loaded |
| de | Fehler: Spielstand nicht geladen | |
| fr | Erreur: Situation du jeu ne peut pas être lu | |
| it | Errori: Ubicazione del puzzle non può essere riprodotto | |
| solving | en | Searching for solutions... |
| de | Suche nach Lösungen... | |
| fr | La recherche de solutione... | |
| it | Ricerca di soluzioni... | |
| nosol | en | No solution found |
| de | Keine Lösung gefunden | |
| fr | Aucune solution trouvée | |
| it | Nessuna soluzione trovata | |
| onesol | en | Unique solution found |
| de | Eindeutige Lösung gefunden | |
| fr | Unique solution trouvée | |
| it | Unica soluzione trovata | |
| manysol | en | Several solutions found |
| de | Mehrere Lösungen gefunden | |
| fr | Plusieurs solutions trouvées | |
| it | Diverse soluzioni trovate |
There are more configuration params:
var p = new(puzzle);
p.config.id = "zeichenfolge";
...
p.run();
id is one of the values from the following table:
| id | Standard | Beschreibung |
|---|---|---|
| appid | "oj-" | Prefix for all CSS IDs used for script-created HTML elements. If a script is invoked more than once in a single HTML file each invocation must use a different CSS ID. |
| cookie | "oj-" | Prefix for the names of all cookies used by the scripts; e.g. to store the user's name or the user's mail address. |
All scripts can communicate with the Web server; i.e. send information to the server and read answers from the server. This must be supported by the Web server by custom scripts.
Features which need support by the Web servers are:
The server script should be prepared to handle (i.e. ignore) new features in future versions of the scripts.
To enable server support a script on the server must be provided by the Webmaster. The name of this script must be specified by config params:
| id | Standard | Beschreibung |
|---|---|---|
| mailScript | null | is invoked if the user hits the SEND button in the info page |
| timingScript | null | is invoked when a puzzle has been solved |
| loadsaveScript | null | Zuständig für das sichern und Wiederherstellen von Spielständen auf dem Server |
| solutionScript | null | Wird aufgerufen, wenn ein Anwender eine Lösung gefunden hat, die nicht mit der vordefinierten Lösung übereinstimmt (in den meisten Fällen ist dies eine unerwünschte Zweitlösung) |
| exceptionScript | null | Wird aufgerufen, wenn im Script ein Fehler aufgetreten ist (zwecks Diagnose) |
Example:
var p = new(puzzle);
p.config.timingScript = "https://my.server.tld/timing.php";
...
p.run();
Note that the pid (puzzle ID) param is optional. If specified, it can be used to identify the user and/or the puzzle in the server script. If pid is omitted, the puzzle can still be identified by examining the &ref param (see below).
Several URL params are provided by the script when the server script is invoked:
https://my.server.tld/script.php&cmd=...&pid=...&ref=...
Note that not all URL params are provided for all cmds.
&cmd= load | save | solution | timing | exception
specifies that the current event. Please keep in mind that future versions of the applets may support additional events.
&r=
is the number of rows of the puzzle
&c=
is the number of columns of the puzzle
&pid=
is the puzzle ID as specified via the pid applet param. pid may encode a database key or a user name or even several items, e.g. "user,key"
&ref=
is the URL of the page in which the applet is embedded.
&utime=
is the time the user needed to solve the puzzle (in seconds)
&etime=
is the time between the puzzle was loaded and the solution has been found (in seconds)
&solver=
name of the solver if the solver enters his name in the "send solution" dialog.
&score=
score of the game; e.g. number of moves or number of points
&msg=
is the error message for the exception
&method=
is the name of the method which caused the exception
The post body may contain huge text information which depends on cmd:
The response of the server must be:
Please note that the server must respond in any case, even if a cmd is not supported.
The timing script is invoked every time a puzzle has been solved successfully.
| cmd | timing |
|---|---|
| url params | pid, r, c, utime, etime, ref |
| post body | n/a |
| returns | "ok" | error message |
Two time values are provided to the timing script and it is up to the server script to evaluate one of them or both.
etime (elapsed time) is the time between the puzzle was loaded and the solution has been found. If a puzzle was loaded on Wed at 0:00 and the solution has been found on Thu 8:00 then etime = 115200 (=3600*32).
utime (used time) is the time the puzzler really needed to solve the puzzle. Let's explain this using an example: The puzzle was loaded on Wed at 0:00 and the solution has been found on Thu at 8:00. On Wed 1:00 the game score was saved and on Thu 7:00 the game score was loaded again. Between 7:15 and 7.30 on Thu the user was in a phone call and did not work on the solution of the puzzle. In this case utime = 6300 (=115200 -108000-900; 115200 is the elapsed time, 108000 is the time between save and load and 900 is the time the user was in the phone call).
Any time period longer than 5 minutes without activity – no keyboard input, no mouse click, no mouse movement) is considered as inactivity and does not count as "used time". (This is how the phone call in the example above is identified.)
The Save script is invoked every time the user selects the "save to server" button; the Load script is invoked every time the user selects the "load from server" button.
| cmd | save | load |
|---|---|---|
| url params | pid, ref | pid, ref |
| post body | game score | n/a |
| returns | "ok" | error msg | game state | error msg |
pid and/or ref can be used to identify the puzzle and/or the user. The game score the server must send back for load must be identical to that one sent with save. The game score is a character string of variable length.
The solution script is invoked when a puzzle was solved by an user and the solution is not identical with the solution provided by the author.
| cmd | solution |
|---|---|
| url params | pid, r, c, utime, etime, solver, score, ref |
| post body | solution |
| returns | "ok" | error msg |
The exception script is invoked when an exception (i.e. an error, a crash) occurs.
| cmd | exception |
|---|---|
| url params | pid, method, msg, ref |
| post body | diagnosis information |
| returns | "ok" | error msg |
msg is a short description of the problem; method the the routine in which the exception occured; the post body provides additional information:
In most cases the exception is caused by a faulty puzzle definition.
Copyright (c) 1999-2020 by Angela und Otto Janko.
All Rights Reserved.
Der Autor übernimmt keinerlei Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche gegen den Autor, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Autors kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind freibleibend und unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.