Sudoku Solver

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.

Screen Shot 2013-05-06 at 8.20.13 PM (2)

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.

2 thoughts on “Sudoku Solver

  1. Hey Ben. I’m a professional javascript programmer and figured I’d give you a few tips.
    1. You should try to keep the name of functions lowercase. Capitalized functions represent new object types. (i.e. function Check_Columns -> function checkColumns)
    2. In general, function names are often camelcase, meaning that they start lowercase and each new word starts capitalized. (i.e. function Check_Columns -> function checkColumns)
    3. At the end, the statement can be simplified:
    Existing:
    if(error_in_sudoku_columns = true){ (should be == not =)
            return false;
            }
        if(error_in_sudoku_columns = false){ (should be == not =)
            return true;
            }
    ———-
    Simplified:
    return error_in_sodoku_columns

    Keep up the good work. (PS I also backed your kickstarter campaign)

    • Thanks for backing me. I have only taken one programming class – about a month of that was java – so my coding skills need a lot of work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s