The webpage that we created has two main features. You can either test a solution to Sudoku puzzle that you have been working on or try a puzzle from the list of available puzzles. Several smaller features are built into the webpage such as a reset button to clear out all of your entries should you want to start over and a any incorrect entries are highlighted to indicate to the user what parts of the puzzle are wrong.

A combination of HTML,CSS,Javascript and JQuery were used to build the web page.

The method for storing Sudoku puzzles that are later generated for the user. The arrays that hold the arrays are then added to a another list. There is one list each for the easy, medium and hard puzzles and when you pick a new puzzle on is randomly selected from all the puzzles. This means that you could randomly get EasyPuzzle1 or HardPuzzle21.

var EasyPuzzle1_Sol = [];
	EasyPuzzle1_Sol[0] = [1,3,6,2,5,9,7,4,8];
	EasyPuzzle1_Sol[1] = [7,2,5,4,1,8,9,3,6];
	EasyPuzzle1_Sol[2] = [4,8,9,3,6,7,1,5,2];
	EasyPuzzle1_Sol[3] = [3,6,4,7,8,5,2,1,9];
	EasyPuzzle1_Sol[4] = [5,1,8,6,9,2,3,7,4];
	EasyPuzzle1_Sol[5] = [9,7,2,1,3,4,6,8,5];
	EasyPuzzle1_Sol[6] = [2,4,1,5,7,6,8,9,3];
	EasyPuzzle1_Sol[7] = [8,5,3,9,2,1,4,6,7];
	EasyPuzzle1_Sol[8] = [6,9,7,8,4,3,5,2,1];

var EasyPuzzle1_Clue = [];
	EasyPuzzle1_Clue[0] = [1,3,"",2,"","",7,4,""];
	EasyPuzzle1_Clue[1] = ["",2,5,"",1,"","","",""];
	EasyPuzzle1_Clue[2] = [4,8,"","",6,"","",5,""];
	EasyPuzzle1_Clue[3] = ["","","",7,8,"",2,1,""];
	EasyPuzzle1_Clue[4] = [5,"","","",9,"",3,7,""];
	EasyPuzzle1_Clue[5] = [9,"","","",3,"","","",5];
	EasyPuzzle1_Clue[6] = ["",4,"","",6,8,9,"",""];
	EasyPuzzle1_Clue[7] = ["",5,3,"","",1,4,"",""];
	EasyPuzzle1_Clue[8] = [6,"","","","","","","",""];

The comparison of the user entered solution for the puzzle to the actual solution. While helpful highlighting the errors in yellow might make the puzzle to easy and often if there is a problem in one row then there a lot more problems elsewhere.

function Solve_The_Puzzle(){
	for(var a=0;a<9;a++){
		for(var b=0;b<9;b++){
			var Box_ID = String.fromCharCode(65+a)+(b+1);
			document.getElementById(Box_ID).style.backgroundColor = "#F1F150";
			var User_Sol = document.getElementById(Box_ID).value;
			var Sudoku_Value_Sol = Puzzle_List_Sol[Difficulty][The_Puzzle][a][b];
			if(User_Sol == Sudoku_Value_Sol){
				document.getElementById(Box_ID).style.backgroundColor = "white";
				}
		};
	};
};

A Jquery Snippet. Whenever the “Test” – for “Test a Puzzle” is moused over the background color changes and the font gets bold.

$(document).ready(function(){
    $('#Test').mouseover(function(){
    	$(this).css("background-color","#484848");
    	$(this).css("font-weight","bold");
    });

Checking the Columns for errors: Both the rows and columns are checked to see if the numbers 1-9 are contained in them.

function Check_Columns(){
	Columns_Fail = [];
	error_in_sudoku_columns = false
	for(var a=0;a<9;a++){
		Column_Data = [];
		for(var d=0;d<9;d++){
			Column_Data.push(Sudoku_Values[d][a]);
			};
		for(var c=1;c<10;c++){
			if (jQuery.inArray(c,Column_Data) === -1){
				if (jQuery.inArray((a+1),Columns_Fail) === -1){
					Columns_Fail.push((a+1));
					}
				error_in_sudoku_columns = true
				};
			};
		};
	if(error_in_sudoku_columns = true){
		return false;
		}
	if(error_in_sudoku_columns = false){
		return true;
		}
	};

HTML Code snippets:

The Sudoku boxes are set up as a series of 81 input boxes arranged in rows of 9 and columns and 9.

 <div class="Row" id="Row1">
		<input type="text" class="Box" id="A1" maxlength="1">
		<input type="text" class="Box" id="B1" maxlength="1">
		<input type="text" class="Left" id="C1" maxlength="1">

Each input box is formatted and labeled individually in the pattern of 1A, 1B, 1C, etc. Each input box also has a maximum character amount of 1 that way the user cannot put more than number per box. Each row of boxes in put in a separate div in order to make the code more organized overall. The CSS behind the pages is a little more complicated. I had to find a way to alter the sizes of the input boxes as well as make them look good.

background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #999;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

These settings give each box a very light gradient and an individual shadow behind each box. Each box is 100 by 100 pixels, with the font Tahoma and a bold weight. At the top of the webpage, there are two links, each going to a separate webpage. There are only 2 pages, one for the Sudoku Generator and one for the Sudoku Checker, so respectively each link links to one of them.

Future functions:

One of the things that we would like to see built into the webpage in the future would be a third page that would allow users to enter in puzzles of their own and add to the database. While a page that allowed the user to enter the solution and keys to puzzle is within our knowledge, doing so in a way that would not lose all of the information whenever the page closed would require additional knowledge and possible our own server or google app engines might work for that.