Adding a Sudoku puzzle to your personal website
You would like to add your own Sudoku puzzle embeded to a page of your personal web site, offering the oppertunity to your visitors to play a Sudoku game online, with a new grid automatically generated at each time the browser load the webpage. And you don't want write complex code and have it for free use.
You can find here a solution based on a "HTML snippet" that you have to insert into the HTML code of a page of your website and four files that you have to upload to your personal host or webspace. The two first are external JavaScript code files, the one to initiate the game and the second to handle the game interface. A third file contains the CSS code for the game presentation. And finally, the fourth file contains the PHP code for generating Sudoku grid.
If you want to see how it works ... "See here an example ... "Things you'll need:
- a personal host or webspace with PHP enabled server (MySQL is not required)
- a standard FTP program for uploading the four files
- eventually, a text editor to integrate the HTML snippet code
Files you have to download:
( Download this ZIP package containing five files )
- the HTML snippet that you have to insert into the HTML source code of your page, ".txt" file
- the two JavaScript modules, ".js" files
- the Cascaded Style Sheet file, ".css" file
- the PHP module, ".php" file
Tutorial:
First you have to upload the four files (the two ".js" files, the ".css" file and the ".php" file) in the same folder of the ".html" file corresponding to the involved web page wherein you are going to insert this Soduku puzzle.
Then, insert the HTML snippet into the HTML source code of your page, as is described below :
That's' all.
In addition, you can specify an another location (a different folder or even an complete URL) for each of four files. You can do that by rewriting the value of the "src" attributes directly on HTML code snippet.
But, especially for the PHP module, you have to add some further lines of code on the HTML snippet in order to specify the adress offset for this PHP file using the JavaScript variable "adressedossier_sudoku" (don't forget trailing slash, if necessary). These lines shall be inserted before the first "<script language="JavaScript" ... >" tag of the snippet code.
See below an exemple of such additional lines :
Bonus:
Somes other style files are available that permit to show the sudoku game with different sizes. You have to upload the chosen ".css" file in place of the file "SDK_SudokuStyle-en_M.css", and you have to replace le value of the "src" attribut of the tag "<link .../> accordingly to this choice.
At present time, three sizes are available: M, S and XS.
( Download this ZIP package containing style files for others sizes )